Fork me on GitHub

2016-11-08のJS: sitespeed.io 4.0、webpack 2 beta入門、JavaScriptスタックチュートリアル

Edit on GitHub 編集履歴を見る

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より前の設定)

また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/

browser performance Tools

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 ReleaseNote

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 JavaScript

Firefox Nightlyにasync/awaitが実装された。


アーティクル


Getting Started with Webpack 2

blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783

webpack tutorial

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/

CSS

Bootstrap 4αでの変更点について


Vue.js 1.x から 2.0 への移行のポイント | d.sunnyone.org

d.sunnyone.org/2016/11/vuejs-1x-20.html

JavaScript library

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

TypeScript 2.0のreadonlyについて


Cooperative Scheduling with requestIdleCallback ★ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2016/11/cooperative-scheduling-with-requestidlecallback/

JavaScript WebPlatformAPI

Firefox 52で実装されるrequestIdleCallbackについての解説。
timeRemaining()timeoutオプションやキャンセルした場合についてなど。


Pointing the Way Forward | Web | Google Developers

developers.google.com/web/updates/2016/10/pointer-events

JavaScript

Pointer eventsについて。
PenやTouchなどのイベントモデルを抽象化したもの。
pointerTypeでイベントの種類ごと扱う方法、pointercanceltouch-actionについて


Build a Universal JavaScript App with Next.js

auth0.com/blog/building-universal-apps-with-nextjs/

React サーバー library tutorial

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 Tools library tutorial 翻訳

JavaScriptのエコシステムや著名なライブラリを使ったチュートリアルの翻訳。
色々なツールをあわせ使うことを前提に書かれたガイド


jareware/css-architecture: 8 simple rules for a robust, scalable CSS architecture

github.com/jareware/css-architecture

CSS 設計

8つのルールを元にしたCSSのアーキテクチャ。
コンポーネントとCSSの関係についてが中心


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


vhf/v8-bailout-reasons: A list of Crankshaft bailout reasons with examples

github.com/vhf/v8-bailout-reasons

V8 JavaScript

V8のdeoptimizationがなぜ起きるのかについて"Bailout reasons"と共に理由を解説してるリポジトリ


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


turbo.js - Easy GPGPU

turbo.github.io/

JavaScript WebGL

GLSLを使って演算処理を行うライブラリ


tfennelly/browserify-tree: Generate a Browserify bundle dependency tree for bundled modules

github.com/tfennelly/browserify-tree

browser Tools

Browserifyでbundleしたファイルの依存ツリーを見ることができるツール


github.com/naver/egjs

jQuery library

jQueryベースのUIインタラクション、エフェクトライブラリ


Grimoire.js

grimoire.gl/

JavaScript WebGL library

GOMLというHTMLライクなXMLシンタックスで記述して、WebGLを使った3D表現を行うライブラリ。
<scene><camera>といったノードを組み合わせることで表現する。


書籍関係


Securing Third-Party Code - O'Reilly Media

shop.oreilly.com/product/0636920051695.do

JavaScript OSS security library book

2017年1月発売
JavaScriptのサードパーティのコードを安全に使う方法についての書籍


Developing SPAs - O'Reilly Media

shop.oreilly.com/product/0636920046349.do

JavaScript book

2017年1月発売
.NET開発者向けのSPA本


Pro Angular 2: ADAM FREEMAN: 9781484223062: Amazon.com: Books

www.amazon.com/Pro-Angular-2-ADAM-FREEMAN/dp/1484223063

AngularJS book

2017年5月8日発売
AngularJS 2についての書籍


WebデベロッパーのためのReact開発入門 JavaScript UI ライブラリの基本と活用 | 柴田 文彦 |本 | 通販 | Amazon

www.amazon.co.jp/Web%E3%83%87%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEReact%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-JavaScript-UI-%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%A8%E6%B4%BB%E7%94%A8-%E6%9F%B4%E7%94%B0/dp/4295000337

JavaScript React book

2016年11月25日発売
Reactの入門本


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