Skip to content

Vol.268

Kota Furusawa

The anatomy of a button — UI component series Jump to heading

ボタン UI の構造 Jump to heading

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

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

Thinking in Behaviors, Not Screen Sizes Jump to heading

画面サイズでなく振る舞いを考える Jump to heading

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

Abstract more, better Jump to heading

より良い抽象化 Jump to heading

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

The Cost of Javascript Frameworks Jump to heading

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

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

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

Introducing Crank Jump to heading

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

In Brief Jump to heading