たより

すべて

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% に相当します。

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 は単体テストのためにスクリーンリーダをシミュレートするライブラリです。このライブラリを使うことでマウスやキボードの操作をテストするように、スクリーンリーダーにより期待する読み上げが行われるかどうか