2017-12-11のJS

Release 1.9.0: JSX Fragments, EditorConfig and Arrow Parens · prettier/prettier

Prettier 1.9.0リリース。 JSXのFragment(<></>)wpサポート、EditorConfigのサポート、Markdownのサポート改善。

📦 Parcel

HTML,JS,CSSなどをまとめてbundleできるツール。 設定不要で使えること、高速にビルドできることが目的のツール。 ファイルタイプに対する処理をプラグインとして追加できる。

GoogleChromeLabs/jsvu: JavaScript (engine) Version Updater

各種JavaScriptエンジンをダウンロード、インストールできるツール。 eshost-cliと組み合わせることでChakra、JavaScriptCore、SpiderMonkey、V8でのJavaScript実行結果を同時に得られる。

Release Notes for Safari Technology Preview 45 | WebKit

Safari Technology Preview Release 45リリース。 SVGフィルターの最適化、display:contentsをデフォルトで有効化、OffscreenCanvas.getContext("webgl")を実装など

mochify.js/CHANGES.md at v5.0.0 · mantoni/mochify.js

Mochaを使ったテストをブラウザで動かすMchify 5.0.0リリース。 PhantomJSからHeadless Chromeに変更、--urlオプションの追加など

Angular 5.1 & More Now Available – Angular Blog

Angular 5.1リリース。 CLIがService Workerオプション、App Shellオプションサポート、TypeScript 2.5サポートなど

webpack 4.0.0-alpha.0 feedback · Issue #6064 · webpack/webpack

webpack 4.0.0-alpha.0リリース。 Node.js 4のサポート終了、--mode(dev/prod)の追加。 module typeとしてesm、webassemblyのサポート、sideEffects設定のサポート。 新しいプラグインシステムの追加と既存プラグインの変更など

Qiita の新記事ページのレイアウト実装 - Qiita

CSS Grid Layoutとposition: stickyでのレイアウトについて

PuppeteerでWebページからメインコンテンツっぽいところを抽出してみる - Qiita

PuppeteerでスクレイピングしたDOM要素のスコアリングして、メインコンテンツを抽出する仕組みについて

await vs return vs return await - JakeArchibald.com

async functionの中でawaitreturnreturn awaitの違いについてを解説した記事

New in Chrome 63  |  Web  |  Google Developers

Chrome 63リリース。 Dynamic imports、Async iterator、Promise#finallyIntl.PluralRules、CSS overscroll-behaviorプロパティのサポートなど

Node.js Performance 改善ガイド - from scratch

Node.jsのパフォーマンスの調査や測定をする方法について。 メモリリーク、CPUの処理時間、ファイルI/O、ネットワークのボトルネック調査について。 またJavaScriptのdeoptが起きてないか、クラスタやNative Addonなどの代替手法についてなど

Vanilla JSで学ぶRedux - Qiita

Reduxのコードを見ながらReduxの仕組みについて解説している記事。

Prototype Tree · TryCatch

JavaScriptオブジェクトのprototypeツリーをD3.jsを使って可視化する話

歴史的遺物callback interfaceの紹介 - Qiita

addEventListenerのcallback interfaceとrequestAnimationFrameなどのcallback functionという仕様の違いついて。 イベントハンドラにおけるhandleEventの動作について

Using Headless Mode in Firefox – Mozilla Hacks – the Web developer blog

SeleniumをFirefoxのHeadlessモードで動かす方法、Debugging Protocolについてなど

Fast Source Map Generation for React Native – David Aurelio – Medium

React Native(Metro)が利用するSource Mapの高速な実装について https://github.com/facebook/metro/tree/master/packages/metro-source-map

React Performance Fixes on Airbnb Listing Pages – Airbnb Engineering & Data Science – Medium

Reactを使ったアプリケーションのパフォーマンスを測定し、それをどのように修正していったかについての記事。 PureComponentでの無駄な描画を防止、スクロール時の処理、入力欄などについて

Performance Calendar » Clearing cache in the browser

ウェブアプリ側からブラウザのキャッシュをクリアするさまざまな手法のまとめ。 location.reload(true)、Vary、fetch、iframe、Clear-SIte-Dataなどの手法毎にブラウザの対応についてまとめている。

JSConf Budapest 2017 - YouTube

JSConf Budapest 2017の動画まとめ

Eirik Vullum: JavaScript Metaprogramming - ES6 Proxy Use and Abuse | JSConf Budapest 2017 - YouTube

ES Proxyを活用したメタプログラミングについての発表動画

MakeYouAReact - Google スライド

ReactのようなViewライブラリを自作するために必要な技術について解説してるスライド。 実際に実装を作りながら、DOMのdiff/patchなどについて解説している。

Three.js入門サイト - ICS MEDIA

Three.jsについてのチュートリアルサイト。 Three.jsの使い方やWebGLについて

i0natan/nodebestpractices: The largest Node.JS best practices list. Curated from the top ranked articles and always updated

Node.jsとexpressについてのプラクティスガイド。

WasmFiddle

WebAssemblyのjsfiddle的なサービス。 Wasmのコンパイルと実行、wast/wasmのダウンロードができる。

jsdom/whatwg-mimetype: Parses, serializes, and manipulates MIME types, according to the WHATWG MIME Sniffing Standard

MIME typesのパーサ、シリアライズライブラリ

deeplearn.js

WebGLを使った機械学習向けのライブラリ。 同期的な(NumPyのような)計算実行と遅延的な(TensorFlowのような)計算実行をサポートしている。