GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド | ゆっくりと…
GitHub がオープンソースの場として魅力的な理由は、Git という優れた分散・協調型リビジョン管理システムのリポジトリー・ザーバーとして誰でも利用できるということはもちろん、README などのドキュメント生成機能やコメンティング機能、問題のトラッキング機能など、Git を補助し、オープンな分散・協調開発を支えるサブシステムが充実している点が挙げられるでしょう。無料でもかなりのことができるのに、ビジネスとしてもちゃんと成立している理由はこんなところにあるように思います。 ただ、同種サービスの Google Code や Bitbucket と決定的に異なり、GitHub の最大の魅力となっているのは、GitHub Pages という1種のホスティング・サービスではないかと思います。成果物をただずらずらと味気ないページに並べるのではなく、趣向を凝らした紹介ページを自由に作り、プロジェクト
defer/asyncチェックツールを作りブラウザ対応状況を確認してみた | ゆっくりと…
ちょっと前に 「scriptのdefer/asyncを理解し、ページの高速化方法を探る」 というエントリーを書きましたが、はてなのブックマーカー edvakf さんから 「Opera は defer も async も対応してないはず」 というご指摘を頂きました （edvakf さん、ありがとうございます）。 こちら と こちら （2012年11月16日：Google のドキュメントが削除されました） の表を 「対応状況」 としてそのまま流用してしまったのが失敗でした。英語をよく読めば、You can use the defer/async attribute on the following elements と書いてあります。つまり 属性は使えるけど、動作は別 とも読めるわけで…。 ということで、「defer/async チェッカー （仮）」 を作ってリベンジすることにしました。 1.
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論 | ゆっくりと…
2012年2月、Modernizr 2.5 の カスタム・ビルダー から Respond.js が外されました。理由は、HTML5 Boilerplate （以下 H5BP） コミュニティでの決定です。Respond.js は、IE8 以下などのメディアクエリ未対応なブラウザにもその代替え機能を提供するスクリプトで、レスポンシブ Web デザイン を支えるスクリプトとして、H5BP に長らく （8ヶ月） 採用されてきた経緯があります。 ではなぜ、Respond.js は外されたのでしょう？ 今回は、その決定を下した長～い議論 Issue #816: Revert mobile-first media queries and remove respond.js から、ベスト・プラクティスの要点と、Paul Irish の考える H5BP の理想像を読み解いてみたいと思います。 ヘタクソで読み
WordPressよりjekyllで本格的ブログを作りたくなる、かもしれないまとめ | ゆっくりと…
ここ最近、jekyll に関する記事を目にする事が多くなりました。 以前から WordPress でオリジナルなブログを作ってみたいと思いながらも、なかなか重い腰が上がらなかった私が、なんとなく jekyll でブログを作り始めてみたら、以外にオモシロかった、という話をまとめてみたいと思います。 本来生まれも育ちも違う、WordPress と jekyll を比べる こと自体はナンセンスなので、jekyll でどこまでできるかが本記事のメイン・テーマです。 大抵は 「ブログなら、最低このぐらいの機能が欲しいよネ」 というのがあると思います。例えば、私も使っている Octopress では、カテゴリとタグを使い分けることが出来ません。またカテゴリを階層化したい人もいるでしょう。「続きを読む」的な機能だって、欲しいですよネ。 一方海外では、「WordPress から jekyll に乗り換えま
ページ読み込み時間を短縮するJavaScriptローダー：LABjs | ゆっくりと…
ブラウザは通常 Web サイトを訪れたとき、CSS や画像などのページ要素を幾つか並列で読み込みますが、JavaScript ファイルを読み込んでいる最中は、（JavaScriptやスタイルシート以外の） 他要素の読み込みをブロックします。それゆえ Yahoo! の 「Best Practices for Speeding Up Your Web Site」 では、それ以上他の要素を読み込む必要のないページ下端に JavaScript を置くことを推奨しているわけです。 これに対し 「ハイパフォーマンスWebサイト―高速サイトを実現する14のルール」 （今は35のルールですが） の著者 Steve Souders が Non-blocking JavaScript、つまり他のページ要素をブロックしないファイルの読み方を提唱しています。LABjs は氏の監修の下で作成されたオープンソースの
3rdパーティー製スクリプトによるフロントエンドSPOFを検出するChrome拡張 | ゆっくりと…
6月22日未明、Twitter のサーバーがダウン し、全世界でサービスが停止しました。一部マニアの方々は、動いていた ケータイ用サーバー から この状況を楽しんでいた (?) ようですが、OMG..twitter was down….closest thing to living without oxygen for most of us…. （なんてこった、オレたちに酸素なしで生きろっていうのか） という声に代表されるように、世界各地で悲鳴が上がったようです。 さて純正の Twitter ウィジェット を貼っているあなたのサイトは、この障害でページが真っ白になったり途中で引っかかったりせず、無事にコンテンツを提供できたでしょうか？ ということで、前回 と同ネタですが、こういった フロントエンドの単一障害点 （SPOF） をより簡単にチェックできる Chrome エクステンション SPO
HTML5 Boilerplate, Initializrをこれから使う人が押さえるべき5つの原則 | ゆっくりと…
boilerplate とは、「再利用を意図した標準的な文例集」 だそうです。 Paul Irish が中心となり構築されてきた HTML5 Boilerplate は、その名の通り HTML5 でサイトを構築するためのテンプレート、さらにはフレームワークをも含む内容となっており、その特徴は次のように語られています。 HTML5 Boilerplate は、HTML5 を扱う上で必要な数多くの機能強化を他のベスト・プラクティスの数々と組み合わせることで、最小限の先行投資でプロジェクトの磐石な基盤を提供します。 2011年02月08日 HTML5 Boilerplate を使用して Web 開発を容易に始める | IBM developerWorks より。 HTML5 Boilerplateをベースにすることで最初からベストプラクティスが適用されたサイトやページを構築できるという特徴がある
jQueryのDeferredとPromiseで応答性の良いアプリをー実践編 | ゆっくりと…
前回 は、「Creating Responsive Applications Using jQuery Deferred and Promises」 の記事と jQuery のリファレンスを翻訳し、Deferred の解説をお届けしました。が、今一歩、Deferred オブジェクトの うれしさ をお伝えできていなかったように思います。今回はその反省をふまえ、単なる翻訳ではなく、元記事の文脈に沿って、Deferred オブジェクトをどのように使うと／何がうれしくて／どうしあわせになるのか、私が学習して得た事をお伝えしたいと思います。 今回は、4本の jsfiddle を記事に埋め込んでいます。jsfiddle 上で自由に編集してテストしてもらえばうれしいのですが、4本すべて実行すると1.4MBものリソースを読み込む事になり、ブラウザに優しくありません。すぐに タブや をクリックせずに、 タブ
jQueryのDeferredとPromiseで応答性の良いアプリをー基本編 | ゆっくりと…
jQuery 1.6 が既にリリース されていますが、1.5 で追加された Deferred を勉強する意味で、Script Junkie から Creating Responsive Applications Using jQuery Deferred and Promises を翻訳してみましたので、共有したいと思います。著者の Julian Aubourg は、jQuery のコアチーム・メンバーとして、Ajax モジュールの書き換えと Deferred 導入を指揮した方だそうです。 記事の途中、各メソッドの説明部分は、jQuery ドキュメントの翻訳に差し替えていますので、リファレンスとして使ってもらうのも良いかと思います。 Deferred や Promise は、概念や用語が少々分かりにくいところがあるかと思いますので、読んでくださった方の、少しでも理解の助けになれば幸いです
"遅いブログパーツを高速表示する方法"を検証する | ゆっくりと…
かん吉さんの記事 「遅いブログパーツを高速表示する方法」、すばらしいですネ。アフィリエイトをやっている人にとっては、とても興味を引く記事だと思います。ですが、紹介されているスクリプトは、中級以上の方が対象 とあるように、私のような初級者が知っておくべきことがあるはずです。 そこでまず私自身が中級者以上となるために、過去3回に渡り自分なりにブラウザの動作を勉強してきました。 ブラウザ動作の理解－レンダリングツリーの構築と描画のタイミング ブラウザ動作の理解－リフローとリペイント及びその最適化 ブラウザ動作の理解－レンダリングの負荷を測る そこから見えてきたのが、レンダリング・ツリー の役割りです。ブラウザの本質は、ドキュメントとその見た目 （ビュー） の管理です。前者は、文書自体やその構成の管理に責任を負い、後者は、描画について責任を負う。そして、両者のコラボレーションによりユーザーに情報を
CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議 | ゆっくりと…
2011年2月21日 追記 $script も新規参戦してきました。高々 643 バイトで、非同期読み込みや依存性の制御などができるそうです。いずれ紹介したいと思います。← 「新参の超軽量JavaScript非同期ローダー3種を徹底比較」で紹介しました！ これらのローダーのうち、LABjs の作者が 「On Script Loaders」 で HeadJS と ControlJS について意見をしていて、面白そうです。そのうち日本語訳や各ローダーの比較を行ってみたいと思います。 ローディング・スクリプトをめぐる議論 さてさて、本エントリーの本題は前述のローダーではありません。「Prefer asynchronous resources」 や Google Analytics のスニペット に示されているような、ローディング・スクリプトの変遷をまとめてみます。 これらのスクリプトのごく初期は
データ可視化のためのグラフ描画JavaScriptライブラリ20選 | ゆっくりと…
SixRevisionsでオンラインでグラフを描画する場合に活躍しそうなJavaScriptライブラリの特集がありましたので、紹介します。個人サイトではあまり役に立たないかもしれませんが、観ているだけで楽しくなります。元記事に敬意を表し、なるべく趣旨が異ならずかつ変な日本語にならないよう心がけたつもりですが、訳に間違えがありましたら容赦願います。 2010年1月17日 by Jacob Gube 退屈な数値データを美麗かつインタラクティブに解り易く可視化するためのJavaScriptライブラリは数多くあります。通常はHTMLテーブルで表現するデータを、JavaScriptを使って可視化し美しく見せる事ができればあなたのデータはアクセシビリティーの優れたものとなるでしょう。私は2008年にデータのグラフ化＆チャート化のためのJavaScriptを書き上げましたが、今回再び単なるデータに生命を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
