JSer.info #536 - ReactとVueに対応したスタイルなしコンポーネントライブラリであるHeadless UI 1.0がリリースされました。
- Headless UI v1.0 – Tailwind CSS
- tailwindlabs/headlessui: Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Headless UIはTailwind CSSと一緒に使う目的で開発されているため、コンポーネント自体にはスタイルは含まれていません。
Headless UIにはReactとVueの実装がそれぞれあり、今回のリリースでそれぞれが1.0としてリリースされています。
Comparing the New Generation of Build Tools | CSS-Tricksという記事では、esbuild/Snowpack/Vite/wmrのビルドツールについて比較しています。
それぞれのツールの特徴や使い方、サポートしているファイル形式、production buildなどについて比較しています。
esbuildは少しレイヤーが異なる気はしますが、それぞれのツールの特徴がまとめられいます。
Google検索結果のランキングにpage experienceというWeb Vitalsをベースとして指標が6月から含まれる予定です。
- Timing for bringing page experience to Google Search
- More time, tools, and details on the page experience update
これにあわせて、Web Vitalsのデバッグ方法やツールなどが色々と公開されています。
- Debug Web Vitals in the field
- Web Vitalsのメトリクスのデバッグ方法
- An In-Depth Guide To Measuring Core Web Vitals — Smashing Magazine
- Web Vitalsの全体的な解説
- Cumulative Layout Shift Debugger (CLS) - webvitals.dev
- CLSのデバッグツール
- Waterfaller - find and fix all the slowdowns on your web page to boost speed and core web vital scores
- ページロードをウォータフォール表示して、Web Vitalsのメトリクスなどをどのように改善するかを提示するツール
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Deno 1.9 Release Notes | Deno Blog
Deno 1.9リリース。
HTTP/2なウェブサーバの実装、opcallの改善、Blob URLのサポート。
--allow-envと--allow-runで個別の指定ができるように、--promptでインタラクティブにパーミッションの許可ができるように。
Deno.listenTlsでALPNのサポート、tsconfig.jsonのuseDefineForClassFieldsをデフォルト化など
New in Chrome 90 - Chrome Developers
developer.chrome.com/blog/new-in-chrome-90/
Chrome 90リリース。
overflow: clipのサポート、AV1 Encoderサポート、Declarative Shadow DOMのサポートなど。
Feature PolicyがPermissions Policyにリネーム、アドレスバーのデフォルトプロトコルがhttpsに変更など
Headless UI v1.0 – Tailwind CSS
blog.tailwindcss.com/headless-ui-v1
Headless UI 1.0リリース。
ReactとVueのスタイルなしのUIコンポーネントの実装で、Tailwind CSSと組み合わせる目的で作られている。
Release v6.0.0 · pnpm/pnpm
github.com/pnpm/pnpm/releases/tag/v6.0.0
pnpm 6.0.0リリース。
Node.js 10のサポート終了、pre/post scriptを自動で実行しないように、lockfileのフォーマットを変更、pnpxが自動的にパッケージをインストールはしないようになるなど。
pnpm linkが--globalをつけたときにglobal modulesとリンクするように、pnpm fetchコマンドの追加など
helmet/CHANGELOG.md at main · helmetjs/helmet
github.com/helmetjs/helmet/blob/main/CHANGELOG.md#450---2021-04-17
Expressのセキュリティヘッダを扱うhelmet 4.5.0リリース。
Cross-Origin isolationを扱うCOEP、COOP、CORPヘッダに対応など
React-pdf - Announcing react-pdf v2.0
react-pdf.org/blog/announcing-react-pdf-v2
ReactでPDFを作成するreact-pdf v2.0リリース。
レイアウトとレンダリングの分離、SVGサポート、Hooks APIの追加など
Never too late for Firefox 88 - Mozilla Hacks - the Web developer blog
hacks.mozilla.org/2021/04/never-too-late-for-firefox-88/
Firefox 88リリース。
:user-validと:user-invalidの実装、RegExp#indicesの実装、AbortSignal.abort()の実装、FTPサポートの無効化など
アーティクル
Comparing the New Generation of Build Tools | CSS-Tricks
css-tricks.com/comparing-the-new-generation-of-build-tools/
esbuild, Snowpack, Vite, wmrを比較した記事。
それぞれのツールの特徴や使い方、サポートしているファイル、production buildなどについて比較している。
Introducing CSS Grid Inspector | WebKit
webkit.org/blog/11588/introducing-css-grid-inspector/
Safari Technology Preview 123で導入されたCSS Grid Inspectorの紹介
Real-world CSS vs. CSS-in-JS performance comparison - Tomas Pustelnik's personal website
pustelto.com/blog/css-vs-css-in-js-perf/
Styled Componentsを使ったCSS-in-JSと
linaria を使ってCSSファイルに分離した場合のパフォーマンスを比較した記事。
サイズ、Lighthouseなどを使ったRuntimeのパフォーマンス計測
HTML Inputs and Labels: A Love Story | CSS-Tricks
css-tricks.com/html-inputs-and-labels-a-love-story/
LabelとInputについての記事。
アクセシビリティを考慮したラベルの扱い方について
Debug Web Vitals in the field
web.dev/debug-web-vitals-in-the-field/
Web VitalsのメトリクスをJavaScriptで取得して、実際にどの要素がスコアに影響してるのかをデバッグする方法について
An In-Depth Guide To Measuring Core Web Vitals — Smashing Magazine
www.smashingmagazine.com/2021/04/complete-guide-measure-core-web-vitals/
Web Vitalsについての記事。
Web VitalsのLCP/FID/CLSの解説、Lighthouse/Google Search Consoleのレポート読み方、CrUXのデータの読み方や分析方法などについて。
Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript | Product Blog • Sentry
blog.sentry.io/2021/04/12/slow-and-steady-converting-sentrys-entire-frontend-to-typescript
SentryのコードをベースをTypeScriptへマイグレーションした話。
戦略として教育、新しいコードをTSで書く、既存のコードをTSに変換をしていった。
徐々に変換していくこと、少しずつ複雑な型にしていくこと、TypeScriptを最新に保つことなどを教訓としてあげている。
サイト、サービス、ドキュメント
Waterfaller - find and fix all the slowdowns on your web page to boost speed and core web vital scores
Web Vitalsの指標とリソースのロードをウォーターフォールチャートで表示し、なぜSlowdownしてるのかの解説と修正方法を提示してくれるツール。
Cumulative Layout Shift Debugger (CLS) - webvitals.dev
Cumulative Layout Shift(CLS)のデバッグツール
ソフトウェア、ツール、ライブラリ関係
ivanhofer/typesafe-i18n
github.com/ivanhofer/typesafe-i18n
依存のないi18nライブラリ。
TypeScriptを使った翻訳漏れのチェック、pluralなどのtransformerサポート、rollupやCLIを使った最適化などをサポートしている
lukejacksonn/servor: Dependency free file server for single page app development
github.com/lukejacksonn/servor
依存のないローカルサーバライブラリ。
ファイル変更でリロード、起動時にブラウザやエディタで開く、httpsの対応のオレオレ証明生成などに対応している
callstack/linaria: Zero-runtime CSS in JS library
CSS-in-JSでスタイルを書いて、そのスタイルをCSSファイルに分離するライブラリとツールキット。
