Fork me on GitHub

2018-07-02のJS: Firefox 61、ECMAScript 2018リリース、CSS4はどこにある?

Edit on GitHub 編集履歴を見る

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

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

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

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

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

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


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

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やステータスについては次のページにまとめられています。


ヘッドライン


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で有効化など


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のコスト表示の追加など。


Ecma latest news

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

ECMAScript news

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


アーティクル


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という全体を表すものはないという話。


Vue.js プロジェクトの爆発させかた #ichigayageek / How to explosion Vue.js project - Speaker Deck

speakerdeck.com/potato4d/how-to-explosion-vue-dot-js-project

Vue slide

Vueを使ったプロジェクトで遭遇する問題についてのスライド。
規模が大きくなってきたときのステートの管理方法、デザイナーとの協業、既存のウェブアプリへの部分的な適応、別のテンプレートエンジンとの組み合わせなどについて


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


wg-effectiveness/process_jp.md at master · w3c/wg-effectiveness

github.com/w3c/wg-effectiveness/blob/master/process_jp.md

W3C spec 翻訳

"忙しい人のためのW3Cプロセス入門"
W3C Process for Busy Peopleの日本語訳


kay-is/react-from-zero: A simple (99% ES2015 less) tutorial for React

github.com/kay-is/react-from-zero

React tutorial

Reactを一から学ぶチュートリアル。
ブラウザだけで動くReactのコードを見ながら、Reactについてを解説している。


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


Swiip/compo: 🎼Compo·sing Web Compo·nents

github.com/Swiip/compo

WebComponents JavaScript library

WebComponentでUIを作成するための関数を提供するライブラリ。


mizchi/trans-loader: webpack-less frontend with service-worker

github.com/mizchi/trans-loader

ServiceWorker babel TypeScript npm JavaScript library

Service Workerを使ってBabelやTypeScriptでの変換を行うスクリプト。
npmのモジュールをjspm.ioを使ってロードできる。


kitze/JSUI: A powerful UI toolkit for managing JavaScript apps

github.com/kitze/JSUI

JavaScript GUI project

JavaScriptのプロジェクト管理GUI。
GUIでアプリの作成、プロジェクトのダッシュボード、タスクの実行などができる


この記事へ修正リクエストをする
記事を紹介する