JSer.info #312 - PostCSS まとめ - Qiitaという記事では、PostCSSとはどのようなものなのかについて書かれています。
PostCSSはCSSのツール基盤となるフレームワークで、CSSパーサやジェネレータなどを含んでいるもので、プラグインとしてCSSに対する様々な処理を扱えるようになっています(パーサ自体もプラグインで拡張できるのでSassなども一部扱えます。)
この記事では、PostCSSを使って動くプリプロセッサやLinterといったツールなどについて紹介されています。
Optimise your web development workflow 2016というスライドでは、Chromeの開発者ツールの機能について紹介されています。
開発者ツールには大量の機能がありますが、GIF画像とともにそれらの機能を紹介しています。
Elements、Timeline、Networks、Auditsパネルにある機能やそれに関連する仕様やツールなども紹介しているので、
一度見てみると面白いかもしれません。
また、1Tips/1ページ形式で開発者ツールのTipsを紹介しているので合わせてみると良いかもしれません。
Fuseboxというbundler/module loaderツールが公開されています。
webpackなどが近いツールで、プラグインで変換レイヤーを追加でき、その結果を一つのファイルにまとめるbundlerです。
また、FuseBox.importというLoader APIも合わせて利用でき、webpackやSystemJSなどに近い機能を持っています。
高速な変換がウリの一つで、モジュールの依存関係と変換済みファイルをキャッシュすることで、再変換時の処理時間が短くできるようになっています。
FuseBox cache and deps.json pic.twitter.com/4EjS62HY28
— azu (@azu_re) January 4, 2017
fuse-box/fuse-boxのソースコードはTypeScriptで書かれていて、
まだでたばかりなのでソースコードを見てみるのも面白いかもしれません。
お知らせ
- jser/pingにPingのIssueを立てると@jser_infoのTwitterに流れるようになりました
- データ分析用にJSer.info Data Dashboardを作りました
- JSer.infoの記事や紹介URLに関するデータを色々な形でみることを目的にしたページです
- 面白そうなデータの読み方があるならjser/data-dashboard: JSer.info Data Dashboard.にIssue/PRを立てると良さそうです。
ヘッドライン
StealJS 1.0 Release
www.bitovi.com/blog/stealjs-1.0-release
開発時は動的なモジュールローダで、本番時はsteal-toolsでのproduction buildでbundleできるStealJS 1.0リリース
アーティクル
Optimizing Page Speeds With Lazyloading | Jscrambler Blog
blog.jscrambler.com/optimizing-page-speeds-with-lazyloading/
AngularのルーティングとコンポーネントのLazyLoadについて
Lazy Loading - React
webpack.js.org/guides/lazy-load-react/
webpack2を使ったReactコンポーネントのLazyLoad方法についてのドキュメント
FlowtypeでFluxアーキテクチャに型付けをするという発表をした - Please Drive Faster
joe-re.hatenablog.com/entry/2016/12/29/204917
FlowTypeを使ってFluxアーキテクチャのパターンに型を付ける話
Node.js Interview Questions and Answers (2017 Edition) | @RisingStack
blog.risingstack.com/node-js-interview-questions-and-answers-2017/
Node.jsにおいて良くある質問とその答えについてをQ&A形式で書かれたもの。
コーディングスタイル、よくある書き間違い、セキュリティ、タイミング攻撃などについて
React Interview Questions
tylermcginnis.com/react-interview-questions/
Reactについての疑問をQ&A形式で書かれた記事。
Classで書くコンポーネントと関数として書くコンポーネントの違い、refsとは何か、key属性はなぜ大事なのか、コンポーネントパターンなど
Writing HTML with accessibility in mind – Medium
medium.com/@matuzo/writing-html-with-accessibility-in-mind-a62026493412
HTMLとアクセシビリティ(スクリーンリーダー)について
lang属性、alt属性、<buton>要素、landmarksについて
PostCSS まとめ - Qiita
qiita.com/morishitter/items/4a04eb144abf49f41d7d
PostCSSの概要と特徴、作られたモチベーションについて
Front-End Performance Checklist 2017 (PDF, Apple Pages) – Smashing Magazine
www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
ウェブフロントエンドのパフォーマンスチェックリスト。
ファイルサイズ、配信方法、レンダリング、モニタリング、テスト方法などについて
The Reflect API of ES6 – Zsolt Nagy
www.zsoltnagy.eu/the-reflect-api-of-es6/
Reflect APIについての紹介記事
MozAnime in 2016 | Nothing new
birtles.wordpress.com/2016/12/27/mozanime-in-2016/
2016年におけるFirefoxのWeb Animations対応やデバッグ機能の更新点について
スライド、動画関係
Optimise your web development workflow 2016
umaar.github.io/devtools-optimise-your-web-development-workflow-2016/
Chromeの開発者ツールについてのスライド。
主にCSS、アクセシビリティ、パフォーマンスについて豊富なGIFアニメーションと共に紹介している。
ソフトウェア、ツール、ライブラリ関係
Fuse-Box bundler / API Reference
webpack/Browserifyのようなbundler、JSPM/SystemJSのようなloaderを機能を持つツール。
変換結果の依存関係とキャッシュをすることで高速な変換ができる。
プラグインで対応する変換を拡張できる
Gothdo/range: A JavaScript implementation of the Python's range() function.
Pythonのrange()のJavaScript実装ライブラリ
andywer/leakage: 🐛 Memory leak testing for node.
Node.jsでメモリリークのテストを書くことができるライブラリ。
nolanlawson/marky: High-resolution JavaScript timer based on performance.mark() and measure()
User Timing API(performance.markとperformance.measure)ベースの処理時間計測ライブラリ
maniart/diffyjs: A dependency-free motion detection library for the browser
MediaDevices.getUserMedia()を使って取得した画像から、フレームごとの動きのdiffを取得できるライブラリ。
motion detectionライブラリ
