Webサービスのユーザープロフィール画面などに使える、ダミー用のユーザーアイコン一式がJsonファイル形式で配布されています。サイト見ると分かるんですが、80年代〜90年代のアメリカ映画、ドラマの登場人物ばかりで、かなりこう、趣味的に偏った内容でダミーアイコン一式を揃える事ができます。グーニーズやスターウォーズ、ビバリーヒルズ青春白書、ロボコップなど、おっさん世代が懐かしむキャラクターばかりです。センスの良いおっさんプログラマーの方にオヌヌメです。
ページをスクロールしてボックス要素が見え始める頃に、フェードインしながらロードされるアニメーションを実装できるJS。ページをスクロールすると見え始めたボックス要素から順次表示されていくのが分かります。これ系のスクリプトの多くは初回ロード時にしか対応していないんだけど、このScrollRevealの場合はページを上にスクロールして戻った際にも同様のエフェクトを行ってくれます。実装も簡単そうだし、ロードアニメーションとしては使いやすそうです。
Flexboxを使った、ボックス内においてボックス要素を縦軸・横軸ともにセンタリング（中央揃え）したい時のシンプルなコードサンプルが紹介されてます。Flexboxがなかった頃のように、heightの半分の数値をアレコレして・・・という面倒な記述しなくても良くなったのは楽ですな。まぁそういう意味じゃTipsでも何でもなく、普通の記述ではあるんだけど。justify-content:centerで水平方向に、align-items:centerで垂直方向にセンタリングすればイイだけなので超ラクチンです。
The Simplest Way To Center Elements Vertically And Horizontally
新型Apple TVのモックアップが配布されています。ダウンロードすると.ai、.psd両方の素材が同梱されているので、PhotoshopでもIllustratorでも扱えます。様々な角度のTVの画像と、Apple TV本体やRemoteの筐体画像がベクター画像として用意されているので、Apple TV対応アプリのWebサイト作る時なんかに使えそうです。
レスポンシブレイアウトしたサイトの挙動を、様々な端末でまとめて確認できる便利なサイト。画面最上部にある「Enter your site」に確認したいサイトURLを入力すれば、iPhoneやAndroid、iPadなどのタブレット端末の解像度で一気にレンダーしてくれます。縦持ち時だけでなく横持ちの際にどう表示されるかも確認できるのが便利。このサイト使って一気に確認すれば、物理的に端末持ち替えて確認するよりかなり手間が省けそうです。
iOS 9のUIテンプレート。よくあるPSDでの配布ですが、このテンプレートはアートボード形式で保存されているので、1つのPSD内に複数の画面のUIがまとめられています。UIデザインする時にPhotoshopのアートボードを使う人には使いやすいと思います。アートボード確かに便利ではあるんだけど、画面数増えてくるとPhotoshopの動きが鈍くなるのがアレなんですよねぇ・・・。
ゲームをしながらFlexboxの挙動を学べる教育系コンテンツ。ルールは簡単で、カエルをハスの葉の上にピッタリ乗るようにFlexboxのプロパティ記述をするというもの。画面左、#pondと指定されているものがいわゆるFlexboxコンテナーです。んでハスの葉は固定で、カエルがFlexboxアイテムという感じ。最初はjustify-content、次にalign-itemsと来て、さらにflex-directionと続きます。全部で24問あり、一通りプレイし終えた頃にはFlexboxが使えるようになってるという内容。TableレイアウトからCSSによるFloatレイアウトに移行した時もそうだったけど、Flexboxでのレイアウトって経験者ほど頭の切り替えが難しかったりするので、こういうコンテンツは楽しく学べて良いですな。
