azukiazusa のテックブログ2
ブラウザで非同期イベントストリームを処理する Observable API
Observable API は非同期イベントストリームを処理するための API です。 EventTarget に .when() メソッドを追加し addEventListener() よりも宣言的で優れたイベントハンドリングを提供しま
すべて
azukiazusa のテックブログ2
ブラウザに広くサポートされていない CSS を検証する require-baseline ESLint ルール
Baseline はブラウザで利用可能な JavaScript や CSS のサポート状況を明確化するプロジェクトです。ESLint/CSS の require-baseline ルールを使用することで、Baseline でサポートされてい
azukiazusa のテックブログ2
アップグレードされた CSS の `attr()` 関数を使う
`attr()` 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。従来までは `content` プロパティのみで使用できましたが、CSS Values and Units Module Level 5
azukiazusa のテックブログ2
ボタンが押し込まれた状態を表す Press Button の提案
UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。しかし、ネイティブの HTML 要素では表現できず `aria-pressed` 属性を使用する必要がありました。Press Button Proposal
azukiazusa のテックブログ2
Deno v2.2 で追加されたビルドイン OpenTelemetry サポートを試してみる
Deno v2.2 でビルドインの OpenTelemetry サポートが追加されました。アプリケーションのコードに変更を加えることなく、Deno のビルトイン API から自動的にテレメトリーデータを計装できるようになります。
azukiazusa のテックブログ2
Prisma で OpenTelemetry のトレースデータを計装する
Prisma は OpenTelemetry の仕様に準拠したトレースデータを計装するためのパッケージを提供しています。この記事では、Prisma で OpenTelemetry のトレースデータを計装する方法について紹介します。
azukiazusa のテックブログ2
Vitest で型のテストを書く
Vitest では `expectTypeOf` や `assetType` を使って型のテストを書くことができます。自作のユーティリティ型が期待する型を返すか検査したり、言語ファイルの JSON スキーマが同じ型を返すことを確認するなどに
@sakupi01.com blog
Safari 18.2 「view-transition-name: auto;」への警鐘
Safari 18.2でShipされた`view-transition-name: auto;`は、未だに議論の余地が残るため、仕様をよく理解した上での利用が必要な理由を解説します
azukiazusa のテックブログ2
スキーマバリデーションライブラリの標準インターフェース standard-schema
スキーマバリデーションライブラリはここ数年で人気を集めています。多くのライブラリが登場する中で、standard-schema はスキーマバリデーションライブラリの標準インターフェースを提供します。これにより、エコシステムツールがユーザー定
azukiazusa のテックブログ2
CSS で関数を定義できるようになる
Chrome Canary で CSS 関数のプロトタイプが実装されました。CSS Functions and Mixins Module という仕様に基づいて実装されており、`@function` ルールを使用して開発者が関数を定義できる
azukiazusa のテックブログ2
パスキーによる認証をブラウザで実装してみる
パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、またフィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。この記事
azukiazusa のテックブログ2
React Server Components を手軽に扱うフレームワーク react-server
react-server は Node.js で JavaScript ファイルを実行するかのように React Server Components を扱うことを目的としたフレームワークです。Next.js の機能が過剰に感じられるような小
azukiazusa のテックブログ2
Bun v1.2 では package.json にコメントを書ける
`package.json` は JSON フォーマットのファイルであるため、コメントを書くことができません。`package.json` に定義したスクリプトの説明を書いておくことは重要です。別のファイルに説明を書いたり、`//` で始ま
azukiazusa のテックブログ2
TypeScript 5.8 で追加される erasableSyntaxOnly フラグ
TypeScript 5.8 で `erasableSyntaxOnly` フラグが追加される予定です。このフラグは `enum` や `namespace`、`Class Parameter properties` などの「消去可能ではな
blog.jxck.io
"Less Password" 時代のアカウント防災訓練
震災の直後、復興のさなかに水害が起こり、再び全てが流される。能登の人々にとっては大変な 2024 年だったと思う。首都直下型や南海トラフはいつ起こってもおかしくないと言われ、戦火すら他人事ではなくなっている。家に災害用の備蓄を用意するのと同
@sakupi01.com blog
Customizable Select ElementにおけるParser RelaxationのアップデートとShipの背景
長年の議論を経て、ようやく仕様が固まった、CustomizableなSelect要素の現状について、Parser Relaxationのを軸に解説します
azukiazusa のテックブログ2
型安全にクエリパラメーターを扱う nuqs
フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があ
blog.jxck.io
Web 技術年末試験 2024 講評 #web_exam2024
2024 年の Web 技術を振り返る試験として、「Web 技術年末試験 2024」を実施した。その問題と想定解答、平均点などを公開する。
azukiazusa のテックブログ2
ダイアログの Light dismiss を有効にする `<dialog closedby>` 属性
`` 属性はダイアログの外側をクリックした際にダイアログを閉じる Light dismiss 機能を実現するための属性です。closedby 属性は `any`, `closerequest`, `none` の 3 つの値を受け付けます。
azukiazusa のテックブログ2
React の `<ViewTransition>` コンポーネントで宣言的にページ遷移アニメーションを追加する
`` コンポーネントは React の実験的なバージョンとして導入されました。これは View Transition API を 宣言的な方法で使用できるようにするものです。