シンプルに Element.className や Element.getAttribute('class') 使いなよ。って話ではあるが、JavaScript の Element.classList で取得できるクラス名を HTML にあるように半角スペース区切りの文字列で得たいときってどうするんだっけ？と思ったのでメモ …

GSAP の ScrollTrigger.batch を使えば、リストなどに簡単にアニメーションを設定することができる。 https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()/ batch でアニメーションを設定したときに、アニメーションが実行された要素に class を…

いわゆるガチャガチャ動かしたいという要望のホームページ制作(非 React)で初めて GSAP というアニメーションライブラリを使ってる。 できることがありすぎて、まだ理解しきれてないが今回は ScrollTrigger を使って CSS のクラスを変更しアニメーションを発…

⛳️ Goals WordPress で作ったサイトの管理画面にログインしてる時、とのサイトだっけ？ってならないように管理画面の favicon と ツールバーの home アイコンをロゴに変更したい (納品するサイトの場合、こういうちょっとした部分で評価高くなりますし) Vers…

Webpack を使って SCSS をコンパイルしているプロジェクトで久々に build したら下記のようなエラーが発生した $ npx webpack --config ./webpack.config.js --mode production … webpack-fix-style-only-entries: removing js from style only module: js/c…

WordPress で作成した staging 環境で manifest.json があるにも関わらず 401 のエラーになる問題が発生した GET https://stg.mysite/path/to/manifest.json 401 (Unauthorized) Basig 認証が問題だった staging 環境でサイト全体に Basic 認証をかけている…

React v.18 で作成したアプリで A props object containing a "key" prop is being spread into JSX という Warning が発生した Warning: props object containing a "key" prop is being spread into JSX: let props = {key: someKey, label: ..., size: ..…

TypeScript React で ref を使ったタイマーを使った処理を書いていて予期しない ESLint のエラーが出たのでメモ ESLint no-unused-expressions error が発生 const timerRef = useRef<number | null>(null); // … timerRef.current && clearTimeout(timerRef.current); // =</number>…

WordPress 6.6.2 ⛳️ Goals 管理者以外が投稿や管理をする運用なので、直ぐにログアウトできるように管理画面の固定バーの右端にログアウトボタンを設置したい $wp_admin_bar->add_menu でメニューを追加・parent を使い追加する場所を指定する top-secondary…

category.php, taxonomy-{tax_slug}.php の所謂、カテゴリー・タクソノミの一覧ページで選択されているカテゴリー名・タクソノミー名を取得したい WordPress v6.6.1 🙅 get_the_terms を使うをバグが発生しうる name ?? ''; } 上記のような get_the_terms を…

WordPress のカスタムテーマで web サイトを作ってたらちょいちょい発生するやつ。 最終的に get_permalink($postID) で URL を取得するのだが、特定のページの post id を取得する方法を忘れるのでメモ 1. ページのタイトルから取得する get_page_by_title …

稀に発生する Sass / SCSS で web サイトを作る案件。 毎回メディアクエリを生成する mixin どう書いてたっけ？ってなるのでコピペできるメモ Motivation breakpoint を変数で持たせて mixin でそれぞれのメディクエリを生成できるようにする media query を…

レンダリング後に useEffect で何かしらの初期化処理を行って、完了したことを明示したい時など 1回だけ更新する state を作りたいケース 別に useState でも良いのだけれど、useState は setter が返されるので state を自由に更新できてしまうので、state …

LP とかでよく出てくるやつ。個人的にはあまり好きじゃないけど、作るケースが割とあるので。 Window.requestAnimationFrame The frequency of calls to the callback function will generally match the display refresh rate. The most common refresh rat…

与えられた数値を 0, 5, 10, 15, … と 5刻みに丸めたい 結論 const get5RoundNumber = (n: number) => Math.round(n * 2 / 10) * 10 / 2; 5 刻みの数値を得るには 10 刻み 0, 10, 20, 30, ... を 2 で割れば 0, 5, 10, 15, … ととなる 0, 10, 20, 30,… とい…

