JSer.info #282 - What's New in Shadow DOM v1 (by examples) — hayato.ioという記事では、Shadow DOM仕様の策定者でもある@shadow_hayatoさんよるShadow DOM v0とv1の違いについて解説されています。
closed shadow rootという概念の追加や、v1では/deep/や::shadowは利用できなくなり、
slot(::slotted)を利用する点など色々な違いがあります。
コード例を中心に解説されているので、Shadow DOMに興味がある人は見ておくといいです。
ReactEuropeが開催され、その動画が公開されています。
また、The state of React.js 2016 // Speaker Deckというスライドではここ半年ぐらいのReactの変化などについてまとめられています。
Reactの動向はReact Coreチームのミーティングノートが公開されているので、こちらも合わせて参照するといいです。
JavaScript Plugin Architectureという電子書籍では、JavaScriptのライブラリやツールにおけるプラグイン設計について書かれています。
現時点では、jQuery、ESLint、Connect、gulp、Reduxのプラグインについてそれぞれプラグインの仕組み自体を実装しつつ解説した内容が書かれています。
全部まとめて読むというよりは気になったものをパッと見るリファレンス的な感じになっています。
ECMAScript便り〆
5月に行われたTC39 Meetingの記録が公開されたので、主要なできごとを簡単に書いておきます。
詳しくはミーティングノートを読んでください
- tc39/proposals: Tracking ECMAScript Proposals | ECMAScript Daily
- 今までProposalはtc39/ecma262にまとめがありましたが、単独のリポジトリに移動しました
- Arrive TC39 meeting notes for 2016-05 | ECMAScript Daily
- 2016年5月のミーティングノートが公開されました
- 6月中旬にはECMAScript 2016の正式リリースが控えています。
- [Stage 0] ljharb/proposal-promise-finally: ECMAScript Proposal, specs, and reference implementation for Promise.prototype.finally | ECMAScript Daily
Promise#finallyのProposalがStage 0になりました
- [Stage 4] Per May 2016 TC39 consensus, String#{padStart,padEnd} is now stage 4! by ljharb · Pull Request #581 · tc39/ecma262 | ECMAScript Daily
- [Stage 4] Per May 2016 TC39 consensus, Object.getOwnPropertyDescriptors is now stage 4! by ljharb · Pull Request #582 · tc39/ecma262 | ECMAScript Daily
String#{padStart,padEnd}とObject.getOwnPropertyDescriptorsがStage 4となりES2017に入る
- Cancelable promises | ECMAScript Daily
- Promiseのキャンセル方法としてCancelTokenと
Promise#cancelの2種類が提案され、議論が開始された - zenparsing/es-cancel-token: Cancel Tokens for ECMAScript
- ES Observableにも関わってくるので、Remove forEach and add "subscribe" overload by zenparsing · Pull Request #97 · zenparsing/es-observableも参照。
- domenic/cancelable-promise: Cancelable promises proposal for JavaScript
- Promiseのキャンセル方法としてCancelTokenと
ヘッドライン
V8 JavaScript Engine: Release 5.2
v8project.blogspot.com/2016/06/release-52.html
V8 5.2リリース。
Exponentiation operator **のサポート、Array.isArray、in operator、Function#bindのパフォーマンス改善など
アーティクル
Getting Started with TDD in React - Semaphore
semaphoreci.com/community/tutorials/getting-started-with-tdd-in-react
Enzymeを使ったReact Componentのテストについて
What's New in Shadow DOM v1 (by examples) — hayato.io
Shadow DOM v0とv1の違いについて。
@shadow_hayatoさん(仕様策定者)によるコード例を元にした解説。
Chromeのヘッドレスブラウザがやってくる。というわけで試してみた。 - Qiita
qiita.com/devneko/items/51f2e114a7e0b3389435
Chromeのヘッドレスブラウザについて
Infinite collections with ES6 generators - Advanced Web Machinery
advancedweb.hu/2016/05/31/infinite-collections-with-es6-generators/
Iteratorを使った無限リストについて
Why we chose MobX over Redux for Spectacle Editor
formidable.com/blog/2016/06/02/why-we-chose-mobx-over-redux-for-spectacle-editor/
Reduxとかと同じくアプリケーションのStateを管理するMobXの特徴についての紹介
Creating A Living Style Guide: A Case Study – Smashing Magazine
www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/
スタイルガイドのケーススタディ
Improving Your CSS with Parker – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
csswizardry.com/2016/06/improving-your-css-with-parker/
CSSの解析ツールであるParkerについて
webpackのDLLバンドルを使ってビルドを速くする - Qiita
qiita.com/pirosikick/items/c77db84dbed4c447a6fe
webpackのビルド速度の改善について。
vendorライブラリだけ別にビルドし読み込んで使うDLLバンドル、cacheDirectory、externalsとの違いについてなど
スライド、動画関係
The state of React.js 2016 // Speaker Deck
speakerdeck.com/koba04/the-state-of-react-dot-js-2016
Reactの最近の変更や今後の変更、非推奨になる予定の機能についてなど
ReactEurope 2016 - Day 1 - YouTube
www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A
ReactEurope 2016の動画まとめ
Building React Applications with Idiomatic Redux - Course by @dan_abramov @eggheadio
egghead.io/courses/building-react-applications-with-idiomatic-redux
Redux作者によるReduxでアプリケーションを作るスクリーンキャスト
Next Vue.js 2.0 // Speaker Deck
speakerdeck.com/kazupon/next-vue-dot-js-2-dot-0
Vue.js 2.0のレンダリングフローについて
Flow vs TypeScript
djcordhose.github.io/flow-vs-typescript/2016_hhjs.html#/
TypeScriptとFlowTypeの型指定の比較についてのスライド
サイト、サービス、ドキュメント
HyperDev
サーバも書けるJSFiddle的なサービス。
Node.jsでサーバ側、HTML/CSS/JSなフロントも一緒に書けるエディタサービス
Front-end Hyperpolyglot
jeffcarp.github.io/frontend-hyperpolyglot/
React/Angular1,2/Ember/Polymer/Vueのテンプレートの書き方比較
ソフトウェア、ツール、ライブラリ関係
epoberezkin/ajv: The fastest JSON schema Validator. Supports v5 proposals
JSON Schema validatorライブラリ
MJB-code6/SkyPort: Add offline functionality to your web app
Service Workerを使ったオフラインモードを実現するライブラリ。
Frend — A collection of accessible, modern front-end components.
AccessibleなDOM UIを実現するためのJavaScriptライブラリ。CSSフレームワークのように特定のクラスを付けた要素にWAI-ARIAの属性を付加していく。
GoogleChrome/lighthouse: auditing and performance metrics for Progressive Web Apps
github.com/GoogleChrome/lighthouse
Service Workerを使ってのオフライン対応の有無、Speed IndexなどのロードパフォーマンスなどProgressive Web Appsに関する計測ツール
書籍関係
JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた | Web Scratch
efcl.info/2016/06/06/JavaScript-Plugin-Architecture/
JavaScriptのプラグイン設計のケーススタディ本。
jQuery、ESLint、Connect、gulp、Reduxなどのプラグインの仕組みを実装しながら学ぶ電子書籍
