かもメモ

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

Tips

HTML 番号付きリスト ol を途中から始めたい

レイアウト的に別ブロックになってるけど続き順のリスト表現にしたいとか、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 属性を使…

CSS 日本語をいい感じにできる line-break プロパティ

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

ムームードメインに移管したドメインが clientHold になり使えなくなってた

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

CSS リストをいい感じに折り返す横並びにしたい

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

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 のキーを辿って…