Fork me on GitHub

2021-09-21のJS: Deno 1.14リリース、ChromeのUser-Agent文字列削減スケジュール、Vue 2からVue 3への移行

Edit on GitHub 編集履歴を見る

JSer.info #558 - Deno 1.14がリリースされました。

deno lintdeno fmtがオプションをサポートしてquoteやindentなどの設定ができるようになっています。
URLPatternのサポート。fetchがMutual TLSをサポートなども追加されています。
また、unstableな機能としてFile locking APIsのサポートが追加されています。
その他にはURL parsingやstd/httpモジュールのパフォーマンス改善などが含まれています。


ChromeのUser-Agent文字列削減のスケジュールが改めて公開されています。

navigator.userAgent@navigator.appVersionnavigator.platformなどの情報量を減らす/固定化することでfinger printingなどのリスクを減らすことが目的です。これらのAPIは非推奨となり、代替としてUser Agent Client Hintsが実装されています。

UA文字列の削減などは、次のようなスケジュールで展開していく予定となっています。

  • Chrome 92: コンソールに警告の追加
  • Chrome 95 から 100: Origin Trialの実施
  • Chrome 100: Reverse Origin Trialの実施
  • Chrome 101から110: 削減を段階的に実施
  • Chrome 113: 完了

Vue2のプロジェクトをVue3へマイグレーションするという記事では、@vue/compatを使いつつVue2で書かれたアプリケーションをVue3へマイグレーションしていく方法について書かれています。

Vue2のアプリケーションに@vue/compateslint-plugin-vueを導入し、警告メッセージなどを見ながらVue3へマイグレーションしていき、最終的に@vue/compatを取り除くまでの流れを紹介しています。


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

JSer.info Sponsors

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


ヘッドライン


Material-UI is now MUI! - MUI

mui.com/blog/material-ui-is-now-mui/

UI JavaScript React library ReleaseNote

マテリアルデザインのReact実装として開始したMaterial-UIがMUIへとリネームされた。
これに伴ってパッケージが@material-uiから@muiへと変更され、ウェブサイトもリニューアルされた。


Is Nuxt 3 Ready?

nuxtjs.org/v3/

Vue news library

Nuxt 3は2021年10月12日にリリース予定


Deno 1.14 Release Notes | Deno Blog

deno.com/blog/v1.14

deno ReleaseNote

Deno 1.14リリース。
deno lintdeno fmtがオプションをサポート、URLPatternのサポート。fetchがMutual TLSをサポートなど。
また、unstableな機能としてFile locking APIsのサポート、URL parsingやstd/httpモジュールのパフォーマンス改善など。
その他には、TypeScript 44、V8 9.4へのアップデートなども含まれる。


アーティクル


Chromium Blog: User-Agent Reduction Origin Trial and Dates

blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html

Chrome article

ChromeのUser-Agent変更のスケジュール。
Chrome 95からOrigin Trialを使ったオプトインで導入、Chrome 100から徐々に削減していき、からChrome 113でUAと関連APIのデータの削減が完了する予定。


フロントエンド刷新のために DevTools を作って開発を捗らせる - Cybozu Inside Out | サイボウズエンジニアのブログ

blog.cybozu.io/entry/2021/09/13/080000

google debug JavaScript library article

Closure Tools向けのDevToolsについて


Vueの再描画されたコンポーネントをハイライトするChrome拡張を作った

zenn.dev/yuichkun/articles/e4e8c7e633439c

Vue debug Tools article

React DevToolsのように描画された要素をハイライトするVue向けのデバッグ拡張について


Vue2のプロジェクトをVue3へマイグレーションする

zenn.dev/azukiazusa/articles/c8d76eb56f5fd8

Vue article tutorial

vue-cliを使っているプロジェクトをVue2からVue3へのマイグレーションするチュートリアル。
@vue/compateslint-plugin-vue導入し、それぞれのAPIの変更に対応し、@vue/comatを取り除くまでの流れを解説している。


The Future of CSS: Cascade Layers (CSS @layer) – Bram.us

www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/

CSS article

CSSの@layerについて。
CSSの詳細度解決の前段としてレイヤーを作成して、スタイルの定義ができるCascade Layersの仕様。
レイヤーが詳細度より優先されるため、意図しないスタイルの上書きなどを制御しやすくなる


Small Bundles, Fast Pages: What To Do With Too Much JavaScript | Calibre

calibreapp.com/blog/bundle-size-optimization

JavaScript performance article

JavaScriptのbundle sizeを小さく保つにどうするかについての記事。
bundle sizeとパフォーマンスへの影響、bundle sizeの可視化、特定のパッケージの利用をESLintで禁止する方法、遅延ロード、Modern Browser向けのビルド分離などについて


What's New In DevTools (Chrome 95) - Chrome Developers

developer.chrome.com/blog/new-in-devtools-95/

Chrome debug article

Chrome 95の開発者ツールの変更点について。
CSS Unitの選択UIの追加、Isssuesタブの改善、Lighthouse 8.4のサポートなど


スライド、動画関係


iframe sandboxでユーザー入力スクリプトを実行する - Speaker Deck

speakerdeck.com/syumai/iframe-sandboxdeyuzaru-li-sukuriputowoshi-xing-suru

JavaScript security slide

iframeを使ったユーザー入力のスクリプト実行についてのスライド。
Cross OriginでのWindow Objectを使ってコードを実行して、postMessageでその結果を取得する方法について。
またpostMessageのoriginとsourceチェックについて


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


CSS Almanac | CSS-Tricks

css-tricks.com/almanac/

CSS dictionary document

CSSのリファレンス。
CSSのセレクタ、プロパティごと解説がまとまっている


Intro to D3.js

yangdanny97.github.io/intro-to-d3/

d3.js tutorial

D3 v5+に対応したチュートリアル


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


typicode/xv: A simple, fast and small test runner with native ESM support

github.com/typicode/xv

node.js ECMAScript module testing library

ESMを扱うテストフレームワーク。
各テストケースをexport構文でexportして、そのテストケースを実行した結果を表示するCLIを提供する


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