Fork me on GitHub

2016-01-06のJS: Reactエコシステム入門、ベンダープレフィックスとウェブ標準、Babelセットアップ本

Edit on GitHub 編集履歴を見る

JSer.info #260 - petehunt/react-howtoではReact周りのエコシステムの入門について書かれています。

npmBrowserifywebpack、Fluxライブラリなどについてどう学んでいくべきかについてなどが書かれています。


Webkit! RESOLVED FIXED - otsukareではFirefox 46からlayout.css.prefixes.webkitのオプションがデフォルトでtrueとなった経緯が書かれています。

オプション名の通り、CSSの-webkit- prefixをデフォルトで認識するものとなっています。
-webkit-box(現在のFlexbox)などをWebKitブラウザのみを想定したコードしか書かれてないサイトでも描画出来るようにする目的で導入されています。

アジア(特に日本)のモバイルサイトでは、WebKitブラウザのみを想定したものが多いため、特定の-webkit- prefixについては認識するようになっています。

MSEdgeでも同様の対処が取られています。

以下の記事も合わせて読んでみるといいかもしれません。


Setting up ES6 by Axel Rauschmayer [Leanpub PDF/iPad/Kindle]という電子書籍ではBabelを使ったES6のコードを扱う方法などについて書かれています。

また、ES6ではModuleの構文のみを定義し、読み込みの解釈については議論中となっています。
そのため、CommonJSとの相互運用性についてはツールの解釈次第となっている点についても詳しく書かれています。


アーティクル


petehunt/react-howto

github.com/petehunt/react-howto

React Tools JavaScript tutorial

React作者によるReactのエコシステム入門のガイドライン


Revisiting Firefox’s DevTools – Smashing Magazine

www.smashingmagazine.com/2015/12/revisiting-firefox-devtools/

firefox debug

Firefox開発者ツールを改めて紹介している記事。
最近色々な機能が追加されている。


Angular 2 versus React: There Will Be Blood — Medium

medium.com/@housecor/angular-2-versus-react-there-will-be-blood-66595faafd51

AngularJS React

AngularJSとReactの対比。

Angular 2 continues to put “JS” into HTML. React puts “HTML” into JS.


Well, I'm Back: innerText: Cleaning A Dark Corner Of the Web

robert.ocallahan.org/2016/01/innertext.html

firefox DOM

IEやWebKitにも存在するinnerTextは仕様と相互互換性がなかった。
WebKitを前提とするモバイルサイトで多く使われているため、Firefoxでも実装することとなった。
同時に仕様とテストケースを書いたという話


Webkit! RESOLVED FIXED - otsukare

www.otsukare.info/2016/01/04/webkit-resolved-fixed

firefox webkit

FirefoxでCSSの-webkit- prefixを解釈するオプションがデフォルトで有効となった。
-webkit- prefixしか書かれてないサイトも表示できるようにするのが目的


ChromeDevTool - Chrome Developer Toolsでパフォーマンス計測・改善 - Qiita

qiita.com/y_fujieda/items/a0a69151cf7307039f74

Chrome debug

Chrome開発者ツールのそれぞれのパネルの図解。
操作方法や項目の意味などについて書かれてる。


JavaScript - AudioWorker を試してみる - Qiita

qiita.com/mohayonao/items/ce357230946cfa2303c2

audo JavaScript

Web Audio APIのAudioWorkerについて。


Managing the private data of ES6 classes

www.2ality.com/2016/01/private-data-classes.html

ECMAScript JavaScript

ES6 Classesでプライベート風味なデータ保持パターン


Lerna を使って、 Babel や React が採用している monorepo を試してみる - Qiita

qiita.com/kimamula/items/0b4dff363933bfe74506

JavaScript library

Babelのようなmonorepoをlernaを使って管理する方法について


Flux explained for newbies – Part 1 | DevButze

devbutze.com/p/216

Flux tutorial

コンポーネントベースでUIを考えていった時になぜFluxのようなアーキテクチャが必要となっていくかについての連載


Day 2: Testing React Applications – 12 Devs of Xmas

12devsofxmas.co.uk/2015/12/day-2-testing-react-applications/

React JavaScript testing

React Componentのテストについて。
jsdom、Enzymeを使ったテスト方法など


AddyOsmani.com - Offline installation of npm packages

addyosmani.com/blog/using-npm-offline/

npm

npm installをオフラインでも出来るようにするためのTips。
--cache-min、local-npm、npm_lazyについて


the new code – Create Fullscreen HTML5 Page Background Video

thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

JavaScript 動画

HTML5 Videoを背景に使う方法や注意点について


スライド、動画関係


Getting Started with Redux - Course by @dan_abramov @eggheadio

egghead.io/series/getting-started-with-redux

redux JavaScript React

Redux作者によるRedux入門のスクリーンキャスト


Node.js Interactive 2015 - YouTube

www.youtube.com/playlist?list=PLfMzBWSH11xYjL8oFumSfzOf6-kr8_t-o

node.js 動画 まとめ

Node.js Interactive 2015の動画まとめ


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


orizens/angular-es2015-styleguide

github.com/orizens/angular-es2015-styleguide

AngularJS

AngularJS 1.xとES2015を組み合わせたスタイルガイド


HTML 5 Canvas Cheat Sheet - WebsiteSetup.org

websitesetup.org/html-5-canvas-cheat-sheet/

HTML5 canvas チートシート

Canvasのチートシート


WPO Stats

wpostats.com/

performance まとめ

ウェブパフォーマンスの最適化について書かれた記事などのまとめ


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


Lucifier129/react-lite

github.com/Lucifier129/react-lite

React library

ReactのCore APIに関しての互換実装ライブラリ。
サーバサイドレンダリング、React.PropTypes、addonsなどを取り除いて、より小さなファイルサイズとすることを目的としている。


substack/hyperx

github.com/substack/hyperx

JavaScript React VirtualDOM library

virtual-dom、React、hyperscriptに対応したTemplate Stringsを使ったビルダーライブラリ。


narirou/jconv

github.com/narirou/jconv

JavaScript 文字コード library

Pure JavaScriptで書かれたShift_JIS(CP932)、ISO-2022-JP(-1)、EUC-JP、UTF-8、UNICODEの相互変換を行うライブラリ


unit-coverage/unit-coverage

github.com/unit-coverage/unit-coverage

JavaScript testing

コードカバレッジツール。
コード同士の関係もカバレッジのレポートに含める事が出来る。
JSCSなどで利用されている


書籍関係


Setting up ES6 by Axel Rauschmayer [Leanpub PDF/iPad/Kindle]

leanpub.com/setting-up-es6

JavaScript ECMAScript ebook

Dr.AxelのBabelを使ったES6の導入についての電子書籍。
loaderの仕組みがtranspilerやCommonJSに依存している中で、モジュール周りの挙動の誤解を解く内容が書かれてる


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