Material UIでFont iconsを使うときに自動翻訳されないようにする
現象
Google Chromeなどで翻訳機能をONにしていると、Font iconsが翻訳されてアイコンが表示されない
Material UI v5でのスタイリングエンジンをemotionからstyled-componentsに切り替える
Material UI v5ではスタイリング用のライブラリとしてemotionが使われるようです
Material UIとは別にstyled-componentsを利用している場合、スタイリング用のライブラリが複数存在することになります
Material UIでもstyled-componentsを使いたい場合、@material-ui/styled-engineのエイリアスとして@material-ui/styled-engine-scを指定することで実現できるようです
Reactの再レンダリングをWhy Did You RenderとReact Profilerを使って調べる
Reactでできたアプリケーションのパフォーマンスチューニングのために、再レンダリングを調査し、改善したときのメモです
方針
- Why Did You Renderを使って、propsやstateが同じはずなのに再レンダリングが発生しているところを見つける
- 1で見つかった再レンダリングについて、それぞれの原因に応じた修正を行う
- Why Did You Renderがログを出さなく（またはログが少なく）なるまで1と2を繰り返す
- React Profilerを使って、再レンダリングが発生しているところを見つける
- 4で見つかった再レンダリングについて、componentの分割やMemo化を試みる
macOS Big SurでメニューバーからSidecarを有効にできるようにする
システム環境設定から、Dockとメニューバーを選択します
そして、ディスプレイの項目で
- 「メニューバーに表示」にチェックを入れる
- 「常に」を選択する
の2つの項目を設定します
すると、メニューバーにディスプレイのアイコンが追加され、ここからSidecarを有効にできるようになります
Catalina以前だと、ディスプレイの設定から「使用可能な場合はメニューバーにミラーリングオプションを表示」にチェックを入れておけばOKだったので、Big Surからは機能自体が無くなってしまったかと思っていました
この設定で、今まで通り簡単にSidecarを使うことができます
NetlifyでNode.jsのバージョンを指定する
NODE_VERSION でバージョンを指定します
指定する場所は、
Site settings > Build & deploy > Environment > Environment variables
です
https://docs.netlify.com/configure-builds/environment-variables/#netlify-configuration-variables
https://docs.netlify.com/configure-builds/environment-variables/#declare-variables
iOS Chromeでresizeイベント後にwindow.innerWidth/innerHeightが異なる問題に対するワークアラウンド
現象
iOS端末を回転させてwindow sizeが変わって、resizeイベント後にwindow.innerWidth/innerHeightを参照しても、実際の値と異なる
例えば画面を横から縦に変えた場合、widthは合っていますが、heightは異なる値を示しています
環境
- iPadOS 14.4.2
- Google Chrome 87.0.4280.77
解決案
※ どうしてもiOS Chromeでresizeしたときに実際のwindow.innerWidth/innerHeightが使いたい！ときに試す
- 画面全体を覆うダミーのdivを置く
position: fixed とか 100vw, 100vh とか - ダミーのdivをResizeObserverで監視して、divのwidth, heightを使う