Fork me on GitHub

2021-06-22のJS: undici 4.0.0(HTTPクライアント)、Next.js 11、Safari 15 Beta

Edit on GitHub 編集履歴を見る

JSer.info #545 - Node.js向けのHTTPクライアントであるUndici 4がリリースされました。

Undiciは、Node.jsのhttpの代わりとして使えるように、nettlsを使って一から書き直されているHTTPクライアントです。

Undici 4.0では、Node.js 10のサポートが終了されています。
HTTPパーサにllhttpのWasmビルドを利用、maxRedirectionsでのリダイレクトサポート、nockをインスパイアしたモックのサポートなどが含まれています。

また、4.0にあわせて https://undici.nodejs.org/ にウェブサイトが公開されています。


Next.js 11がリリースされました。

Next.js向けの設定でLintをするnpx next lintというESLintの連携が追加されています。

パフォーマンス改善、Scriptロードコンポーネントのnext/scriptを追加、next/imageで自動で画像サイズの判定やプレースホルダーの設定ができるようになっています。
また、webpack 5がデフォルトとなっています。

その他には、Create React Appからのマイグレーションツールも公開されています。


Safari 15 Beta相当のSafari Technology Preview 126がリリースされています。

Safari 15 Betaでは、次のような変更が含まれています。

  • HTMLでは、autocomplete=one-time-codeの対応、theme-color属性とmedia属性のサポートなど
  • JavaScriptでは、Top-Level await、WorkerでのESMサポート、Error Causeのサポートなど
  • CSSでは、Box要素でのaspect-ratioのサポート、lab()/lch()/hwb()のカラー構文のサポートなど
  • Mediaでは、MediaSession API、iPadでVP9とWebMのハードウェアアクセラレーションが有効化、WebMでOpusコーデックをサポートなど。
  • Security & Privacyでは、アドレスバーでURLを入力する際にhttps://をデフォルトにする変更など
  • WebAssemblyでは、Streaming compilationとReference typesのサポートなど
  • その他には、WebGL 2とWeb Share Level 2のサポートなど

また、iOSとiPadOSでSafariの拡張をサポートし、declarativeNetRequest APIの実装なども含まれています。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Wasmer 2.0, Its a big deal!

wasmer.io/posts/wasmer-2.0

WebAssembly ReleaseNote

WebAssembly RuntimeのWasmer 2.0リリース。
SIMD、Reference Typesへの対応、パフォーマンスの改善など。


Introducing Undici@4. After a few years since the first… | by Node.js | Jun, 2021 | Medium

nodejs.medium.com/introducing-undici-4-1e321243e007

node.js ReleaseNote

Node.js向けのHTTPクライアントあるUndici 4リリース。
Node.js 10のサポート終了、ウェブサイトの公開。
HTTPパーサにllhttpのWasmビルドを利用、maxRedirectionsでのリダイレクトサポート、nockをインスパイアしたモックのサポートなど


Release v1.0.0 · pmndrs/jotai

github.com/pmndrs/jotai/releases/tag/v1.0.0

JavaScript library ReleaseNote React

React向けのステート管理ライブラリのJotai 1.0.0リリース。


Release v1.6.0 : RTK Query! · reduxjs/redux-toolkit

github.com/reduxjs/redux-toolkit/releases/tag/v1.6.0

redux library ReleaseNote

redux toolkit 1.6.0リリース。
別プロジェクトとして開発していたRTK(Redux Toolkit) Queryが同梱された。


Blog - Next.js 11 | Next.js

nextjs.org/blog/next-11

Next.js ReleaseNote

Next.js 11リリース。
ESLint連携、パフォーマンス改善、Scriptロードコンポーネントのnext/scriptを追加、next/imageで画像のサイズを検出して設定できるように、webpack 5がデフォルト化。
Create React Appからのマイグレーションツールも公開されている。


Release Notes for Safari Technology Preview 126 with Safari 15 Features | WebKit

webkit.org/blog/11727/release-notes-for-safari-technology-preview-126-with-safari-15-features/

safari ReleaseNote

Safari Technology Preview 126リリース。
Safari 15相当の変更を含む。
autocomplete=one-time-codeの対応、theme-colormediaのサポート。
JavaScriptではTop-Level await、WorkerでのESMサポート、Error Causeのサポートなど。
MediaSession API、iPadでVP9とWebMのハードウェアアクセラレーションが有効化、WebMでOpusコーデックをサポートなど。
WebAssemblyのStreaming compilationとReference typesのサポートなど。
また、WebGL 2とWeb Share Level 2のサポートなど。
その他には、iOSとiPadOSでSafariの拡張をサポートし、declarativeNetRequest APIの実装など


Tailwind CSS v2.2 – Tailwind CSS

blog.tailwindcss.com/tailwindcss-2-2

CSS library ReleaseNote

Tailwind CSS v2.2リリース。
JITモードの変更、CLIを書き直して--watchなどのサポート。
JITモードで、before/after/ first-letter/first-lineなどの疑似要素のサポート。
また、selectionmark variantのサポート、color:などのtypeをつけることで柔軟な値指定ができるようになるなど


Release 3.15.0 - 2021.06.21 · zloirock/core-js

github.com/zloirock/core-js/releases/tag/v3.15.0

JavaScript polyfill library ReleaseNote

core-js 3.15.0リリース。
RegExpのnamed capture group、dotAllフラグのサポート、組み込み用のJavaScriptエンジン向けなどにAnnex Bの機能polyfillを追加など


アーティクル


A Visual Guide to NodeJS Streams. In NodeJS, stream module provides the… | by Deepal Jayasekara | Jun, 2021 | Deepal’s Blog

blog.insiderattack.net/a-visual-guide-to-nodejs-streams-9d2d594a9bf5

node.js stream article

Node.jsのStreamについての解説記事。
Reaable. Writable, Duplex, Transform, Piping Streamについてそれぞれ図とともに動作を紹介している。
また、back pressureとhighWaterMarkについて


CSS System Colors - Jim Nielsen’s Blog

blog.jim-nielsen.com/2021/css-system-colors/

CSS article

文字色と背景色のLight/Darkモードの切り替え対応はOSのシステムカラーを扱うcolor-scheme: light dark;とシステムカラーを指定できるCanvas値を使って対処する話


Benchmarking JavaScript Memory Usage - WebPageTest Blog

blog.webpagetest.org/posts/benchmarking-javascript-memory-usage/

JavaScript article performance

performance.measureUserAgentSpecificMemory()でのメモリ使用量の取得と他のメトリクスとメモリ使用量に相関についての記事。
ページロード時においての、JavaScriptのサイズがメモリ使用量と相関関係の調査、各種フレームワークを利用しているサイトごとのメモリ使用量の調査など


ソフトウェア、ツール、ライブラリ関係


concrete-utopia/utopia: Design ❤️ Code

github.com/concrete-utopia/utopia

React Design Tools

ReactコンポーネントをGUIでPropsやスタイルを設定できるデザインツール。
GUIで設定した内容はコードと同期する


vueuse/vueuse: Collection of essential Vue Composition Utilities for Vue 2 and 3

github.com/vueuse/vueuse

JavaScript Vue library

VueのComposition API向けのUtilityを集めたライブラリ


plexinc/papr: MongoDB TypeScript-aware Models

github.com/plexinc/papr

TypeScript MongoDB library

Type SafeなMongoDB向けのモデルライブラリ。


この記事へ修正リクエストをする
JSer.info Slackに参加する