Frontend Weekly 2024-07-12
Ladybird Browser Initiative、pnpm v9.5 Catalogs、Next for ESLint、Cloudflareの生成AIによるクローラーブロックなどについて紹介する。
Ladybird
Google広告費の影響を受けない新たなブラウザを作るために、フルスクラッチでWebブラウザを開発するLadybird Browser Initiativeの設立が発表されました。元Github創業者などが関わっています。
なぜブラウザエンジンは 1 つではダメなのか? または Ladybird への期待 | blog.jxck.io
Google広告費の影響を受けない新たなWebブラウザが必要だと、スクラッチからWebブラウザを開発する「Ladybird Browser Initiative」、元GitHub創業者らが立ち上げ
pnpm v9.5 Catalogs
pnpm v9.5がリリースされました。
https://github.com/pnpm/pnpm/releases/tag/v9.5.0
Catalogsという機能が追加されています。
Catalogsは、複数の依存関係のバージョン範囲を再利用可能な定数として利用する仕組みです。
# pnpm-workspace.yaml
packages:
- packages/*
catalogs:
# Can be referenced through "catalog:react17"
react17:
react: ^17.0.2
react-dom: ^17.0.2
# Can be referenced through "catalog:react18"
react18:
react: ^18.2.0
react-dom: ^18.2.0
次のように利用します。
{
"name": "@example/components",
"dependencies": {
"react": "catalog:react18"
}
}
pnpm publish
を実行すると、catalog:
は実際の値に置き換えらます。
{
"name": "@example/components",
"dependencies": {
"react": "^18.2.0"
}
}
Next for ESLint
ESLintの今後の開発計画についての記事。JavaScript以外の言語で扱えるようにするLanguage plugin、JavsScript関連機能の @eslint/js
への切り出しなどが予定されている。
What’s coming next for ESLint - ESLint - Pluggable JavaScript Linter
Others
Cloudflareが、生成AIによるクローラーをワンクリックでブロックする機能を無料で提供開始。特にByteDanceの「Bytespider」、OpenAIの「GPTBot」、Anthropicの「Claudebot」、Amazonの「Amazonbot」などによるクローリングが多いと分析されている。
Cloudflare、すべての生成AIによるクローラーをワンクリックでブロックする機能を無料で提供開始
.tsファイルを直接実行するのにtsxで特に困っていない | Marginalia
Node.jsでTypeScriptのコードを実行できるようになるかも - hiroppy’s site
2024年6月時点のSanitizer APIの現状について。
Sanitizer APIのその後 | フロントエンドBlog | ミツエーリンクス
Reactベストプラクティス2: SWRを正しく使うには - Hello Tech
ヤコブ・ニールセンの10のユーザビリティヒューリスティックスの1つ目にあたる「システム状態の可視性」、情報をちゃんと表示することの重要性について。
システム状態の可視性(ユーザビリティヒューリスティックNo.1)
良書の翻訳。OOUIなどの上野学・監訳、ソシオメディア株式会社・訳。まえがきを読んで気に入れば買うといいかも。
16年ぶりの日本語版登場に刮目せよ! 『ABOUT FACE インタラクションデザインの本質』監訳者まえがきを先行公開! | Web Designing
PlaywrightによるWebアプリの自動テストから良いテストの書き方まで学べる[入門]WebフロントエンドE2Eテスト、良さそう。Playwrightのタイムトラベルデバッグなどにも触れられている。
[入門]Webフロントエンド E2E テスト を出版しました | フューチャー技術ブログ
shadcn/uiにチャートコンポーネントが追加された。rechartsを利用している。
集中線をCSSで出すやつ。ただし動く。