Frontend Weekly Vol.84

Headlines

Designing Responsive Progressive Web Apps by Cloud Four

Progressive Web Appsのデザイン

Progressive Web Appsはその性質上、技術的な部分に注目されがちだが、この記事ではデザイン、UIについて言及。OSやデバイスの特性をどう吸収していくべきか、ブラウザのUIがない状態における注意点など細かな部分まで言及している。

10 Rules For Efficient Form Design

入力しやすいフォームデザインにおける10のルール

フォームとUXの関係は非常にわかりやすい。わかりやすいからこそ研究されてきた。この記事で紹介されている10のルールは”あたりまえ”の範疇かもしれないが、一歩進めて、このルールをどうデザイン・システムに組み込んでいくか考えていくべき。

High Performance SVGs by CSS-Tricks

SVGの最適化方法

アイコンやチャートのようなシンプルなSVGではなく、もう少し複雑なイラストでもSVGを活用する機会も増えてきている。これまではシンプルSVGの最適化がよく紹介されてきたが、この記事ではそんな複雑なSVGの最適化方法について紹介。

Automatic image scale and resolution with Client Hints by Cloudinary Blog

Client Hintsを利用して画像の解像度とサイズ選択を自動化

Ethan Marcotte氏が提唱したレスポンシブWebデザインの基礎となる”フレキシブル”な画像。彼が提唱したmax-width: 100%;は見た目のフレキシビリティを得る代わりに、無駄に大きな画像を必要があった。そんな問題点を解決するためのClient Hintsについて紹介。

Ways to Make a UI Accessible—Part I by FED || Dead

UIをアクセシブルにする方法

UIをアクセシブルにするためのコツを紹介。まずは基本的な部分であるマークアップやアクセシビリティに関するドキュメントについて紹介し、実サイトをケーススタディにどうやってUIをアクセシブルにしているか、するべきかについて解説している。パート2も楽しみ。

Scaling CSS Components with BEM, REMs, & EMs by Lullabot

BEM + rem & emでコンポーネントをスケーラブルに

コンポーネントのサイズをスケーラブルにするのは意外と難しい。そのスケーラビリティをBEMの構造を使って、remとemを使い分けて実装する方法について紹介。

Shadow DOM v1: self-contained web components by Google Developers

Shadow DOM v1について

Web Componentを構成する4の仕様の内の根幹とも言えるShadow DOMについて。これまでのv0との違いを踏まえて、Eric Bidelman氏が詳細に解説。

Slides

Refactoring CSS Without Losing Your Mind by Harry Roberts

CSSは壊れやすい。BEMのような命名規則やコンポーネント・アプローチをとっていても、その事実は変わらない。そんなCSSをリファクタリングするために知っておきたいことについて、Harry Roberts氏が解説。

Announcement

Slack for Frontend Weekly (PR)

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

In Brief