HTMLcat、忘れがちなWeb標準テクニック42選を1枚の付箋で紹介
Small, native web tricks worth remembering
HTML・CSS・JavaScriptの標準機能を活用した小技を集めたサイト「HTMLcat」が公開された。各機能を付箋形式で1つずつ紹介し、コード例と注意点を添える。対応状況の確認やフォールバックの推奨など、実用的な指針も示している。
HTML、CSS、JavaScriptは私たちが覚えている以上に多くのことができる。
HNでの議論
58- m-s-y
車のディーラーに行って、いろんな車について読めるのが大好き。特に、実際には車が置いてない時ね。実際、車の写真すら一枚もない。そう、それが俺の好みだ。
- moontear
良い説明やヒントもあるけど、このサイトに本当に必要なのは例だよ。コードを見ただけじゃあまり役に立たない。説明もほとんど短すぎて、ホームページのツールチップで十分なくらいだ。
このページの前提は「覚えておく価値のあるWebテクニック集」なのに、bash（例：`du -hd 1 . | sort -hr`）が何でそこにあるのか理解できない。
- zeroq
私だけかもしれないけど、これは大きな時間の無駄（あるいはもっと前向きに言えば、可能性の無駄）のように思える。
最初の例「Device type in JS」だけ見てみよう。
「粗いポインターは『モバイル』を意味せず、細かいポインターは『デスクトップ』を保証しない。ユーザーエージェントからデバイスを推測するのではなく、ブラウザに入力機能を尋ねよう。」
const input = {
finePointer: matchMedia('(any-pointer: fine)').matches,
coarsePointer: matchMedia('(any-pointer: coarse)').matches,
canHover: matchMedia('(any-hover: hover)').matches,
};
これではデバイスタイプを特定する方法がわからない。コードも実行されないので、モバイルとデスクトップの結果をすぐに比較して基準を確立することもできない。
- apples_oranges
スクロールバーを隠さないでください :)
- herrherrmann
いいね！こういう意見がはっきりしたリストは好きだよ。特に、ざっと見て使えそうなものを拾いやすいのはいいね。ただし、各機能の互換性についても言及してほしいところ。特に新しいCSS機能は、ブラウザ対応がどの程度進んでいるかを過大評価しがちだから。
そのために、関連するMDNやcaniuse.comへのリンクを貼るだけでいいと思う。