ローカルで立ち上げたサーバをさくっとグローバルに公開したいとき、ngrok が便利です。ngrok.com 準備 ❶ ngrokのアカウントを作る https://ngrok.com/ の「Sign up」からアカウントを作成します。 ❷ authtokenをメモする https://dashboard.ngrok.com/get-s…

これまでSVGを動かす場合、CSSの@keyframesを使ってました。developer.mozilla.org具体的には、こちらのSVGを回転させたい場合、 CSS（抜粋） svg { animation: rotate .8s linear infinite; } @keyframes rotate { 0% { transform: rotateZ(0deg); } 100% {…

かつて、Netlify DNSからDNSレコードを削除するのに大変苦労した覚えがありまして、Netlify DNSを使わずに自前のサブドメインを使用する方法を探っていたのですが、普通にCNAMEを設定すればOKでした。blog.kimizuka.org 手順 ❶ サブドメインの登録 Netlifyプ…

CSSのscroll-snapをつかってカルーセルをつくってみました。developer.mozilla.org ループ無し DEMO ソースコード（抜粋） JavaScript const { useEffect, useRef, useState } = React; function App() { const [ list ] = useState([1, 2, 3]); const width…

imagemin と imagemin-pngquant を使って、ディレクトリ内のPNG画像をまるっと軽量化するスクリプトを書きます。 www.npmjs.com www.npmjs.com 実装方法 ❶ 必要なパッケージをインストールします yarn add -D imagemin imagemin-pngquant ❷ distディレクトリ…

先日、radial-gradientを使ってパキッとした円を描こうと思った際に、円形グラデーションの%の指定が、円に内接する四角形の大きさを指定していることに気づきました。 ソースコード（抜粋） div { display: flex; align-items: center; justify-content: ce…

需要があるかは謎ですが、長方形を扇のように分割するコードを書いたので、記録を残しておきます。 DEMO HTML <canvas></canvas> <input type="number" value="5" min="1" max="18" /> JavaScript const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); let length = 5; canvas.width = 400; c…