JSer.info #275 - JavaScriptのコードスタイルチェッカーであるJSCS 3.0がリリースされました。
プラグイン開発者向けの非互換性がありますが、他はyandex presetの削除、ルールの追加となっています。
また、JSCSは3.xで新規開発が終了し、JSCSチームはESLintチームに入るようです。
今後三ヶ月を目処にJSCSのバグ修正なども終了し、その間に、ESLintにはJSCS互換/移行のサポートを用意していく予定となっています。
(そのため、JSCSからESLintに移行する場合は少し待ったほうがいいかもしれません)
JSCSチームがESLintに入った理由として、コミュニティ/Issueの管理コストやCSTの開発に注力したかったなどが挙げられています。
また、同じ問題を解決するツールであったり、ESLintが今後AutoFix機能を改善していきたいというのも一つの理由なのかもしれません。
How to work with SVG iconsという記事ではSVGアイコンについてかなり詳しく解説されています。
SVG spriteの仕組みや作り方、ブラウザ間の動作の違い、CSSからSVGのスタイルを変更する方法など実践的な内容が書かれていて面白いです。
また、インラインSVGと外部リソースのSVGの動作の違いやブラウザの挙動など、実際に使うとハマるであろう部分も補完されています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release Notes for Safari Technology Preview 2 | WebKit
webkit.org/blog/6098/release-notes-for-safari-technology-preview-release-2/
Safari Technology Preview 2リリース。
String#padStart/String#padEnd/の追加、for (var i = 20 in b){ }がエラーとなるように。
CSS media queryでcolor-gamutの対応、TP1で間違って公開されてたFetch APIをデフォルトでは無効に、Web Inspectorの改善など
ESLint v2.8.0 released - ESLint - Pluggable JavaScript linter
eslint.org/blog/2016/04/eslint-v2.8.0-released
ESLint v2.8.0リリース。
Release 3.0.0 · jscs-dev/node-jscs
github.com/jscs-dev/node-jscs/releases/tag/v3.0.0
JSCS 3.0.0リリース。
Jest 11.0 · Jest
facebook.github.io/jest/blog/2016/04/12/jest-11.html
Jest 11.0リリース。
0.10から11.0へのメジャーアップデート
Release v0.23.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.23.0
Flow v0.23.0リリース。
flow initで.flowconfigを作る時のオプション追加やコメントを書けるようになるなど
アーティクル
Welcoming JSCS To ESLint - ESLint - Pluggable JavaScript linter
eslint.org/blog/2016/04/welcoming-jscs-to-eslint
JSCS 3.0.0で新規開発は終了し、3ヶ月を目処にサポートも終了する。
JSCSチームはESLintに入り、ESLintのAutofixを動かすためにも必要なCSTの開発を行う。
ESLint側はJSCSからの移行/互換のサポートを予定している。
- Welcoming JSCS To ESLint - ESLint - Pluggable JavaScript linter
- JSCS, CST и новое начало / Хабрахабр
How to work with SVG icons
fvsch.com/code/svg-icons/how-to/
SVGアイコンについての実践的な解説。
CSSスプライトのようにSVGスプライトを使う方法、インラインSVGと外部SVGを読み込み違いや対応ブラウザ/polyfillについてなど。
またCSSからSVGのスタイルを変更する方法やSafariの問題などかなり詳細にまとまっている
CSS @apply rule (native CSS mixins)
blog.gospodarets.com/css_apply_rule
CSSの@aaply Proposalについての解説
power-assert + babel as a development tool | Web Scratch
efcl.info/2016/04/14/espower-babel-is-deprecated/
power-assert+babel+mochaの構成について。
デバッグビルド時は情報量の多いassert、プロダクションビルド時はassertを取り除き、JSDocからランタイムassertをしてチェックする話
christianalfoni - RxJs the smartest dumbest tool ever
www.christianalfoni.com/articles/2016_03_31_RxJs-the-smartest-dumbest-tool-ever
RxJSはどのような問題を解決するのかという話
Scalable Single-Page Application Architecture – Minko Gechev's blog
blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architecture/
AngularJS2 + RxJSでCQRS+EventSourcing的なアプローチ。 DIでの依存解決、レイヤー間の隔離やasync serviceの動きが面白い。
Immutability is not enough
codewords.recurse.com/issues/six/immutability-is-not-enough
Immutable.jsを使ったStateの更新について。
単純にStateをimmutableにして、単純に関数を逐次的に適応すると、前のStateを参照しない問題が起こりえる。
また“lost update”の問題について
react-storybookを用いたReactコンポーネント開発 - Hatena Developer Blog
developer.hatenastaff.com/entry/2016/04/14/150000
React Componentをストーリーにもとづき確認できるスタイルガイド的なreact-storybookについて
Leveling Up with React: Redux | CSS-Tricks
css-tricks.com/learning-react-redux/
Reduxにおけるデータフローなどをわかりやすく解説したチュートリアル
CoffeeScriptからES2015(ES6)へ移行しました - ペパボテックブログ
tech.pepabo.com/2016/04/13/coffeescript-transpiled-es/
CoffeeScriptをdecafを使って変換し、JavaScriptに移行する話。
【意訳】Webpackの混乱ポイント - Qiita
qiita.com/chuck0523/items/caacbf4137642cb175ec
"Webpack — The Confusing Parts"の翻訳。
webpackの設定において混乱しやすいことについてまとめられている。
スライド、動画関係
Let's Learn ES6
ES6について学ぶ動画シリーズのサイト
サイト、サービス、ドキュメント
Makeitopen.com - Open Source Learning
React NativeでF8のアプリをどのように作っていったかの話
ソフトウェア、ツール、ライブラリ関係
Rich Harris / buble · GitLab
BabelのようなES2015のコードをES5に変換するツール。
Babelのような拡張性や仕様への準拠よりも、変換速度を重視した作りになっている
thejameskyle/babel-react-optimize: A Babel preset and plugins for optimizing React code.
github.com/thejameskyle/babel-react-optimize
React(JSX)の最適化をするBabelプラグイン
Our Justified Layout Goes Open Source | code.flickr.com
code.flickr.net/2016/04/05/our-justified-layout-goes-open-source/
Flickerの画像をタイル的に敷き詰めるUIライブラリ
