JSer.info #566 - Node.jsの開発版である17.1.0がリリースされました。

Node v17.1.0 (Current) | Node.js

現在ECMAScript ProposalのStage 3であるImport Assertionsを使ったJSONのimportがサポートされています。

import fooData from './foo.json' assert { type: 'json' };

Lighthouse 9.0.0がリリースされました。

Release v9.0.0 · GoogleChrome/lighthouse

Node 12のサポート終了、意味がなくなったauditが削除されています。
また、ページ遷移を含むAuditをとるAudit User Flowsをプレビュー機能としてサポートしています。

Lighthouse user flows

Reconstructing TypeScript, part 0: intro and backgroundという記事では、TypeScriptを使ってTypeScriptのような言語の型チェッカーを実装していく連載となっています。
Union types, Intersection types, narrowingなどTypeScript同じような型の仕様に対する型チェッカーを実装していく内容となっています。
実装としては、Babelを使ったTypeScriptのコードをパースして得たASTと型情報をもとに、その型情報をチェックしていく実装を書いていく流れになっています。

実際に動く型チェッカーを実装していく内容になっているので、型の実装に興味がある人は読むと良さそうです。

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

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

JSer.info Sponsors

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

ヘッドライン

Node v17.1.0 (Current) | Node.js

nodejs.org/uk/blog/release/v17.1.0/

node.js ReleaseNote

Node.js 17.1.0リリース。
ES ModulesのImport AssertionによるJSONのimportができるように。

import fooData from './foo.json' assert { type: 'json' };

Release eslint-config-airbnb-v19.0.0 · airbnb/javascript

github.com/airbnb/javascript/releases/tag/eslint-config-airbnb-v19.0.0

ESLint config ReleaseNote

eslint-config-airbnb 19.0.0リリース。
ESLint 8のサポート

eslint v8 support · Issue #2478 · airbnb/javascript

Release Notes for Safari Technology Preview 135 | WebKit

webkit.org/blog/12040/release-notes-for-safari-technology-preview-135/

safari ReleaseNote

Safari Technology Preview 135リリース。
CSSのaccent-colorのサポート、flex-basis: contentのサポート。
loading属性を使った画像の遅延ロードをサポート。
120Hzのディスプレイでは120Hzでスクロールアニメーションが動くように

wrangler 2.0 — a new developer experience for Cloudflare Workers

blog.cloudflare.com/wrangler-v2-beta/

cloudflare webworker ReleaseNote

Cloudflare WorkersのCLIであるwrangler 2.0リリース。
wrangler dev <filename>で設定なしでデプロイ、開発できるように、--public <path>での静的アセットの指定をサポート。
--localでMiniflareベースのオフラインで動くローカルモードをサポート

Release 0.6.0 – Info sections, bailouts, state change locations, open in editor and more · lahmatiy/react-render-tracker

github.com/lahmatiy/react-render-tracker/releases/v0.6.0

React debug library ReleaseNote

Reactの意図しないレンダリングを見つけるデバッグツールのreact-render-tracker 0.6.0リリース。

Electron 16.0.0 | Electron

www.electronjs.org/blog/electron-16-0

Electron ReleaseNote

Electron 16.0.0リリース。
Chromium 96、Node.js 16.9.1、V8 9.6へアップデート。
WebHID APIのサポート、native modulesをビルドするためにnode-gypを使っているプロジェクトでは--force-process-configが必要となる変更になど

Announcing Serverless Framework v3 Beta

www.serverless.com/blog/serverless-framework-v3-beta

serverless node.js ReleaseNote

Serverless Framework v3 Betaリリース。
serverlessコマンドの出力の改善、--verboseのサポート、非推奨だったAPIの削除など

Serverless Framework - Upgrading to v3

Release v9.0.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v9.0.0

Chrome performance Tools ReleaseNote

Lighthouse v9.0.0リリース。
Node 12のサポート終了、いくつかのauditを削除。
ページ遷移を含むAuditをとるAudit User Flowsをサポートなど

Lighthouse user flows

アーティクル

Reconstructing TypeScript, part 0: intro and background

jaked.org/blog/2021-09-07-Reconstructing-TypeScript-part-0

TypeScript article babel AST

TypeScriptの型チェッカーを実装しながら、TypeScriptの型について学ぶ連載記事。
パーサにはBabelを使い、パースしたASTと型情報をチェックする型チェッカーを実装していく

Mastering TypeScript Template Literal Types | by Jose Granja | Nov, 2021 | Better Programming

betterprogramming.pub/mastering-typescript-template-literal-types-f4131a94ffb1

TypeScript article

Typescript 4.1 で追加されたTemplate Literal Typeについての解説記事。
基本的な使い方、制限、Utility Type、inferと組み合わせた型を推論する書き方やMapped Typesとの組み合わせについてなど

SharedArrayBuffer と過渡期な cross-origin isolation の話

blog.agektmr.com/2021/11/cross-origin-isolation.html

browser Chrome article

SharedArrayBufferや高分解能Timerを利用するためにはcross origin isolationな状態が必要となる。
cross origin isolationな状態にするための条件であるHTTPヘッダについての解説。

Copy CSS as JavaScript - Chrome DevTools - Dev Tips

umaar.com/dev-tips/249-copy-css-as-js/

Chrome debug article

Chromeの開発者ツールでCSSプロパティをJavaScriptのCamelCaseなプロパティをもつオブジェクトとしてコピーできるようになった。
CSSパネルからCSS in JSのObejct Stylesでコピーできる

Less Absolute Positioning With Modern CSS - Ahmad Shadeed

ishadeed.com/article/less-absolute-positioning-modern-css/

CSS article

CSSのposition: absoluteを使わなくても同等の表現ができるという紹介。
Gridを使った要素の重ね、orderを使った表示順の変更、aspect-ratioを使った画像のアスペクト比の指定など。
またposition: absoluteを使った方が良いユースケースについて