Fork me on GitHub

2015-08-24のJS: Bootstrap 4α、PostCSS 5.0、Node.jsとio.js

Edit on GitHub 編集履歴を見る

JSer.info #242 - CSSフレームワークであるBootstrap 4 alphaがリリースされました。

メジャーアップデートとなる4のα版ですが、 Bootstrap本体の言語がLessからSassへ移行しています。

IE8のサポートを終了し、単位としてremを利用するようになり、flexboxをオプションで利用できるようになっています。
wellsやthumbnails、panelsのコンポーネントは廃止してcardsに統合していくようです。

またプラグインがES6で書きなおされUMDモジュールとして提供されるようになり、ノーマライズスタイルをRebootにまとめるなど色々な変更が含まれています。

同時にBootstrap ThemesというBootstrapのテーマを扱う公式サイトも公開されています。


CSSを扱うツールの基盤となるPostCSS 5.0がリリースされました。

パース部分もオプショナル化しSCSS parserを使うことでCSSだけではなくSCSSもパース出来るようになっています。

PostCSSについてはPostCSS とは何か // Speaker Deckというスライドによくまとまっているので、CSS周りのツールに興味がある人は見てみるといいと思います。


どうしてこうなった? Node.jsとio.jsの分裂と統合の行方。これからどう進化していくのか? // Speaker Deckというスライドでは、Node.jsの歴史、io.jsがなぜできたのか、コミュニティと開発体制、Node.js v4.0での統合に向けてなど、Node.jsプロジェクトで起きていた騒動についてまとめられています。

また、4.0 is the new 1.0 — Node & JavaScript — Mediumという記事でNode.jsとio.jsの統合のスケジュールなどについて書かれているので見てみるといいと思います。


ヘッドライン


Bootstrap 4 alpha · Bootstrap Blog

blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/

CSS library ReleaseNote

Bootstrap 4αリリース。
LessからSassへの移行、IE8のサポートを終了しremを利用するように、flexboxをオプションで利用できるように、プラグインをES6で書きなおし、リセットスタイルをRebootにまとめるなど


Release 5.0 “President Valac” · postcss/postcss

github.com/postcss/postcss/releases/tag/5.0.0

CSS library ReleaseNote

CSSの変換を扱うPostCSS 5.0リリース。
safeオプションが別プロジェクトへ、
parserstringifierなどもオプション化、
SCSSのパースにも対応するなど


Release RxJS Version 3.1 · Reactive-Extensions/RxJS

github.com/Reactive-Extensions/RxJS/releases/tag/v3.1.0

Rx JavaScript library Electron

RxJS 3.1 リリース。
resultSelectorがオプショナルに、TypeScript定義ファイルが書き直されるなど


Release 1.1.0 - 2015.08.17 · zloirock/core-js

github.com/zloirock/core-js/releases/tag/v1.1.0

JavaScript library ReleaseNote

core-js 1.1.0 リリース。
string paddingのプロポーサルへの追従、trimLeft/trimRightの追加、Reflect.enumerateはキャッシュされたkeyをiterateするようになるなど


ESLint 1.2.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2015/08/eslint-1.2.0-released/

JavaScript Tools ReleaseNote

ESLint 1.2.0リリース。
文字列結合にTemplate Stringsを使うようにするルール、コールバックにArrow Functionを優先するルールなどの追加、commonjsのenvironment定義が追加された


アーティクル


はてなブックマーク検索を作りながらFlux Utilsについて学ぶ | Web Scratch

efcl.info/2015/08/24/flux-utils/

JavaScript Flux React tutorial

Flux UtilsとReactを使ってアプリを作りながら、Flux Utilsについて学ぶチュートリアル。
StoreのstateがImmutableであったり、Containerなどの動作について


JavaScript の イテレータ を極める! - Qiita

qiita.com/kura07/items/cf168a7ea20e8c2554c6

JavaScript ECMAScript

Iterator、Iterable、Generatorについてそれぞれが何か、どのように使うかについて書かれている


Proper testing of Angular JS applications with ES6 modules — Medium

