Fork me on GitHub

2020-12-08のJS: Snowpack 3.0 RC、WMR、State of CSS 2020

Edit on GitHub 編集履歴を見る

JSer.info #517 - Snowpack 3.0 RCがリリースされました。

いくつかの機能がexperimentalでopt-inとして実装されています。
npmパッケージのimportSkypackのCDN経由でダウンロードするStreaming NPM Importsのサポート、esbuildを使った最適化のサポートが追加されています。
また、開発サーバでのルーティングサポート、snowpackをコードから扱うJavaScript APIの変更なども含まれています。


preactjs/wmrCreate 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、ツール、リソースなどの項目についてアンケート結果が公開されています。
前年度との比較も公開されているので興味がある人は見てみるといいかもれしれません。


ヘッドライン


Release v6.5.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v6.5.0

Chrome Tools ReleaseNote

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

JavaScript bundler Tools ReleaseNote

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 ReleaseNote

npm 7.1.0リリース。
package.jsonscriptsを書き換える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 ReleaseNote

Chrome 88 betaリリース。
target=_blankのリンクを暗黙的にrel=noopenerとして扱うように、addEventListenersignalオプションの追加、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 JavaScript library ReleaseNote

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 article

CSS Gridのminmax()autofitautofillについて。


フロントエンド(React Testing Library)で TDD(テスト駆動開発)をする

zenn.dev/higa/articles/34439dc279c55dd2ab95

JavaScript tutorial test article

JavaScriptでTDDをしながら実装を書いていくチュートリアル記事。


Web Performance Calendar » Human performance metrics

calendar.perfplanet.com/2020/human-performance-metrics/

performance article

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/

slide JavaScript

中国のMini Appsについてのスライド。
Mini Appsの仕組みや実装方法、Dev Toolsでのデバッグ方法、パーミッションやセキュリティモデルについてなど


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


The State of CSS 2020

2020.stateofcss.com/en-US/

CSS アンケート

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 Tools

ESLint上でHTMLのLintをするプラグインとルール


preactjs/wmr: 👩‍🚀 The tiny all-in-one development tool for modern web apps.

github.com/preactjs/wmr

React Tools JavaScript

RollupベースのJSやCSSのビルド、開発サーバ、Prerenderなどの機能を持ったウェブフロント開発ツールキット


naugtur/debugging-aid: Experimental tools for debugging Node.js apps without pausing

github.com/naugtur/debugging-aid

node.js debug library

Node.jsのperf_hooksなどを使ったrequireするだけでinstrumentsを仕込めるモジュール集


Beaker Browser 1.0

beakerbrowser.com/2020/12/02/beaker-1-0.html

browser p2p Hypercore software

Hypercore Protocol(aka. dat)を扱うブラウザであるBeaker Browser 1.0リリース。
Hypercore Protocolを使ったP2Pでサイトを作成でき、サイトのフォーク、共有できる


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