JSer.info #271 - Chrome 50 Betaがリリースされました。
ページを完全に表示するために必要なリソースを先に読み込めるlink rel="preload"がサポートされています。
<link rel="preload">について詳しくは以下の記事にまとまっています。
また、FirefoxやIEには実装されていましたがChromeでも`HTMLCanvasElement.toBlob()がサポートされています。
Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログという記事ではReactを使ったウェブアプリのパフォーマンス改善方法につえ書かれています。
react-addons-perfを使い計測し、どこに問題があって、どうやって解決したのかという話が書かれています。
合わせて以下の記事や公式のドキュメントを見るといいかと思います。
Node.js ES2015/ES6 supportというサイトではNode.jsのバージョン別ECMAScriptサポート状況がまとめられています。
Node.js版ECMAScript 6 compatibility tableというのが分かりやすいかもしれません。
Node.js v6ではES6の大分部がサポートされる予定ですが、v6はV8 5.0のリリースを待ってから公開される予定となっています。
そのため、Node.js v6は4月後半にリリース予定となるようです。
ヘッドライン
Announcing Marko v3: From HTML to HTML-JS | Marko
markojs.com/blog/announcing-marko-v3/
テンプレートエンジンのMarko v3リリース。
HTML-JS syntaxというJavaScriptのように書けるテンプレート表現のサポート、コンパイル時最適化の対応など
Chromium Blog: Chrome 50 Beta: Push notification improvements and declarative preload
blog.chromium.org/2016/03/chrome-50-beta-push-notification.html
Chrome 50 Betaリリース。
<link rel='preload'>、HTMLCanvasElement.toBlob()のサポート、iframeのsandbox属性値がサポートされているかを判定出来るように、Document.defaultCharsetを削除など
- DOMTokenList Validation Added in Chrome 50 | Web Updates - Google Developers
- Preload: What Is It Good For? – Smashing Magazine
protractor/CHANGELOG.md at 3.2.0 · angular/protractor
github.com/angular/protractor/blob/3.2.0/CHANGELOG.md
Protractor 3.2.0リリース。
TypeScriptサポートのための変更追加、任意のバージョンのWebDriverを指定できるようになるなど
Google Cloud Platform Blog: Node.js on Google App Engine goes beta
cloudplatform.googleblog.com/2016/03/Node.js-on-Google-App-Engine-goes-beta.html
GAEでNode.jsがβサポートされた
アーティクル
Developer Edition 47 – User agent emulation, popup debugging and more ★ Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2016/03/developer-edition-47-user-agent-emulation-popup-debugging-and-more/
Firefox 47の開発者ツールの新しい機能について。
どういう流れでオブジェクトが保持されているのかを可視化、コンソールへ複数行入力出来るように、Storage InspectorでCache APIをサポートなど
Debugging with Node
krasimirtsonev.com/blog/article/debugging-with-node
Node.jsに元々入っているnode debugコマンドの使い方について
reBEM: React ♥ BEM — Medium
medium.com/@mistadikay/rebem-react-bem-20d875157017
ReactとBEMの組み合わせについて。
reBEM layersという考え方について
An Introduction to jQuery's Deferred Objects
www.sitepoint.com/introduction-jquery-deferred-objects/
jQuery Deferredの歴史や使い方について
1.x、2.x、3.xそれぞれでの違いについて書かれている
Animating with React, Redux, and d3 | A geek with a hat
swizec.com/blog/animating-with-react-redux-and-d3/swizec/6775
ReactとD3.jsを組み合わせてアニメーションするComponentを作る話。
Container ComponentにStateが出てくるためReduxで管理している。
パーティクルを表示するなかでどこにボトルネックがあるかについて
Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログ
tech.gmo-media.jp/post/141458071484/react-perf-tuning
React Componentで作成したアプリにのボトルネックの調査方法や改善手法について。
react-addons-perfを使ってプロファイルを見ながらやっていく話
Redux Middleware in Depth - Qiita
qiita.com/kuy/items/c6784fe443f1d5c7bbdc
Reduxのmiddlewareについて。
middlewareの適応順や実行順により起きる問題や解決方法について詳しく書かれている。
Why I Write Plain JavaScript Modules
ponyfoo.com/articles/why-i-write-plain-javascript-modules
なぜDOMのライブラリをReact/AngularJSなど特定のフレームワーク向けではなく、PureなDOMライブラリとして書くのかについて
The State of Browser APIs - 1
hwclass.in/2016/03/09/the-next-generation-of-browser-apis/
現在ブラウザで使える色々な新しいAPIについての紹介
JavaScriptのPromiseオブジェクトについて調べた事 | QUARTETCOM TECH BLOG
tech.quartetcom.co.jp/2016/03/22/javascript-promise/
Promiseについて簡潔にまとまった内容。
AngularJSの$qについても扱われてる
サイト、サービス、ドキュメント
Node.js ES2015/ES6 support
Node.js版 ECMAScript compat-table
Your first Progressive Web App
codelabs.developers.google.com/codelabs/your-first-pwapp/
Progressive Web Appについて学ぶワークショップ資料
ソフトウェア、ツール、ライブラリ関係
gravmatt/force-js: The easy way to scroll and animate your page
要素をアニメーションする依存のないライブラリ
danigb/tonal: Music tonal elements —pitches, chords, scales, keys— in Javascript
Web MIDI、Web Audio APIを扱う小さなライブラリを集めたmono repo。
GoogleChrome/proxy-polyfill: Proxy object polyfill
github.com/GoogleChrome/proxy-polyfill
ES6 Proxyのpolyfillライブラリ。
get/set/apply/constructなど一部のtrapのみをサポートしている
