見出し画像

Wiz Engineer 技術共有会 5月第4週

ページ遷移(Link、aタグ、ブラウザバックなど)するときに確認を促すカスタムフックを作った話

用途はフォームの入力内容に変更があった場合にページ遷移しようとすると「まだ入力内容が保存されてません」のようなメッセージを出したいときに使う
※react-routerにはこの機能があるけどnext.jsのuserRouterにはなかったので作った

↑ChatGPT先生との協働作業 (どういう質問を投げかけるかーってのが大事)
・まずは簡単なところから質問して、そこから精度をあげていく…!
・READMEも書いてもらった・・・!!

imgタグの正しい指定方法

ファーストビューにloading="lazy"は入れない方が良い(googleのガイドラインにも表記)
loading=”eager”を指定した方が良いのでは??
→基本的にはdecoding=”async”を指定しておいた方が良い

loading="eager"は明示的に「遅延読み込みしない!」と宣言するものFV部分は、必ず読み込ませたいものがあるはずなので、loading="lazy"はつけない遅延読み込みの仕組みブラウザが画像の位置を把握→画像の近くまでスクロール→損とアイミングで読み込み開始FVの画像に設定すると「あれ、表示位置だけど画像なくね?」ってなって、CSSで正しく設定しているはずなのに、おかしくなる可能性あり!!decoding属性:画像のデコード方法を制御する属性画像のデコードとレンダリング処理をどうするかーっていうもの

【コピペ可】imgタグの正しい指定方法【2023年最新版】

『便利機能』VSCode で 定義へ移動などしたあとに 戻る には Ctrl + - (Mac) だ 

直前に見てたものに戻るときに使える…!(便利


この記事が参加している募集

オープン社内報

この記事が気に入ったらサポートをしてみませんか?