Frontend Weekly 2024-07-26

pnpm v9.6.0#

pnpm v9.6.0 が 7 月 21 日リリースされた。

https://github.com/pnpm/pnpm/releases/tag/v9.6.0

新しく追加されたpnpm.executionEnv.nodeVersionフィールドをpackage.jsonに指定することで、ワークスペース内のパッケージ毎に異なる Node.js バージョンを指定できるようになった。

{
"pnpm": {
"executionEnv": {
"nodeVersion": "20.0.0"
}
}
}

また pnpm v9.5 で追加されたcatalogs: プロトコルの修正や改善も行われている。

Node.js v22.5.1#

7 月 17 日にリリースされ、SQLite を扱えるnode:sqliteモジュールが追加されたことで話題になった Node.js v22.5.0 には、npm ciがクラッシュするなどの問題があったが、修正した Node.js v22.5.1 が 7 月 19 日にリリースされた。

https://nodejs.org/en/blog/release/v22.5.1

Chrome DevTools で、Gemini にエラーを聞ける機能が有効化#

Chrome バージョン 125 以降で、Google ID でログインした上で同期を有効化し、さらに言語設定を 「英語(アメリカ)- English(US)」に設定している場合、利用できるようになったとのこと。

https://www.publickey1.jp/blog/24/chrome_devtoolsaigemini.html

https://developer.chrome.com/docs/devtools/console/understand-messages?hl=ja

Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size#

WCAG に準拠したインタラクティブ要素の最小サイズについて、歴史やよくある誤解、実装方法について解説している。

https://www.smashingmagazine.com/2024/07/getting-bottom-minimum-wcag-conformant-interactive-element-size/

SmartHR の「やさしい日本語」切り替え機能ができるまで#

SmartHR が外国人従業員向けの「やさしい日本語」切り替え機能を実装するまでに、どのような工夫がされたかを紹介している記事。どういう言葉を「やさしい日本語」に切り替えるかの判断基準は、日本人向けのサービスを作る場合でも参考になると感じた。

https://note.com/yasanichi_shr/n/n18abfb54a228

Build Design Systems With Penpot Components#

Penpot は、Figma に似たデザインツール。無料枠でコンポーネントからコードを吐くなど十分に使える機能が揃っている上、オープンソースでありセルフホスティングが可能。

https://www.smashingmagazine.com/2024/07/build-design-systems-penpot-components/

Stop using ease-out in your UIs!#

物理的なボタンの動きなどを例に、out系のイージング関数を使うことが適切でない理由について解説する記事。

https://leanrada.com/notes/stop-using-ease-out/

How not to use box shadows#

CSS のbox-shadowプロパティを大量に使って、レンダリングエンジンみたいなことをしている。

https://dgerrells.com/blog/how-not-to-use-box-shadows