azukiazusa のテックブログ2
CSS でファイルのアップロードボタンをカスタマイズする ::file-selector-button 疑似要素
`::file-selector-button` 疑似要素を使用することで、`` 要素のデフォルトのボタンのスタイルをカスタマイズできます。現在すべてのモダンブラウザでサポートされています。
すべて
azukiazusa のテックブログ2
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning
CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のよう
stin's Blog
Remix を Cloudflare Pages にデプロイするまでやってみる
Remix に興味を持ったのでドキュメントを読み漁ってだいたい読み切ったので、練習がてら Node.js 向け Remix テンプレートを修正して Cloudflare Pages にデプロイする。 create-remix という npx
azukiazusa のテックブログ2
Promise や Context から値を読み取る use React フック
React の Canary および experimental チャンネルでのみ利用可能な `use` フックについて解説します。`use` フックは Promise や Context から値を読み取るためのフックで、Promise の値
azukiazusa のテックブログ2
親要素のスタイルの基づいてスタイルを適用するコンテナスタイルクエリー CSS
CSS の @container ルールは、コンテナ（親要素）の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーはコンテナサイズクエリーとコンテナスタイルクエリーの 2 種類に分類されます。コンテナスタイルクエリ
azukiazusa のテックブログ2
CSS: ダークモードで値を切り替える light-dark 関数
light-dark 関数は CSS のカラー関数で、引数に 2 つのカラー値を取り、ライトモードのときには 1 つ目の値をを、ダークモードのときには 1 つ目の値を返します。 `color-scheme` プロパティの値もしくはユーザー
blog.jxck.io
RFC の URL はどのドメインで貼るのが良いか
IETF の RFC は、いくつかの場所で同じものが公開されている。どの URL が最適なのか、という話。結論は www.rfc-editor.org だ。
blog.jxck.io
Chromium にコントリビュートするための周辺知識
Chromium にコントリビュートするためには、ソースコードを理解する以外にも、もろもろ必要な周辺知識がある。ドキュメントはかなり整備されている方ではあるが、そのドキュメントにたどり着くのが難しい場合もある。レビュアーなどが親切に教えてく
azukiazusa のテックブログ2
CSS から React コンポーネントを生成する MistCSS
MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がない
azukiazusa のテックブログ2
単体テストでスクリーンリーダーをシミュレートする Virtual Screen Reader
Virtual Screen Reader は単体テストのためにスクリーンリーダをシミュレートするライブラリです。このライブラリを使うことでマウスやキボードの操作をテストするように、スクリーンリーダーにより期待する読み上げが行われるかどうか
azukiazusa のテックブログ2
TypeScript 5.5 で関数による型の絞り込みが改善される
従来までは、TypeScript で関数の引数の型を絞り込んだ結果を返す場合には、ユーザー定義型ガードとして `x is string` のような形式で型ガードを定義する必要がありました。TypeScript 5.5 では自動で型の絞り込み
blog.jxck.io
mozaic.fm 10 周年記念イベント開催後記
2014 年 3 月に開始した mozaic.fm が、気づいたら 10 周年を迎えた。これを機に、10 周年記念イベントとして、初のオフラインイベントをゲンロンカフェで開催した。Podcast でのみ告知し、当日まで情報制限をかけていたに
azukiazusa のテックブログ2
フォームのアクセシビリティを考える
今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘
azukiazusa のテックブログ2
CSS メディアクエリで比較演算子が使える
CSS のメディアクエリで比較演算子（``, `=`）が使えます。この記法を Range Syntax と呼びます。この記法は従来の `min-width` や `max-width` といった記法と比べて、より直感的に記述できるため便利で
azukiazusa のテックブログ2
React Server Components を使うためのミニマムなフレームワーク Waku
Waku は小規模から中規模の React プロジェクトを構築するためのミニマムなフレームワークです。従来は React Server Components を使うためには Next.js のような比較的大規模なフレームワークが必要でした。
@sakupi01.com blog
内定者アルバイトを終えて
チーム開発何もわからんだった私が、チームワークを大切にする会社の内定者アルバイトに参加して思ったことをつらつら書きます。まとまりはないです。
azukiazusa のテックブログ2
1 つの AbortController で複数の fetch をキャンセルできる
`AbortController` は、fetch API でリクエストをキャンセルするためのオブジェクトです。`AbortController` は複数のリクエストを 1 度にキャンセルできます。
azukiazusa のテックブログ2
CSS の reverse 系の値は可能な限り使わない
CSS の reverse 系の値とは、`flex-direction` の `row-reverse` や `column-reverse` などのことです。これらの値は、アクセシビリティの観点からできる限り使用を避けるべきです。
azukiazusa のテックブログ2
新しい UI テストの手法を提供するテストライブラリ SafeTest
SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。S
azukiazusa のテックブログ2
技術の素振りのために記事を書く
技術の素振りを、ここではある特定の言語やフレームワークに対する理解を深めるために、その技術を使って何かしらの成果物を作成することと定義します。素振りの目的としては、ドキュメントからは読み取れない Pro/Con を得ること、その技術が実際の