JSer.info #558 - Deno 1.14がリリースされました。
deno lint
とdeno fmt
がオプションをサポートしてquoteやindentなどの設定ができるようになっています。
URLPattern
のサポート。fetch
がMutual TLSをサポートなども追加されています。
また、unstableな機能としてFile locking APIsのサポートが追加されています。
その他にはURL parsingやstd/http
モジュールのパフォーマンス改善などが含まれています。
ChromeのUser-Agent文字列削減のスケジュールが改めて公開されています。
navigator.userAgent
、@navigator.appVersion
、 navigator.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/compat
とeslint-plugin-vue
を導入し、警告メッセージなどを見ながらVue3へマイグレーションしていき、最終的に@vue/compat
を取り除くまでの流れを紹介しています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Material-UI is now MUI! - MUI
mui.com/blog/material-ui-is-now-mui/
マテリアルデザインのReact実装として開始したMaterial-UIがMUIへとリネームされた。
これに伴ってパッケージが@material-ui
から@mui
へと変更され、ウェブサイトもリニューアルされた。
Is Nuxt 3 Ready?
Nuxt 3は2021年10月12日にリリース予定
Deno 1.14 Release Notes | Deno Blog
Deno 1.14リリース。
deno lint
とdeno 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のUser-Agent変更のスケジュール。
Chrome 95からOrigin Trialを使ったオプトインで導入、Chrome 100から徐々に削減していき、からChrome 113でUAと関連APIのデータの削減が完了する予定。
フロントエンド刷新のために DevTools を作って開発を捗らせる - Cybozu Inside Out | サイボウズエンジニアのブログ
blog.cybozu.io/entry/2021/09/13/080000
Closure Tools向けのDevToolsについて
Vueの再描画されたコンポーネントをハイライトするChrome拡張を作った
zenn.dev/yuichkun/articles/e4e8c7e633439c
React DevToolsのように描画された要素をハイライトするVue向けのデバッグ拡張について
Vue2のプロジェクトをVue3へマイグレーションする
zenn.dev/azukiazusa/articles/c8d76eb56f5fd8
vue-cliを使っているプロジェクトをVue2からVue3へのマイグレーションするチュートリアル。
@vue/compat
、eslint-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の@layer
について。
CSSの詳細度解決の前段としてレイヤーを作成して、スタイルの定義ができるCascade Layersの仕様。
レイヤーが詳細度より優先されるため、意図しないスタイルの上書きなどを制御しやすくなる
Small Bundles, Fast Pages: What To Do With Too Much JavaScript | Calibre
calibreapp.com/blog/bundle-size-optimization
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 95の開発者ツールの変更点について。
CSS Unitの選択UIの追加、Isssuesタブの改善、Lighthouse 8.4のサポートなど
スライド、動画関係
iframe sandboxでユーザー入力スクリプトを実行する - Speaker Deck
speakerdeck.com/syumai/iframe-sandboxdeyuzaru-li-sukuriputowoshi-xing-suru
iframeを使ったユーザー入力のスクリプト実行についてのスライド。
Cross OriginでのWindow Objectを使ってコードを実行して、postMessageでその結果を取得する方法について。
またpostMessageのoriginとsourceチェックについて
サイト、サービス、ドキュメント
CSS Almanac | CSS-Tricks
CSSのリファレンス。
CSSのセレクタ、プロパティごと解説がまとまっている
Intro to D3.js
yangdanny97.github.io/intro-to-d3/
D3 v5+に対応したチュートリアル
ソフトウェア、ツール、ライブラリ関係
typicode/xv: A simple, fast and small test runner with native ESM support
ESMを扱うテストフレームワーク。
各テストケースをexport
構文でexportして、そのテストケースを実行した結果を表示するCLIを提供する