JSer.info #517 - Snowpack 3.0 RCがリリースされました。
いくつかの機能がexperimentalでopt-inとして実装されています。
npmパッケージのimportをSkypackのCDN経由でダウンロードするStreaming NPM Importsのサポート、esbuildを使った最適化のサポートが追加されています。
また、開発サーバでのルーティングサポート、snowpackをコードから扱うJavaScript APIの変更なども含まれています。
preactjs/wmrはCreate React Appのような開発ツールキットの一種です。
開発サーバとrollup.jsベースのビルドが一体となっているツールです。
特徴的なのはインストールサイズなども最適化されたツールとなっています。
また、npmパッケージも開発サーバのnpm-middlewareを通してnpm または UNPKGから取得できるため、npm installせずにモジュールをimport "packages"できるようになっています。
CSSに関する開発者アンケートであるThe State of CSS 2020の結果が公開されています。
CSSの機能ごとの認知、Preprocessorの選択、CSSフレームワークの利用状況、方法論、CSS-in-JS、ツール、リソースなどの項目についてアンケート結果が公開されています。
前年度との比較も公開されているので興味がある人は見てみるといいかもれしれません。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release v6.5.0 · GoogleChrome/lighthouse
github.com/GoogleChrome/lighthouse/releases/tag/v6.5.0
Lighthouse v6.5.0リリース。
LCPとなる要素がPreloadされているかを判定するpreload-lcp-imageのAuditを追加など
Snowpack v3.0 Release Candidate
www.snowpack.dev/posts/2020-12-03-snowpack-3-release-candidate
snowpack 3.0 RCリリース。
npmパッケージのimportをSkypackのCDN経由でダウンロードするStreaming NPM Importsのサポート、esbuildを使った最適化のサポート。
Devサーバのルーティングサポート、snowpackのJavaScript APIの変更など
The npm Blog — Release v7.1.0
blog.npmjs.org/post/636604708661886976/release-v710
npm 7.1.0リリース。
package.jsonのscriptsを書き換えるnpm set-scriptコマンドの追加、引数なしのnpm execにインタラクティブモードの追加など
Chromium Blog: Chrome 88: Digital Goods, Lighting Estimation in Augmented Reality, and More
blog.chromium.org/2020/12/chrome-88-digital-goods-lighting.html
Chrome 88 betaリリース。
target=_blankのリンクを暗黙的にrel=noopenerとして扱うように、addEventListenerにsignalオプションの追加、CSS aspect-ratioのサポート。
Permissions-Policy Headerのサポート、FTPサポートの削除、Web Components v0の削除など
Release v1.1.0 · aframevr/aframe
github.com/aframevr/aframe/releases/tag/v1.1.0
WebXRフレームワークのAFrame v1.1.0リリース。
WebXR compositor layers、WebXR DOM Overlays、WebXR immersive navigation、WebXR hand trackingのサポート。
Oculus Quest 2のコントローラーのサポートなど
アーティクル
A Deep Dive Into CSS Grid minmax()
ishadeed.com/article/css-grid-minmax/
CSS Gridのminmax()、autofit、autofillについて。
フロントエンド（React Testing Library）で TDD（テスト駆動開発）をする
zenn.dev/higa/articles/34439dc279c55dd2ab95
JavaScriptでTDDをしながら実装を書いていくチュートリアル記事。
Web Performance Calendar » Human performance metrics
calendar.perfplanet.com/2020/human-performance-metrics/
RUMでのパフォーマンスモニタリングとパフォーマンスに関するユーザーアンケートの結果に相関があったというWikipediaでの話。
ページの読み込み時間の中央値が120ミリ秒増加すると、ユーザー満足度が2％低下するなどわずかな変化でも満足度に影響が出たという話。
スライド、動画関係
Learning from Mini Apps—W3C TPAC Breakout Session
blog.tomayac.com/2020/11/05/learning-from-mini-apps-w3c-tpac-breakout-session/
中国のMini Appsについてのスライド。
Mini Appsの仕組みや実装方法、Dev Toolsでのデバッグ方法、パーミッションやセキュリティモデルについてなど
サイト、サービス、ドキュメント
The State of CSS 2020
The State of CSS 2020のアンケート結果が公開された。
CSSの機能ごとの認知、Preprocessorの選択、CSSフレームワークの利用状況、方法論、CSS-in-JS、ツール、リソースなどの項目についてアンケート結果が公開されている
ソフトウェア、ツール、ライブラリ関係
yeonjuan/html-eslint: ESLint plugin for linting HTML
github.com/yeonjuan/html-eslint
ESLint上でHTMLのLintをするプラグインとルール
preactjs/wmr: 👩🚀 The tiny all-in-one development tool for modern web apps.
RollupベースのJSやCSSのビルド、開発サーバ、Prerenderなどの機能を持ったウェブフロント開発ツールキット
naugtur/debugging-aid: Experimental tools for debugging Node.js apps without pausing
github.com/naugtur/debugging-aid
Node.jsのperf_hooksなどを使ったrequireするだけでinstrumentsを仕込めるモジュール集
Beaker Browser 1.0
beakerbrowser.com/2020/12/02/beaker-1-0.html
Hypercore Protocol(aka. dat)を扱うブラウザであるBeaker Browser 1.0リリース。
Hypercore Protocolを使ったP2Pでサイトを作成でき、サイトのフォーク、共有できる
