O hirunewani blog

Frontend Weekly 2024-04-05

Created at

Deno 1.42、Bun 1.1などについて紹介する。

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がリリースされました。

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についての解説記事。

!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の攻撃に使われたシェルスクリプトの解説記事

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に頼らないといけないケースがある。

You don’t need 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