Frontend Weekly 2023-10-13

2023-10-13

Tech

Frontend weekly

/

Chrome

/

Bun

/

Vite

/

APCA

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/

次のように利用できる。

1
<style>
2
  @scope (.first-container) {
3
    .main-title {
4
      color: grey;
5
    }
6
  }
7
  @scope (.second-container) {
8
    .main-title {
9
      color: mediumturquoise;
10
    }
11
  }
12
</style>
13
<div class="first-container">
14
  <h1 class="main-title">I'm the main title</h1>
15
</div>
16
<div class="second-container">
17
  <h1 class="main-title">I'm the main title, but somewhere else</h1>
18
</div>

1
@scope (.component) to (.click-here, .link-here) {
2
  div {
3
    color: purple;
4
    text-align: center;
5
    font-family: sans-serif;
6
  }
7
}

サンプルコード：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 では、コントラストの基準が背景色とテキスト色などだけでなくフォントサイズやウェイトを加えたテーブルで表現される。これにより、十分なコントラストがあるように見えるが視認性が足りなく見えるといったケースをケアできる。