Frontend Weekly Vol.94

Headlines

Running productive design critiques by Inside Intercom

生産的なデザイン評価を行う際に知っておきたいこと

デザインの評価は最近よく見かけるようになったトピックの1つ。素晴らしいデザイナーを多く抱えるIntercomではどんな風に評価を行っているのか。実践的かつ生産的なデザイン評価について。

Using CSS Mod Queries with Range Selectors by An A List Apart

レンジセレクタを使ったモジュロ演算クエリ

記事一覧のようなシンプルなリストを、アイテムの数に応じてきれいなグリッドでレイアウトしたいケースはよくある。疑似クラス、モジュロ(剰余演算)を用い、アイテムの範囲でスタイルを指定する例を解説。Sassのmixin例も紹介しているので、知っておいて損はなさそう。

Understanding the SVG viewBox

SVG viewBoxについて

わかったつもり、になりがちなSVGのviewBox属性について。説明を読みながら手元にあるSVGファイルを編集していくと、理論的にも感覚的にも覚えやすい。 この記事は丁寧に解説してくれているので、非常にわかりやすい。

Accessibility issues are user experience issues by Lee Jordan

アクセシビリティの問題はユーザ体験のそれと同じ

アクセシビリティを当たり前にするためにも必要な記事。この記事ではいくつかのサイトでのアクセシビリティにおける問題点が、サイトそのものを利用しづらく、あるいはできなくしてしまっている実例を挙げている。

Node v7 で入った WHATWG URL 実装について by blog.jxck.io

先日公開されたNode V7.0.0で実験的に実装されたWHATWG URLモジュールについてのJxck氏の解説。そもそもWHATWG URLが作られた経緯や、使い方が分かりやすく書かれている。

Designing Grids by Zell Liew

グリッドをデザインし利用することについて

グリッドの存在価値について、ではもちろんなく、この記事ではカラムの数は何個にするべきなのか、カラムはすべて同じサイズであるべきか、カラム間のスペースは、など細かい部分について詳しく紹介している。これからグリッドを作る人は必見。

What is the difference between CSS variables and preprocessor variables? by CSS-Tricks

CSSとプリプロセッサの変数の違いについて

プリプロセッサに変数があるから、CSSの変数の利用価値がないのではないか、と思うかもしれない。ネイティブに実装されるCSSの変数はもちろん基本的にはプリプロセッサのそれと同じだが、大きく異なる部分もある。記事ではその差異や両者を組み合わせて利用する方法などについて紹介。

Announcement

Slack for Frontend Weekly (PR)

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

In Brief