Frontend Weekly 2024-10-04

Storybook 8.3#

Storybook 8.3 がリリースされた。

https://storybook.js.org/blog/storybook-8-3/

Styorybook 8.3 では Vitest 統合が行われ、次のプラグインを追加することで、Story を Vitest テストとして実行できる。

1
npx storybook add @storybook/experimental-addon-test

https://storybook.js.org/docs/writing-tests/vitest-plugin

Vitest の VSCode 拡張から Storybook のストーリーを実行することも可能。

Web Components Are Not the Future#

Solid の作者が、Web Components の導入・保守コストが高さ、SSR を例に互換性の問題について指摘している。

https://dev.to/ryansolid/web-components-are-not-the-future-48bh

Rusty V8#

Deno が内部で使っている V8 の Rust バインディングライブラリを公開した。

https://deno.com/blog/rusty-v8-stabilized

CSS Anchor Positioning 仕様の紹介#

ある要素を別の要素に紐づけて配置する CSS Anchor Positioning について、図解で詳細に説明している。

https://zenn.dev/d_kawaguchi/articles/css-anchor-positioning-294aa71a7f77fc

How To Manage Dangerous Actions In User Interfaces#

UI における危険な操作に対するインタラクションの提供方法について様々パターンを解説している。 認証を求める操作について、MFA、特に Passkeys をベストプラクティスとして紹介している。

https://www.smashingmagazine.com/2024/09/how-manage-dangerous-actions-user-interfaces/

The Web Vitals extension, now in DevTools#

Chrome 129 から DevTools の Performance パネルで、Web Vitals を計測できるようになったため、2025 年 1 月 7 日に拡張機能はサポート終了予定とのこと。

https://developer.chrome.com/blog/web-vitals-extension

React Compiler について理解する#

React Compiler の仕組みとトレードオフについて言及している。

https://postd.cc/understanding-react-compiler/

部分型関係から考える TypeScript のkeyofとneverとunknown#

typeof unknownやtypeof neverがなぜ次のようになるのかを解説した記事。

1
type T = keyof unknown; // never
2
type S = keyof never; // string | number | symbol

https://zenn.dev/mshaka/articles/603aae9f141042#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB

Hands-Free Coding#

手を使わずに音声入力とアイトラッキングを利用して開発した実体験に基づく方法の紹介。

https://www.joshwcomeau.com/blog/hands-free-coding/