みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Intl.DateTimeFormatを使って月を英語表記にする 📅

最近、(new Date).getMonth()の結果を英語にする機会がありまして、愚直に、 [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ][(new Date).getMonth()]; 的なコードを書いた…

特殊文字を使って擬似要素(before, after)に半角スペースを設定する 📝

CSS

ものすごく特殊な例な気がしますが、擬似要素に半角スペースを設定しようと思い、SCSSで、 p { &:before, &:after { content: ' '; } } と書いてみたのですがダメでした。HTMLで文頭、文末に半角スペースを書くのであれば実体参照を使うところなのですが、 p…

ndenvからnodenvに乗り換える 🚃

Mac

github.comいままではNode.jsのバージョン管理にndenvを使っていたのですが、 [Deprecated] nodenv is better alternative Please consider to use nodenv. ndenv repository is not maintained actively. いつの間にかDeprecated(非推奨)になっていたこと…

Mac(macOS Monterey)でスクリーンショットで生成されるファイル名を変更したり、プレビューを非表示にしたりする 📷

Mac

ファイル名からタイムスタンプの削除 ファイル名の変更 保存場所の変更 プレビューを表示せず即時保存 Macでは、 「command」+「shift」+ 「3」 「command」+「shift」+ 「4」 「command」+「shift」+ 「5」 で、画面のスクリーンショットを撮影することがで…

Appleシリコン(M1)のMacにNode.js(15.X)を導入する(.ndenv/plugins/node-build/bin/node-build: line 144: pushd: node-v14.0.0-darwin-arm64: No such file or directory BUILD FAILEDに立ち向かう) 💻

Mac

Appleシリコン(M1)のMacにndenvを使って、15.XのNode.jsをインストールしようとした際、 ndenv install v15.0.0 Downloading node-v14.0.0-darwin-arm64.tar.gz... -> https://nodejs.org/dist/v14.0.0/node-v14.0.0-darwin-arm64.tar.gz .ndenv/plugins/n…

html2canvasでページのスクリーンショットを撮る 📸

html2canvasを使ってHTMLの画像化を試みました。

JavaScriptの力でクリック無しでファイルをダウンロードできるか検証する 📦

developer.mozilla.orgaタグに付与することで、クリックした際にファイルをダウンロードできるdownload属性。 非常に便利に使えるので、これまでも、aタグのダウンロード属性をつかった検証は何度か行ってきました。blog.kimizuka.org blog.kimizuka.org今回…

placeholder属性の色を変更する(最新ブラウザに限ればプレフィックスが不要なことに気づく) 🎨

CSS

これまで、 input::placeholder { color: red; } input::-moz-placeholder { { color: red; } input::-ms-input-placeholder { color: red; } という感じでベンダープレフィックスをつけて実装していたのですが、改めてMDN Web Docsを確認したところ、IE以外…

Googleスプレッドシートに描いた16×16のドット絵を配列に変換するGASを書く 🖼

スプレッドシートに描いた16×16のドット絵を配列に変換するGASを書きました。 上記のドット絵が、 const pictures = [ ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffff…

Next.jsでコンポーネントをインポートするときにNuxt.jsのように「~」や「@」を使いたい 💻

これまで、Next.jsでコンポーネントをインポートする際は、相対パスを使っていたのですが、コンポーネントを別のディレクトリに移動した際に、パスを書き換えなければならないこともしばしばありまして。Nuxt.jsのように「~」とか「@」を使う方法はないもの…

Nextプロジェクトにbabel-plugin-inline-react-svgを導入したときに、Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.と表示される時の対策 ✌️

ことの発端 以前、Next.jsでSVGをコンポーネントのように扱う方法を調べました。blog.kimizuka.org今日もまた、いつものようにbabel-plugin-inline-react-svgを使ってSVGを読み込もうとしたのですが、 Error: Element type is invalid: expected a string (f…

GAFAのfont-familyを調べて、フォントの指定を再考する 📝

CSS

結論 調査結果 Google Apple Facebook Amazon Microsoft Twitter Instagram フォントの指定を考える ウェブサイトを作るときの重要な要素のひとつにフォントの選定があります。 最近はもっぱらNoto Sans Japaneseを使うことが多いのですが、いま改めて有名ウ…