KEEP YOUR WEB KNOWLEDGE FRESH.
Node.js の修正、Firefox と Zenn の更新に、実装の工夫や UI の読みものを組み合わせました。新着だけでなく、いま読み返したい記事も出典の日付を添えて紹介します。
Node.js は11月11日、22.23.5・24.22.3・26.13.1 の更新を公開しました。提供元の評価で最高 High の問題を含み、特定の HTTPS 処理でメモリ内容が漏れる問題や、HTTP/2 の処理でサーバーが停止する問題などを修正しています。影響する系列や条件は問題ごとに異なります。
対応：稼働中のサーバーやコンテナを確認し、利用系列に対応する修正版以降へ更新してください。通常の動作確認に加え、再起動後の実行バージョンも確かめましょう。
11月10日公開の Firefox 160 は、WebTransport の接続時にカスタム HTTP ヘッダーを指定できるようになりました。一方、exportKeyingMaterial() は context と outputLength の指定が必要に。非標準のデータグラム関連プロパティの置き換えもあり、既存コードの確認が必要です。
制作メモ：使用中の API に絞って差分を確認すると追いやすくなります。MDN では正式に使える変更と、既定で無効な実験機能が分かれている点も確認しましょう。
ICS MEDIA の加固淳一さんが、開発サーバー・ビルド・テスト・コードチェックをまとめて扱う Vite+ の使い方を紹介しています。新規プロジェクトの作成から、小さな関数を使ったチェックやテストまでを順に確認できる構成。個別にツールを組み合わせる場合との違いも整理されています。
制作メモ：新規案件のツール選定に役立つ11月11日の実践記事です。既存環境をすぐ移行する前に、小さな別プロジェクトでコマンドや設定の違いを試してみましょう。
制作事務所 corto が、実装で使える HTML・CSS の工夫を10件まとめています。1つだけ開くアコーディオンや、数字の幅をそろえる指定など、身近な困りごとから入れる内容です。各項目にはデモがあり、コードだけでは想像しにくい見た目の違いを比べるきっかけになります。
制作メモ：11月11日公開の小技集です。まずは自分のサイトで困っている箇所に近いものから。機能ごとに対応環境が異なるため、採用前には対象ブラウザを確認してください。
Gabriel Shoyombo さんは、数行の CSS への置き換えが、アプリ全体の理解しやすさにつながるとは限らないと考察しています。旧 JavaScript の処理が残り、CSS と同じ状態を別々に管理してしまう例などを紹介。差分の行数と、保守のしやすさを分けて考える読みものです。
制作メモ：11月3日の記事を、CSS への移行レビューの参考として紹介します。削減した行数だけでなく、条件を判断する処理がどこに残っているかをチームで確認してみましょう。
Zenn は11月11日、html-embed と指定したコードブロックの HTML・CSS を、記事の中に図として表示する Beta 機能を案内しました。構成図や色分けした表をテキストで管理でき、CSS アニメーションにも対応します。JavaScript や外部 CSS の読み込みなどには制限があります。
制作メモ：技術記事の図を後から修正しやすくする選択肢です。Beta のため仕様変更に注意し、公式の制限事項を読んでから、まずは小さな構成図で試してみてください。
ICS MEDIA の山本竜也さんが、表の横スクロールと、ページの縦スクロールに追従する見出しを両立する実装を紹介しています。従来の overflow 指定ではなぜ期待どおりにならないかを図で説明し、工程表などのサンプルへ展開。表まわりの sticky に悩んだ人に向いた記事です。
制作メモ：11月4日の記事を、大きな表の UI 改善の参考として紹介します。作例にはブラウザの条件があるため、記事で案内されている環境と、未対応時の挙動を確認しましょう。
Josh W. Comeau さんが、自身のブログにある、スクロール中にヘッダーの背景が変わって見える演出を解説しています。ヘッダー自体の色を切り替える代わりに、その背後へ sticky な要素を置くのがポイント。複雑に見える表現を、要素の重なりから考える楽しい小ネタです。
制作メモ：3月公開・5月更新の読み返しとして、固定ヘッダーの仕上げを考えるために紹介します。仕組みだけでなく、自分のページの背景や重なり順に合うかを見てみましょう。
Vitaly Friedman さんが、アコーディオンに使うアイコンと、利用者が期待する動きを考察しています。文字を押すと別ページ、アイコンを押すと開閉するような分割操作にも着目。小さな記号の見た目だけでなく、押せる範囲と操作の一貫性を点検したくなる記事です。
制作メモ：10月23日の記事を、FAQ やメニューの見直し用に紹介します。現在の画面でラベルとアイコンを押した結果が食い違っていないか、実際の操作をたどってみてください。
Josh W. Comeau さんが、ツールチップやドロップダウンを対象要素の近くへ配置する CSS アンカーポジショニングを解説しています。基本の関連付けから、画面端でのはみ出しへの対処、古いブラウザへの備えまでを段階的に紹介。選択肢が多い機能を、よくある UI の問題から理解できます。
制作メモ：7月公開・10月更新の入門記事を、ポップアップ配置の実装見直し用に紹介します。記事の作例を参考に、画面端・ズーム時・狭い画面での表示を点検しましょう。