JavaScript

JavaScript に関する記事

カテゴリー

Astro + Shiki でファイル名や diff などを表示するコードブロックを作る

Astro + Shikiで MDX のコードブロックを拡張し、ファイル名の表示・差分表示・行ハイライト・コピー機能などを Transformers API で実装します。

CSS の @layer を Astro で書いた時、意図しないレイヤー順序になるケースがありました。その問題となるケースと injectScript などによる対策です。

CSS の @layer を Astro で書いた時、意図しないレイヤー順序になるケースがありました。その問題となるケースと injectScript などによる対策です。

npm パッケージの Material Color Utilities の TypeScript 版を使い、ライトモードとダークモードに対応するマテリアルデザイン 3 の色を作ります。

静的サイトを Cloudflare Pages で公開する時に Wrangler を使って成果物を直接アップロードする方法です。

JSON では末尾のカンマは許容されていないため、末尾以外にカンマを出力しなければなりません。Nunjucks では、主に 3 つの方法で末尾以外にカンマを出力できます。

Playwright を使い、Windows で Safari のブラウザテストをする方法です。WebKit ブラウザをインストールでき、デベロッパーツールも使えます。

JavaScript テンプレートエンジン Nunjucks で文字列と配列を変換する split と join の紹介です。

静的サイトジェネレーター Eleventy で Sass 環境を構築する方法です。また、未使用の CSS の削除と CSS の縮小も行います。

静的サイトジェネレーターの Eleventy の collections に Nunjucks の dump を使うとエラーが出ました。その対処法です。

サイトを可能な限り重くせず、固定ヘッダーなどが「下スクロールで消える」「上スクロールで現れる」アニメーションを実装する方法です。

Web Storage API の sessionStorage を使い、classList.toggle で切り替えた class をページを移動しても再読み込みしても維持する方法。

Intersection Observer API を使い、スクロールで表示領域に入った要素にブラウザに負荷をかけずアニメーションをつける方法の紹介です。