Vol.212

Make it Boring by Jeremy Wagner Jump to heading #

"退屈"であることの意味と価値 Jump to heading #

フロントエンド開発におけるJavaScriptの比重は、HTMLやCSSに比べて非常に大きくなっている。Reactなどの重厚なフレームワークは一般的になってきており、それは生産性を向上させ、開発面白くさせるが、本当に必要なものなのか。Jeremy氏は、現代のWebには退屈さが必要であると提言する。UIは平凡で予測しやすいものにし、HTMLとCSSで解決できることをnpmに頼らないようにする。退屈さはプロダクトをよりシンプルで分かりやすく、使いやすく、速いものにする。Webが全ての人のためであるための、”退屈”であることの意味と価値とは。

As developers, we have two objectives: Work to make things better this week than they were last week, and continue our education to ensure the success of the first objective. With a stronger embrace of HTML and CSS, I genuinely believe our work can never be boring, so long as it helps us deliver on these objectives in the spirit of making the web better for all people.

Design Systems for email: bringing order to the chaos by Ted Goas Jump to heading #

Eメールのためのデザインシステム: カオスに秩序をもたらす Jump to heading #

Ted氏が入社した当初、Stack Overflowでは毎日大量のHTML メールを送っているのにも関わらず、メールクライアントによってデザインが変わってしまうような一貫性の無いメールを送信していたことにに危機感を持った。その状況を改善するべく彼が行った、Eメールに関するデザインシステムの構築に関する知見、教訓を共有してくれる。

1. 問題意識を持ち、必要性を再認識する
2. オフィシャルにし、時間や予算を確保する
   • “If a design system is treated as a side project, it’ll probably fail.” — Nathan Curtis
3. 小さく始めて、周りを巻き込む
   • 早めにGoogle Docsで共有し、誰でも参照できるようにする
4. 完璧に仕上げようとしない
5. ドキュメント化する

Learning to prototype is more important than learning to code by Ben Holliday Jump to heading #

プロトタイプを学ぶことは、コードを学ぶことよりも重要 Jump to heading #

Ben Holliday氏は、プロトタイピングは非常に重要なスキルであり、実際の所デザイナがコードを学ぶよりも大切ではないかと指摘する。たしかに、コーディングのスキルはデジタルのプロダクトを扱うデザイナにとっては有用なスキルではあるのは確かだが、様々な状況において、プロトタイピングができるということは、デザイナにとって重要なツールセットであるとコメントする。

KV Storage: the Web’s First Built-in Module by Philip Walton Jump to heading #

ローカルストレージは遅く、IndexedDBはデベロッパーフレンドリーであるとは言い難い。この記事ではChromeで提供される予定のKV Storageについて解説する。KV Storageは、ブラウザで使える非同期のキーバリューストレージのことであり、ローカルストレージのようにシンプルでかつ高速なストレージを提供してくれる。具体的なソースコードを交えてどのように現在のブラウザのストレージ機能が改善されるかを紹介していく。

How to validate an idea when you’re not working in a startup. by Tina Hsieh Jump to heading #

素晴らしいアイデアを思いついたとき、それがマーケットが刺さるかどうかをステークホルダーに理解させるにはどうすればよいか。この記事では、アイディアをどのように検証するか、その方法について紹介する。

1. ステークホルダーと仮説を立てる
2. アイディアを検証する目的を明確にする
3. 仮説を正確に検証する方法を選択する
   • 参加型ワークショップ
   • ピッチングセッション
   • ユーザーテスト
   • オンラインサーベイ
   • ランディングページテスト

In Brief Jump to heading #

• JavaScript Loading Priorities in Chrome by Addy Osmani: ブラウザがどのようにスクリプトの優先順位をつけ、読み込み、実行していくかについての解説
• Breaking Boxes With CSS Fragmentation by Rachel Andrew: CSS Fragmentationの仕様について解説する
• Removing duplicate objects from an Array (is hard) by Ire Aderinokun: オブジェクトが含まれている配列から、重複を削除するメソッドの実装例を紹介する
• Fastify and Preact for quick web app prototyping by Luciano Mammino: FastifyとPreactを利用して、Webアプリを作成するサンプルを紹介。シンプルなウェブアプリケーションを作成し、Dockerに乗せて実行するところまで
• The Dark Side of the Grid (Part 1) by Manuel Matuzovic: CSSグリッドレイアウトとアクセシビリティに関する記事全3パートのパート1。CSSグリッドレイアウトはレイアウトを構築するために多くの方法を提供する柔軟性があるが、上手く利用できなければユーザエクスペリエンスとアクセシビリティを損なう可能性があることを指摘する