Fork me on GitHub

2016-04-18のJS: JSCS 3.0とESLintへのマージ、SVG アイコン

Edit on GitHub 編集履歴を見る

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の動作の違いやブラウザの挙動など、実際に使うとハマるであろう部分も補完されています。


ヘッドライン


Release Notes for Safari Technology Preview 2 | WebKit

webkit.org/blog/6098/release-notes-for-safari-technology-preview-release-2/

safari ReleaseNote

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

JavaScript Tools ReleaseNote

ESLint v2.8.0リリース。


Release 3.0.0 · jscs-dev/node-jscs

github.com/jscs-dev/node-jscs/releases/tag/v3.0.0

JavaScript Tools ReleaseNote

JSCS 3.0.0リリース。


Jest 11.0 · Jest

facebook.github.io/jest/blog/2016/04/12/jest-11.html

testing library ReleaseNote

Jest 11.0リリース。
0.10から11.0へのメジャーアップデート


Release v0.23.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.23.0

flowtype ReleaseNote

Flow v0.23.0リリース。
flow init.flowconfigを作る時のオプション追加やコメントを書けるようになるなど


アーティクル


Welcoming JSCS To ESLint - ESLint - Pluggable JavaScript linter

eslint.org/blog/2016/04/welcoming-jscs-to-eslint

JavaScript Tools ESLint

JSCS 3.0.0で新規開発は終了し、3ヶ月を目処にサポートも終了する。
JSCSチームはESLintに入り、ESLintのAutofixを動かすためにも必要なCSTの開発を行う。
ESLint側はJSCSからの移行/互換のサポートを予定している。


How to work with SVG icons

fvsch.com/code/svg-icons/how-to/

SVG 画像

SVGアイコンについての実践的な解説。
CSSスプライトのようにSVGスプライトを使う方法、インラインSVGと外部SVGを読み込み違いや対応ブラウザ/polyfillについてなど。
またCSSからSVGのスタイルを変更する方法やSafariの問題などかなり詳細にまとまっている


CSS @apply rule (native CSS mixins)

blog.gospodarets.com/css_apply_rule

CSS

CSSの@aaply Proposalについての解説


power-assert + babel as a development tool | Web Scratch

efcl.info/2016/04/14/espower-babel-is-deprecated/

JavaScript testing Tools

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

Rx tutorial

RxJSはどのような問題を解決するのかという話


Scalable Single-Page Application Architecture – Minko Gechev's blog

blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architecture/

AngularJS JavaScript 設計

AngularJS2 + RxJSでCQRS+EventSourcing的なアプローチ。 DIでの依存解決、レイヤー間の隔離やasync serviceの動きが面白い。


Immutability is not enough

codewords.recurse.com/issues/six/immutability-is-not-enough

JavaScript 設計

Immutable.jsを使ったStateの更新について。
単純にStateをimmutableにして、単純に関数を逐次的に適応すると、前のStateを参照しない問題が起こりえる。
また“lost update”の問題について


react-storybookを用いたReactコンポーネント開発 - Hatena Developer Blog

developer.hatenastaff.com/entry/2016/04/14/150000

React Tools

React Componentをストーリーにもとづき確認できるスタイルガイド的なreact-storybookについて


Leveling Up with React: Redux | CSS-Tricks

css-tricks.com/learning-react-redux/

redux JavaScript tutorial

Reduxにおけるデータフローなどをわかりやすく解説したチュートリアル


CoffeeScriptからES2015(ES6)へ移行しました - ペパボテックブログ

tech.pepabo.com/2016/04/13/coffeescript-transpiled-es/

CoffeeScript JavaScript

CoffeeScriptをdecafを使って変換し、JavaScriptに移行する話。


【意訳】Webpackの混乱ポイント - Qiita

qiita.com/chuck0523/items/caacbf4137642cb175ec

webpack 翻訳

"Webpack — The Confusing Parts"の翻訳。
webpackの設定において混乱しやすいことについてまとめられている。


スライド、動画関係


Let's Learn ES6

letslearnes6.com/

ECMAScript JavaScript 動画

ES6について学ぶ動画シリーズのサイト


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


Makeitopen.com - Open Source Learning

makeitopen.com/

React

React NativeでF8のアプリをどのように作っていったかの話


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


Rich Harris / buble · GitLab

gitlab.com/Rich-Harris/buble

babel JavaScript

BabelのようなES2015のコードをES5に変換するツール。
Babelのような拡張性や仕様への準拠よりも、変換速度を重視した作りになっている


thejameskyle/babel-react-optimize: A Babel preset and plugins for optimizing React code.

github.com/thejameskyle/babel-react-optimize

React babel plugin

React(JSX)の最適化をするBabelプラグイン


Our Justified Layout Goes Open Source | code.flickr.com

code.flickr.net/2016/04/05/our-justified-layout-goes-open-source/

JavaScript library UI

Flickerの画像をタイル的に敷き詰めるUIライブラリ


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