JSer.info #260 - petehunt/react-howtoではReact周りのエコシステムの入門について書かれています。
npm、Browserifyやwebpack、Fluxライブラリなどについてどう学んでいくべきかについてなどが書かれています。
Webkit! RESOLVED FIXED - otsukareではFirefox 46からlayout.css.prefixes.webkitのオプションがデフォルトでtrueとなった経緯が書かれています。
オプション名の通り、CSSの-webkit- prefixをデフォルトで認識するものとなっています。
-webkit-box(現在のFlexbox)などをWebKitブラウザのみを想定したコードしか書かれてないサイトでも描画出来るようにする目的で導入されています。
アジア(特に日本)のモバイルサイトでは、WebKitブラウザのみを想定したものが多いため、特定の-webkit- prefixについては認識するようになっています。
MSEdgeでも同様の対処が取られています。
以下の記事も合わせて読んでみるといいかもしれません。
- 総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi Engineers' Blog
- Well, I'm Back: innerText: Cleaning A Dark Corner Of the Web
Setting up ES6 by Axel Rauschmayer [Leanpub PDF/iPad/Kindle]という電子書籍ではBabelを使ったES6のコードを扱う方法などについて書かれています。
また、ES6ではModuleの構文のみを定義し、読み込みの解釈については議論中となっています。
そのため、CommonJSとの相互運用性についてはツールの解釈次第となっている点についても詳しく書かれています。
アーティクル
petehunt/react-howto
github.com/petehunt/react-howto
React作者によるReactのエコシステム入門のガイドライン
Revisiting Firefox’s DevTools – Smashing Magazine
www.smashingmagazine.com/2015/12/revisiting-firefox-devtools/
Firefox開発者ツールを改めて紹介している記事。
最近色々な機能が追加されている。
Angular 2 versus React: There Will Be Blood — Medium
medium.com/@housecor/angular-2-versus-react-there-will-be-blood-66595faafd51
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
IEやWebKitにも存在するinnerTextは仕様と相互互換性がなかった。
WebKitを前提とするモバイルサイトで多く使われているため、Firefoxでも実装することとなった。
同時に仕様とテストケースを書いたという話
Webkit! RESOLVED FIXED - otsukare
www.otsukare.info/2016/01/04/webkit-resolved-fixed
FirefoxでCSSの-webkit- prefixを解釈するオプションがデフォルトで有効となった。
-webkit- prefixしか書かれてないサイトも表示できるようにするのが目的
- 1213126 – Enable layout.css.prefixes.webkit by default
- 総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi Engineers' Blog
ChromeDevTool - Chrome Developer Toolsでパフォーマンス計測・改善 - Qiita
qiita.com/y_fujieda/items/a0a69151cf7307039f74
Chrome開発者ツールのそれぞれのパネルの図解。
操作方法や項目の意味などについて書かれてる。
JavaScript - AudioWorker を試してみる - Qiita
qiita.com/mohayonao/items/ce357230946cfa2303c2
Web Audio APIのAudioWorkerについて。
Managing the private data of ES6 classes
www.2ality.com/2016/01/private-data-classes.html
ES6 Classesでプライベート風味なデータ保持パターン
Lerna を使って、 Babel や React が採用している monorepo を試してみる - Qiita
qiita.com/kimamula/items/0b4dff363933bfe74506
Babelのようなmonorepoをlernaを使って管理する方法について
Flux explained for newbies – Part 1 | DevButze
コンポーネントベースでUIを考えていった時になぜFluxのようなアーキテクチャが必要となっていくかについての連載
Day 2: Testing React Applications – 12 Devs of Xmas
12devsofxmas.co.uk/2015/12/day-2-testing-react-applications/
React Componentのテストについて。
jsdom、Enzymeを使ったテスト方法など
AddyOsmani.com - Offline installation of npm packages
addyosmani.com/blog/using-npm-offline/
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
HTML5 Videoを背景に使う方法や注意点について
スライド、動画関係
Getting Started with Redux - Course by @dan_abramov @eggheadio
egghead.io/series/getting-started-with-redux
Redux作者によるRedux入門のスクリーンキャスト
Node.js Interactive 2015 - YouTube
www.youtube.com/playlist?list=PLfMzBWSH11xYjL8oFumSfzOf6-kr8_t-o
Node.js Interactive 2015の動画まとめ
- Node.js Interactive 2015 | Linux Conferences and Linux Events | The Linux Foundation
- duffn/nodeinteractive-2015
サイト、サービス、ドキュメント
orizens/angular-es2015-styleguide
github.com/orizens/angular-es2015-styleguide
AngularJS 1.xとES2015を組み合わせたスタイルガイド
HTML 5 Canvas Cheat Sheet - WebsiteSetup.org
websitesetup.org/html-5-canvas-cheat-sheet/
Canvasのチートシート
WPO Stats
ウェブパフォーマンスの最適化について書かれた記事などのまとめ
ソフトウェア、ツール、ライブラリ関係
Lucifier129/react-lite
github.com/Lucifier129/react-lite
ReactのCore APIに関しての互換実装ライブラリ。
サーバサイドレンダリング、React.PropTypes、addonsなどを取り除いて、より小さなファイルサイズとすることを目的としている。
substack/hyperx
virtual-dom、React、hyperscriptに対応したTemplate Stringsを使ったビルダーライブラリ。
narirou/jconv
Pure JavaScriptで書かれたShift_JIS(CP932)、ISO-2022-JP(-1)、EUC-JP、UTF-8、UNICODEの相互変換を行うライブラリ
unit-coverage/unit-coverage
github.com/unit-coverage/unit-coverage
コードカバレッジツール。
コード同士の関係もカバレッジのレポートに含める事が出来る。
JSCSなどで利用されている
書籍関係
Setting up ES6 by Axel Rauschmayer [Leanpub PDF/iPad/Kindle]
Dr.AxelのBabelを使ったES6の導入についての電子書籍。
loaderの仕組みがtranspilerやCommonJSに依存している中で、モジュール周りの挙動の誤解を解く内容が書かれてる
