弊社では週に一度、1時間の技術共有会を行なっています。内容としては、最近のTechなニュースや、気になること、仕事の役に立ちそうな情報をざっくばらんに共有しています。

フォームテストで使える拡張機能

Autofill

webフォームの入力を保存できる！
何度もテストを行うフォームの入力を保存しておくことで、都度入力せずテストがめっちゃラクになった

https://chrome.google.com/webstore/detail/autofill/nlmmgnhgdeffjkdckmikfpnddkbbfkkk?hl=ja

VercelでCron Jobsが出た（Beta版）

• CMSとの連携での定期実行で使えそう

• jsonで簡単に書けそう

※個人アカウントだと制限があるので注意

参考記事：https://vercel.com/guides/how-to-setup-cron-jobs-on-vercel

高さを取得するカスタムフックを作った

offsetHeightだとdisplay: noneにすると高さ0になる
→display: noneでも高さを取得するカスタムフックを作成！

アコーディオンとか見えていない要素の高さを取得したいときに使える

Next.jsのキャッシュ機能がより使いやすくなった

• 「On-demand ISR」でキャッシュが切れたときだけ更新される
  →ジェネレートが毎回走らない

• アクセス過多も防げそう

• 「ページ表示が遅い」に悩まなくなりそう

参考記事：https://blog.microcms.io/on-demand-isr/

filter()をディープコピーと勘違いしてた💦

• 配列の成形でfilter()を使っていたが、バグった

• filterで新しく生成される配列はシャローコピー

参考記事：https://toriton.link/coding/filter_shallowcopy/

:autofillを使用しても背景色を変更できない時

autocompleteが活性化している時、自動補完されたinputには以下のような自動で背景色が各ブラウザによって指定される。

// user agent stylesheet
input:-internal-autofill-selected {
    background-image: none !important;
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
}

:autofillを使用しbackgroundの値を変更したところ反応がないため、以下のようにbox-shadowで変更する必要がある。

input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset;
}

ただ、理由があって色がついているものだから、むやみに変更するものでもなさそう…。

参考記事：https://blog.shg25.com/?p=99