Frontend Weekly 2024-10-04
Storybook 8.3のVitest統合やRusty V8などについて紹介する
Storybook 8.3
Storybook 8.3がリリースされた。
https://storybook.js.org/blog/storybook-8-3/
Styorybook 8.3ではVitest統合が行われ、次のプラグインを追加することで、StoryをVitestテストとして実行できる。
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
がなぜ次のようになるのかを解説した記事。
type T = keyof unknown; // never
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
手を使わずに音声入力とアイトラッキングを利用して開発した実体験に基づく方法の紹介。