Frontend Weekly 2024-04-05
Deno 1.42: Better dependency management with JSR
2024 年 3 月 28 日に Deno 1.42 がリリースされました。
Deno 1.42: Better dependency management with JSR
deno publish を利用した JSR へのパッケージの公開、 deno add を利用した JSR 及び npm からのインストールが可能になりました。
またリントを自動修正する deno lint --fixの追加など。
Bun 1.1
2024 年 4 月 1 日に Bun 1.1 がリリースされました。
Windows がサポートされました。また Bun は Node.js の代替となることを目指しており、さらなる互換性の向上が行われました。Node.js の組み込みモジュールをそのままバンドル出来るようになりました。
Nuxt: Looking forward・Nuxt Blog
Nuxt の 2023 年の振り替えりと 2024 年の展望。nuxt/scripts、nuxt/a11y、nuxt/auth、nuxt/hints をリリース予定。
!important で上書きできないブラウザのスタイルとは
!Important で上書きできないスタイルと Origin and Importance についての解説記事。
!important で上書きできないブラウザのスタイルとは
CSS のカスケードの優先度は、基本的に!important関連の指定が最上位になるが、さらに!imporant関連の優先順位を決定するのが Orign and Importance。
CSS Cascading and Inheritance Level 4
ユーザーエージェント内での!importantが 2 番目に書かれているものの実質的に最強なため、これを上書きすることは出来ない。Chrome と Safari ともに placeholder の line-height: initial が!importantで指定されている。
もう HTML を XHTML で書くことは推奨されないという話
もう HTML を XHTML で書くことは推奨されないという話 | フロントエンド Blog | ミツエーリンクス
XML が推奨されないという Warning を追加する PR が whatwg に投げられた。
https://github.com/whatwg/html/pull/10239
まだマージされたわけではないので確定ではないが、既にメンテナが approve されており、ほぼ確定。他の人がコメントするのに数日猶予を与えているらしい。
Timeline of the xz open source attack
技術というより、人の脆弱性を付いた攻撃。OSS に限らず発生しうる。
research!rsc: Timeline of the xz open source attack
これは xs の攻撃に使われたシェルスクリプトの解説記事
App Router 移行時に 0.01%の確率で CSR 遷移が 404 エラーになる
App Router と Pages Router を併用した状況で、base を指定すると意図しない遷移が行われるという話。
App Router 移行時に 0.01%の確率で CSR 遷移が 404 エラーになる - とろろこんぶろぐ
Next.js では、App Router と Pages Router を併用した場合、リンク先がどちらかを判定するのに Bloom Fliter アルゴリズムを利用している。
https://ja.wikipedia.org/wiki/ブルームフィルタ
これは確率的データ構造であり、Next.js v14 の実装では 0.01%の確率で False Positive する。
Routing: Linking and Navigating
これによって記事のバグが発生していた。記事の状況でなくとも、誤判定がされると同じ Router 間でもハードリロードが行われるようになる。
You don’t need Node.js
Deno や Bun の方が Node.js より Web 標準に従っている。他に速度や Deno や Bun が標準で TypeScript をサポートしていることに触れている。記事にも書かれているが、実際のところ現状、裏では Node.js が走っていたり、npm レジストリへの publish など Node.js に頼らないといけないケースがある。
ただ Deno は 1.42 で JSR を標準サポートしたため、Node.js に頼らないといけない状況がほぼなくなったように思われる。
useFormState が useActionState に変更された
useFormState の扱うアクションはそもそも form に関連しておらず、これが useFormStatus のように pending を返す場合、名前に反して form に紐づいた状態を返さない問題などがあった。また react-dom ではなく react から export するようになり、react native などでも利用できるようになった。
Flow, component & hook declarations
Flow v0.233.0 で、React 用の component と hook 構文が追加された。これらを function の代わりに利用することで、ref のベストプラクティスの強制や、props が深い読み取り専用であることの確認や、Hooks が React のプログラミングモデルに則しているが確認される。
mouseover 中に表示される DOM のデバッグ
今までの手法を過去のものにした Chrome 123 DevTools に追加された “Emulate a focused page”
vlt
npm に代わる新しい JavaScript のパッケージシステム「vlt」を開発している vlt technology に、npm の作者や今まで npm に関わったメンバーが参加したらしい。
npm の問題を指摘しているものの具体的に vlt がどういうソリューションを提供するか言っていないため、特に言うことがない。
JavaScript パッケージシステム「npm」は巨大なバグを抱えていると指摘し、新たなパッケージシステムを開発する「vlt」。npm 作者らの参加を発表
Flaky Tests In React: Detection, Prevention and Tools
testing-library を使った React の Flaky テストが発生する一般的なパターンと、その一般的な調査方法。
Flaky Tests In React: Detection, Prevention and Tools - Semaphore
Cloudflare D1 GA
Making state easy with D1 GA, Hyperdrive, Queues and Workers Analytics Engine updates
https://twitter.com/kenyat1989/status/1774742317565665481?s=46&t=5aKo98e-8UCiIf8YhreJ9A
Top 10 Cognitive Biases in Product Design
kynd.info さんの数学や物理を利用した描画パターン集がたくさん投稿された
https://kyndinfo.notion.site/Fractal-309fe266dbed4af7984c304c2d673906
https://kyndinfo.notion.site/Repetition-60e4c6223b424948893b4a0d9368d4d0
https://kyndinfo.notion.site/Tiling-6bc7c5c29dc442a4ab3c63c233f00ca7