Fork me on GitHub

2021-03-16のJS: Safari Technology Preview 122、React Native 0.64、SvelteKit

Edit on GitHub 編集履歴を見る

JSer.info #531 - Safari Technology Preview 122がリリースされました。

Safari Technology Preview 122では色々な機能が実装されています。
実験フラグ付きでCSS :focus-visibleとCSS Color 5のcolor-mix()/color-contrast()/Relative color syntaxが実装されています。
ES Proposal Stage 3のPrivate methodStatic private methodsTop-Level awaitRegExp Match Indicesのサポート。
Web WorkerとService Workerでtype: moduleをサポート、Paint Timingの(再)有効化なども含まれます。

Safariとは直接関係しませんが、2021年6月ごろにリリースされる予定のECMAScript 2021のリリース候補も公開されています。


SvelteKitのソースコードが公開されています。
SvelteKitはSvelteベースのNext.jsライクなフレームワークであったSapperを置き換える目的で作られています。

まだソースコードの公開だけでリリースはされていません。
What is SvelteKit? | SK Incognitoというチュートリアルサイトでは、SvelteKitがどのようなものか紹介されているので、興味がある人は見てみるといいかもしれません。


React Native 0.64がリリースされました。

AOTによる事前コンパイルでfootprintを最適化してアプリの起動速度などを改善する目的であるHermes JS EngineがiOSでも利用可能になっています。
また、HermesにES2015のProxy objectのサポートが追加されています。
その他には、MetroでInline Requiresがデフォルトで有効化、React 17へアップデートなどが含まれています。


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

JSer.info Sponsors

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


ヘッドライン


Release v0.9.0 · evanw/esbuild

github.com/evanw/esbuild/releases/tag/v0.9.0

JavaScript Tools relre

esbuild 0.9.0リリース。
package.jsonのexportsフィールドのサポート、esbuild.startService() APIの削除、bannerとfooterを言語ごとに指定できるように


Release Notes for Safari Technology Preview 122 | WebKit

webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/

safari webkit ReleaseNote

Safari Technology Preview 122リリース。
実験フラグ付きでCSS :focus-visibleとCSS Color 5の実装を追加。
ES ProposalのPrivate method、Top-Level await、RegExp Match Indicesのサポート。
Workerでtype: moduleをサポート、Paint Timingの有効化など


Chromium Blog: Chrome 90 Beta: AV1 Encoder for WebRTC, New Origin Trials, and More

blog.chromium.org/2021/03/chrome-90-beta-av1-encoder-for-webrtc.html

Chrome ReleaseNote

Chrome 90 Betaリリース。
AV1 Encoderのサポート。
Origin TrialとしてgetCurrentBrowsingContextMedia()、Breakout Box、WebAssembly Exception Handlingのサポート。
CSSのaspect-ratioとwidthかheightが指定されているときに推論されるように、:stateoverflow: clipのサポート。
Feature-Policyに代わるPermissions-Policy、StaticRangeのサポートなど。
navigator.pluginsnavigator.mimeTypesが空要素を返すようになるなど


Announcing React Native 0.64 with Hermes on iOS · React Native

reactnative.dev/blog/2021/03/12/version-0.64

React iOS Android ReleaseNote

React Native 0.64リリース。
iOSでもJSエンジンのHermesを利用可能に、MetroでInline Requiresがデフォルトで有効化、HermesがES Proxyのサポート、React 17へアップデートなど


sveltejs/kit: A monorepo for SvelteKit and friends

github.com/sveltejs/kit

Svelte JavaScript Tools news

SvelteKitのソースコードが公開された


Release ES2021 Candidate March 2021 · tc39/ecma262

github.com/tc39/ecma262/releases/tag/es2021-candidate-2021-03

ECMAScript spec ReleaseNote

ECMAScript 2021のリリース候補が公開された。ECMAScript 2021に入る予定の機能は決定され仕様もフリーズされたため、masterブランチはES 2022となった


Socket.IO 4.0.0 | Socket.IO

socket.io/blog/socket-io-4-release/

WebSocket node.js library ReleaseNote

Socket.IO 4.0.0リリース。
破壊的な変更としてサーバ側のio.to()がimmutableに変更、protocolは互換性を維持している。
pingTimeoutのデフォルト値を5秒から20秒へ変更、Utilityメソッドの追加、autoUnrefオプションの追加など


アーティクル


Debugging layout shifts

web.dev/debugging-layout-shifts/

performance debug article

Layout Instability APIでのCumulative Layout Shift (CLS)の計測とCLSの特定とデバッグ方法について


Digging Into CSS Logical Properties

ishadeed.com/article/css-logical-properties/

CSS article

RTLに対応したCSSの書き方とmargin-inline-endについて。


レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログ

techlife.cookpad.com/entry/2021/03/15/090000

React CSS article

emotionを使ったCSS-in-JSについて。
styled-componentsの記法ではなくString Stylesを採用した理由、stylelintを使ったLint、Jestを使ったスナップショットテストについてなど


JavaScript: What is the meaning of this?

web.dev/javascript-this/

JavaScript article

いろいろなケースのthisの意味について解説している記事


Beyond Console.log() – Level up Your Debugging Skills - SitePoint

www.sitepoint.com/beyond-console-log-level-up-your-debugging-skills/

console debug JavaScript article Chrome

Console APIやChrome DevToolsを使ったデバッグについての記事。
ログフォーマット、Console APIの紹介、Dev Tools上で使える関数、Overrides、VScodeとの連携についてなど


The Death of a Node.js Process - Thomas Hunter II

thomashunter.name/posts/2021-03-08-the-death-of-a-nodejs-process

node.js article

Node.jsにおけるプロセス終了とエラーについて。
uncaughtException、unhandledRejectionでのエラーのキャッチとprocess.exitでのプロセス終了方法。
また、Signalとそれをハンドリングできるかどうかについてのまとめ


サイト、サービス、ドキュメント


Post-Spectre Web Development

w3c.github.io/webappsec-post-spectre-webdev/

security document

Spectre以後のウェブ開発における脅威モデルと戦略についてのドキュメント。
Isolation、サブリソース、クロスオリジンを意図した操作についてなど


What is SvelteKit? | SK Incognito

sk-incognito.vercel.app/learn/what-is-sveltekit

Svelte tutorial

SvelteKitのチュートリアルサイト


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


Cloud9c/taro: A lightweight 3D game engine for the web.

github.com/Cloud9c/taro

JavaScript 3D game library

three.jsとcannon-esを使った3Dゲームエンジンライブラリ


rsms/estrella: Lightweight and versatile build tool based on the esbuild compiler

github.com/rsms/estrella

JavaScript Tools bundler

esbuildとtscのラッパーツール。
esbuildでビルドしながら、tscでの型チェックを同時に実行できるビルドツール


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