O hirunewani blog

Frontend Weekly 2024-10-04

Created at

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のkeyofneverunknown

typeof unknowntypeof 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

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

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