2011年アツかったデベロッパー向けWeb関連リソースがまとめられた記事。まとめ方が広いんですが、名卿はCSSやHTMLフレームワーク、CSSやテクスチャのジェネレーター、Javascript関連リソースやフレームワーク、その他ツール類などが含まれる内容。主にフレームワーク類が多いんだけど、こういうの見てるとWebって複合的な技術やリソースの産物なんだなぁとか、今さらながらに思いました。リソースの把握とチョイスも実際大事ですしね。
Our 50 Favorite Web Developers Resources and Tools from 2011
CSS3とJSで作られたスライドショー。キーボードの左右のキーで進んだり戻ったりできます。Webベースのプレゼン用フレームワークとして使うとなかなかかっこイイんじゃないでしょうか。ダウンロードはGitHubから。JSライブラリにはhighlight.jsが使われているようです。こんなんでプレゼンしたらかっけースね。
CSS3とjQueryを使ったWebタイポグラフィーのチュートリアル。デモページはこちら。作例は全部で7つあって、デモページ内から他のデモに遷移できます。どれもなかなか気合いが入ってて美しく、マウスオーバーで形が変わったりします。各デモページを見てて思うんだけど、欧文圏ではすっかりWebフォントが定着してんだなーという印象。こういう作例も経験しておかなきゃなーとしみじみ思いました。
CSS3やjQueryを使ったUIデザインについての考察と、そのチュートリアル。なかなか珍しい組み合わせですね。普通ならCSS3 & HTML5と来る事が多いけど。まぁそれはいいとして、CSS3とJSによってWebでの表現は色々とアレだしナニな感じになってるので、新しいUIというかユーザーへの見せ方についての試みというか、そんなアレです。一昔前に比べるとWebサイトって賑やかになりましたね。「あー久しぶりにテーブルレイアウトしてぇ」とか思いますよね。思いませんかそうですか。
レスポンシブレイアウトをする際に役立つツールをまとめた記事。最近よく見ますね、これガラみの記事。内容としてはプロトタイピングに役立つスケッチ用の型紙、グリッドシステム（CSSフレームワーク）、レスポンシブイメージのためのJS、レスポンシブテキストのためのJS、Media queriesのテンプレート、テスト用に使うブラウザウィンドウのリサイザー、複数のサイズ違いウィンドウでサイトを一括表示、といった内容。最後にはレスポンシブレイアウト対応サイトの作例紹介なんかもあります。これからこの手のサイト制作をしようって時にナイスな記事。
HTMLだけでなく、イメージやスクリプト類なども含めて、10K bytes以内でどれだけクールなウェブサイトを作れるか、というコンテスト。タイミングがタイミングなだけに、HTML5やJSを使ったモダンな作品が多いです。JSやCSSで使用するライブラリにはいくつか決められたリストがあり、またクロスブラウザ対応なども求められます。興味深いのはレスポンシブレイアウトに対応する事も必須となっている点。「Inspire the web with just 10K」というキャッチの通り、10Kでどこまでやれるかを競うというものです。賞金もあるようですYO。
サイト上のテキストの文字詰めを細かく指定できるJS。Webにおけるテキストを使ったタイポグラフィーって最近盛んですよね。特にWeb Fontガラみは、その特性上英語圏において様々な作例や実験的な試みが見られます。このKerning.jsは文字詰めと文字単位での装飾に特化したJSで、導入後は簡素な指定で文字詰めの指定を行う事ができます。このサイトそのものにKerning.jsが適用されていて、Kerning.jsのロゴ上にマウスオーバーすると、どこがどう文字詰め指定されているのか分かります。またサイト右上にある「Turn Demo off」のリンククリックで、一時的に同JSの指定を切る事もできます。CSSのletter-spacingだけでは満足に文字詰めできない場合に使えそうなナイスなJS。
立体的なトランジションのスライドショー。デモページはこちらです。CSS3の3D transformを使っているらしく、モダンブラウザ上ではグリグリ動きます。この動きの軽さはイイですねぇ。スライスのされ方や動きはいくつかのパターンがあり、自動再生の機能もあり、個別の画像のキャプション表示機能もあります。ちなみに使っているJSライブラリはjQueryのようです。トップページでのスライドJSって最近じゃよく見る手法ですが、このグリグリ感はなかなかアツいです。
