YouTubeの「Firebase Release Notes」プレイリスト

最新のアップデートの概要を把握するのにちょうど良い

Hollow Knight

JestでFirestoreセキュリティルールのテストを書く

Github ActionsでCIを回せるようになった

Local Emulator Suiteを使ってFirestoreのローカル開発を行う際に初期データ(seeds)を用意する

ローカル管理画面でDeveloperToolsを開くとwindow.firestoreが使える

Next.js + Firebase Functionsが同居するリポジトリでnext buildを実行するとエラーが発生

Type error: Cannot find module 'xxx' or its corresponding type declarations.

Firebase Functionsを呼び出す際にregion指定するとEmulatorではなく本番に接続してしまう

Emulator環境ではregionを指定しないようにした

Next.jsでFirebase Local Emulatorを使う

NEXT_PUBLIC_USE_FIREBASE_EMULATORを設定して切り替えた

「Unit testing security rules with the Firebase Emulator Suite」でセキュリティルールのtestを学ぶ

ローカルでセキュリティルールのtestができるようになったのはありがたい

Hatchfulで作成したロゴのダウンロードメールが届かない

Hatchfulのメルマガ設定を有効にする必要があった

Contentfulで管理しているブログ記事を一括公開する

一括置換以外にも細かい調整を加えたかったため、更新と公開でスクリプトを分けることにした

Assemble with Care

jsでクリップボードにコピーするボタンを実装する

Clipboard.writeText()を使う

Contentfulで管理しているブログ記事を一括更新する

Content Management APIを使う

AWSのコスト異常検出を設定する

意図しない課金を防ぐためにとりあえず設定しておくと良さそう

FirebaseRTCを試す

300行程のコードで二者間ビデオチャット機能が作れるのはすごい

Youtube動画で学ぶTailwind CSS

「Designing with Tailwind CSS」シリーズがとても分かりやすかった。

「Tailwind CSS Tips, Tricks & Best Practices」を観て学ぶ

動画を観ながら実際に手を動かして13個の練習問題を解いた

firebase hostingで301リダイレクト設定を行う

旧ブログから新ブログへリダイレクト

Firebase公式Github ActionsでPull RequestごとにHostingのプレビュー環境を作る

手軽にプレビュー環境で動作確認できるようになったので、継続的なアップデートがやりやすくなった

2020年 買ってよかったもの5選

自炊する機会が増えたこともあり全自動調理器の「ホットクック KN-HW24E-R」が大活躍した一年だった

next exportで書き出した静的サイトのconsoleに _next/data/xxx/.json 404エラーが出力される

Next.jsバージョンをv10.0.4にアップデートした

Refactoring UI: The Book

個人開発で何か作る際にBootstrap感のあるUIになりがち問題を解消したい

バーチャル帰省の環境を整える

Iriun Webcamを使ってpixel3aをwebカメラにした

useSWRInfiniteでinitialDataが認識されない現象が発生

swr@0.3.11にアップデートしたところ正しい挙動になった

Contentful GraphQL APIで最終更新日時を取得する

sys.publishedAtで最終更新日時が取得できる

Next.js 10 + Tailwind CSS 2.0 でAMP対応(hybrid)を行う

next/ampのhybridモードを使い通常ページとAMPページを生成し、PostCSSでCSSの容量削減を行いinline cssとして埋め込み

Steam Winter Sale

期間は1月5日まで

Next.js9 + Tailwindcss2.0環境で Error: true is not a PostCSS plugin エラーが発生

Next.jsを最新バージョンにアップデートした

use-query-paramsを使ってクエリ文字列を扱う

useQueryParam hookで手軽にクエリ文字列が取得できる

@tailwindcss/typographyにもダークモードを適用する

tailwind.config.jsにtypography設定を追加

Tailwind CSSでダークモード対応をする

classを指定してユーザがダークモードを切り替えられるようにした

Charles Proxyのライセンスが30% OFFセール中

Black Fridayセールとのこと

Next.jsでブログ記事の構造化データ(JSON-LD)を生成する

リッチリザルト テストで結果を確認

Next.js + Prism.jsでコードのSyntax Highlightをする

highlight.jsから軽量のPrism.jsに移行

Next.jsで動的URLをRewriteする

next.config.jsにrewritesを追加