JSer.info #335 - Safari 11.0のリリースノートが公開されました。

What's New in Safari - Safari 11.0

JavaScript周りでは、WebRTC、WebAssembly、Media Capture API、WebCrypto APIのアルゴリズム追加、Resource timing APIのサポート。CSS周りではVariable fonts、CSS strokeのサポートが行われています。

また、Mobile SafariやChrome for Androidで導入されていた、MediaElementの自動再生制限がmacOSのSafariにも導入されています。

Auto-Play Policy Changes for macOS | WebKit

Safari 11.0はまだリリースされていませんが、Safari Technology Preview 32がほぼ同等となるようです。

Safari Technology Preview 32, with WebRTC, is Now Available | WebKit

Opinionatedなコード整形ツールであるPrettier 1.4.0がリリースされました。

Release 1.4.0: TypeScript and CSS support · prettier/prettier

1.4.0ではTypeScript、PostCSS(CSS、Less、SCSS)の整形をサポートしています。
また、エディタ向けのAPIとしてcursorOffsetオプションが追加されています。

試しにやってみたTypeScript(TSX)とCSSの整形例は次でみることができます。

style: prettier by azu · Pull Request #10 · azu/faao

ESLint 4.0.0がリリースされました。

eslint:recommendedの変更やindentルールの作り直し、space-before-function-parenなど一部ルールのデフォルト値の変更、設定ファイルのチェックがより厳密になっています。

3.xから4.0.0へのマイグレーションガイドは次のページで公開されています。

Migrating to v4.0.0 - ESLint - Pluggable JavaScript linter

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

Release v3.0.0-rc.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v3.0.0-rc.0

webpack ReleaseNote

webpack 3.0.0 RC0リリース。
RollupのようなScope Hoisting(inlining)を行うプラグインの追加、output.libraryExportのサポート、node: falseでnode関係はまとめて無効化できるようになるなど

The cost of small modules | Read the Tea Leaves

Safari 11.0

developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Safari_11_0/Safari_11_0.html

safari ReleaseNote

Safari 11.0 (プレ)リリース。
WebRTC、WebAssermbly、Media Capture API、WebCrypto APIのアルゴリズム追加、Resource timing APIのサポート。
CSSではVariable fonts、CSS strokeのサポート。
ホームスクリーンアプリでWebKitの機能をサポート、追跡Cookieの削除/隔離など

Release 1.4.0: TypeScript and CSS support · prettier/prettier

github.com/prettier/prettier/releases/tag/1.4.0

JavaScript TypeScript CSS Tools ReleaseNote

prettier 1.4.0リリース。
TypeScript(.tsと.tsx)、CSS、Less、SCSSをサポート。
エディタ向けにcursorOffsetを追加、整形周りの細かい修正など

Release Release v1.0.0 · yahoo/pure

github.com/yahoo/pure/releases/tag/v1.0.0

CSS ReleaseNote

PureCSS 1.0.0リリース。
互換性はあるので1.0.0へバージョンを上げただけの変更

Microsoft Edge build 16215 changelog - Microsoft Edge Development

developer.microsoft.com/en-us/microsoft-edge/platform/changelog/desktop/16215/

MSEdge ReleaseNote

Windows 10 build 16215/MSEdgeリリース。
Shared Memory、Passive Event、object-fit、position: sticky、object-positionのサポートなど

V8 JavaScript Engine: V8 Release 6.0

v8project.blogspot.com/2017/06/v8-release-60.html

V8 ReleaseNote

V8 6.0リリース。
SharedArrayBuffer、Object rest/spread properties、パフォーマンス改善など

ESLint v4.0.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2017/06/eslint-v4.0.0-released

ESLint ReleaseNote

ESLint 4.0.0リリース。
eslint:recommendedの更新、設定ファイルの厳密化、indentルールなどの挙動変更、ルール向けのAPI変更など

Safari Technology Preview 32, with WebRTC, is Now Available | WebKit

webkit.org/blog/7627/safari-technology-preview-32/

safari ReleaseNote

Safari Technology Preview Release 32リリース。
Safari 11相当でWebRTC、WebAssemblyなどのサポート

esprima/ChangeLog at 4.0.0 · jquery/esprima

github.com/jquery/esprima/blob/4.0.0/ChangeLog

JavaScript AST library ReleaseNote

Esprima 4.0.0リリース。
ES2017 async/await、関数引数の末尾カンマのサポート、仕様の追従など

アーティクル

Node.js 8: `util.promisify()`

2ality.com/2017/05/util-promisify.html

node.js Promises

Node.js 8.0.0で追加されたutil.promisifyについての解説。
基本的なPromiseへの変換方法、symbol util.promisifyのsymbolを使ったutil.promisify対応の関数定義についてなど

util.promisify が追加された - from scratch

WebAssembly 101: a developer's first steps

blog.openbloc.fr/webassembly-first-steps/

WebAssembly tutorial

WebAssembly入門。
JavaScriptとの連携方法やベンチマークについてを簡潔に解説

React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント (1/3) - ＠IT

www.atmarkit.co.jp/ait/articles/1706/08/news011.html

React サーバー performance article

Reactのサーバサイドレンダリングのパフォーマンス・チューニングについて

Deprecations and Removals in Chrome 60 | Web | Google Developers

developers.google.com/web/updates/2017/06/chrome-60-deprecations

Chrome

Chrome 60で非推奨、削除されるAPIについて。

piotrwitek/react-redux-typescript-guide: A comprehensive guide to static typing "React & Redux" apps using TypeScript

github.com/piotrwitek/react-redux-typescript-guide

React redux TypeScript

React、ReduxをTypeScriptで書く際のガイド

Javascript unit testing tools

mo.github.io/2017/06/05/javascript-unit-testing.html

JavaScript testing opinion

JavaScriptのテストツールの比較。
それぞれのツールの簡単な比較とアクティビティについて。
利用者はMocha > Karma > Jasmineだが、Jestがアクティブに開発されてる様子がでている

Introduction to Storybook – Chroma

blog.hichroma.com/introduction-to-storybook-5aca8cc643f7

React Tools article

Reactコンポーネントの開発環境であるStorybookの入門記事

Auto-Play Policy Changes for macOS | WebKit

webkit.org/blog/7734/auto-play-policy-changes-for-macos/

article audio safari video

Mac Safariもmobile safariなどと同様にMediaElementの自動再生がユーザー起因でないといけなくする変更。
play()がPromiseを返し、失敗の場合はrejectされる。 Video/Audio/サイト毎に許可が決まるので、複数の要素を作るのではなく一つのsrcを変更して使うことを推奨してる。