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()` 関数
azukiazusa のテックブログ2
新しいビルドツールの Farm
Farm は Rust 製の新しいビルドツールです。パフォーマンスを重視して設計されており、Vite と互換性のある JavaScript プラグインをサポートしているという特徴があります。バンドルの戦略には Partial Bundlin
stin's Blog
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く
このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたこ
@sakupi01.com blog
新人研修の内容・感想など: 備忘録
2024/4から24卒として新人研修を受けてました。終わってから配属などあり、ようやく落ち着いてきたので、ざっくりと研修の内容を書いたり感想を書いたりします。まとまりはないです。
azukiazusa のテックブログ2
CSS の `@property` ルールでカスタムプロパティを定義する
CSS の @property ルールを使うことで、CSS のカスタムプロパティを定義できます。カスタムプロパティを定義することでプロパティの構文チェック、デフォルト値の設定、プロパティが値を継承するかどうかの設定などが可能になります。カス
azukiazusa のテックブログ2
スタイルの適用範囲を限定する CSS の `@scope` ルール
`@scope` アットルールは特定のセレクタの範囲に限定したスタイルを適用するためのルールです。`@scope` のルールセットに 1 つの CSS セレクタを指定すると、そのセレクタがスコープのルートとなります。`@scope` ルール
blog.jxck.io
なぜブラウザエンジンは 1 つではダメなのか? または Ladybird への期待
Ladybird は、他のブラウザエンジンをフォークせず、企業との取引に頼らず、寄付だけで作ることを宣言した新しいブラウザエンジンだ。Ladybirdhttps://ladybird.org/これがいかに価値のある取り組みなのか、Web を
azukiazusa のテックブログ2
CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する
CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に
blog.jxck.io
「1 分 de Web 標準」のやり方 at Web Developer Conference 2024 #wdc2024
9/7 開催予定の Web Developer Conference 2024 では、「1 分 de Web 標準」という LT 大会を予定しています。CFP も募集中ですが、(筆者の周り以外では)聞き馴染みのないやり方だと思うので、この
azukiazusa のテックブログ2
TypeScript で配列の要素を取得する時 `.at()` メソッドを使うとより安全
JavaScript で配列にアクセスする際、配列の長さを超えるインデックスを指定すると `undefined` が返されることがあります。しかし、TypeScript の型定義上では、配列の長さを超えるインデックスを指定しても `unde
azukiazusa のテックブログ2
CSS で条件分岐を行う `@when/@else` ルール
`@when/@else` アットルールは条件付きスタイルをまとめて記述するためのルールです。`@media` や `@support` の条件を `@when` にわたすことで、`true` の場合には `@when` ブロック内のスタイ