@sakupi01.com blog
Standardizing User Intent with Interest Invokers ! (... and it's complicated)
本エントリでは、Interest Invokers の仕様策定において重要な「Show Interest」という概念と、 HIDs (Human Interface Devices) の「Show Interest」に係る議論の現状を解説し
すべて
azukiazusa のテックブログ2
::scroll-button と ::scroll-marker を使って CSS だけでカルーセルを作る
カルーセルは Web アプリケーションでよく使われる UI コンポーネントの一つであるものの、標準化された実装方法が存在しないため、各ライブラリやフレームワークで独自の実装が行われています。この問題を解決するため、CSS だけを使用してカル
azukiazusa のテックブログ2
Vercel AI SDK を使って Next.js アプリに AI 機能を追加する
Vercel AI SDK は TypeScript 向けの AI 機能を活用するプロダクトを構築するためのツールです。AI SDK は AI モデルのプロバイダー間における API の違いを抽象化することで、開発者はアプリケーションの開発
azukiazusa のテックブログ2
TypeScript で MCP サーバーを実装し、Claude Desktop から利用する
MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。MCP を使用することで、LLM は外部ツールやサービスからコンテキストを取得するだけでなく、コー
azukiazusa のテックブログ2
TypeScript 製の AI エージェントフレームワーク Mastra
Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りするこ
azukiazusa のテックブログ2
ブログで llms.txt を提供してみた
従来のウェブサイトは人間用のマークアップが主であり、bot が情報を収集するために無駄な情報が多く含まれています。一方でウェブサイトを提供する側にとっても AI エージェントにより過剰なスクレイピングによりサーバーの負荷がかかることが問題と
blog.jxck.io
CSS における if と function の提案
CSS に if() および @function が提案されている。仕様がこれで確定したとは言い切れないため、背景および現状にフォーカスして解説する。なお先に言っておくが、関数の再帰は初期仕様から外されているため、「CSS がプログラミング
blog.jxck.io
OWASP に Cookie Theft 対策 Cheat Sheet を執筆した
OWASP に Cookie Theft 対策の Cheat Sheet を提案し、マージされた。
azukiazusa のテックブログ2
インラインで条件分岐する CSS の if() 関数
if() 関数は CSS Values and Units Module Level 5 という仕様で提案されている関数です。if() 関数は CSS でインラインの条件分岐を可能にします。
blog.jxck.io
Web における Beacon の変遷 (sendBeacon(), fetch() keepalive, fetchLater())
ページを閉じる際に何かしらの情報をサーバで収集したいケースがある。これを Beacon の送信(Beaconing)と呼び、ブラウザではページ表示中に収集したパフォーマンス統計の収集や、広告タグによるトラッキングなどに用いられる。しかし、「
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` ルールを使用して開発者が関数を定義できる