Frontend Weekly 2024-04-05
Deno 1.42、Bun 1.1などについて紹介する。
- # Deno 1.42: Better dependency management with JSR
- # Bun 1.1
- # Nuxt: Looking forward・Nuxt Blog
- # !importantで上書きできないブラウザのスタイルとは
- # もうHTMLをXHTMLで書くことは推奨されないという話
- # Timeline of the xz open source attack
- # App Router移行時に0.01%の確率でCSR遷移が404エラーになる
- # You don’t need Node.js
- # useFormStateがuseActionStateに変更された
- # Flow, component & hook declarations
- # mouseover 中に表示される DOM のデバッグ
- # vlt
- # Flaky Tests In React: Detection, Prevention and Tools
- # Cloudflare D1 GA
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をリリース予定。
Nuxt: Looking forward · Nuxt Blog
!importantで上書きできないブラウザのスタイルとは
!Importantで上書きできないスタイルとOrigin and Importanceについての解説記事。
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の攻撃に使われたシェルスクリプトの解説記事
research!rsc: The xz attack shell script
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などでも利用できるようになった。
useFormState から useActionState に移行する
Flow, component & hook declarations
Flow v0.233.0で、React用のcomponentとhook構文が追加された。これらをfunctionの代わりに利用することで、refのベストプラクティスの強制や、propsが深い読み取り専用であることの確認や、HooksがReactのプログラミングモデルに則しているが確認される。
New Flow Language Features for React
mouseover 中に表示される DOM のデバッグ
今までの手法を過去のものにしたChrome 123 DevToolsに追加された “Emulate a focused page”
mouseover 中に表示される DOM のデバッグ | blog.jxck.io
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