JSer.info #456 - React互換のAPIを持つPreact X(10.0.0)がリリースされました。
Preact 9.xはスキップしてPreact 10.xになっています。

Release Preact X - Virtuous DOM and the Fragments of Suspense · preactjs/preact
What's new in Preact X | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

Preact Xでは、Fragments、componentDidCatch、Hooks(preact/hooks)、createContext、CSS Custom Propertiesの対応などが含まれています。
HooksはPreactのコアには含まれていませんが、preact/hooksまたはpreact/compatをインポートすることで対応しています。

また、いままでは別モジュールとなっていたpreact-compatがpreact/compatという形でインポートするように変更されています。

// Preact 8.x
import React from "preact-compat";

// Preact X
import React from "preact/compat";

また、preact本体はdefault exportをやめたため、named importをして使う形に変更されています。

// Preact 8.x
import Preact from "preact";

// Preact X
import * as preact from "preact";

// Preferred: Named exports (works in 8.x and Preact X)
import { h, Component } from "preact";

Preact 8.xから10.xへのマイグレーションガイドも公開されているので、合わせて見てください。

Upgrading from Preact 8.x | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

ウェブサイト向けのLintツールであるwebhintのブラウザ拡張版がv1となりました。

Announcing the webhint v1 browser extension for Microsoft Edge - Microsoft Edge Blog

beta版からの追加点として、
MDN browser compat dataを使ったクロスブラウザの互換情報の表示、カラーコントラストについてのHintの追加などが含まれています。

Chrome(lighthouse)のAuditとの違いとして、webhintはクロスブラウザに関するチェックをあげています。

The webhint extension doesn’t replace the existing audits tab you’ll find in the developer tools for Chrome and the new Chromium-based Edge browser. While there is a little overlap in the information provided, webhint and Lighthouse serve different purposes, and you may find yourself using both. One distinguishing feature of webhint that it’s meant to provide cross-browser insights, including compatibility with Safari, IE, Opera, and so on.
-- https://medium.com/webhint/announcing-the-webhint-browser-extension-abb22f4cfeb

TypeScript 3.7 Betaがリリースされました。

ECMAScriptのStage 3 ProposalであるOptional ChainingとNullish Coalescingがサポートされています。
また、assertsによるコントールフロー制御を行うAssertion Functionsがサポートされています。
その他には、--declarationと--allowJsの組み合わせのサポートが含まれています。

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

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

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

ヘッドライン

Release Preact X - Virtuous DOM and the Fragments of Suspense · preactjs/preact

github.com/preactjs/preact/releases/tag/10.0.0

React library ReleaseNote

Preact X(10.0.0)リリース。
Fragments、componentDidCatch、createContextのサポート、Hooks APIのサポートなど

Release v3.2.0 · facebook/create-react-app

github.com/facebook/create-react-app/releases/tag/v3.2.0

React Tools ReleaseNote

create-react-app 3.2.0リリース。
yarn build --profileでproduction buildでのプロファイル対応、TSC_COMPILE_ON_ERRORのサポートなど

vuejs/vue-next

github.com/vuejs/vue-next

Vue Github news

Vue 3候補のソースコードが公開された

Announcing TypeScript 3.7 Beta | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/

TypeScript ReleaseNote

TypeScript 3.7 Betaリリース。
Optional Chaining、Nullish Coalescing、Assertion Functionsのサポート。
--declarationと--allowJsの組み合わせのサポート、TypeScriptファイル内で// @ts-nocheckの追加など

TypeScript 3.7 Iteration Plan · Issue #33352 · microsoft/TypeScript

Release v5.5.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v5.5.0

Tools ReleaseNote Chrome

Lighthouse 5.5.0リリース。
Largest Contentful Paint(LCP)のサポート

Version 1.0 released : Node-RED

nodered.org/blog/2019/09/30/version-1-0-released

node.js IoT ReleaseNote

フローベースのビジュアルエディタを使って、Node.jsで動くプログラムを作成できるツールキットであるNode-RED 1.0リリース。

Announcing the webhint v1 browser extension for Microsoft Edge - Microsoft Edge Blog

blogs.windows.com/msedgedev/2019/09/30/announcing-the-webhint-v1-browser-extension-for-microsoft-edge/

browser Tools ReleaseNote Extension accessibility

webhint browser extension 1.0.0リリース。
プラグインでカスタマイズできるウェブサイト向けのLintツールのブラウザ拡張版。
MDN browser compat dataを使ったクロスブラウザの互換情報の表示、カラーコントラストについてのHintの追加など

アーティクル

I created the exact same app in React and Vue. Here are the differences. [2019 Edition]

medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-2019-edition-42ba2cab9e56

React Vue JavaScript article

ReactとVueでのTodoアプリを例にした比較。
React Hooksに対応したバージョン

Fixing layout instability | web.dev

web.dev/fixing-layout-instability/

Chrome performance JavaScript article

PerformanceObserverでCumulative Layout Shift (CLS)を計測し、どのようなレイアウトの変化が起きてるのかをWebPageTestで確認する方法について。
また、実際にプレースホルダーデータを使ってlayout instabilityを修正する方法について。