- JavaScript
Wrangler を使い Cloudflare Pages に直接アップロード
静的サイトを Cloudflare Pages で公開する時に Wrangler を使って成果物を直接アップロードする方法です。
JavaScript
JavaScript に関する記事
- JavaScript
Nunjucks で作る JSON で末尾以外にカンマを出力する方法
JSON では末尾のカンマは許容されていないため、末尾以外にカンマを出力しなければなりません。Nunjucks では、主に 3 つの方法で末尾以外にカンマを出力できます。
- JavaScript
Windows で Safari のブラウザテストをする
Playwright を使い、Windows で Safari のブラウザテストをする方法です。WebKit ブラウザをインストールでき、デベロッパーツールも使えます。
- JavaScript
Nunjucks での文字列と配列の変換
JavaScript テンプレートエンジン Nunjucks で文字列と配列を変換する split と join の紹介です。
- JavaScript
Eleventy での Sass の使用と CSS の軽量化
静的サイトジェネレーター Eleventy で Sass 環境を構築する方法です。また、未使用の CSS の削除と CSS の縮小も行います。
- JavaScript
Eleventy の collections を Nunjucks で dump する
静的サイトジェネレーターの Eleventy の collections に Nunjucks の dump を使うとエラーが出ました。その対処法です。
- JavaScript
下スクロールで消える・上スクロールで現れる JavaScript
サイトを可能な限り重くせず、固定ヘッダーなどが「下スクロールで消える」「上スクロールで現れる」アニメーションを実装する方法です。
- JavaScript
classList.toggle で切り替えた class を sessionStorage で維持
Web Storage API の sessionStorage を使い、classList.toggle で切り替えた class をページを移動しても再読み込みしても維持する方法。
- JavaScript
Intersection observer によるスクロールアニメーション
Intersection Observer API を使い、スクロールで表示領域に入った要素にブラウザに負荷をかけずアニメーションをつける方法の紹介です。