Saqoosha

2021.02.10

Diary

リストページの画像量が 20MB とかになってたので next/image で画像の最適化を試していたのだが Safari で謎にバグっていて微妙につかえないので用意されているコンポーネントを使わずに最適化 API だけつかったらまあいい感じに削減できたのであとは lazy loading 対応していったん終了。久しぶりり酒飲んだので以下省略。

2021.02.11

Diary

WordPress のエディタ用のテーマをいじってたら突然まったく CSS が反映されなくなって全然わけわからんので一行ずつけずっていったら @import url で Google Fonts を呼んでるところがダメだったみたいで wp_enqueue_style でつっこんだら直ったなんだこれわ。Web font で日本語フォント読み込むと 1 ファイルでも数 MB になっちゃうからウェイト違いいっぱいつかうと重いんよなどうしよっかなと思ってたんだけど Chrome で通信してるの観察してると全然フォント重くなくってどうなってんだこれわと Google Fonts で読み込んでる CSS の中をみたら unicode-range つかって 100 個以上の細かい単位に分けてあって必要な文字が含まれてるやつだけをダウンロードしてたかしこい。

2021.02.12

Diary

サイトの仕組みはほぼ完成したのでほとんど気づかれないようなとことかちょっとしたあれ?っていうところを調整しまくるフェーズ。Next.js のルーティングまわりはいちおう i18n 対応してるのでふつうのサイトはふつうに実装すれば機能的には問題ないんだけど今回のサイトはエレメントの出現エフェクトが重要なのでそのまんまだと単純にテキストリソースがいれかわるだけになってショボイかつ切り替わったことがわからない場合もあるのでフルリロードしないとだめか?と一瞬思ったけど React の Component 入れ替えは key プロパティみてるんだったなーと根元の方のコンポーネントの key に locale をつっこんだら locale 切り替えで Component が入れ替わってめでたしめでたし。(ずとまよ THE FIRST TAKE!!!