Tips
React / Next で SVG をコンポーネントとして使うことが多かったのだけれど、SEO が必要なメディアの制作で SVG に image のような alt が設定できないか気になって調べてみたメモ img タグを使う <img src="/path/to/logo.svg" alt="ロゴ" /> font-size で大きさを変えたり、color で色を変えたりする…
レスポンシブなサイトを実装する際に、モバイルなどエリアが小さくなる時にいい感じにテキストを改行させたい・デザイナーの要望で改行位置を固定させたいケースがあります。改行位置のためにメディアクエリで display を切り替えるのはイケてないので避けた…
SSG 時にパスをドメインから始まるものに変更したいという要件があって、path.join でドメインとパスを合体させてハマってしまったのでメモ 環境 Node.js v18.18 path.join に URL を渡すとhttps:// が https:/ になってしまう http://, https:// から始まる…
ある PR A の変更に依存した PR B を作った時、main ブランチに squash マージする戦略のリポジトリだとマージされた PR A のコミットは 1 つになっており、RR B のマージ先が main に向いた時、コミットの履歴が異なるので PR A のコミットがそのまま表示さ…
Vercel にデプロイした Next.js のアプリで 本番環境 (production) と 開発環境 (development) / プレビュー (preview) とで アナリティクスなどを出し分けけしたく NODE_ENV で判別していたのですが、プレビュー時に本番環境と同じになってしまう問題にハマ…
VSCode で開発を子なっている際にアウトデント⌘ + [ が効かない・キーボードショートカット設定で ⌘ + [ を押しても [ が無視されて ⌘ だけ入力されて設定できない現象に長らく悩んでいました。今回この現象が解決したので忘れないようにメモ 環境 Mac M2 20…
HHKB で Shift Lock がかかった場合は左右のShiftを同時に押すと解除できる
スマートフォンでリンクやボタンをタップした際に clickable なエリアがハイライトされます (iOS Safari だとグレー / Android for Chrome だと青) これ 通常のリンクやボタンはそのままで良いのですが、モーダルのエリア外をタップした際にモーダルを閉じさ…
README にこんな感じでバッジを貼りたい! Goal README に build 成功のバッジを表示する GitHub だけで完結 GitHub Actions の workflow が成功したかどうかのステータスをバッジ表示できる https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/<WORKFLOW_FILE>/badge.svg 上記のフォ</workflow_file></repository></owner>…
JavaScript で月末の日付を取得する方法のメモ new Date(YYYY, MM, 0) で先月の最終日が取得できる const date = new Date(2023, 1, 0); date.toLocaleDateString(); // => '2023/1/31' // 0日で月を 0 = 1月にすると前年の12月の最終日が取得できる const d…
setFullYear を使うことで 紀元前を含めた日付を Date オブジェクトで扱えるようになる!
Google Spreadsheet の QUERY と ARRAYFORMULA を使って物件の比較検討シートを作る
text-overflow: ellipsis になって欲しい要素の 親要素の flex-item に overflew: hidden をつければ良い
突然漢詩を Twitter に投稿したくなったときに縦書きを自分で作るの大変だから変換できると漢詩投稿しやすいね。 と思って ChatGPT に聞きながら縦書きに変換するコード作ってみた
AWS Linux:2 で Node.js v18 系を使いたい場合は `nvm use 18` コマンドを実行させるのが良さそう
平均値を出す時とか。入力のあるセル数をカウントできると値を入力するだけになるので便利です。 COUNTIF(範囲, "<>") を使えばOK COUNTIF関数の構文は下記の通り COUNTIF(範囲, 条件) 条件部分に空白以外を表す等しくないを表す比較演算子 <> を指定すればO…
Mac でブラウザの検索フォームやエディターにフォーカスする度に勝手に日本語入力に切り替わってしまう問題が発生したのを解決したメモ 環境 MacOS 12.6 Apple M2 2022 Google 日本語入力 症状 半角英数で入力をしている状態 ブラウザやエディターなど別のア…
Node.js のバージョン管理ツールに asdf を使っていたのですが VOLTA が速くて良いよとオススメされたので乗り換えてみた ⚡ VOLTA の特徴 ⚡ Rust製で早い プロジェクトディレクトリに入ると自動でバージョンが切り替わる (バージョンは package.json に記録…
VSCode とワークスペースの TypeScript のバージョンが異なっているのが原因。`"typescript.enablePromptUseWorkspaceTsdk": true` を設定しておけば幸せになれる
WordPress の host とかでお安いから使い続けてるみんな大好きさくらのレンタルサーバー! SSH 接続できるのですが毎回パスフレーズ入力するのなんだかな〜と思ってたら公開鍵が使えるっぽいのでやってみたのメモ (PC買い替えたらまた設定するだろうからね…)…
vanilla-extract を使っていてライブラリが element に直接出力する CSS をどうしても上書きする必要があり !important を使おうとしたのですが TypeScript の型でハマったのでメモ vanilla-extract を使って !important を使う ライブラリの出力 CSS を上書…
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…
"Hello, xxxx!": "こんにちは、xxxxさん!" みたいな key-value で翻訳テキストを出せる機能を作っていて PHP で既定の文字列に変数を埋め込む方法を何パターンかやってみたのでメモ sprintf ・ vsprintf 所謂文字列のフォーマットに使うメソッドを利用する…
PHP の文字列中変数展開が奇妙だったのでメモ 環境 PHP v8.2 変数展開 " (ダブルコーテーション)中に {$変数} で変数展開が出来る "Hello, Ichigo!" 定数は展開できない "Hello, {ICHIGO}!" 定数はそのまま出力される 関数も展開できない
PHP v7.3 以降なら json_decode の第4引数に JSON_THROW_ON_ERROR を渡すことでデコード失敗時に JsonException がスローされるようになる
要件 JSON ファイルのキーを. 繋がりにした文字列が渡される キーを辿って最後の値を返す キーを辿って値にたどり着けなかった場合は最後のキーを返す 方針 渡された文字列を explode で分割して配列にする 分割した配列を reduce して JSON のキーを辿って…
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 Vanilla JS で静的サイトを作るテンプレートを作成していて index.html を移動させると色々大変だったのでメモを残しておく 作ったもの デフォルトの Vite プロジェクト $ npm create vite@latest ✔ Project name: … <Project Name> ✔ Select a framework: › Vanilla </project>…
Vite + TypeScript + ESLint で作った環境で Multi-Page App の設定をしようとした際に __direname がエラーになってしまったのでメモ TypeScript Cannot find name '__dirname' Cannot find name '__dirname' のエラーが出る場合は Node の型が無いので @ty…
スクリーンリーダーが読み取れない隠しテキストはスパム判定でペナルティを受ける可能性がある