Prettier 3.0リリースなど : Cybozu Frontend Weekly (2023-07-11号)

こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの じまぐ です。

サイボウズでは毎週火曜日に Frontend Weekly という「1週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。

今回は、2023/07/11 の Frontend Weekly で取り上げた記事や話題を紹介します。

取り上げた記事・話題

Prettier 3.0: Hello, ECMAScript Modules!

https://prettier.io/blog/2023/07/05/3.0.0.html

Prettierの3.0がリリースされました。デフォルト動作の変更点として、Markdownでの日本語文章中でのアルファベット前後のスペース挿入がデフォルトでは入らなくなったり、JSでオブジェクトと配列の末尾カンマが all になりました。

Safari 17 Beta Release Notes

https://developer.apple.com/documentation/safari-release-notes/safari-17-release-notes

Safari 17 Betaのリリースノートです。Accessibilityの改善やCSSの機能追加、そのほかバグ修正が多く含まれています。HTMLのpopover属性がサポートされるので、もうすぐブラウザ間での実装が揃いそうです。

Kuma UI

https://www.kuma-ui.com/

ゼロランタイムでヘッドレスなCSS in JSであるKuma UIのv1.0.0がリリースされました。Next.jsのApp Routerにも対応しており、今後の動向に注目です。

CSS Anchor PositioningがWorking Draftに

https://www.w3.org/news/2023/first-public-working-draft-css-anchor-positioning/

要素からの相対位置を指定できるAnchor PositioningがWorking Draftになりました。Anchor Positioningについてはこちらの記事が参考になります。

https://zenn.dev/cybozu_frontend/articles/css-anchor-positioning

Deno 1.35: A fast and convenient way to build web servers

https://deno.com/blog/v1.35

Denoの1.35がリリースされました。Deno.serve()のstableリリースや、npmパッケージの互換性が向上していたり、Language Server Protocolの改善などが含まれています。

Understanding SVG Paths

https://www.nan.fyi/svg-paths

SVGのpathについてインタラクティブに学べるサイトです。

Announcing typescript-eslint v6

https://typescript-eslint.io/blog/announcing-typescript-eslint-v6/

typescript-eslint v6の変更点について紹介している記事です。多くの変更があり、ルールの分類や名前が変わるなどの破壊的変更を含んでいるので、v5からv6へのアップグレードは注意深く行う必要がありそうです。

Introducing the MDN Playground: Bring your code to life!

https://developer.mozilla.org/en-US/blog/introducing-the-mdn-playground/

ブラウザ上でコードを書いてプレビューできるMDN Playgroundの紹介です。似たようなサービスはすでに多くありますが、MDN PlaygroundはMDNでのシームレスな体験を目的に作られたそうです。

MDNのサンプルコードがMDN Playgroundによって、静的なサンプルコードであったものが手を加えて結果がどう変わるかを体験できるようになります。