Fork me on GitHub

2018-01-23のJS: 2018-01-23のJS: Bootstrap 4、create-react-app 1.1.0と2.0、kuker

Edit on GitHub 編集履歴を見る

JSer.info #367 - CSSフレームワークのBootstrap 4が正式リリースされました。
Bootstrap 3.3.0から約3年ぶりのメジャーアップデートとなります。

4.0では実装をLessからSassへ変更、GridシステムにFlexboxを利用、Panelsやthumbnailsを廃止しCardsへの移行などの変更が行なわれています。そのため、コンポーネントへ指定するクラス名のリネームも行われています。
詳しい変更点とv3からの違いについてはマイグレーションガイドを参照してください。

また、IE 8、9のサポート終了し、v4からはIE10+、iOS 7+、Android 5.0+が対象となっています。


Reactの開発ツールであるcreate-react-app 1.1.0がリリースされました。

--use-npmの追加、--scripts-version.tar.gzfile:のサポートなどが行われています。
また、このリリースが1.x系の最後となり、次のメジャーアップデート候補である2.0に含める機能についての議論が行われています。


kukerというReact、Angular、Vue、Redux、MobX、HTMLなどに対応したデバッグツールが公開されています。
kukerは、ライブラリの状態やイベントのログをpostMessageで送り、そのログを表示できるブラウザ拡張となっています。

たとえば、Reduxならばコンポーネントのライフサイクルログを表示し、ReduxならReduxからdispatchされたActionとその時点でのStateを表示できるようになります。

同じ系統のデバッグブラウザ拡張としてRedux DevToolsがあります。
Alminというライブラリ向けに、Redux DevToolsに対応したものkukerに対応したものをそれぞれ書いてみました。
どちらも任意のデータを送る仕組みを持っていますが、kukerは単純にpostMessageでイベントやStateを送るだけなので特別な仕組みは必要ありません。

const sendToDevTools = ({ type, state }) => {
    window.postMessage({
        kuker: true,
        type: type,
        origin: 'Almin',
        label: type,
        time: (new Date()).getTime(),
        state: { state },
        icon: 'fa-money',
        color: '#bada55'
    }, '*');
};

詳しくは作者のブログで必要となった理由や仕組みについて書かれているので見てみると良さそうです。


ヘッドライン


Release v1.0.0 · GoogleChrome/puppeteer

github.com/GoogleChrome/puppeteer/releases/tag/v1.0.0

Chrome library ReleaseNote

Puppeteer 1.0.0リリース。
コードカバレッジAPIのサポート、PDFのカスタマイズ、XPathのサポートなど


Announcing TypeScript 2.7 RC | TypeScript

blogs.msdn.microsoft.com/typescript/2018/01/17/announcing-typescript-2-7-rc/

TypeScript ReleaseNote

TypeScript 2.7RCリリース

クラスプロパティへの代入忘れをチェックする--strictPropertyInitializationの追加、Tupleの扱いの変更、ininstanceofの改善など


Bootstrap 4 · Bootstrap

blog.getbootstrap.com/2018/01/18/bootstrap-4/

CSS library ReleaseNote

Bootstrap 4リリース。
4.0ではLessからSassへ、Flexboxの利用、Cardsへの移行、IE 8、9などのサポート終了など。
β3からの変更として、printのスタイルの更新サンプル、ドキュメントの追加など


Release v5.0.0 · mochajs/mocha

github.com/mochajs/mocha/releases/tag/v5.0.0

JavaScript testing library ReleaseNote

Mocha 5.0.0リリース。
IE 9、10のサポート終了、テストファイルを追加指定する--fileオプションの追加など


Polymer 3.0: New Year, New Preview - Polymer Project

www.polymer-project.org/blog/2018-01-18-polymer-3-new-preview

WebComponents JavaScript library ReleaseNote

Polymer 3.0-pre.4リリース。
PropertiesMixinの追加、htmlタグ関数の改善。
Stableリリースは2018年Q1末を予定


jQuery 3.3.0 – A fragrant bouquet of deprecations and…is that a new feature? | Official jQuery Blog

blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/

jQuery ReleaseNote

jQuery 3.3.0リリース。
.addClass().removeClass().toggleClass()が配列を受け取れるように。
jQuery.nowjQuery.isFunctionなどが非推奨になるなど


