Frontend Weekly 2024-11-01

2024年11月1日

MSW v2.6.0、Baseline status web components、 Chrome 130、Next.js use cache、Github Universe'24、State of CSS 2024について

Table of Contents

# MSW v2.6.0
# Show Baseline status on your blog posts and presentations | web.dev
# Chrome 130
# CSS Nestingの挙動変更
# Document Picture-in-Picture
# box-decoration-break
# Our Journey with Caching | Next.js
# Github Universe’24で発表された機能
# Actions performance metrics
# GitHub Copilotのマルチモデル対応
# Copilot Autofix for CodeQL
# GitHub Spark
# VSCodeでのGithub Copilotによる複数ファイル編集
# GitHub Copilotのカスタマイズ
# State of CSS 2024

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

次のように表示される。

利用方法は以下のリポジトリを参照。

https://github.com/web-platform-dx/baseline-status

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オプションが追加された。

これを指定すると、以前のウィンドウの位置やサイズを再利用するのではなく、ピクチャーインピクチャーウィンドウを常にデフォルトの位置とサイズで開くように指示できる。

Player

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);
});