O hirunewani blog

Frontend Weekly 2024-07-12

Created at

Ladybird Browser Initiative、pnpm v9.5 Catalogs、Next for ESLint、Cloudflareの生成AIによるクローラーブロックなどについて紹介する。

Ladybird

Google広告費の影響を受けない新たなブラウザを作るために、フルスクラッチでWebブラウザを開発するLadybird Browser Initiativeの設立が発表されました。元Github創業者などが関わっています。

Ladybird

なぜブラウザエンジンは 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

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を利用している。

shadcn/ui

集中線をCSSで出すやつ。ただし動く。

CSS Surprise Manga Lines