Fork me on GitHub

2021-12-15のJS: Tailwind CSS v3.0、create-react-app v5.0.0、CLSの改善

Edit on GitHub 編集履歴を見る

JSer.info #570 - Tailwind CSS v3.0がリリースされました。

指定したクラス名から対応するクラスを生成するJust-in-Time Modeのエンジンが刷新されています。
またBox Shadow Colorの追加、CSS Scroll Snapのサポート、Multi-column layoutのサポートなどが行われています。
その他には実験的にRTLとLTR modifiersのサポート、開発用のビルドが不要なCDNがサポートされています。


Create React App 5.0 がリリースされました。

webpack 5、Jest 27、ESLint 8、PostCSS 8へのアップデートが含まれています。
また、tailwind.config.jsのサポート、依存のバージョン固定を削除、Node 10と12のサポート終了なども含まれています。


BuzzFeedのCLSを改善するという連載記事が公開されています。

RUMとSynthetic MonitingでのCLSスコアのモニタリング、RUMのログからCLSを発生させている要素の特定と修正、サードパーティの埋め込みコンテンツによるCLSの改善などについて書かれています。


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

JSer.info Sponsors

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


ヘッドライン


Tailwind CSS v3.0 – Tailwind CSS

tailwindcss.com/blog/tailwindcss-v3

CSS library ReleaseNote

Tailwind CSS v3.0リリース。
Just-in-Time Modeのエンジンを刷新、Box Shadow Colorの追加、CSS Scroll Snapのサポート、Multi-column layoutのサポートなど。


Release 13.0.0 · puppeteer/puppeteer

github.com/puppeteer/puppeteer/releases/tag/v13.0.0

Chrome library ReleaseNote

puppeteer 13.0.0リリース。
already-handledのtypoを修正


Release Notes for Safari Technology Preview 136 | WebKit

webkit.org/blog/12137/release-notes-for-safari-technology-preview-136/

safari ReleaseNote WebExtension

Safari Technology Preview 136リリース。
contain: paintrevert-layerflex-basis: contentのサポート。
Temporal.Instantの実装、WebExtensionのManifest V3をサポートなど


GitHub Actions: GitHub-hosted runners now run Node.js 16 by default | GitHub Changelog

github.blog/changelog/2021-12-10-github-actions-github-hosted-runners-now-run-node-js-16-by-default/

Github Actions node.js news

GitHub ActionsのNode.jsのデフォルトがNode.js 16に変更


Release v5.0.0 · facebook/create-react-app

github.com/facebook/create-react-app/releases/tag/v5.0.0

React Tools ReleaseNote

create-react-app v5.0.0リリース。
webpack 5、Jest 27、ESLint 8、PostCSS 8へのアップデート。
tailwind.config.jsのサポート、依存のバージョン固定を削除、Node 10と12のサポート終了など


New WebKit Features in Safari 15.2 | WebKit

webkit.org/blog/12140/new-webkit-features-in-safari-15-2/

safari ReleaseNote WebAssembly

Safari 15.2の変更点について。
Wasmで利用可能なメモリが4GBに拡張、COOP/COEP HTTPヘッダをサポートし、crossOriginIsolated時はSharedArrayBuffer/Wasmスレッドが利用可能に。
CanvasでcolorSpace: "display-p3"をサポートなど


Release 5.0.0 – ESM support, CSS Selectors Level 4 · css/csso

github.com/css/csso/releases/tag/v5.0.0

CSS Tools ReleaseNote

CSS minifyのCSSO 5.0.0リリース。
CSS Selectors Level 4のサポート、ESMとCJSでのdual moduleに変更など


アーティクル


Improving CLS at BuzzFeed — Part 1 | BuzzFeed Tech

tech.buzzfeed.com/improving-cumulative-layout-shift-at-buzzfeed-part-1-8b7ead2381dd

article performance

BuzzFeedでのWeb Vitalsの計測と改善についての連載記事。
RUMとSynthetic MonitingでのCLSスコアのモニタリング、RUMのログからCLSを発生させている要素の特定と修正、サードパーティの埋め込みコンテンツによるCLSの改善など


New in Node.js: `node:` protocol imports

2ality.com/2021/12/node-protocol-imports.html

node.js article

node: protocolでのNode.jsのビルトインモジュールの参照について。


Debug memory leaks with the Microsoft Edge Detached Elements tool - Microsoft Edge Blog

blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/

MSEdge debug article

MSEdgeの開発者ツールのDetached Elementsについて。
DOMツリーから切り離された要素を一覧でき、DOMのメモリリークをデバッグできる機能。


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


capricorn86/happy-dom: A jsdom alternative with support for server side rendering of web components.

github.com/capricorn86/happy-dom

JavaScript DOM node.js library

JSDOMのようにNode.jsでDOM APIを利用できるようにする目的のライブラリ。
サーバサイドレンダリング向けのパッケージも公開されている。


Akryum/peeky: Test framework for curious minds 🐈️ Powered by Vite ⚡️

github.com/Akryum/peeky

vite testing library

Viteを使ったテストフレームワーク。
テスト開発用のGUIをもっている


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