Skip to content

Vol.250

Kota Furusawa

Teaching CSS via CSS-Tricks Jump to heading

今、CSSを教えるということ Jump to heading

CSSを教える際、とあるレイアウトを再現しよう。となることは多く、レイアウトを再現するための"ハック"について伝える必要があり、どうしてもCSSの本質的なコンセプトからは少々遠い所から始めなければならかった。
Rachel Andrew氏はFlexboxやGridが存在する現在、別のアプローチでCSSを教えることができるはずだと説く。

Tradeoffs: The Currency of Decision Making via Farnam Street Jump to heading

意志決定のための"貨幣": トレードオフ Jump to heading

何をするか? 何が優先順位が高いのか?
時間であれ、体力であれ、お金であれ、制限があり、すべてを持つことができない以上、どんな意志決定にも必ずトレードオフが存在している。そのトレードオフを貨幣として捉え、経済と同じ様に考えると選択に満足できるチャンスは高くなる。

if we first consider the tradeoffs associated with the decisions we make, we can end up with far more satisfying choices.

Rethinking the Front-end via Level Up Coding Jump to heading

フロントエンドについて改めて考えてみる Jump to heading

ReactやVueなど、ツールについて語ることが多いフロントエンド。しかし、フロントエンドは(に限った話ではないが)、解決するべき課題によって定義されるべきだとする。
記事では、Component Composition、Separating Levels of Concern、Thinking about Compositionの3つの課題について、何が問題でどのように解決していくべきかについて詳解している。

Dealing with Ads in 2020 via Der Schepp Jump to heading

2020年代における広告への向き合い方について。
様々な制限を上手にかわした苦労の結晶が詰まった実装例も紹介されていて参考になる。

Simplified Fluid Typography via CSS-Tricks Jump to heading 

@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}

こんな感じになりがちな calc や vw などを使ったFluid Typographyを min() と max() を使ってシンプルにする方法を紹介。

Mental models for designers via Dropbox Design Jump to heading

デザイナーのためのメンタル・モデル。
課題解決と意志決定、そしてコミュニケーションに利用するメンタル・モデルについて紹介している。

Slide Jump to heading

Presentation: Move Fast & Don’t Break Things via Filament Group, Inc. Jump to heading

Scott Jehl氏が2019年の1年間を通じてプレゼンテーションをした、パフォーマンスとアクセシビリティに関する “Move Fast & Don’t Break Things” のスライドと講演ノート。

In Brief Jump to heading