Vol.204

The Problem with Paydown by Sam Jones Jump to heading #

技術的負債の問題について Jump to heading #

Sam Jones氏による、技術的負債の返済についての記事。技術的負債をクレジットカードの負債のように例えて考えることはできるが、クレジットカードのように明確で、簡単に返済計画を立てられるものではない。ビジネスにより技術的な理想な選択ができなかったり、目に見えない開発がビジネスから理解されなかったり、亀裂が起きる機会は多くある。しかし、そういったwin-winでないと感じる選択であっても、健全な話し合いを行い、全員がゴールに向かって進んでいるという感覚を醸成することが重要であると話す。

The goal is to create negotiations that are healthy so that everyone feels aligned with the business, even when it’s not a win-win.

The Elements of UI Engineering by Dan Abramov Jump to heading #

UI工学の要素 Jump to heading #

Dan Abramov氏が紹介する、UIに関する解決するべき問題点12個。彼の経験において、特定のフレームワークや、テクノロジーを学ぶことに注力するのではなく、問題を理解し、その問題をどのように解決するのかについて考えることが、学習におけるブレークスルーを生み出した、と話す。

• 一貫性
• 反応
• 遅延
• 遷移
• キャッシュ
• エントロピー
• 優先度
• アクセシビリティ
• 国際化
• デリバリー
• 回復力
• 抽象化

The Ethics of Web Performance by Tim Kadlec Jump to heading #

Webパフォーマンスに対する倫理的な考え Jump to heading #

Webパフォーマンスは単純に、ビジネスに直結するから、といったモチベーションから改善に取り組まれることが多いだろう。Tim Kadlec氏はそういった観点ではなく、モラルや、倫理的にパフォーマンスを改善に取り組むべき理由を紹介する。例えば、パフォーマンスを改善することで転送されるデータ量が削減され、結果としてエネルギー消費が抑えられることにより、デバイスのCPUやバッテリーを長持ちさせられることに繋がる、といった例を挙げている。私達がWebをどのように構築していくか、実はそれはリアルな現実世界や人というものに大きく影響しており、一人ひとりが改善に向かって取り組むべき課題であるということを訴える。

Conditional Logic In Phase — { if/else Made Visual } by Team Phase Jump to heading #

優れたアプリやWebサイトを完成させるためには、多くのステップが存在するが、その中でもプロトタイピングは非常に重要な役割を持つ。それを行うことで、実際に開発に時間を費やす前に、それが本当に有効であるかを検証でき、多くの時間とお金を節約することができる。この記事ではプロトタイピングツールのひとつである、Phaseを使ったプロトタイピングについて解説をする。特に、条件分岐を加えた、より複雑なプロトタイピングをする方法について詳しく紹介する。

Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word] by Vitaly Friedman Jump to heading #

フロントエンドパフォーマンス改善のためのチェックリスト。非常に読み応えのある記事となっているが、パフォーマンスに関連する内容が盛りだくさんなので非常に勉強になる。記事を全部読み込んで実行するのが大変かもしれないが、その場合にはまず、最下部の Quick Wins に簡単に実行できて効果的な施策のアイディアが12個にまとめられているので、そちらをからどうぞ。

In Brief Jump to heading #

• CSS Feature Toggles by Keith Clark: flexboxなどのCSSの機能を自由に有効にしたり、無効にできたりするChrome エクステンション。ブラウザによる機能差異のテストを行うために活用できる
• JavaScript Getter-Setter Pyramid by André Staltz: JavaScriptにおける、GetterとSetterについてピラミッド型の解説図を用いて説明する。またそれに付随して、PromiseやObservableについて
• CSS Grid for Designers by Johna Paolino: CSS Gridについての解説。基本的な扱い方から、どのようなレイアウトを組むことが可能なのかを紹介する
• Keep Math in the CSS by Chris Coyier: Cssの calc について。単体ではもちろん、変数とセットで使うことで、CSSが非常にリーダブルなコードになる例を紹介
• Styling a Web Component by Chris Coyier: Web Components を利用した場合に、内部の要素にグローバルのCSSが適用される場合と、されない場合がある。Web Componentsのスタイリングについて細かい挙動と、それぞれの実装方法について解説する