Tips
⛳️ 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 認証をかけている…
TypeScript React で ref を使ったタイマーを使った処理を書いていて予期しない ESLint のエラーが出たのでメモ ESLint no-unused-expressions error が発生 const timerRef = useRef<number | null>(null); // … timerRef.current && clearTimeout(timerRef.current); // =</number>…
input[type="number"] で小数を入力可能にするには step 属性を使う必要がある
レイアウト的に別ブロックになってるけど続き順のリスト表現にしたいとか、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…
ドメインの情報が clientHold になってしまっていた。ムームードメインでは WHOIS 情報を代理公開にしているとドメインの認証が完了せず、ドメインがロックされてしまう
リストの間隔は gap で指定したい場合、flex だと各アイテムの width を設定しなければならず面倒 例えば上記の画像のように gap: 24px で 3つ並びにしたいと思った場合、リストアイテムの width を 33.333% にするとアイテム間の間隔分が足らず 100% を超え…
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 を上書…
