Frontend Weekly Vol.90

Headlines

Loading Polyfills Only When Needed by Philip Walton

Polyfillの読み込み戦略

実装がマチマチな様々なブラウザのJavaScript。その差を埋めるためのPolyfillは欠かす事ができないツール。そのPolyfillの読み込みを、いかに無駄なく行えるのか。Philip Walton氏による実験とその結果。

Making Motion Meaningful by Google Design

動きに意味を持たせるモーション・デザイン

Material Designを見てもわかるように、Googleはモーション・デザイン、マイクロモーメントと呼ばれる領域にも素晴らしい示唆を与えてくれている。この記事ではそのモーションにどう意味を持たせるかについて紹介している。

A Nerd’s Guide to Color on the Web by CSS-Tricks

色について詳しくなるために

Webで利用できる色に関する様々なことがらについて、事細かに解説している良記事。例示も多く、解説も丁寧なので非常に参考になる。とても長い記事なので、色で困った際にいつでも参照できるようにしておくことをオススメする。

CSS Grid meets the real world - a login form

CSS Gridの実例: ログイン・フォーム

ついにCSSでハックではない、本物のグリッドを実践する仕様がブラウザにも少しずつながら実装され始めてきている。この記事ではそのCSS Gridの実践としてログイン・フォームを作る。

Generators and Channels in JavaScript by JavaScript Inside

JavaScriptにおけるジェネレータとチャネル

The Thumb Zone: Designing For Mobile Users by Smashing Magazine

指が届く範囲を考慮したモバイル・デザイン

指で操作するモバイル・デバイスにおいて、その指が届く範囲、動く方向性を考えてデザインすることは、デバイスが大きくなって来た現在において、重要なポイントの1つ。Webであろうとアプリであろうと参考になる。

nth-child vs nth-of-type

nth-childとnth-of-typeの違い、わかりますか?

nth-childとnth-of-typeは一見すると同じ役割をもったセレクタに思えるが、実はそうでもない。あまり使いどころがないかも、と思うかも知れないが、意外なところで役に立ってくれるので、両者の違いについてきちんと学んでおこう。

Slides

AMP: Does it really make your site faster?

AMPは本当にサイトを早くしてくれるのか? 実データを使った比較は非常に説得力がある。

Style Guides: Best Practices and Workflow for Web Developers by tset

スタイルガイドを作るためのベスト・プラクティス達とワークフローについて。

Next Gen Web: Scaling Progressive Web Apps Abhinav Rastogi

Progresive Web Appsの実装におけるパイオニアであるFlipkart.comにおける実践ケーススタディ。

Announcement

Slack for Frontend Weekly (PR)

Frontend Weeklyの『実験的』Slackコミュニティに興味がある方は、こちらから招待をリクエストしてください。 週次で50人くらいずつ招待をして行くつもりです。

In Brief