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

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

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 …

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

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

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…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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