medium.com/@tomastrajan/proper-testing-of-angular-js-applications-with-es6-modules-8cf31113873f

JavaScript AngularJS testing library

ES6 modulesとAngularJS。
ES6 modulesとして読み込みテストできるようにするためには、どのようにコードを書くかという話


reactjs - ES6版React.jsチュートリアル - Qiita

qiita.com/nownabe/items/2d8b92d95186c3941de0

React ECMAScript tutorial

ReactのチュートリアルをES6 Classesなどを使って書いた場合にどうなるかについてをチュートリアル形式で書かれている。


Vue.js Tutorial - Vegibit

vegibit.com/vue-js-tutorial/

JavaScript library tutorial

Vue.jsについてのチュートリアル。
基本的な使い方、Vue.jsのEvent、Filter、Componentsなどについて


Windows 10 virtual machines now available on Microsoft Edge Dev | Microsoft Edge Dev Blog

blogs.windows.com/msedgedev/2015/08/17/windows-10-virtual-machines-now-available-on-microsoft-edge-dev/

MS MSEdge 仮想化

MSEdgeが使えるWindows 10のVirtual Machine(VM)が公開された


スライド、動画関係


PostCSS とは何か // Speaker Deck

speakerdeck.com/jmblog/postcss-tohahe-ka

CSS Tools スライド

PostCSSについてのスライド。
PostCSSを使った変換の仕組み、それぞれのプラグインが単機能であるので組み合わせて利用できる。
csssnext、PreCSS、cssnanoなどのプラグインパックについて。
またSassの代わりに利用することについて


どうしてこうなった? Node.jsとio.jsの分裂と統合の行方。これからどう進化していくのか? // Speaker Deck

speakerdeck.com/yosuke_furukawa/dousitekounatuta-node-dot-jstoio-dot-jsfalsefen-lie-totong-he-falsexing-fang-korekaradoujin-hua-siteikufalseka

node.js 歴史

Node.jsの歴史、io.jsがでてきた経緯、そしてNode.jsとio.jsが統合された経緯について。
またコミュニティにおけるオープンガバナンスモデルについて


Effective ES6

www.slideshare.net/teppeis/effective-es6

ECMAScript スライド

ES6について幅広く紹介してるスライド。
ES5以下でのベストプラクティスがES6の機能や構文で解決できることやES6で新しく入った機能について書かれている。


Ginza.rb で Quipper のシングルページアプリケーション開発について発表しました - @kyanny's blog

blog.kyanny.me/entry/2015/08/20/014509

JavaScript スライド backbone.js

Backbone.js/Chaplin/Marionette/React それぞれのシングルページアプリケーション開発における利点や問題点についてのスライド。
Railsとの共存についてなど


Functional programming in JavaScript - YouTube

www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84

JavaScript 関数型プログラミング 動画

関数型JavaScriptについてのスクリーンキャスト


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


Dev Tips - Developer Tips by Umar Hansa

umaar.com/dev-tips/

Chrome debug Tips

Chrome開発者ツールのTips集


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


Falcor: One Model Everywhere

netflix.github.io/falcor/

JavaScript library

Netflixのモデル + data fetchライブラリ。
JSON Graphでデータを一つのドメインモデルとして表現して、そのモデルを元にサーバはルーティング、クライアントはデータの取得を行える。
またクライアントではキャッシュの設定が行える


stylelint

stylelint.io/

CSS Tools

CSSのLintツール。
PostCSSのプラグインとしても利用できる。


書籍関係


JavaScript Domain-Driven Design | PACKT Books

www.packtpub.com/web-development/javascript-domain-driven-design

JavaScript book

JavaScriptでのDDDについての書籍


Beautiful JavaScript — Medium

medium.com/@valueof/beautiful-javascript-8aa69998add0

JavaScript book

Beautiful JavaScript リリース。


Amazon: AngularJS アプリケーションプログラミング: 山田 祥寛

www.amazon.co.jp/dp/4774175684

AngularJS book

AngularJSについての書籍


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