azukiazusa のテックブログ2
新しいビルドツールの Farm
Farm は Rust 製の新しいビルドツールです。パフォーマンスを重視して設計されており、Vite と互換性のある JavaScript プラグインをサポートしているという特徴があります。バンドルの戦略には Partial Bundlin
すべて
stin's Blog
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く
このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたこ
@sakupi01.com blog
新人研修の内容・感想など: 備忘録
2024/4から24卒として新人研修を受けてました。終わってから配属などあり、ようやく落ち着いてきたので、ざっくりと研修の内容を書いたり感想を書いたりします。まとまりはないです。
azukiazusa のテックブログ2
CSS の `@property` ルールでカスタムプロパティを定義する
CSS の @property ルールを使うことで、CSS のカスタムプロパティを定義できます。カスタムプロパティを定義することでプロパティの構文チェック、デフォルト値の設定、プロパティが値を継承するかどうかの設定などが可能になります。カス
azukiazusa のテックブログ2
スタイルの適用範囲を限定する CSS の `@scope` ルール
`@scope` アットルールは特定のセレクタの範囲に限定したスタイルを適用するためのルールです。`@scope` のルールセットに 1 つの CSS セレクタを指定すると、そのセレクタがスコープのルートとなります。`@scope` ルール
blog.jxck.io
なぜブラウザエンジンは 1 つではダメなのか? または Ladybird への期待
Ladybird は、他のブラウザエンジンをフォークせず、企業との取引に頼らず、寄付だけで作ることを宣言した新しいブラウザエンジンだ。Ladybirdhttps://ladybird.org/これがいかに価値のある取り組みなのか、Web を
azukiazusa のテックブログ2
CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する
CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に
blog.jxck.io
「1 分 de Web 標準」のやり方 at Web Developer Conference 2024 #wdc2024
9/7 開催予定の Web Developer Conference 2024 では、「1 分 de Web 標準」という LT 大会を予定しています。CFP も募集中ですが、(筆者の周り以外では)聞き馴染みのないやり方だと思うので、この
azukiazusa のテックブログ2
TypeScript で配列の要素を取得する時 `.at()` メソッドを使うとより安全
JavaScript で配列にアクセスする際、配列の長さを超えるインデックスを指定すると `undefined` が返されることがあります。しかし、TypeScript の型定義上では、配列の長さを超えるインデックスを指定しても `unde
azukiazusa のテックブログ2
CSS で条件分岐を行う `@when/@else` ルール
`@when/@else` アットルールは条件付きスタイルをまとめて記述するためのルールです。`@media` や `@support` の条件を `@when` にわたすことで、`true` の場合には `@when` ブロック内のスタイ
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