Frontend Weekly 2023-09-18

Chrome 117#

https://developer.chrome.com/blog/new-in-chrome-117/

1
.card {
2
  transition: opacity 0.25s, display 0.25s;
3
  transition-behavior: allow-discrete;
4
}
5

6
.card.fade-out {
7
  opacity: 0;
8
  display: none;
9
}

1
/*   IS-OPEN STATE   */
2
dialog[open] {
3
  translate: 0 0;
4
}
5

6
/*   EXIT STATE   */
7
dialog {
8
  transition: translate 0.7s ease-out, overlay 0.7s ease-out,
9
    display 0.7s ease-out allow-discrete;
10
  translate: 0 100vh;
11
}
12

13
/*   BEFORE-OPEN STATE   */
14
@starting-style {
15
  dialog[open] {
16
    translate: 0 100vh;
17
  }
18
}

1
const inventory = [
2
  { name: "asparagus", type: "vegetables", quantity: 5 },
3
  { name: "bananas", type: "fruit", quantity: 0 },
4
  { name: "cherries", type: "fruit", quantity: 5 },
5
];
6

7
const result = Object.groupBy(inventory, ({ type }) => type);
8

9
/* Result is:
10
{
11
  vegetables: [
12
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
13
  ],
14
  fruit: [
15
    { name: "bananas", type: "fruit", quantity: 0 },
16
    { name: "cherries", type: "fruit", quantity: 5 }
17
  ],
18
}
19
*/

1
.card-group {
2
  display: grid;
3
  gap: 16px;
4
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
5
  justify-content: center;
6
}
7

8
.subgrid .card {
9
  display: grid;
10
  grid-template-rows: subgrid;
11
  grid-row: span 4;
12
  gap: 16px;
13
}

Next.js v13.5#

2023 年 9 月 19 日に Next.js v13.5 がリリースされました。ローカル開発のパフォーマンス改善が主な内容です。サーバーの起動や HMR の高速化、メモリ使用量の削減、next/image の改善などが行われました。

https://nextjs.org/blog/next-13-5

Nuxt 3.7#

https://nuxt.com/blog/v3-7

Web Stream とResponseのサポート、head 要素内のレンダリング最適化、Vite のアップデート及びマイナーバージョンの固定を解除、Nitro や TypeScript の設定のアップデートなどが行われました。

Bun v1.0#

https://bun.sh/blog/bun-v1.0

Bun v1.0 がリリースされました。Bun は、Node.js 互換のランタイム、トランスパイラ、バンドラ、タスクランナー、パッケージマネージャー、bun testによるテスト機能など、JavaScript/TypeScript のツールチェーンを統合したものです。

また多くのケースで、Node.js よりも高速に動作します。

Astro v3.0#

https://astro.build/blog/astro-3/

Astro は、さまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。

Astro v3.0 では、レンダリング速度の向上や画像最適化に加え、View Transitions が正式に追加され、React の Fast Refresh が動作するようになりました。

Astro Studio#

https://studio.astro.build/

Astro に特化したホスティングサービスとして Astro Studio が発表されました。2024 年初頭での一般公開が予定されています。

Biome#

https://biomejs.dev/blog/annoucing-biome

いくつか事情で開発が滞っていた Rome を、コアチームがフォークし今後は Biome として開発を行なっていくことを発表しました。

Announcing native npm support on Deno Deploy#

https://deno.com/blog/npm-on-deno-deploy

Deno Deploy がnpm:を介して npm モジュールの実行をネイティブにサポートするようになりました。

v0.dev - AI tool that is effectively Midjourney for React#

Vercel が、プロンプトから shadcn/ui と Tailwind CSS を利用した React のコードが生成する AI ツールをリリースしました。

https://v0.dev/

Lodash switch to TypeScript, Bun#

Lodash が突如すべての Issue と PR を閉じたため、Lodash が終わったというような誤報がありましたが、Lodash の作者のツイートを見るに TypeScript と Bun に移行する前段階として行なったようです。

https://x.com/jdalton/status/1703136792541798429?s=20

Deno 1.37: Modern JavaScript in Jupyter Notebooks#

Deno 1.37 がリリースされました。Jupyter Notebook で Deno を利用できるようになりました。他にもテストランナーや Node.js との互換性の改善なども行われています。

https://deno.com/blog/v1.37

VSCode v1.82 - Built-in port forwarding#

VSCode v1.82 で、ngrok のようにローカルサーバーにインターネットからアクセスする機能が追加されました。

https://code.visualstudio.com/docs/editor/port-forwarding

Node.js v16 EOL#

Node.js v16 が 2023 年 9 月 11 日に EOL を迎えました。現在の LTS は v18 です。

Next.Nav#

https://www.next-nav.com/

Next.js のアプリケーション構造を可視化する VSCode 拡張。

Ladle v3#

https://ladle.dev/blog/ladle-v3

Ladle は React に特化し、パフォーマンスを重視した Storybook の代替ツールです。v3 ではデフォルトのトランスパイラが SWC に変更、CSS in JS の Zero config サポートなどが行われました。