かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Tips

SVG に alt の代わりになる属性を付けたい

React / Next で SVG をコンポーネントとして使うことが多かったのだけれど、SEO が必要なメディアの制作で SVG に image のような alt が設定できないか気になって調べてみたメモ img タグを使う <img src="/path/to/logo.svg" alt="ロゴ" /> font-size で大きさを変えたり、color で色を変えたりする…

CSS 日本語で <wbr /> が効かないにハマる

レスポンシブなサイトを実装する際に、モバイルなどエリアが小さくなる時にいい感じにテキストを改行させたい・デザイナーの要望で改行位置を固定させたいケースがあります。改行位置のためにメディアクエリで display を切り替えるのはイケてないので避けた…

Node.js URL を作りたくて path.join を使うと https:// が https:/ に変換されてしまう

SSG 時にパスをドメインから始まるものに変更したいという要件があって、path.join でドメインとパスを合体させてハマってしまったのでメモ 環境 Node.js v18.18 path.join に URL を渡すとhttps:// が https:/ になってしまう http://, https:// から始まる…

Git squash merge された PR に依存する PR を Fast Forward に rebase する Tips

ある PR A の変更に依存した PR B を作った時、main ブランチに squash マージする戦略のリポジトリだとマージされた PR A のコミットは 1 つになっており、RR B のマージ先が main に向いた時、コミットの履歴が異なるので PR A のコミットがそのまま表示さ…

Vercel プレビュー環境かどうか判別したい!

Vercel にデプロイした Next.js のアプリで 本番環境 (production) と 開発環境 (development) / プレビュー (preview) とで アナリティクスなどを出し分けけしたく NODE_ENV で判別していたのですが、プレビュー時に本番環境と同じになってしまう問題にハマ…

