Vol.224
HTML is the Web by Pete Lambert Jump to heading
HTMLこそがWebである Jump to heading
昨今のフロントエンド開発は、ReactなどのJavaScriptフレームワークについてのトピックが多くなってきているが、Pete氏は、Webサイトにおいて最も重要なのはHTMLであり、フレームワークが何かという話は重要ではないと話す。 Webページはそもそも文書であり、それをないがしろにしている時流について指摘をしながら、もしあなたが、自分をフロントエンドエンジニアと呼んでいるのであれば、その基本を学び、使用し、責任を持ってWebを構築していって欲しいと訴える。
The CSS Mindset by Max Böck Jump to heading
https://mxb.dev/blog/the-css-mindset/
CSSの考え方 Jump to heading
CSSは一般的なプログラミング言語と異なり、実行される環境が様々であるため、デフォルトで柔軟であることが求められる。この記事では、メンテナブルで柔軟なCSSを実装するために覚えておきたいアイディアを紹介していき、CSSの個々のの技術の詳細というよりも、言語の背後に存在する一般的な考え方について解説していく。
- すべては長方形
- カスケードは友達
- 可能な限り少なく
- ショートハンドを避ける
- マジックナンバーを避ける
- 意図しない挙動の問題はコンテキストにある
- コンテンツは変わるものとして考える
- パターンを見つけ再利用する
- 一貫した名前を使う
Sustainable Web Manifesto by Wholegrain Digital Jump to heading
持続可能なWebのマニフェスト Jump to heading
私達は、毎日当たり前のようにWebを使っているがWebを支えるデータセンター、ネットワーク、そしてエンドユーザーデバイスにおいても、大量の電力を消費する。このWebが持続可能なWebであるために私達がすべきことは何だろうか。このマニフェストでは環境に優しいウェブを作成するというWeb開発者としてのコミットメントを宣言することができる。
How and Why To Ask Better Questions by Scott Berkun Jump to heading
良い質問をするためのアイディアを紹介する。Scott氏は、良い質問をするためには、洞察力と推測力が大事であると話す。
- 明確にするための質問
- 仮定を探る質問
- 理由と証拠を探る質問
- 視点に関する質問
- 結果を探る質問
- 質問に関する質問
The Layout Instability API by Philip Walton Jump to heading
ページ上のテキストやボタンが、非同期に読み込まれた要素によって移動し、見失ってしまう経験は、Webブラウジングをしていれば誰しも出会ったことがある現象だろう。さらには、それの影響により誤った操作を引き起こしてしまうこともある。Layout Instability APIはそういったレイアウトの問題を開発者が発見するためのAPIである。この記事では、そのAPIの使い方と、この不安定なレイアウトを解決するためのTipsを紹介する。
In Brief Jump to heading
- The Anatomy of Accessible Forms: The Problem with Placeholders by Raghavendra Satish Peri: プレースホルダーというUIに関する考察。プレースホルダーを使うことがアクセシビリティの観点で優れていない理由と、プレースホルダー属性を正しく使用する方法について解説する
- Extract critical CSS by Milica Mihajlija: クリティカルCSSについての基本から解説していく。また、FCPを改善するために便利なツールを紹介する
- Code caching for JavaScript developers by Leszek Swirski: ブラウザのJavaScriptのキャッシュに関する解説。それがどのように行われるか、どのように改善できるか、またトレースする方法について
- Hiding implementation details with React hooks by Jack Franklin: Hooksを使用することでコードの再利用を容易にをすること、実装の詳細を隠せることのメリットについて言及する
- Relearn CSS layout by Heydon Pickering & Andy Bell: CSSレイアウトに関するテクニック集。The Stack の項目では、フローレイアウトにおいてシンプルかつ柔軟にレイアウトするアイディアを紹介する