Skip to content

Vol.268

The anatomy of a button — UI component series permalink

ボタン UI の構造 permalink

この記事では、ボタンという基本的な UI について深く考察し、要素を分解していきながら、適切なボタン UI を実装するためのアイディアを紹介する。

  • ボタンとリンクの違い
  • ボタンの状態でユーザーに伝える
  • 色、形、サイズを理解する
  • ボタンであることをはっきりと伝える
  • 十分に大きくする
  • disable を実装する前に、エラーメッセージで伝える

Thinking in Behaviors, Not Screen Sizes permalink

画面サイズでなく振る舞いを考える permalink

CSS Grid では auto-fillminmax を組み合わせることでメディアクエリを使用せずともレスポンシブな UI を実装できる。この実装方法は、従来の画面サイズを考慮したメディアクエリの実装ではなく、コンポーネント自体の振る舞いを指定するという考え方をできる実装方法であるため、多様な画面サイズに対して実装が求められる現代の Web 開発に対して、非常に理にかなっている方法なのではと紹介する。

Abstract more, better permalink

より良い抽象化 permalink

Chantastic 氏は抽象化を行う際に、ルールを設けている。“問題ごとに抽象化を行う”。"and"や"with"で説明する事象は抽象化の余地があるという考え方について、そしてそのように抽象化されたものは正常に再構成、分解ができるというソリューションについてオピニオンを展開する。

The Cost of Javascript Frameworks permalink

近年多くの実装が JavaScript に依存したフレームワークを使用したものになってきている。JavaScript フレームワークには大きく 4 つのパフォーマンス負荷がかかると指摘する。

  • ファイルをダウンロードするコスト
  • ダウンロード後にファイルの解析とコンパイルをするコスト
  • JavaScript を実行するコスト
  • メモリのコスト

この記事では、JavaScript フレームワークのコストについてデータに基づいて解析を行っていく。

Introducing Crank permalink

Crank は JSX をベースの UI ライブラリであり、特徴としては Promise, Generator をサポートしていることで、コンポーネントに直接非同期処理を組み込めるところにある。この記事では、このライブラリの特徴の紹介と、このライブラリの開発に至った経緯を紹介する

In Brief