O hirunewani blog

Frontend Weekly 2023-10-13

Created at

Chrome 118、Rollup 4.0.0、ViteConf 2023、pnpm 8.9.0、Bun v1.0.6、Lit 3.0、Biome と ESLint の lint ルールの互換性について紹介する。

Chrome 118

https://developer.chrome.com/blog/new-in-chrome-118/

Chrome 118がリリース。

  • ブラウザ拡張によって登録されたService Workerから、WebUSB APIを利用できるように変更
  • Payment Request及びSecure Payment Confirmationからuser activation requirementが削除

https://github.com/w3c/secure-payment-confirmation/issues/216

CSS @scopeルールの追加

@scopeルールを使用すると、スタイルの範囲を特定のスコープに制限することが出来る。

https://developer.chrome.com/articles/at-scope/

次のように利用できる。

<style>
  @scope (.first-container) {
    .main-title {
      color: grey;
    }
  }
  @scope (.second-container) {
    .main-title {
      color: mediumturquoise;
    }
  }
</style>
<div class="first-container">
  <h1 class="main-title">I'm the main title</h1>
</div>
<div class="second-container">
  <h1 class="main-title">I'm the main title, but somewhere else</h1>
</div>
@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

サンプルコード：https://stackblitz.com/edit/js-wyuqib?file=index.html

Rollup 4.0.0

https://github.com/rollup/rollup/releases/tag/v4.0.0

Rollup 4.0.0がリリース。

  • Node.js 14/16のサポート終了
  • Acornの代わりにSWCをパーサに使うように変更

ViteConf 2023

https://viteconf.org/23/replay/welcome

ViteConfが開催された。

State of Vite (ViteConf 2023)

https://viteconf.org/23/replay/vite_keynote

ESBuildとRollupで差分が発生してしまう問題に対処するため、Rollup互換のバンドラRolldownをRustで再実装するとのこと。

pnpm 8.9.0

https://github.com/pnpm/pnpm/releases/tag/v8.9.0

pnpm v8.9.0がリリース。

macOSおよびWindows Dev Driveで、デフォルトでハードリンクではなくreflinkを利用するようになったキャッシュからのインストール速度が改善する。

Bun - v1.0.6

https://bun.sh/blog/bun-v1.0.5

https://bun.sh/blog/bun-v1.0.6

Bun v1.0.5及びBun v1.0.6がリリース。

  • npmのoverrides及びyarrnのresolutionsの対応
  • peerDependenciesを自動でインストールするように変更

Auto-install – Runtime | Bun Docs

https://bun.sh/docs/runtime/autoimport

Bunでは、自動で依存関係をインストールする機能の実装を予定している。

Lit 3.0

https://lit.dev/blog/2023-10-10-lit-3.0/

Lit 3.0がリリース。

  • IE11のサポート終了
  • パッケージES2021として配布するように変更
  • 非推奨APIの削除
  • Stage 3 Decoratorのサポート
  • 新しいLitテンプレートコンパイラー@lit-labs/compilerの公開
  • Preact Signalsを統合するパッケージ@lit-labs/preact-signalsの公開
  • LitコンポーネントをラップしたReactコンポーネントを作れる@lit-labs/reactや、@lit-labs/taskはラボを卒業し@lit/reactと@lit/taskに移行。

文字の視認性とコントラストに関する新基準APCAを学ぼう

https://gihyo.jp/list/group/文字の視認性とコントラストに関する新基準APCAを学ぼう#rt:/article/2023/08/apca-02

WCAG3にて現行のコントラストに代わる基準として開発・検討されているAPCAについての解説記事。APCAでは、コントラストを色の明るさの知覚的な差を表すLc値で表す。そのためAPCAでは、コントラストの基準が背景色とテキスト色などだけでなくフォントサイズやウェイトを加えたテーブルで表現される。これにより、十分なコントラストがあるように見えるが視認性が足りなく見えるといったケースをケアできる。

Next.js 13 vs Remix: An In-depth case study

https://prateeksurana.me/blog/nextjs-13-vs-remix-an-in-depth-case-study/

Next.jsとRemixで同じアプリを作りながら比較する記事。レイアウト、データ取得、ストリーミング、データ変更、キャッシュなどについて比較している。

Biome と ESLint の lint ルールの互換性

https://zenn.dev/cybozu_frontend/articles/biome-eslint-compatibility

ESLintでよく利用されるrecommendedルールとBiomeのルールの対応表。8割以上はBiomeでも実装されている。一方、BiomeではTypeScriptの型情報を扱えないため、型情報が必要なルールはサポートしていない。