JSer.info #390 - Firefox 61がリリースされました。

TLS 1.3のサポートをデフォルトで有効化、アクセシビリティインスペクタの実装、
PerformanceServerTimingのサポートなどが行われています。

AvastやAVGを使っている場合にTLS 1.3での接続に問題が出るケースもあるようです。

1468892 - SSLERRORRXRECORDTOO_LONG with Avast intercepting TLS 1.3 connections

またFetch APIのcredentialsのデフォルト値をomitからsame-originに変更する仕様への追従が行われています。

Make fetch() use "same-origin" credentials by default by annevk · Pull Request #585 · whatwg/fetch

same-originに対するXHRのデフォルトの挙動とFetch APIのデフォルトの挙動が異なったため（Fetchではクッキーを渡さないなど）、XHRからFetch APIにシームレスな切り替えができないという混乱を生んでいたため、仕様が変更されました。

その他では、Touch系のイベントがChromeと同様にデフォルトでpassiveとなるように変更されています。

2018年6月27日のEcma GA（総会）でECMAScript 2018が正式に承認されリリースされました。

Standard ECMA-262

ECMAScriptはLiving Standardであるため最新版はGitHubに公開されており、ES2018のスナップショットも公開されています。

ES2018で入ったプロポーザルについては次の記事などで紹介されています。
Object Rest/Spread Properties、Async Iteration、Promise#finally、正規表現の拡張などが含まれています。

Where is CSS4? When is it coming out?という動画でCSS4はなぜないのかについてをわかりやすく解説しています。

CSS3のときに仕様がModuleへ分解され、それぞれのModuleはLevel 3となりました。（全体をCSS3と呼んでいました）
その後のCSSの仕様はModuleごとにLevelをあげる(CSS Selectors Level 4になるなど)、また新しく追加されたModuleはLevel 1から開始するという形になっています。
そのため、CSS4という全体を表すものはないという話がされています。

次の記事も合わせて読むと良さそうです。

現在のCSS moduleのLevelやステータスについては次のページにまとめられています。

CSS current work & how to participate

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

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

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

ヘッドライン

Firefox — Notes (61.0) — Mozilla

www.mozilla.org/en-US/firefox/61.0/releasenotes/

firefox ReleaseNote

Firefox 61.0リリース。
TLS 1.3のドラフトサポートをデフォルトで有効化、アクセシビリティインスペクタの実装。
PerformanceServerTimingのサポート、Fetch APIのcredentialsのデフォルト値をsame-originに変更、WebVRがmacOSで有効化など

Firefox 61 for developers - Mozilla | MDN

Dev.Opera — What’s new in Chromium 67 and Opera 54

dev.opera.com/blog/opera-54/

Opera Chrome ReleaseNote

Opera 54 (based on Chromium 67)リリース。
Generic Sensors、Custom Elementが既存のHTML Elementを拡張できるように、Stream APIがtransformをサポートなど

lighthouse/changelog.md at v3.0.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/blob/v3.0.0/changelog.md

Chrome performance Tools ReleaseNote

Lighthouse 3.0リリース。
レポートUIの変更、それぞれのスコアのWeightの変更、First Contentful Paintの追加、RTTのコスト表示の追加など。

Announcing Lighthouse 3.0 | Web | Google Developers

Ecma latest news

www.ecma-international.org/news/index.html

ECMAScript news

ECMA-262 9th edition - ECMAScript® 2018リリース

ECMAScript® 2018 Language Specification

アーティクル

E2EテストをPhantomJSから、Puppeteer + Headless Chromeへ移行しました - LCL Engineers' Blog

techblog.lclco.com/entry/2018/06/28/080000

browser JavaScript testing article

Capybara + PhantomJSで行っていたテストを、Puppeteer + Headless Chromeに移行していくという話。
Puppeteerの機能紹介やデバッグ方法について。

Web Performance Checklist – ITNEXT

itnext.io/web-performance-checklist-6b616f3c6f0d

browser performance article

ウェブアプリにおけるパフォーマンスのチェック項目のまとめ。
最適化のアプローチについての概要まとめ

Making Web Components Work | Mixpanel Engineering

engineering.mixpanel.com/2018/06/12/making-web-components-work/

WebComponents article

Web Componentsを使って作ったパネルコンポーネントについての記事。
snabbdomを使ったVirtual DOMを使い描画し、Web Conponentsでのステート管理についてなど。

AudioWorklet Design Pattern | Web | Google Developers

developers.google.com/web/updates/2018/06/audio-worklet-design-pattern

JavaScript web audio article

AudioWorkletのデザインパターンについて。
WebAssembly、SharedArrayBufferとの組み合わせての利用についてなど

Introduction to Feature Policy | Web | Google Developers

developers.google.com/web/updates/2018/06/feature-policy

browser security article CSP

Feature Policyについて。
CSPはセキュリティのコントールをし、Feature Policyは機能に対してのコントールをする点について。
Feature Policyの指定方法やどのようなときに使うべきかについて

スライド、動画関係

Where is CSS4? When is it coming out? - YouTube

www.youtube.com/watch?v=Jtmkk6odggs

CSS spec video

CSS4はどこにあるのという問いに対する説明の動画。
CSS3のときに仕様がmoduleに分解され、それぞれのModuleはLevel 3となった。
その後のSpecはModuleごとにLevelをあげ、また新しく追加されたModuleはLevel 1から開始する。
そのためCSS4という全体を表すものはないという話。