Fork me on GitHub

2021-04-20のJS: Headless UI 1.0、esbuild/Snowpack/Vite/wmrの比較、debugging Web Vitals

Edit on GitHub 編集履歴を見る

JSer.info #536 - ReactとVueに対応したスタイルなしコンポーネントライブラリであるHeadless UI 1.0がリリースされました。

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月から含まれる予定です。

これにあわせて、Web Vitalsのデバッグ方法やツールなどが色々と公開されています。


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

JSer.info Sponsors

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


ヘッドライン


Deno 1.9 Release Notes | Deno Blog

deno.com/blog/v1.9

deno ReleaseNote

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 ReleaseNote

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

React Vue library accessibility lib

Headless UI 1.0リリース。
ReactとVueのスタイルなしのUIコンポーネントの実装で、Tailwind CSSと組み合わせる目的で作られている。


Release v6.0.0 · pnpm/pnpm

github.com/pnpm/pnpm/releases/tag/v6.0.0

npm Tools ReleaseNote

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

node.js express library ReleaseNote

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 library ReleaseNote

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 ReleaseNote

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/

JavaScript Tools article

esbuild, Snowpack, Vite, wmrを比較した記事。
それぞれのツールの特徴や使い方、サポートしているファイル、production buildなどについて比較している。


Introducing CSS Grid Inspector | WebKit

webkit.org/blog/11588/introducing-css-grid-inspector/

safari debug article

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/

CSS JavaScript performance article

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/

HTML accessibility article

LabelとInputについての記事。
アクセシビリティを考慮したラベルの扱い方について


Debug Web Vitals in the field

web.dev/debug-web-vitals-in-the-field/

browser Chrome performance article

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/

browser Chrome performance article

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

article TypeScript refacoring

SentryのコードをベースをTypeScriptへマイグレーションした話。
戦略として教育、新しいコードをTSで書く、既存のコードをTSに変換をしていった。
徐々に変換していくこと、少しずつ複雑な型にしていくこと、TypeScriptを最新に保つことなどを教訓としてあげている。


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


Waterfaller - find and fix all the slowdowns on your web page to boost speed and core web vital scores

waterfaller.dev/

webservice performance Tools

Web Vitalsの指標とリソースのロードをウォーターフォールチャートで表示し、なぜSlowdownしてるのかの解説と修正方法を提示してくれるツール。


Cumulative Layout Shift Debugger (CLS) - webvitals.dev

webvitals.dev/cls

Tools browser performance webservice

Cumulative Layout Shift(CLS)のデバッグツール


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


ivanhofer/typesafe-i18n

github.com/ivanhofer/typesafe-i18n

JavaScript TypeScript i18n library

依存のないi18nライブラリ。
TypeScriptを使った翻訳漏れのチェック、pluralなどのtransformerサポート、rollupやCLIを使った最適化などをサポートしている


lukejacksonn/servor: Dependency free file server for single page app development

github.com/lukejacksonn/servor

node.js server console Tools

依存のないローカルサーバライブラリ。
ファイル変更でリロード、起動時にブラウザやエディタで開く、httpsの対応のオレオレ証明生成などに対応している


callstack/linaria: Zero-runtime CSS in JS library

github.com/callstack/linaria

CSS JavaScript

CSS-in-JSでスタイルを書いて、そのスタイルをCSSファイルに分離するライブラリとツールキット。


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