Frontend Weekly 2024-11-01
MSW v2.6.0
MSW v2.6.0 がリリースされた。
https://github.com/mswjs/msw/releases/tag/v2.6.0
WebSockets API のモックが可能になった。
https://mswjs.io/docs/basics/handling-websocket-events
import { ws } from "msw";
const chat = ws.link("wss://chat.example.com");
export const handlers = [ chat.addEventListener("connection", () => { console.log("outgoing WebSocket connection"); }),];Show Baseline status on your blog posts and presentations | web.dev
Baseline のステータスを表示できる web component が公開された。
https://web.dev/blog/show-baseline-status?hl=en
次のように表示される。
利用方法は以下のリポジトリを参照。
Chrome 130
Chrome 130 がリリースされた。
https://developer.chrome.com/blog/new-in-chrome-130
CSS Nesting の挙動変更
CSS Nesting の挙動が変更された。 今までは、宣言のホイスティングが行われなれていたが、Chrome 130 からは行われなくなる。
https://web.dev/blog/css-nesting-cssnesteddeclarations?hl=en
Document Picture-in-Picture
preferInitialWindowPlacementオプションが追加された。
これを指定すると、以前のウィンドウの位置やサイズを再利用するのではなく、ピクチャー イン ピクチャー ウィンドウを常にデフォルトの位置とサイズで開くように 指示できる。
Document Picture-in-Picture API は、次のように利用できる。
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture.requestWindow({ preferInitialWindowPlacement: true,});
pipWindow.document.body.append(player);
pipWindow.addEventListener("unload", (event) => { const pipPlayer = event.target.querySelector("#player"); playerContainer.append(pipPlayer);});box-decoration-break
box-decoration-break がサポートされた。
値にはsliceとcloneがあり、sliceはデフォルトで、cloneは次のように断片化された要素が個別に描画される。
The
quick
orange fox
Our Journey with Caching | Next.js
デフォルトキャッシュが無効化された背景と、代替手段としてのuse cacheについて解説した記事。
Github Universe’24 で発表された機能
Github Universe’24 が開催され、様々な機能の発表が行われた。
Actions performance metrics
Github Actions のパフォーマンスメトリクスを全てのユーザーが利用できるようになった。
https://github.blog/changelog/2024-10-31-actions-performance-metrics-in-public-preview/
GitHub Copilot のマルチモデル対応
次のような複数のモデルが選択可能になった。
- Anthropic の Claude 3.5 Sonnet
- Google の Gemini 1.5 Pro
- OpenAI の GPT-4o、o1-preview、o1-mini
Copilot Autofix for CodeQL
Copilot Autofix for CodeQL は、セキュリティ問題の修正を提案する。 CodeQL を利用する全てのパブリックリポジトリに展開された。
GitHub Spark
自然言語でアプリを構築する AI ネイティブツール GitHub Spark が発表された。
VSCode での Github Copilot による複数ファイル編集
VSCode で Github Copilot を利用して複数ファイルを編集できるモードの提供が開始された。
https://code.visualstudio.com/updates/v1_95#_start-a-code-editing-session-with-copilot-edits
GitHub Copilot のカスタマイズ
含めるコンテキストの制御や、ワークスペースのローカルインデックス作成、 PR や Issue などのリポジトリの情報の参照、Web から追加コンテキストを取得する機能などが追加された。
State of CSS 2024
State of CSS 2024 の結果が公開された。