Fork me on GitHub

2017-01-04のJS: PostCSS概要、Chrome開発者ツール、FuseBox

Edit on GitHub 編集履歴を見る

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などに近い機能を持っています。

高速な変換がウリの一つで、モジュールの依存関係と変換済みファイルをキャッシュすることで、再変換時の処理時間が短くできるようになっています。

fuse-box/fuse-boxのソースコードはTypeScriptで書かれていて、
まだでたばかりなのでソースコードを見てみるのも面白いかもしれません。


お知らせ


ヘッドライン


StealJS 1.0 Release

www.bitovi.com/blog/stealjs-1.0-release

JavaScript Tools library ReleaseNote

開発時は動的なモジュールローダで、本番時はsteal-toolsでのproduction buildでbundleできるStealJS 1.0リリース


アーティクル


Optimizing Page Speeds With Lazyloading | Jscrambler Blog

blog.jscrambler.com/optimizing-page-speeds-with-lazyloading/

AngularJS

AngularのルーティングとコンポーネントのLazyLoadについて


Lazy Loading - React

webpack.js.org/guides/lazy-load-react/

webpack React

webpack2を使ったReactコンポーネントのLazyLoad方法についてのドキュメント


FlowtypeでFluxアーキテクチャに型付けをするという発表をした - Please Drive Faster

joe-re.hatenablog.com/entry/2016/12/29/204917

flowtype Flux

FlowTypeを使ってFluxアーキテクチャのパターンに型を付ける話


Node.js Interview Questions and Answers (2017 Edition) | @RisingStack

blog.risingstack.com/node-js-interview-questions-and-answers-2017/

node.js security

Node.jsにおいて良くある質問とその答えについてをQ&A形式で書かれたもの。
コーディングスタイル、よくある書き間違い、セキュリティ、タイミング攻撃などについて


React Interview Questions

tylermcginnis.com/react-interview-questions/

React JavaScript

Reactについての疑問をQ&A形式で書かれた記事。
Classで書くコンポーネントと関数として書くコンポーネントの違い、refsとは何か、key属性はなぜ大事なのか、コンポーネントパターンなど


Writing HTML with accessibility in mind – Medium

medium.com/@matuzo/writing-html-with-accessibility-in-mind-a62026493412

HTML accessibility

HTMLとアクセシビリティ(スクリーンリーダー)について
lang属性、alt属性、<buton>要素、landmarksについて


PostCSS まとめ - Qiita

qiita.com/morishitter/items/4a04eb144abf49f41d7d

PostCSS

PostCSSの概要と特徴、作られたモチベーションについて


Front-End Performance Checklist 2017 (PDF, Apple Pages) – Smashing Magazine

www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/

performance browser

ウェブフロントエンドのパフォーマンスチェックリスト。
ファイルサイズ、配信方法、レンダリング、モニタリング、テスト方法などについて


The Reflect API of ES6 – Zsolt Nagy

www.zsoltnagy.eu/the-reflect-api-of-es6/

JavaScript ECMAScript

Reflect APIについての紹介記事


MozAnime in 2016 | Nothing new

birtles.wordpress.com/2016/12/27/mozanime-in-2016/

firefox animation

2016年におけるFirefoxのWeb Animations対応やデバッグ機能の更新点について


スライド、動画関係


Optimise your web development workflow 2016

umaar.github.io/devtools-optimise-your-web-development-workflow-2016/

Chrome CSS debug slide accessibility

Chromeの開発者ツールについてのスライド。
主にCSS、アクセシビリティ、パフォーマンスについて豊富なGIFアニメーションと共に紹介している。


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


Fuse-Box bundler / API Reference

fuse-box.org/

JavaScript Tools

webpack/Browserifyのようなbundler、JSPM/SystemJSのようなloaderを機能を持つツール。
変換結果の依存関係とキャッシュをすることで高速な変換ができる。
プラグインで対応する変換を拡張できる


Gothdo/range: A JavaScript implementation of the Python's range() function.

github.com/Gothdo/range

JavaScript library

Pythonのrange()のJavaScript実装ライブラリ


andywer/leakage: 🐛 Memory leak testing for node.

github.com/andywer/leakage

JavaScript node.js test libn

Node.jsでメモリリークのテストを書くことができるライブラリ。


nolanlawson/marky: High-resolution JavaScript timer based on performance.mark() and measure()

github.com/nolanlawson/marky

JavaScript performance libn

User Timing API(performance.markperformance.measure)ベースの処理時間計測ライブラリ


maniart/diffyjs: A dependency-free motion detection library for the browser

github.com/maniart/diffyjs

JavaScript 画像

MediaDevices.getUserMedia()を使って取得した画像から、フレームごとの動きのdiffを取得できるライブラリ。
motion detectionライブラリ


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