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…

ソースコード抜粋 // three.js r127 にて検証 const fontLoader = new THREE.FontLoader(); // ローダーのインスタンスをつくる fontLoader.load('/scripts/m-plus-1-code-bold.json', (font) => { // typeface.jsを読み込む const textGeometry = new THREE…

ページA、ページBに共通するコンポーネント（往復する■）を読み込んだ際、普通に実装するとページを遷移するたびに■の位置は初期値に戻るので、タイミングによってはワープしたように見えます。これをなんとかできないものかと調べてみたところ、Layoutsを使…

writing-mode: vertical-rlを使えばCSSで縦書きを簡単に実現できます。developer.mozilla.org DEMO 普段はこれでまったく問題ないのですが、html2canvasを使ってHTMLを画像書き出ししようとすると、writing-mode: vertical-rlがうまく評価されません。 検証…

結論 自作編 基本的な方針 JavaScript（抜粋） DEMO 応用的な方針 JavaScript（抜粋） DEMO 他人のふんどし編 結論 react-textarea-autosize に任せる。github.com 自作編 基本的な方針 textareaのvalueの変更を検知する textareaのheightをautoにする texta…

❶ Next.jsにnext-sitemapを導入し、サイトマップを生成する準備をする next-sitemapの導入 next-sitemap.config.jsの作成 package.jsonの編集 ❷ デプロイの度にサイトマップを自動生成するようにVercelのビルド設定を編集する ❸ Google Search Consoleにサイ…

昔はよく使っていたのですが、5年ぶりぐらいにCharlesを起動してみたところ、すっかり使い方を忘れていたので、ドキュメントを読みなおしました。www.charlesproxy.com Charlesとは 通信のモニタリングなどを行うソフトです。 いろんな使い道があるのですが…

ことの発端 調査（Issueを発見） さらに調査（プルリクエストを発見） 検証 左（ブレンドモードなし） HTML 中央（ブレンドモードあり） HTML 右（ブレンドモードあり） HTML 画像化 左（ブレンドモードなし） 中央（ブレンドモードあり） 右（ブレンドモー…

リンクを作成する際に使うnext/link。 改めて仕様を確認してみました。nextjs.org ❶ テキストのみを渡す ソースコード レンダリング結果 ❷ hrefなしのaタグをラップ ソースコード レンダリング結果 ❸ spanタグをラップ ソースコード レンダリング結果 ❹ aタ…

Nuxt.jsではJestを使ったテストを作成していたのですが、Next.jsに導入したことがなかったので導入方法を調べました。 Next.jsのドキュメントにJestの導入方法がまとまっていたのでここを参考にしました。nextjs.org ライブラリの導入 yarn add -D jest @tes…

前回は、簡単に Yarn Workspacesの環境を構築しました。blog.kimizuka.org今回は、Yarn Workspacesを使って複数のExpoプロジェクトを管理してみようと思います。というのも、前回の構築方法で、複数のExpoプロジェクトを管理すると、 Error: Cannot resolve …

ことの発端 Yarn Workspacesとは ディレクトリ構成 設定方法 ❶ rootディレクトリの作成 ❷ package.jsonの編集 ❸ workspace-aの作成 ❹ workspace-bの作成 ❺ workspace-a、workspace-bにパッケージ（今回はaxios）を追加する ❻ workspace-a/index.mjsを作成、w…