翻訳：CSSユーティリティクラスと「関心の分離」（いかにしてユーティリティファーストにたどり着いたか） - yuhei blog

2020/05/24 17 users ユーティリティファースト 分離 翻訳 関心 セマンティック

Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 ここ数年の間に私のCSSの書き方は、非常に「セマンティックな」アプローチから「機能本位の（functional）CSS」と呼ばれるものへと移行してきました。 このやり方... 続きを読む

実践的レイアウトプリミティブ - yuhei blog

2020/05/18 14 users CSS レイアウト 意図 新しいコンポーネント たび

「CSSにおける汎用化の先送り、ユーティリティファーストCSS、レイアウトプリミティブ」の続き。 同じようなレイアウトを実現するためのCSSを僕は実のところ何度も繰り返し書いていた。そのたびに新しいコンポーネントを作り、意図を表明するための名前を捻り出し、やってることはたいして変わらないのに別々になった実... 続きを読む

翻訳：Rich Harris「形而上学とJavaScript」に関する見解（ReactによるDOMの抽象化の不完全性について） - yuhei blog

2020/01/25 10 users React Svelte DOM 形而上学 スライド

この記事は「Thoughts on Rich Harris’ “Metaphysics and JavaScript”」の日本語訳です。記事内で言及しているスライドの内容も参照しなければ理解しづらい部分がいくつかあります。 公開にあたっては著者のJim Nielsen氏に許諾をいただいています。 Svelteの考案者であるRich Harris氏は、Reactのプログラミングの側面... 続きを読む

SPAじゃないプロジェクトのための控えめなJavaScriptフレームワーク「Stimulus」 - yuhei blog

2019/05/02 243 users React angular Stimulus SPA HTML

ReactやAngularのように、アプリ内のすべてのHTMLをJavaScript側で管理して描画するアプローチは大げさすぎる。ほとんどの場合において。 もちろん一定以上の複雑さがあればその辺のJavaScriptフレームワークを使った方が良い。が、それがやり過ぎになるプロジェクトは多い。というかその方が多い。それでも、それらのア... 続きを読む

サーバーサイドのみのテンプレートエンジンとしてのReact - yuhei blog

2019/01/15 41 users テンプレートエンジン React サーバーサイド

最近の仕事ではJSがあんまりなくてページ数はそこそこあるみたいなサイトを作ってることが多い。作り方として、コンポーネントごとにPugのmixinとかNunjucksのmacroで抽象化してマークアップが壊れないようにしてるんだけど、これらだとコンポーネントを実装するための機能として微妙。具体的には、ノードを挿入できる箇... 続きを読む

CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog

2018/11/22 235 users CSS セレクタ CSS in JS 根源 書き方

CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類（定義的に微妙なやつも全部ひっくるめて）だ。可能性は一気に広がり無数のライブラリが生み出され... 続きを読む

cssnextを使うべきか - yuhei blog

2017/09/21 36 users cssnext CSS トランス 前提 標準

2017 - 09 - 21 cssnextを使うべきか cssnext は、未来の CSS 構文を今のブラウザでも解釈できるようにトランスパイルするPostCSS プラグイン だ。そう聞くとさも、将来の CSS の書き方をそのまま先取りできる素晴らしいツールであるような印象を抱く。だが実際は、cssnextで表現できる形と標準の仕様は大きく異なっていることがある。cssnextを前提にして書いた... 続きを読む

縦書きでレスポンシブなブログを作った - yuhei blog

2017/05/11 122 users 縦書き ウェブデザイン Next.js ウェブサイト かなり難

2017 - 05 - 08 縦書きでレスポンシブなブログを作った 趣味で会社の人のサイトを作った 。縦書きでレスポンシブなブログ。 prismic.io と Next.js で作った。 ウェブデザインに縦書きを活かすことは難しい。部分的に取り入れることはできても、縦書きの文章を主要な要素として扱うのはかなり難がある。というのも、ウェブサイトは縦にスクロールするのが当たり前だけど、普通に縦書きで実... 続きを読む