JSer.info #304 - ウェブサイトのパフォーマンス計測ツールであるsitespeed.io v4.0がリリースされました。
4.0ではGraphite/Grafanaと組み合わせたPerformance DashboardがセットアップできるDockerの設定も公開されています。
curl -O https://raw.githubusercontent.com/sitespeedio/sitespeed.io/master/docker/docker-compose.yml
docker-compose up
関連(v4より前の設定)
- graphite, grafana, sitespeed.io, diamond で継続 Web パフォーマンスモニタリング - Qiita
- 続・パフォーマンス計測実験で Graphite も Docker に置き換えた ::ハブろぐ
またv4.0では、Pre/Postスクリプトでログインに対応、プラグインの仕組み、HTTP/2、HARファイルの対応改善、モバイル対応などの改善が含まれています。
単純にsitespeed.ioでチェックするだけなら、npmで簡単に入るので試してみると面白いかもしれません。
npm install -g sitespeed.io
sitespeed.io https://jser.info
Getting Started with Webpack 2という記事では、webpack 2(beta)を元にしたチュートリアルが紹介されています。
webpack#1545に作者である@sokraによるwebpack 2のステータスについて書かれています。
「今年中にはリリースしたいが、まだドキュメント周りにまだ問題があるためContributionを歓迎しています」とのことです。
JavaScript Stack from Scratch(翻訳: ゼロから始めるJavaScript生活)では、JavaScriptのエコシステムを活用するチュートリアルが公開されています。
これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。
とあるようにツールを組み合わせて利用することを主軸としているので、一度見てみると面白いかもしれません。
ヘッドライン
Welcome sitespeed.io 4.0
www.sitespeed.io/sitespeed.io-4.0-is-released/
Sitespeed.io 4.0リリース。
Dockerでgrafanaのダッシュボードを含んだセットアップが用意された、Pre/Postスクリプトでログインに対応、プラグイン、HTTP/2、HARファイルの対応改善、モバイル対応など
Release v0.34.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.34.0
FlowType v0.34.0リリース。
empty typeの追加、AsyncIterationの対応など
async/await support in Firefox | Firefox Nightly News
blog.nightly.mozilla.org/2016/11/01/async-await-support-in-firefox/
Firefox Nightlyにasync/awaitが実装された。
アーティクル
Getting Started with Webpack 2
blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783
webpack 2を使ったビルドの設定について。
multiple entry、loader、bundleの分割などについて
What's New and What's Changed in Bootstrap 4 -Telerik Developer Network
developer.telerik.com/featured/whats-new-whats-changed-bootstrap-4/
Bootstrap 4αでの変更点について
Vue.js 1.x から 2.0 への移行のポイント | d.sunnyone.org
d.sunnyone.org/2016/11/vuejs-1x-20.html
Vue 1.xから2.0へのマイグレーションについて。
テンプレートが事前コンパイルされるようになったことでの違いや移行方法、気をつけるポイントについて
TypeScript 2.0: Read-Only Properties | Marius Schulz
blog.mariusschulz.com/2016/10/31/typescript-2-0-read-only-properties
TypeScript 2.0のreadonlyについて
Cooperative Scheduling with requestIdleCallback ★ Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2016/11/cooperative-scheduling-with-requestidlecallback/
Firefox 52で実装されるrequestIdleCallbackについての解説。
timeRemaining()、timeoutオプションやキャンセルした場合についてなど。
- Cooperative Scheduling of Background Tasks（日本語訳）
- Using requestIdleCallback | Web | Google Developers
Pointing the Way Forward | Web | Google Developers
developers.google.com/web/updates/2016/10/pointer-events
Pointer eventsについて。
PenやTouchなどのイベントモデルを抽象化したもの。
pointerTypeでイベントの種類ごと扱う方法、pointercancelやtouch-actionについて
Build a Universal JavaScript App with Next.js
auth0.com/blog/building-universal-apps-with-nextjs/
Next.jsを使ったアプリケーションを作るチュートリアル。
takahashim/js-stack-from-scratch: Step-by-step tutorial to build a modern JavaScript stack from scratch
github.com/takahashim/js-stack-from-scratch
JavaScriptのエコシステムや著名なライブラリを使ったチュートリアルの翻訳。
色々なツールをあわせ使うことを前提に書かれたガイド
jareware/css-architecture: 8 simple rules for a robust, scalable CSS architecture
github.com/jareware/css-architecture
8つのルールを元にしたCSSのアーキテクチャ。
コンポーネントとCSSの関係についてが中心
サイト、サービス、ドキュメント
vhf/v8-bailout-reasons: A list of Crankshaft bailout reasons with examples
github.com/vhf/v8-bailout-reasons
V8のdeoptimizationがなぜ起きるのかについて"Bailout reasons"と共に理由を解説してるリポジトリ
ソフトウェア、ツール、ライブラリ関係
turbo.js - Easy GPGPU
GLSLを使って演算処理を行うライブラリ
tfennelly/browserify-tree: Generate a Browserify bundle dependency tree for bundled modules
github.com/tfennelly/browserify-tree
Browserifyでbundleしたファイルの依存ツリーを見ることができるツール
naver/egjs: Set of UI interactions, effects and utility components library using jQuery.
jQueryベースのUIインタラクション、エフェクトライブラリ
Grimoire.js
GOMLというHTMLライクなXMLシンタックスで記述して、WebGLを使った3D表現を行うライブラリ。
<scene>や<camera>といったノードを組み合わせることで表現する。
書籍関係
Securing Third-Party Code - O'Reilly Media
shop.oreilly.com/product/0636920051695.do
2017年1月発売
JavaScriptのサードパーティのコードを安全に使う方法についての書籍
Developing SPAs - O'Reilly Media
shop.oreilly.com/product/0636920046349.do
2017年1月発売
.NET開発者向けのSPA本
Pro Angular 2: ADAM FREEMAN: 9781484223062: Amazon.com: Books
www.amazon.com/Pro-Angular-2-ADAM-FREEMAN/dp/1484223063
2017年5月8日発売
AngularJS 2についての書籍
WebデベロッパーのためのReact開発入門 JavaScript UI ライブラリの基本と活用 | 柴田 文彦 |本 | 通販 | Amazon
2016年11月25日発売
Reactの入門本
