Fork me on GitHub

2016-08-15のJS: Chrome 53 Beta、使わなくて良いイディオム、60FPS CSS Animation

Edit on GitHub 編集履歴を見る

JSer.info #292 - Chrome 53βがリリースされました。

Shadow DOM v1のサポートをしています。
v1については次の記事を読むと良いです。

PaymentRequest APIのサポート、Safariと同様Video要素はmutedならautoplayで自動再生をサポートしています。

また、DHE-based ciphersのサポートが削除されています。
非推奨/削除されたAPIなどについては次の記事を読むと良いです。


Make your JavaScript code shine: knockout old ES5 hacksという記事では、既に代替表現があるES5以下のコードについて書かれています。
ES2016以降ではindexOf !== -1ではなくincludesが利用できるなど、ES2015以降ではこれまでのイディオムをより明示的に表現する方法が多くあります。

この記事では、それらについてどういうイディオムなのかと代わりにどう書けるのかが分かりやすく書かれています。


Smooth as Butter: Achieving 60 FPS Animations with CSS3 — OutSystems Experts — Mediumという記事では、スライドメニューバーのCSSアニメーションを60FPSで処理出来るようするまでをステップバイステップで紹介しています。

開発者ツールでのFPSの読み方や変更による変化を分かりやすくまとめています。


ヘッドライン


The State of Vue — The Vue Point — Medium

medium.com/the-vue-point/the-state-of-vue-1655e10a340a

JavaScript library ReleaseNote

Vue.js 2.0.0 RC1リリース。
APIはフリーズされたため、正式リリースまでにAPIはもう変更しないとのこと


ESLint v3.3.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2016/08/eslint-v3.3.0-released

ESLint ReleaseNote

ESLint 3.3.0リリース。
実体と名前が合ってないルールをリネーム(元ルールは非推奨)、新しいルールとしてno-template-curly-in-stringsort-keysの追加など


Chromium Blog: Chrome 53 Beta: Shadow DOM, PaymentRequest, and Android autoplay

blog.chromium.org/2016/08/chrome-53-beta-shadow-dom.html

Chrome ReleaseNote

Chrome 53βリリース。
Shadow DOM v1、PaymentRequest APIのサポート、Video要素はmutedならautoplayで自動再生が可能に、allow-presentationの対応。
HTTP/0.9が非推奨に、TextEncoderは常にutf-8を使うようなるなど


Google Chrome Blog: Flash and Chrome

chrome.googleblog.com/2016/08/flash-and-chrome.html

Chrome

Chrome 53でトラッキング用の小さなFlashをブロック。
Chrome 55で全てのFlashがデフォルトブロックとなり、初回アクセス時に許可を求めるダイアログがでる形


Angular 2 RC5 - NgModules, Lazy Loading and AoT compilation

angularjs.blogspot.com/2016/08/angular-2-rc5-ngmodules-lazy-loading.html

AngularJS ReleaseNote

Angular 2 RC5リリース。
@NgModuleのサポートなど


アーティクル


Introducing #EdgeBug: File web platform bugs with a Tweet | Microsoft Edge Dev Blog

blogs.windows.com/msedgedev/2016/08/11/edgebug-twitter/

MSEdge issue

Twitterで #EdgeBug のハッシュタグ経由でIssueを作成できるように


API Deprecations and Removals in Chrome 53 | Web Updates - Google Developers

developers.google.com/web/updates/2016/08/chrome-53-deprecations

Chrome ReleaseNote

Chrome 53で非推奨/削除されたAPIについて。
また非推奨となるプロセスとポリシーについて


Make your JavaScript code shine: knockout old ES5 hacks

rainsoft.io/make-your-javascript-code-shide-knockout-old-es5-hack/

JavaScript

ES2015で導入された機能や構文で代替できるため、既に使わなくても良くなったES5のイディオムについて


Developer Edition 50: Console, Memory Tool, Net Monitor and more ★ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2016/08/developer-edition-50-console-memory-tool-net-monitor-and-more/

firefox debug

Firefox 50の開発者ツールについて。
コンソールにSource Mapを適応した行数の表示、HTTPログのコールスタックに対応、メモリツールがデフォルトで有効に、WebAssemblyのシンタックスハイライトに対応など


従来のWebアプリの常識を変える! Service WorkerがもたらすWebの未来 | PLAID Engineer Blog

tech.plaid.co.jp/cong-lai-nowebapurinochang-shi-wobian-eru-service-workergamotarasuwebnowei-lai/

ServiceWorker JavaScript

ServiceWorkerがどういうものかという概要的な話。


Offline Google Analytics Made Easy | Web Updates - Google Developers

developers.google.com/web/updates/2016/07/offline-google-analytics

JavaScript google アクセス解析 ServiceWorker

Service Workerを使ったGoogle Analyticsのオフライン対応について


SVG 2 new features · w3c/svgwg Wiki

github.com/w3c/svgwg/wiki/SVG-2-new-features

SVG

SVG 2の新しい機能や変更点について


Smooth as Butter: Achieving 60 FPS Animations with CSS3 — OutSystems Experts — Medium

medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

CSS performance

CSSアニメーションの60FPS出すまでをステップバイステップで見ていく話。
スライドメニューを、position、transform、will-change、クラスの付け外しでそれぞれFPSにどのような変化があるかを見る


flexboxのバグに立ち向かう(flexboxバグまとめ) - Qiita

qiita.com/hashrock/items/189db03021b0f565ae27

CSS issue

CSS flexboxのバグについてスクリーンショットと共に紹介してる


What is Promise.try, and why does it matter? - joepie91's Ramblings

cryto.net/%7Ejoepie91/blog/2016/05/11/what-is-promise-try-and-why-does-it-matter/

JavaScript Promises

Promise.tryのユースケースについて。
ECMAScript標準ではないが、Promise.tryがあることで同期的なエラーが扱いやすくなるという話


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


permission.site

permission.site/

WebPlatformAPI browser JavaScript

HTTPSやパーミッションが必要なブラウザのAPIを試せるサイト


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


zalando/tailor: A streaming layout service for front-end microservices

github.com/zalando/tailor

node.js HTML

layout service libray for front-end


js-joda/js-joda: :clock2: Immutable date and time library for javascript

github.com/js-joda/js-joda

JavaScript library

JSR-310/Joda timeのAPIをインスパイアした日付ライブラリ。


書籍関係


Introduction · React Enlightenment [DRAFT]

www.reactenlightenment.com/

React JavaScript book

Reactについての電子書籍
開眼JavaScriptのシリーズ。


Manning | RxJS in Action

www.manning.com/books/rxjs-in-action

Rx JavaScript ReleaseNote

2017年3月31日発売
RxJSについての書籍


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