blog.jxck.io
Dialog と Popover #4
ここまでで <dialog> 要素が標準化され、Modal/non-Modal な Dialog がネイティブで出せるようになった。今まで自前で実装していた z-index の指定や、フォーカスの管理、非活性化、キーボードでの処理、スタイル
すべて
azukiazusa のテックブログ2
UI を閉じる動作を処理する CloseWatcher API
CloseWatcher API は UI を閉じる動作を処理するための API です。キーボードの `Esc` キー、Android の戻るボタンなどのデバイス固有のメカニズムによって閉じるイベントを提供します。
stin's Blog
React useで非同期処理を簡単に扱う
先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Re
blog.jxck.io
Dialog と Popover #3
前回までは <dialog> が標準化されるまでの経緯と、API の概要や関連仕様を解説した。今回は <dialog> の API としての使い方について、具体的に解説していく。
blog.jxck.io
Dialog と Popover #2
showModalDialog() は今から考えれば、確かにひどい API だった。しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約
blog.jxck.io
Dialog と Popover #1
HTML の <dialog> 要素と、popover 属性、および関連する様々な仕様が標準化され、実装が進められている。Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシング
azukiazusa のテックブログ2
ユーザーのカラースキーマ設定を上書きする web preferences API の提案
ユーザーのカラーテーマの設定によりスタイルを変更するためには、`prefers-color-scheme` メディアクエリを使用することが一般的です。しかし、多くのウェブサイトでは OS の設定とは独立してカラースキーマを設定する機能が提供
azukiazusa のテックブログ2
スタイルをカスタマイズ可能な新しい `<select>` 要素
従来の `` 要素は CSS を利用したスタイルを適用することができないため、多くの開発者にとって課題となっていました。この問題を解決するために新しい既存の `` 要素をカスタマイズする手段が提案されました。この疑似要素を利用することで、開
azukiazusa のテックブログ2
`calc-size()` や `interpolate-size: allow-keywords;` で `height: auto;` な要素のアニメーションをサポートする
CSS において height プロパティを 0 から auto に変化させた場合に、アニメーションが適用されないのはよく知られた問題です。この記事では calc-size() 関数を使って height: auto; な要素のアニメーショ
blog.jxck.io
Web Developer Conference 2024 開催後記 #wdc2024
2024/9/7 に、Web Developer Conference を開催した。Web Developer Conference 2024 開催告知 #wdc2024 | blog.jxck.iohttps://blog.jxck.io
azukiazusa のテックブログ2
アクセシビリティが考慮された React Aria のドラッグアンドドロップ
React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹
stin's Blog
React.FCを使うよ、理に適っているからね
唐突に、React.FCの是非についてポジションを示そうと思ったので書きます。積極的に使う派閥です。 React.FC vs Normal Function Reactで関数コンポーネントを宣言するとき、TypeScriptの型の付け方とし
azukiazusa のテックブログ2
フィーチャーフラグの標準規格 OpenFeature の React SDK を試してみる
OpenFeature はフィーチャーフラグのオープンな規格です。特定のベンダーに依存しない API や SDK が提供されています。フィーチャーフラグの API の標準化により、ベンダーロックインを回避し、フィーチャーフラグのツールを自由
azukiazusa のテックブログ2
React Aria でアクセシブルなコンポーネントを作成する
React Aria は Adobe が提供する React 用のコンポーネントライブラリです。スタイルを持たずに UI の機能やロジックのみを提供するいわゆるヘッドレス UI ライブラリであり、特に React Aria はアクセシビリテ
azukiazusa のテックブログ2
@axe-core/playwright によるアクセシビリティテストの自動化
axe-core は axe というアクセシビリティテストツールのコアエンジンで、オープンソースとして提供されています。この記事では、E2E テストフレームワークの Playwright と axe-core を組み合わせて使用して、アクセ
azukiazusa のテックブログ2
box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない
フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモードではフォーカス
stin's Blog
viteがプラグインなしでできることを探る
pluginを使わずにviteだけで始めてみることで理解が深まったらいいと思い、やってみる。 セットアップ 適当なディレクトリ内で、git初期化してnpm初期化してviteとTypeScriptをインストールする。 package.json
azukiazusa のテックブログ2
CSS の `reading-flow` プロパティで要素の読み上げ順を制御する
Flex や Grid コンテナ内では要素の見た目上の順序と DOM 上の順序が異なることがあります。このような状態はキーボード操作やスクリーンリーダーなどの支援技術を使うユーザーにとって混乱を招く可能性があります。CSS の `readi
blog.jxck.io
3PCA 29 日目: Privacy Sandbox の方針転換は何を意味するか
このエントリは、3rd Party Cookie Advent Calendar の 29 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.
azukiazusa のテックブログ2
CSS でランダムな値を扱う `random()` と `random-item()` 関数
`random()` と `random-item()` 関数は CSS でランダムな値を扱うための関数です。`random()` 関数は最小値と最大値を引数に取り、その範囲内のランダムな数値を返します。`random-item()` 関数