イラレやフォトショなどのデザインツールでみる透過を表すアレ、透明グリッドをCSSで表現する方法紹介します。

Gatsby.js v2.26で新しい機能として追加された「File System Route API」を試してみました。CMSからデータを取得して動的なページが1ファイルだけで生成できるようになりました。

Gatsby.jsでWebフォントを読み込み方としてTypegraphy.jsとFontSourceの2パターンを紹介します。公式ドキュメントにあるgatsby-plugin-web-font-loaderのやり方とtypefacesのやり方は古くなっているので注意が必要です。

Dockerイメージ node:10-alpine でPuppeteerを起動しようとしたが、puppeteer.launch()で止まったままエラーも吐かずにTimeoutしてしまう現象が起きた。原因はapkレポジトリのバージョンが古く、古いchromiumがインストールされていたのが原因だったので。apkレポジトリのアップデートして改善した。

個人開発をするのに必ずといって必要になるのがAdobe CC。Adobe Creative Cloudのコンプリートプランを公式サイトから購入しようとすると、年間で72,336円もかかるんですよね。それがデジハリのAdobeマスター講座を受講することで、39,980円税込でAdobeCCを利用できるようになります。

AntdのTooltipのデフォルト動作は、Tooltipにカーソルが移動しても表示されたままになる。ただ、この動作だとTooltipが邪魔になる場合があるので、対象の要素の外にカーソルが移動したらTooltipが非表示になってほしい。そのためには、mouseLeaveDelayオプションを0に設定することで実現できる。

React Nativeのバージョンが0.61以下の場合、最新のReact Native Debuggerだと動かない。逆も同様に、React Native v0.62以上の場合、古いReact Native Debuggerだと動かない。なので、既存のプロジェクトと新しいプロジェクトで異なるバージョンのReact Nativeを使っている場合、React Native Debuggerもそれぞれに合わせる必要がある。2つのバージョンのReact Native Debuggerが共存できるインストール方法を紹介します。

Reat Nativeの開発ツール Expoの検証（デバッグ）できるツール React Native Debugger の導入方法を紹介。インストール後ひと手間加えて起動をラクにします。

Dockerの開発環境を初期化して、開発し直したいときに役立つdownコマンドの紹介。docker-compose down --rmi local -v だけで、関係するコンテナ・イメージ・ボリューム・ネットワークを一括削除することができる。デフォルトでは、コンテナとネットワークしか削除してくれない。--rmiはイメージを削除するオプション。-vはボリュームを削除するオプションとなっている。

お名前メールをCloudflareなどの外部ネームサーバーから利用する方法です。月77円で20ドメインのメールアドレスが管理できるメール専用サーバーのお名前メールをMXレコード・TXTレコードを設定することで外部ネームサーバーから利用できたので紹介します。

ローカル開発環境でのSSL認証が必要な時ってありますよね。mkcertというツールを使えば簡単にhttps://localhostでアクセスできるようになります。今回は、Nuxt.jsへの実装例を紹介。

Nuxt.js SPA・SSR対応のGTMからGAのページトラッキングの設定方法です。nuxt-community/gtm-moduleリポジトリの@nuxtjs/gtmを使った2020年最新の設定方法になります。@nuxtjs/google-tag-managerは廃止されメンテナンスされなくなるので、@nuxtjs/gtmを使いましょう。