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.gzやfile:のサポートなどが行われています。
また、このリリースが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
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 2.7RCリリース
クラスプロパティへの代入忘れをチェックする--strictPropertyInitializationの追加、Tupleの扱いの変更、inとinstanceofの改善など
Bootstrap 4 · Bootstrap
blog.getbootstrap.com/2018/01/18/bootstrap-4/
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
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
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
jQuery 3.3.0リリース。
.addClass()、.removeClass()、.toggleClass()が配列を受け取れるように。
jQuery.nowやjQuery.isFunctionなどが非推奨になるなど
Release v1.1.0 · facebookincubator/create-react-app
github.com/facebookincubator/create-react-app/releases/tag/v1.1.0
create-react-app 1.1.0リリース。
--use-npmの追加、--scripts-versionで.tar.gzやfile:のサポートなど。
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の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/
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 65での開発者ツールの変更点について。
Local Overrides、アクセシビリティツール、カラーピッカーにコンストラスト情報の表示、ステップ実行でWorkerやsetTimeoutなどの非同期処理のサポート。
パフォーマンスパネルで複数の記録を保存できるようになるなど
Debugging your front-end like it's 2019
krasimirtsonev.com/blog/article/debugging-your-front-end-like-is-2019
kukerという開発者ツールについて。
redux-devtoolsのようにブラウザに拡張をインストールし、ReduxやReact、Angularなどライブラリのログを見ることができる。
ログを投げる側はpostMessageを送ることで記録できる。
スライド、動画関係
CSS Grid — Learn all about CSS Grid with Wes Bos in this free video series!
CSS Grid講座
サイト、サービス、ドキュメント
Render Props - React
reactjs.org/docs/render-props.html
ReactのRender Propsのパターンについてのドキュメント
Introduction · A Roadmap for Node.js Security
Node.jsのセキュリティに関するドキュメント。Node.jsにおいてセキュリティ的な問題が起きる項目について。
またDynamic requireなどコード別の問題などについて
krasimir/kuker: Kick-ass browser extension to debug your apps
クライアントから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,...
正規表現や循環参照に対応したJSONシリアライズ/デシリアライズライブラリ。
オブジェクトのクローンも行える。
boltpkg/bolt: ⚡️ Super-powered JavaScript project management
lerna/yarn workspaceのようなmonorepo管理ツール。
buildやtestなどにデフォルト設定があり、monorepoの環境構築を簡単にできるようにすることが目的
書籍関係
Functional-Light… by Kyle Simpson [Leanpub PDF/iPad/Kindle]
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
2018年5月10日発売
ES2015以降の新しい構文を学び、読みやすく拡張し易いコードを書く方法についてを学ぶ書籍。
Testing Vue.js Applications: Edd Yerburgh: 9781617295249: Amazon.com: Books
www.amazon.com/Testing-Vue-Js-Applications/dp/1617295248
2017年7月30日発売
Vueアプリケーションのテストについての書籍