タイトルのとおりなのだけど、日本語で書くとムズい type MyFuncArgumens = { defaultValue?: number; callback?: () => void; }; const myFunction = ({ defaultValue = 1; callback }: MyFuncArgumens) => { // ... }; 全てオプショナルなプロパティを持つ…

JavaScript の Date は日付だけなら UTC 時間と解釈され、時間があると実行環境のローカル時間だと解釈されてしまうので注意が必要。 どのタイムゾーンの日時か明示することで、実行環境に依る日付解釈の齟齬を無くすことができる

AB テストを行うための状態を保存したい。AB テストなので一定時間経過したら A / B の状態をリセットしたい。 同じブラウザなら一定時間同じ状態を表示させたいくらいの要件だったので手っ取り早く localStorage に値を保存したい。期限付きで。 localStora…

React で Modal や Drawer で作る時に state の変更で表示 / 非表示を切り替えるとパッ出たり消えたりするので UX 的に美しくないからアニメーションをさせたい。 chakra UI のような出来上がっている UI ライブラリ無しで実装してみたのでメモ (chakra UI使…

input[type="number"] で小数を入力可能にするには step 属性を使う必要がある

typescript: "4.9.5" Promise.allSettled Promise.allSettled() Promise.allSettled() は静的メソッドで、入力としてプロミスの反復可能オブジェクトを受け取り、単一の Promise を返します。この返されたプロミスは、入力のすべてのプロミスが決定したとき…

レイアウト的に別ブロックになってるけど続き順のリスト表現にしたいとか、ol の順番を途中から始めたかった start 属性を使えばOK start で指定した数字からの番号リストになる <ol start="10"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> ↓ 10. item 1 11. item 2 12. item 3 value 属性を使…

WEB サイトのコンテンツの主体は文章です。 その文章を日本語でもエディトリアルの禁則のようにいい感じにしてくれるプロパティを知ったのでメモ line-break プロパティ The line-break CSS property sets how to break lines of Chinese, Japanese, or Kore…

Chakra-UI にあるような as props で動的にタグを変更できるコンポーネントを作りたかった React.createElement を使う方法 import { createElement, FC, ReactNode } from 'react'; type HeadingProps = { as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; c…

レスポンシブ時の View の変化は基本的に CSS のメディアクエリで行いたいが、 window サイズが大きくなったときにモバイル用のモーダルメニューを閉じるとか、意外とレスポンシブ時に JS でイベントを実行したい時がある window.resize を使った今までやり…

表題の通り。 DB に入っている文字列から末尾に / のあるパスを作りたかったが、最終的に path.resolve を通すと末尾の / が削除される import path from 'path'; path.resolve('/', '/foo/bar/'); // -> /foo/bar The resulting path is normalized and tra…

3億年ぶりに古の WordPress 製のサイトを更新する必要があり、PHP のテンプレートで CSS のクラス名を動的に作成する必要があった JavaScript で言うところの classnames のような挙動をさせたい CSS のクラス class="foo bar mofu" のような形 スペース区切…

ドメインの情報が clientHold になってしまっていた。ムームードメインでは WHOIS 情報を代理公開にしているとドメインの認証が完了せず、ドメインがロックされてしまう

前にも同じようなことやったけど React.createElement を使った TypeScript 版を作ったのでメモ import { ReactElement, createElement } from 'react'; const newlineRegex = /(\r\n|\r|\n)/g; export const nl2br = (text: string): (string | ReactElemen…

リストの間隔は gap で指定したい場合、flex だと各アイテムの width を設定しなければならず面倒 例えば上記の画像のように gap: 24px で 3つ並びにしたいと思った場合、リストアイテムの width を 33.333% にするとアイテム間の間隔分が足らず 100% を超え…