Vol.240

Cascading Cache Invalidation by Philip Walton Jump to heading #

Code Splittingにおけるキャッシュの最適化 Jump to heading #

JavaScriptのキャッシュを効果的に行う方法について。Code Splittingを用いて分割されたJava Scriptをキャッシュさせている場合において、依存ツリーのリーフノードに対して修正を行うと、多くのファイルに影響が及び、効果的なキャッシュが期待できないという問題が発生する。この記事ではImport Maps、Service Worker、Custom script-based loadersという3種類のアプローチを紹介し、どのようにこの問題に対処できるのか解説する。

Building a Scrapbook Layout with CSS Grid by Michelle Barker Jump to heading #

スクラップブックのデザインをCSS Gridでスタイリングする Jump to heading #

Michelle氏はスクラップブックが好きで、CSS Gridで実現できないかを考えた。複数のGridを組み合わせてリズミカルなパターンを生み出すComputed Gridのテクニックを活用し、複雑なレイアウトを実装する。またレスポンシブ対応も特別な努力は必要がなかった点はこの実装のメリットとして挙げられる。

Text Scanning Patterns: Eyetracking Evidence by Kara Pernice Jump to heading #

アイトラッキングで明らかになったユーザー4つの走査パターン Jump to heading #

Kara氏はWebを閲覧するユーザーが、どのような順序でコンテンツを見つけていくか、アイトラッキングを行い調査を行い4種類に分類した。この記事では、その4つのパターンとそれぞれがどのように行なわれていくかについて詳しく解説していく。

• Fパターン
• 反転パターン
• レイヤーケーキパターン
• コミットメントパターン

How to read a Web Page Test waterfall chart by Matt Hobbs: Jump to heading #

Web Page Testでの解析結果の見方を詳しく解説する。より詳しく知りたい方はUsing WebPageTestを読むのがおすすめ。

Introducing Sass Modules by Miriam Suzanne Jump to heading #

Sassに追加された新たなモジュールシステムについて解説する。既存の @imports やCSS Importsとの違いを比べながら、その使い方、挙動の違いなどを紹介していく。

In Brief Jump to heading #

• Framer Guide to React. by Koen Bok: デザイナのためのFramer XとReact入門用e-book、jQueryの実装例からはじまり、非常に丁寧に解説してくれるので分かりやすい
• Designing a focus style by Zell: ボタンやリンクへのフォーカスエフェクトのスタイリングをする方法を紹介する
• Clipping, Clipping, and More Clipping! by Mikael Ainalem: CSSのclip-pathを利用したスタイリングの仕組みと、応用方法、実際に使えるアイディアを紹介していく
• Avoid 100vh On Mobile Web by David: CSSの便利な単位であるビューポートをモバイルで使用する際に起こる問題について指摘し、その解決案の解説
• Thinking Critically About Code Quality by James Milner: コードに求められる性質は状況によって異なり、例えば、すべてのケースでモジュール化しDRYにすることが常に正しいとは限らないといえる、自分が求めているクオリティが今の状況にも本当に適用されるべきなのか、常に問いかけていくことが大切だと指摘する