Mac M2 VSCode アウトデント (⌘ + [) が効かない問題

VSCode で開発を子なっている際にアウトデント⌘ + [ が効かない・キーボードショートカット設定で ⌘ + [ を押しても [ が無視されて ⌘ だけ入力されて設定できない現象に長らく悩んでいました。今回この現象が解決したので忘れないようにメモ 環境 Mac M2 20…

Mac HHKB 唐突に shift が押されたままになる問題

HHKB で Shift Lock がかかった場合は左右のShiftを同時に押すと解除できる

CSS スマートフォンでタップされたエリアがハイライトされるのを消したい

スマートフォンでリンクやボタンをタップした際に clickable なエリアがハイライトされます (iOS Safari だとグレー / Android for Chrome だと青) これ 通常のリンクやボタンはそのままで良いのですが、モーダルのエリア外をタップした際にモーダルを閉じさ…

GitHub ビルド成功のバッジを README に表示させたい

README にこんな感じでバッジを貼りたい! Goal README に build 成功のバッジを表示する GitHub だけで完結 GitHub Actions の workflow が成功したかどうかのステータスをバッジ表示できる https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/<WORKFLOW_FILE>/badge.svg 上記のフォ</workflow_file></repository></owner>…

JavaScript 月末の日付を取得したい

JavaScript で月末の日付を取得する方法のメモ new Date(YYYY, MM, 0) で先月の最終日が取得できる const date = new Date(2023, 1, 0); date.toLocaleDateString(); // => '2023/1/31' // 0日で月を 0 = 1月にすると前年の12月の最終日が取得できる const d…

JavaScript Date オブジェクトで紀元前の日付を扱いたい

setFullYear を使うことで 紀元前を含めた日付を Date オブジェクトで扱えるようになる!

家計を支える技術 Google Spreadsheet を使って物件の比較検討をする

Google Spreadsheet の QUERY と ARRAYFORMULA を使って物件の比較検討シートを作る

CSS Flexbox の子要素内でテキストの省略 (text-overflow: ellipsis) が効かないにハマる

text-overflow: ellipsis になって欲しい要素の 親要素の flex-item に overflew: hidden をつければ良い

JavaScript 文章を縦書きにしたくなる時あるよね

突然漢詩を Twitter に投稿したくなったときに縦書きを自分で作るの大変だから変換できると漢詩投稿しやすいね。 と思って ChatGPT に聞きながら縦書きに変換するコード作ってみた

AWS Amplify で node.js v18 系を使いたいにハマったログ

AWS Linux:2 で Node.js v18 系を使いたい場合は `nvm use 18` コマンドを実行させるのが良さそう

Google Spread Sheet 入力のあるセル数(空白以外)を得たい

平均値を出す時とか。入力のあるセル数をカウントできると値を入力するだけになるので便利です。 COUNTIF(範囲, "<>") を使えばOK COUNTIF関数の構文は下記の通り COUNTIF(範囲, 条件) 条件部分に空白以外を表す等しくないを表す比較演算子 <> を指定すればO…

Mac 勝手に日本語入力に切り替わる問題

Mac でブラウザの検索フォームやエディターにフォーカスする度に勝手に日本語入力に切り替わってしまう問題が発生したのを解決したメモ 環境 MacOS 12.6 Apple M2 2022 Google 日本語入力 症状 半角英数で入力をしている状態 ブラウザやエディターなど別のア…

Node.js バージョン管理ツールを VOLTA にしてみた!

Node.js のバージョン管理ツールに asdf を使っていたのですが VOLTA が速くて良いよとオススメされたので乗り換えてみた ⚡ VOLTA の特徴 ⚡ Rust製で早い プロジェクトディレクトリに入ると自動でバージョンが切り替わる (バージョンは package.json に記録…

TypeScript VSCode で Expression produces a union type that is too complex to represent エラーになる

VSCode とワークスペースの TypeScript のバージョンが異なっているのが原因。`"typescript.enablePromptUseWorkspaceTsdk": true` を設定しておけば幸せになれる

Tips さくらのレンタルサーバーに公開鍵で ssh 接続したい

WordPress の host とかでお安いから使い続けてるみんな大好きさくらのレンタルサーバー! SSH 接続できるのですが毎回パスフレーズ入力するのなんだかな〜と思ってたら公開鍵が使えるっぽいのでやってみたのメモ (PC買い替えたらまた設定するだろうからね…)…

React TypeScript vanilla-extract で !important が使いたい!

vanilla-extract を使っていてライブラリが element に直接出力する CSS をどうしても上書きする必要があり !important を使おうとしたのですが TypeScript の型でハマったのでメモ vanilla-extract を使って !important を使う ライブラリの出力 CSS を上書…

WordPress REST API を無効化する

WordPress v6.1.1 rest_authentication_errors フィルターを使う apply_filters( 'rest_authentication_errors', WP_Error|null|true $errors ) This is used to pass a WP_Error from an authentication method back to the API. Authentication methods sh…

PHP 文字列中に変数で値を埋め込むやつのメモ

"Hello, xxxx!": "こんにちは、xxxxさん!" みたいな key-value で翻訳テキストを出せる機能を作っていて PHP で既定の文字列に変数を埋め込む方法を何パターンかやってみたのでメモ sprintf ・ vsprintf 所謂文字列のフォーマットに使うメソッドを利用する…

PHP 文字列中変数展開に関数は使えない?

PHP の文字列中変数展開が奇妙だったのでメモ 環境 PHP v8.2 変数展開 " (ダブルコーテーション)中に {$変数} で変数展開が出来る "Hello, Ichigo!" 定数は展開できない "Hello, {ICHIGO}!" 定数はそのまま出力される 関数も展開できない

PHP JSON デコードのエラーハンドリングのメモ

PHP v7.3 以降なら json_decode の第4引数に JSON_THROW_ON_ERROR を渡すことでデコード失敗時に JsonException がスローされるようになる

PHP array_reduce を途中で break したい

要件 JSON ファイルのキーを. 繋がりにした文字列が渡される キーを辿って最後の値を返す キーを辿って値にたどり着けなかった場合は最後のキーを返す 方針 渡された文字列を explode で分割して配列にする 分割した配列を reduce して JSON のキーを辿って…

Mac M2 java が常に 8888 ポートを専有してて困ってた

Docker を立ち上げようとしたら毎回 8888 ポート使われてると言われて困っていた 環境 MacBook air M2 2022 macOS Monterey 12.6 現象 $ docker compose up … Error response from daemon: Ports are not available: exposing port TCP 0.0.0.0:8888 -> 0.0.…

Vite index.html を移動させて開発ディレクトリを作りたいときの Tips

Vite Vanilla JS で静的サイトを作るテンプレートを作成していて index.html を移動させると色々大変だったのでメモを残しておく 作ったもの デフォルトの Vite プロジェクト $ npm create vite@latest ✔ Project name: … <Project Name> ✔ Select a framework: › Vanilla </project>…

Vite TypeScript __direname がエラーになる

Vite + TypeScript + ESLint で作った環境で Multi-Page App の設定をしようとした際に __direname がエラーになってしまったのでメモ TypeScript Cannot find name '__dirname' Cannot find name '__dirname' のエラーが出る場合は Node の型が無いので @ty…

SEO スクリーンリーダー専用テキストと隠しテキストのスパム判定のメモ

スクリーンリーダーが読み取れない隠しテキストはスパム判定でペナルティを受ける可能性がある