Building an Accessible Tree View in React
ARIA roles alone do not make a Tree View accessible. Learn to build a single-select Tree View in React with roving tabindex, arrow-key navigation, selection, and type-ahead, following the WAI-ARIA APG.
Web Developer
Hey, I'm azukiazusa👋
New web development articles are posted weekly, mainly focused on frontend topics.
Latest articles
Declaratively Requesting Camera and Microphone Permissions with the `<usermedia>` Element
Chrome 151 introduces the `<usermedia>` element, a new HTML control designed to address limitations of `getUserMedia()`. This article explains the proposal and verifies its behavior with hands-on examples.
Preventing Custom Element Name Collisions with Scoped Custom Element Registries
When you build with Web Components, name collisions happen if two libraries define custom elements with the same name. Scoped Custom Element Registries let you register different implementations under the same name in separate scopes on one page.
Feature
Building an Accessible Tree View in React
ARIA roles alone do not make a Tree View accessible. Learn to build a single-select Tree View in React with roving tabindex, arrow-key navigation, selection, and type-ahead, following the WAI-ARIA APG.
Declaratively Requesting Camera and Microphone Permissions with the `<usermedia>` Element
Chrome 151 introduces the `<usermedia>` element, a new HTML control designed to address limitations of `getUserMedia()`. This article explains the proposal and verifies its behavior with hands-on examples.
Preventing Custom Element Name Collisions with Scoped Custom Element Registries
When you build with Web Components, name collisions happen if two libraries define custom elements with the same name. Scoped Custom Element Registries let you register different implementations under the same name in separate scopes on one page.
Popular articles
- ストリーミングされるチャット UI の回答をスクリーンリーダーに伝える手法の調査
- 宣言的にカメラ・マイク権限を要求する `<usermedia>` 要素
- 最近の AI コーディングで実践している、設計を中心とした開発の進め方
- エディタを Zed に乗り換えてみた
- Claude Code から Codex を呼び出すためのプラグイン codex-plugin-cc
- 実装前に設計を徹底的にインタビューし、要件を明確にするためのスキル `/grill-me`
- Scoped Custom Element Registries でカスタム要素の名前衝突を防ぐ
- 新しいデザインツール Pencil を試してみた
- Hermes Agent と Slack で設計し、Linear のチケットから Draft PR まで作成するワークフローの素振りをした
- フルスタックフレームワーク TanStack Start を試してみた
Shorts
azukiazusa
Codex のネットワークアクセス設定
azukiazusa
Codex Hooks で終了時に通知を出す
azukiazusa
Codex の smart_approvals で承認の負担を軽減する
azukiazusa
browserslist で Baseline を設定できるようになった
Talks
2026
-
リファクタリングのためのトークン節約術
Improve memory and skills with the Boy Scout Rule
A talk about gradually improving an agent's memory and skills through everyday tasks, so it can accomplish work more efficiently.
-
フロントエンドカンファレンス名古屋 2026
The frontend's audience has changed: designing new web interfaces in the age of AI
Frontend engineers have always built for humans — but AI is changing that assumption. This talk examines two shifts: AI as a producer of web output (streaming UI, MCP Apps) and AI as a consumer of the web (Markdown delivery, WebMCP), exploring what these changes mean for how we design web interfaces in the AI era.
-
React Tokyo Fes 2025
How should we give feedback when coding agents write frontend code?
LLM-based coding agents (such as Claude Code and Codex) are spreading rapidly, and feedback from code execution results is essential in iterative improvement loops. Backend development can get immediate feedback through execution and tests, while frontend development has unique challenges. This talk focuses on the feedback-loop problem in frontend code generation and discusses practical solutions and trade-offs.