tmegos blog

Web developer

GitHubをhttpsで操作するときにusernameすら聞いてくれなくなった

GitHub

GitHubでは2021/08/13からgit操作でのIDとパスワードによる認証ができなくなりました https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/

Parsonal Access Token（PAT）を準備してfetchしてみると

$ git fetch
remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.
fatal: unable to access '' The requested URL returned error: 403

どうして
usernameすら聞いてくれないとは…

どこかに認証情報がキャッシュされていないか探したところ、.netrc に古い認証情報が残っていました

~/.netrc のうち、github.comの項目を削除

対応後、再びusernameを聞いてくれるようになりました

$ git fetch
Username for 'https://github.com': megos
Password for 'https://megos@github.com': # PATを入力する

参考

qiita.com

Material UIでFont iconsを使うときに自動翻訳されないようにする

Material UI React

現象

Google Chromeなどで翻訳機能をONにしていると、Font iconsが翻訳されてアイコンが表示されない

f:id:tmegos:20210801112349p:plain
ハンバーガーメニューのアイコンが出るはずなのに「メ」になっている

f:id:tmegos:20210801112352p:plain
開発者ツールで見ると、「menu」が「メニュー」と訳されてしまっている

続きを読む

Material UI v5でのスタイリングエンジンをemotionからstyled-componentsに切り替える

Material UI

Material UI v5ではスタイリング用のライブラリとしてemotionが使われるようです

next.material-ui.com

Material UIとは別にstyled-componentsを利用している場合、スタイリング用のライブラリが複数存在することになります

Material UIでもstyled-componentsを使いたい場合、@material-ui/styled-engineのエイリアスとして@material-ui/styled-engine-scを指定することで実現できるようです

https://github.com/mui-org/material-ui/tree/623c59dc0a6cc71866cc310a2a9363be2226710b/packages/material-ui-styled-engine-sc

Reactの再レンダリングをWhy Did You RenderとReact Profilerを使って調べる

React

Reactでできたアプリケーションのパフォーマンスチューニングのために、再レンダリングを調査し、改善したときのメモです

方針

  1. Why Did You Renderを使って、propsやstateが同じはずなのに再レンダリングが発生しているところを見つける
  2. 1で見つかった再レンダリングについて、それぞれの原因に応じた修正を行う
  3. Why Did You Renderがログを出さなく（またはログが少なく）なるまで1と2を繰り返す
  4. React Profilerを使って、再レンダリングが発生しているところを見つける
  5. 4で見つかった再レンダリングについて、componentの分割やMemo化を試みる
続きを読む

macOS Big SurでメニューバーからSidecarを有効にできるようにする

システム環境設定から、Dockとメニューバーを選択します

そして、ディスプレイの項目で

  • 「メニューバーに表示」にチェックを入れる
  • 「常に」を選択する

の2つの項目を設定します

f:id:tmegos:20210411004901p:plain:w500

すると、メニューバーにディスプレイのアイコンが追加され、ここからSidecarを有効にできるようになります

f:id:tmegos:20210411005809p:plain:w400

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