Frontend Weekly 2024-05-10
Web フロントエンド版 DX Criteria
CTO 協会の発行している DX Criteria にフロントエンド版が追加。
Web フロントエンド版 DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン
Deno v1.43
2024 年 5 月に Deno v1.43 がリリースされました。
Deno 1.43: Improved Language Server performance
deno.json の tasks で npm コマンドを直接実行できるようになりました。以前は node-modules-dir オプションを利用して実行する必要がありました。
{ "tasks": { "start": "deno run -A --unstable --node-modules-dir npm:vite" "start": "vite" }}Baseline 2024 April
Popover API や Intl.Segmenter、ブロックレイアウトへの align-content などが Baseline に追加。
New to the web platform in April | Blog | web.dev
Baseline は、どの機能が現在のプロジェクトで安全に使用できるかについて明確な情報を提供している。
Baseline の定義は 2023 年 12 月に変更されており、Baseline には主要ブラウザで相互運用可能である Newly と、一定の期間が立ちほとんどの環境で安全に利用できる Widly の段階があります。この情報は MDN や Can i use にも記載されています。
Grid の子要素に aspect-ratio が付いていると崩れる場合がある
Chrome 124 から発生するようになったらしい。サンプルでは画像が子要素に含まれているが、画像の有無は関係ない。min-width: 0;で解決するとのこと。
【CSS・Chrome 124】aspect-ratio を使っているページが何もしていないのに壊れた
Grid や Flexbox で表示が崩れる場合、min-width: 0; を付けると解決することが多々ある。
Creating a halftone effect with CSS
CSS と単一の div でハーフトーン効果を適用する。
Printing music with CSS Grid
楽譜を CSS で記述する方法。
記事で触れられている手法をラップした**<scribe-music>** Web コンポーネントが提供されている。JSON ファイルを指定して描画することも出来る。