azukiazusa のテックブログ2
SVG アイコンの表示に mask-image CSS プロパティを使用する
mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS
すべて
blog.jxck.io
URL.parse を Chromium で Ship するまで
Chrome 126 で筆者が実装した URL.parse が Ship された。Chromium にコントリビュートしたことは何回かあったが、単体機能を Ship したのは初めてだった。
blog.jxck.io
Web Developer Conference 2024 開催告知 #wdc2024
夏に Web 開発周りの話をするカンファレンスをやります。参加は Connpass で募集しています。Web Developer Conference 2024 - connpasshttps://web-study.connpass.co
azukiazusa のテックブログ2
Chrome の 組み込み AI Gemini Nano を試してみる
Chrome 126 から Gemini Nano という AI がデスクトップクライアントに組み込まれる予定です。Gemini Nano は Google の AI モデルの中で最も小さいモデルです。デスクトップクライアントに直接組み込ま
azukiazusa のテックブログ2
CSS トランジションの開始時のスタイルを定義する `@starting-style` ルール
`@starting-style` ルールは、CSS トランジションの開始時のスタイルを定義するためのアットルールです。CSS トランジションの既定のルールでは前回のスタイル変更イベントでレンダリングされていなかった要素では、アニメーション
azukiazusa のテックブログ2
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する
子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの
azukiazusa のテックブログ2
SvelteKit チュートリアル - 記事投稿サイトを作ってみよう
SvelteKit は Svelte と Vite で構築たフレームワークです。SvelteKit は Web アプリケーションを開発するために必要な機能を提供します。この記事では、SvelteKit を使用して記事投稿サイトを作成するチュ
azukiazusa のテックブログ2
Svelte v5 で導入されるスニペット機能
Svelte v5 ではスニペットと呼ばれる新しい機能が導入されます。スニペットとは、コンポーネント内で使用できる再利用可能なマークアップのことです。`#snippet` ディレクティブを使用してスニペットを定義し、引数を受け取ることができ
azukiazusa のテックブログ2
楽観的更新を行うための React の useOptimistic フック
React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対
blog.jxck.io
Reverse HTTP Transport が描く新しい Web サービスデプロイ構成
IETF の httpbis で、Reverse HTTP Transport という仕様が提案されている。Reverse HTTP Transporthttps://www.ietf.org/archive/id/draft-bt-htt
blog.jxck.io
Referrer-Policy の制限を強めると安全になるという誤解
Referrer-Policy は、送信される Referer の値を制御することが可能だ。このヘッダの副次的な効果をよく理解していないと、「no-referrer にして送らないのが最も安全だ」という誤解を生むことになる。では、複数あるポ
azukiazusa のテックブログ2
Svelte v5 における イベントハンドラの変更点
Svelte v5 では、イベントハンドラの書き方が一新され、いくつか非推奨となった書き方があります。この記事では、Svelte v4 と Svelte v5 のイベントハンドラの書き方の違いについて見ていきます。
azukiazusa のテックブログ2
Svelte v5 で導入された Runes によるリアクティビティシステム
Svelte v5 で導入された Runes によるリアクティビティシステムについて解説します。従来の Svelte は純粋な JavaScript のコードのみを使用してリアクティビティを実現していましたが、アプリケーションが大規模になる
azukiazusa のテックブログ2
エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS
Effect-TS は、開発者が複雑なエラーや非同期処理をより安全に開発できるようにすることを目的とした TypeScript ライブラリです。Effect-TS は、TypeScript の型システムを活用して、本番のアプリケーションにお
azukiazusa のテックブログ2
Next.js 型安全なルーティングを使う
Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。
azukiazusa のテックブログ2
React v19 から forwardRef が不要になる
今までの React では `ref` をコンポーネントの Props として渡す際に、`forwardRef` を使ってラップする必要がありました。しかし、React v19 からは `forwardRef` が不要になり、`ref` を
azukiazusa のテックブログ2
Remix v2.9 で導入された Single Fetch
Remix v2.9 で導入された Single Fetch はクライアントサイドでのページ遷移が行われた際に、サーバーへの複数の HTTP リクエストを並行して行う代わりに、1 つの HTTP リクエストを実行しまとめてレスポンスを返す機
blog.jxck.io
令和時代の API 実装のベースプラクティスと CSRF 対策
CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景について、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。確かに
azukiazusa のテックブログ2
Math.max() にスプレッド構文で大きな配列を渡すとエラーになる恐れがある
`Math.max()` は、引数に渡された数値のうち最大のものを返す JavaScript の組み込み関数です。この関数は任意の数の引数を受け取るので、配列最大値を求めたい場合にはスプレッド構文で展開して渡す使い方が一般的です。しかし、引
azukiazusa のテックブログ2
コンテナ要素に基づく相対的な CSS の単位（cqw, cqh, cqi, cqb, cqmin, cqmax）
コンテナクエリ単位とは、コンテナ要素に基づいてスタイルを定義するための相対的な長さを表す単位です。例えば `1cqw` はコンテナ要素の幅の 1% に相当します。