かもメモ

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

2022-01-01から1年間の記事一覧

2022年の振り返り

今年書いた記事は 87本でした! - 今年の記事のまとめ - 読んで良かった本 - Win / Opportunity / Next Step 本年も個人用メモ帳なブログを見てくれてありがとうございました!来年もよろしくおねがいします〜

PHP array_map でコールバック外にある変数を使いたい

PHP

JavaScript だと map などのコールバック関数の外にある変数にアクセスするのは言語仕様上問題がないが、PHP ではスコープ外となってしまった JavaScript const val = '☆'; const array = ['ハナ', 'シオリ', 'ルリ', 'ビート']; const result = array.map((…

PHP array_map でインデックスを使いたい

PHP

PHP の配列操作で array_map を使う時に index を使う方法 array_map のコールバック変数に index の配列を渡す array_map(?callable $callback, array $array, array ...$arrays): array array_map() returns an array containing the results of applying …

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.…

npm パッケージをアップデートしたい

npm outdated から手動で uninstall -> install するか npm-check-updates パッケージを使って一括でアップデートするのが楽そう

TypeScript 配列から Falsy な値をフィルタリングしたい…したかった…

JavaScript で配列から Falsy な値をフィルターする際に Array.filter(Boolean) をよく使っていたのですが TypeScript だと型がうまく推論されなかったので TypeScript で配列から Falsy な値を取り除く方法を調べてたメモ 結論 TypeScript には is はあるが…

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…

React マークダウンを HTML 変換するライブラリ試してみた

マークダウンテキストを HTML 表示するライブラリ試してみたのでメモ 結論 React で使うなら React-markdown がシンプルで良さそう 調査経緯 ライブラリとしては marked >>> markdown-it > remark の順で使われている remark の内部で使われている remark-pa…

React vanilla-extract 使ってみたのメモ

今関わっているプロジェクトで vanilla-extract という CSS Modules っぽく書ける CSS in JS が使われており初めて触ってみたの感想的なメモ vanilla-extract の特徴 *.css.ts という TypeScript ファイルにオブジェクト形式で CSS を作成して CSS Modude っ…

Vite PostCSS で CSS をネストして書けるようにしたい

PostCSS はデフォルトでは Sass のようなネストでスタイルを書くことができません。 Global 用のスタイルを書くときなどにネストできないとちょっと不便なので PostCSS を使ってネストして CSS を書けるようにしたメモ Vite (react) のプロジェクトに PostCS…

PHP 型チェックを厳密にしたい

PHP

前回 PHP の型宣言が暗黙の型変換をしてしまってそんなものかーと思っていたのですが、厳密にするオプションが有ることを教えてもらったので記録に残しておきます。 環境 PHP v.8.1.2 (onlinephp.io で実行) declare(strict_types=1); 宣言を行うと厳密な方…

PHP オプショナルな引数の初期値を設定したい

PHP

オプショナルな引数の初期値を設定した関数の作成は、関数の仮引数に 型宣言 + デフォルト引数に `null` を設定して、null 合体演算子を使ってデフォルト値を与えるのが良さそう

TIL: 冪等性、参照透過性、純粋関数 についてのメモ

勉強会で 読みやすいコードのガイドライン をやっていて冪等であるのがよい。と書かれていたのですが冪等についてふわふわした感覚だったので調べたメモ。 ⚠ しっかり調べた訳ではないので解釈が間違っている可能性があります :pray: 冪等性 idempotency, id…

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

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

VSCode スペースや役物 `(` 入力で意図しないサジェストが確定されてしまう

`acceptSuggestionOnCommitCharacter` を `false` にする ``` { "editor.acceptSuggestionOnEnter": "off", "editor.acceptSuggestionOnCommitCharacter": false, } ```

CSS だけでタブを作るぞ!

input[type="radio"] を利用した CSS だけで作るタブ 作ったやつ! See the Pen Tab without JavaScript by KIKIKI (@kikiki_kiki) on CodePen. HTML <div class="tab"> <input type="radio" id="tab1" name="tab" checked /> <input type="radio" id="tab2" name="tab" /> <input type="radio" id="tab3" name="tab" /> </div>

WordPress OGP 情報を自前で出力してみる

WordPress で OGP の情報を出力するには All in One SEO などのプラグインを使えば実現できるのですが、WordPress からしばらく離れていたこともあり WordPress 独特のプラグインが GitHub にない場合も多くスター数やどれが現段階でのベストプラクティスな…

WordPress アップロードした画像を width, height 属性無しで取得したい

wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), $size ); で画像の URL を取得するのが良さそう

WordPress ContactForm7 select の先頭の空白 option のテキストを変更したい

Contact Form 7 の DOM をカスタマイズする時は wpcf7_form_elements フィルターを使えばOK

CSS カスタムプロパティ (CSS変数) の数値を反転させて使いたい

CSS

あるCSSカスタムプロパティ(CSS変数)で定義してある数値を反転させた値で使いたいケースが稀にあります。 例 例えば親要素の padding をネガティブマージンで打ち消したいような場合、padding, negative margin の量を CSSカスタムプロパティ(CSS変数)にでき…

CSS完全に理解した

CSS 完全に理解した!!!! [ネタ投稿]

VSCode 設定を json で開きたい

Workbench > Settings: Editor を json にすれば OK!

CSS メディアクエリのブレイクポイントに CSS 変数は使えない

タイトルのままです。 CSS 変数はメディアクエリ (@media) のブレイクポイントの値には使うことができないようです。 CSS 変数をブレイクポイントにしても動作しない :root { --breakpoint-md: 48em; } @media (min-width: var(--breakpoint-md)) { body { c…

Mac M2 ターミナル (iTerm2 zsh) をいい感じにする

前回までのあらすじ ターミナルをいい感じにする設定のメモ ほぼ こちらの記事 のままです 環境・前提 Mac Book Air M1 (2022) mac OS Monterey Homebrew インストール済み 設定ファイルの準備 ~/.zshrc に設定を追加していく。~/.zshrc がない場合は作成す…

Mac M2 Git と Node.js 環境のセットアップ

2017 年から使ってた Intel Mac ちゃんにお別れして新しい M2 Mac Book Air に買い替えてクリーンインストールしたので開発環境を再構築下のメモ ※ これは Zenn にメモしてたものを再録したただけの記事です 環境 Mac Book Air M2 (2022) macOS Monterey 12.…

React シンプルな tooltip コンポーネント作ってみた

React の勘を取り戻す素振りで tooltip コンポーネントを作ってみた。(車輪の再発明) hover で表示するシンプルな tooltip tooltip と表示する対象を同じ div で囲ってしまって親要素の hover で tooltip を表示させる // Tooltip.tsx import { FC, ReactNod…

favicon をダークモード対応したい

webサイトやwebサービスでタブとかに表示される favicon 。favicon もダークモード対応ができるらしいのでやってみたのメモ favicon を SVG にする 昔から .ico みたいなファイル作ってたけど、最近では SVG もサポートされているらしい。SVG は内部にスタイ…

Git リモートリポジトリを変更する時のメモ

git remote set-url origin で変更すればOK ₍ ᐢ. ̫ .ᐢ ₎

MacOS Monterey スクリーンショットの保存先を変更する

デフォルトだとデスクトップにスクリーンショットが保存されるのでスクリーンショット用のディレクトリに保存するようにしたい スクリーンショットの保存先を変更 defaults write com.apple.screencapture location <保存先> でスクリーンショットの保存先を…