CSS3 @font-face Design Guide
Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn’t, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr. Common Mista
Convert a Menu to a Dropdown for Small Screens | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you’re on a small screen (iPhone shown here) and click the dropdown, you get an interface to sele
JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS
ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi
CSS Beautifier (by Sencha)
Type any unformatted CSS: menu{color:red} navigation{background-color:#333} Beautified CSS: Formatting rules: Comments are preserved Only one blank line between two rulesets Open curly brace is at the end of line, preceded by a space Closed curly brace is at its own line Each declaration inside the ruleset is indented with 4 spaces There is no empty line between declarations inside a ruleset Betwe
「JavaScriptと性能についての本当の話」をしよう。ダグラス・クロックフォード氏
JSONの発見者でJavScript界の重鎮であるYahoo!のダグラス・クロックフォード（Douglas Crockford）氏。米オライリーが主催するイベント「Velocity 2011」で、セッション「JavaScript & Metaperformance」を行いました。 いまWebブラウザ間でJavaScriptエンジンの性能競争が行われていますが、その影響とこの先の展望について語っています。JavaScriptプログラマなら必見の内容を、公開されたビデオを基に紹介しましょう。 JavaScript & Metaperformance これから、JavaScriptと性能についての本当の話をしよう。 JavaScriptはみなさんご存じかな？ いまや世界で最もポピュラーになったプログラミング言語だ。 JavaScriptは、Javaからシンタックスを、Schemeからファーストク
ie9.jsを使うと出来ること、出来なくなること。 - Toro_Unit
最近ie9.jsを活用することが少々あるので、 いまさらながらまとめです。 配布場所 ie7-js http://code.google.com/p/ie7-js/で配布されています。 デモはhttp://ie7-js.googlecode.com/svn/test/index.htmlで見れます。 使い方 head内に [html] <!–[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]–> [/html] と貼り付けるだけです。フッターに貼ると誤作動起こす場合がたまに合ったような気がします。 できるようになること E > F 子セレクタ。直下の子要素にのみ適応するやつ。 E + F 隣接兄弟セレクタ。Eのすぐ下隣に居る弟要素
Prevent White Flash While Iframe Loads | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. If you Google around about this problem (at the time of this writing), you’ll find some incomplete answers and some other snippets advocating this bad practice: <!-- NO! Bad! --> <iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe> The reason this is bad
アニメーションgifならぬアニメーションjpg/png - rettuce.blog
今日（2011/5/11）のgoogleロゴはダンスのアニメーションになってて、 それがとてもキレイでかっこいいアニメーションだったので、 自分もアニメーション用のjsをちょこっと書いてみた。 「Google」の6文字が踊る――マーサ・グレアムさん生誕記念のホリデーロゴ この人がロゴのアニメーション作ってた人。 ほんと細部までキレイなアニメーション。このアニメーターのモーション技術すっげぇ。。 んで、googleロゴの中身見てみると、gifアニメかと思いきやpngのポジションをずらす方法を取ってて これがネタばらしの一枚絵。 そういえば、一昨日公開された、thaのFRAMED*のページでも使われてたなぁ、これ。と思い、 普通にjs書ける人には一瞬でできるだろうから関係ないけど、 この1枚絵さえ作れれば、誰でもアニメーションgifならぬ、 アニメーションjpgとか、アニメーションpngつくれ
pixivでブックマークするTomblooパッチ | 圧縮電子精神音楽浮遊構造体
2011年3月5日土曜日 pixivでブックマークするTomblooパッチ 前回に続き Firefox アドオン Tombloo のパッチです。 pixiv イラストページで「ブックマークに追加」を Tombloo から実行できるようにします。 あと、ユーザーの「お気に入り追加」も同時に行えます。 前回同様パッチになっています。 前の POST の「pixivでreblogを簡単にするTomblooパッチ」をあてておくとより便利です。 パッチ:tombloo.model.pixiv.bookmark.js インストール:上記リンクを右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール。 できない場合は {ProfD}/tombloo/script ディレクトリ (設定依存) に 「tombloo.service.extractors.pixi
少しのコードで実装可能な20のjQuery小技集
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ 追記：この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です！詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基本的な使い方まずはjQuery 本家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src
$(DHTMLcoders).read(this) || throw your.job - 書評 - jQueryクックブック : 404 Blog Not Found
2010年08月19日01:00 カテゴリ書評/画評/品評Lightweight Languages $(DHTMLcoders).read(this) || throw your.job - 書評 - jQueryクックブック オライリー矢野様より献本御礼。 jQueryクックブック jQuery Community Experts / 株式会社クイープ訳 [原著:jQuery Cookbook] これでなくなった。 jQueryを使わない理由が。 DHTMLを利用する全ての人、必携。 特にHTMLやCSSを書いても、JavaScriptはそれほど書かない人。これであなたにも書けるようになります。 本書「jQueryクックブック」は、今や最重要のJavaScript Libraryといっても過言ではないjQueryの手引書。 目次 まえがき - John Resig はじめに jQuer
衣
●問題 麻雀の手牌が入力として与えられたとき、「待ち」を出力するプログラムを書いてください。 ・字牌なし・萬子のみの想定、つまり、いわゆる「チンイツ」限定で結構です（プログラミングの本質的にはこの限定でまったく問題ないため） ・1～9の数字13個からなる文字列を受け取り、できている順子・刻子・アタマを()、待ちの部分を[]でくくって出力してください ・面前かつ槓子は存在しない前提でOKです ・()[]の出力順は自由ですが、順序だけが違うものは同一視してください（例：111222を刻子2つで構成するとき、(111)(222)が(222)(111)に入れ替わるだけのものは同一解答とします） ・多面待ちのときも含めすべての待ちを出力してください ・待ちがないときは何も出力しないでください 引用元
はてなダイアリーに任意のiframeを貼り付ける - monthly gimite
2011/3/2追記: 2011/3/2以前にこのコンバータで変換されたガジェットが正しく表示されない不具合が起きていました。現在は修正済みです。→詳細 最近はiframeを使ったブログパーツがいろいろありますが、はてなダイアリーではiframeが使えません。 Google Gadgetを使えば任意のiframeを埋め込めるのですが、めんどくさいので、iframeを自動でGoogle Gadgetに変換するものを作ってみました。 iframe → Google Gadgetコンバータ ためしにGoogleドキュメントのプレゼンテーションを貼り付けてみました。 ニコニコ動画のサムネイルもこれを使って埋め込めますが、ニコニコ動画のGoogle Gadgetもあります。
SBM Common API を作りました | Creazy!
たくさんあるSBM（ソーシャルブックマーク）サービスのユーザー数を簡単にブログに表示したり、各SBMのユーザー数をJSON(P)形式でまとめて取得できるAPIを作ってみました。 はてなブックマーク、del.icio.us、livedoorブックマーク、Yahoo!ブックマーク、Buzzurl、FC2ブックマーク、@niftyクリップ、POOKMARK Airlines、の８つのサービスに対応しています。 これを作るキッカケは、すで書いた事があります。 冒頭に書いた各SBMのバラバラなAPIを統一するサービス（リダイレクターというかプロキシというか）ができないかなぁと思ったわけで。 via: 各ソーシャルブックマークサービス（SBM）のブックマーク数画像表示APIを調べた ::: creazy photograph 各SBMごとに呼び出しのインターフェイスが統一されていなかったり、RSSやJ
目次の自動生成を行う jQuery.exTOC.js - Cyokodog::Diary
exTOC は、ページ内の Hn 要素(h1 - h6)に対し、ページ内リンク付きの目次コンテンツを自動生成する jQuery プラグインです。 以下のような特徴があります。 目次 / Hn 要素に対する付番機能 ページ内リンクのスムーススクロール 高いカスタマイズ性 以下は exFixed Plugin / Easing Plugin を併用したデモです。 Demo 導入方法 jquery.js extoc_1_0.js 上記 js ファイルをダウンロードしヘッダー定義内で下記順で jquery.js / extoc.js を読み込みます。 <script type="text/javascript" src="path/jquery.js"></script> <script type="text/javascript" src="path/extoc.js"></script> 目次
自分的HTMLテンプレートの組み方 | Takazudo Clipping*
自分的HTMLテンプレートの組み方と例です。 まぁ、やるたびにちょこちょこ変えてるんですけど、2009年7月版ってことでざっくり説明。 空テンプレ モジュール一覧 サンプル ダウンロード用 エリアとモジュール 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基本とする。 モジュールの開始要素には、「mod_moduleName」のようにclass（もしくはid）をつける。 モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1～h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。（グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。） モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を
jQueryを少し便利にする5つの関数 - ?D of K
jQueryはよく使うのだけど、ちょっとだけ不便なときがあったので、それに対応する関数を書いてみた。 クラスを生成する var Class = $.klass({ init: function (a) { this.a = a; }, view: function () { alert(this.a) } }); initがコンストラクタとして機能します。 $.klass=function(a){var b=function(){this.init&&this.init.apply(this,arguments)};b.prototype=a;return b}; CSSルールの追加削除 var index = $.css.add("body{background:red;}"); alert("stop"); $.css.remove(index); あると便利なときがあるので一応。 $
JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏
GoogleがWeb全体のスピードアップにいよいよ本格的に着手, 一社だけではできないと強調 からリンクのあった、 http://code.google.com/intl/ja/speed/articles/optimizing-javascript.html が日本語かと思ったら日本語じゃなかった・・・・。 いやー、意外とというか文字列については、全然知らんかった。 Closureって便利だし、「おぉ〜俺って使ってるジャン」みたいな気になれるからついつい使っちゃうんだけど、高コストなのね・・・・。反省。 ということで、超適当翻訳。どっかの誰かが書いてるかも。 前おき 著者: Google Chromeのエンジニア Gregory Baker, Software Engineer on GMail & Erik Arvidsson 推奨される経験：JavaScriptの実践的な知識 クライ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AutoPagerizeのページ数を常に表示させるGreaseMonkey (Kanasansoft Web Lab.)
Site Under Maintenance