Release v1.1.0 · facebookincubator/create-react-app

github.com/facebookincubator/create-react-app/releases/tag/v1.1.0

React Tools ReleaseNote

create-react-app 1.1.0リリース。
--use-npmの追加、--scripts-version.tar.gzfile:のサポートなど。
2.0のα版もリリースされ、2.0に含める機能についてはIssueで議論している。


アーティクル


Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio

www.sarasoueidan.com/blog/svg-coordinate-systems/

SVG article

SVGのviewport、viewBox、preserveAspectRatioについての詳しい解説


Oxidizing Source Maps with Rust and WebAssembly – Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/

sourcemap WebAssembly article JavaScript library Rust

Source Mapパーサ、ジェネレーターをRust + WebAssemblyに書き換えた話。
Rustで書いてwasmに変換して使うことで、JavaScriptの実装に比べて処理時間や処理の安定性が向上したという話


What's New In DevTools (Chrome 65)  |  Web  |  Google Developers

developers.google.com/web/updates/2018/01/devtools

Chrome article debug

Chrome 65での開発者ツールの変更点について。
Local Overrides、アクセシビリティツール、カラーピッカーにコンストラスト情報の表示、ステップ実行でWorkerやsetTimeoutなどの非同期処理のサポート。
パフォーマンスパネルで複数の記録を保存できるようになるなど


Debugging your front-end like it's 2019

krasimirtsonev.com/blog/article/debugging-your-front-end-like-is-2019

JavaScript debug Flux redux Angular Chrome Extension

kukerという開発者ツールについて。
redux-devtoolsのようにブラウザに拡張をインストールし、ReduxやReact、Angularなどライブラリのログを見ることができる。
ログを投げる側はpostMessageを送ることで記録できる。


スライド、動画関係


CSS Grid — Learn all about CSS Grid with Wes Bos in this free video series!

cssgrid.io/

CSS video

CSS Grid講座


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


Render Props - React

reactjs.org/docs/render-props.html

React document

ReactのRender Propsのパターンについてのドキュメント


Introduction · A Roadmap for Node.js Security

nodesecroadmap.fyi/

node.js security document

Node.jsのセキュリティに関するドキュメント。Node.jsにおいてセキュリティ的な問題が起きる項目について。
またDynamic requireなどコード別の問題などについて


krasimir/kuker: Kick-ass browser extension to debug your apps

github.com/krasimir/kuker

JavaScript debug Tools Chrome Extension

クライアントからpostMessageで投げたログとStateを表示できるビューアのブラウザ拡張。
React、Redux、Angular、Vue、HTMLなどに対応したデバッグツール。


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


skerit/json-dry: JSON-dry allows you to serialize & revive objects containing circular references, dates, regexes, class instances,...

github.com/skerit/json-dry

JavaScript JSON library

正規表現や循環参照に対応したJSONシリアライズ/デシリアライズライブラリ。
オブジェクトのクローンも行える。


boltpkg/bolt: ⚡️ Super-powered JavaScript project management

github.com/boltpkg/bolt

JavaScript Tools

lerna/yarn workspaceのようなmonorepo管理ツール。
buildやtestなどにデフォルト設定があり、monorepoの環境構築を簡単にできるようにすることが目的


書籍関係


Functional-Light… by Kyle Simpson [Leanpub PDF/iPad/Kindle]

leanpub.com/fljs

JavaScript 関数型プログラミング book

Functional programming (FP)のアプローチをJavaScriptに適応してFPについて学ぶ書籍


Simplifying JavaScript: Writing Modern JavaScript with ES5, ES6, and Beyond by Joe Morgan | The Pragmatic Bookshelf

pragprog.com/book/es6tips/simplifying-javascript

JavaScript ECMAScript book

2018年5月10日発売
ES2015以降の新しい構文を学び、読みやすく拡張し易いコードを書く方法についてを学ぶ書籍。


Testing Vue.js Applications: Edd Yerburgh: 9781617295249: Amazon.com: Books

www.amazon.com/Testing-Vue-Js-Applications/dp/1617295248

JavaScript Vue testing book

2017年7月30日発売
Vueアプリケーションのテストについての書籍


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