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を改善するという連載記事が公開されています。
- Improving CLS at BuzzFeed — Part 1 | BuzzFeed Tech
- Improving CLS at BuzzFeed — Part 2 | BuzzFeed Tech
- Improving CLS at BuzzFeed — Part 3 | BuzzFeed Tech
RUMとSynthetic MonitingでのCLSスコアのモニタリング、RUMのログからCLSを発生させている要素の特定と修正、サードパーティの埋め込みコンテンツによるCLSの改善などについて書かれています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- 💸 GitHub Sponsorsで@azuのスポンサーになる
- 🐦 Twitterで@jser_infoをフォローする
- 🔁 JSer.infoについての最新のTweetをRetweetする
ヘッドライン
Tailwind CSS v3.0 – Tailwind CSS
tailwindcss.com/blog/tailwindcss-v3
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
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 Technology Preview 136リリース。
contain: paint
、revert-layer
、flex-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のデフォルトがNode.js 16に変更
Release v5.0.0 · facebook/create-react-app
github.com/facebook/create-react-app/releases/tag/v5.0.0
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 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 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
BuzzFeedでのWeb Vitalsの計測と改善についての連載記事。
RUMとSynthetic MonitingでのCLSスコアのモニタリング、RUMのログからCLSを発生させている要素の特定と修正、サードパーティの埋め込みコンテンツによるCLSの改善など
- Improving CLS at BuzzFeed — Part 2 | BuzzFeed Tech
- Improving CLS at BuzzFeed — Part 3 | BuzzFeed Tech
New in Node.js: `node:` protocol imports
2ality.com/2021/12/node-protocol-imports.html
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の開発者ツールのDetached Elementsについて。
DOMツリーから切り離された要素を一覧でき、DOMのメモリリークをデバッグできる機能。
ソフトウェア、ツール、ライブラリ関係
capricorn86/happy-dom: A jsdom alternative with support for server side rendering of web components.
github.com/capricorn86/happy-dom
JSDOMのようにNode.jsでDOM APIを利用できるようにする目的のライブラリ。
サーバサイドレンダリング向けのパッケージも公開されている。
Akryum/peeky: Test framework for curious minds 🐈️ Powered by Vite ⚡️
Viteを使ったテストフレームワーク。
テスト開発用のGUIをもっている