JSer.info #395 - Chrome 69 Betaがリリースされました。

CSS conic gradients、CSS scroll snap、CSS env() functionのサポートなどCSSの変更が多く行われています。
またOffscreenCanvasや
ReportingObserver API、Keyboard Map APIのサポートなどが行われています。

メディア系のアップデートはAudio/Video Updates in Chrome 69 | Web | Google Developersにまとめられています。

React 16.4.2でSSR（サーバサイドレンダリング）時に発生するXSSが修正されています。

React v16.4.2: Server-side vulnerability fix - React Blog

あまりないパターンだと思いますが、タグ文字列を含む任意の値を属性値として使っている場合に、SSR時にその属性値がタグとして出力されてしまう問題が修正されています。

let userProvidedData = '></div><script>alert("hi")</script>';
let props = {};
props[userProvidedData] = "hello";
let element = <div {...props} />;
let html = ReactDOMServer.renderToString(element);
// <div ></div><script>alert("hi")</script>

VueとPreactの同様の問題がReactチームによって報告されており、同時に修正がリリースされています。

This issue affected Preact (-compat & -render-to-string) as well. It's been patched in versions 3.18.1 / 3.7.1 of those libraries. Cheers to the React folks for the easy disclosure process. https://t.co/pN9nnMBDEC
— Jason Miller 🦊⚛ (@_developit) August 1, 2018

Fix for the same issue has been released in Vue 2.5.17. (only affects SSR). Thanks to the React team for coordinating this with us! https://t.co/WnKS79FjfW
— Vue.js (@vuejs) August 1, 2018

Preact 8.3.0がリリースされました。

Release 8.3.0 · developit/preact

React v16.3.0で追加された
getDerivedStateFromPropsとgetSnapshotBeforeUpdateに対応しています。
またmoduleを.mjsで出力するように、setStateの挙動をReactに近づけるように修正などが行われています。

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

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

JSer.info Sponsors

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

ヘッドライン

Node v10.8.0 (Current) | Node.js

nodejs.org/en/blog/release/v10.8.0/

node.js npm ReleaseNote

Node v10.8.0リリース。
npm 6.2.0が同梱されるようになった。

React v16.4.2: Server-side vulnerability fix - React Blog

reactjs.org/blog/2018/08/01/react-v-16-4-2.html

React ReleaseNote security

React 16.4.2リリース。
SSRにおいてユーザー入力をコンポーネントの属性名に渡せるとXSSが発生する問題を修正。
minorごとに同様のpatchリリースが公開されている。
VueとPreactも同様の問題があり、合わせてsecurity fixがリリースされた。

Release Notes for Safari Technology Preview 62 | WebKit

webkit.org/blog/8384/release-notes-for-safari-technology-preview-62/

safari ReleaseNote

Safari Technology Preview 62リリース。
ITPデバッグモードの試験的追加、JSON.stringifyの修正、HLSストリームのキャッシュを無効化、CSS Gridのgapプロパティにおけるcalcが動くように修正など

TestCafe v0.21.0 Released | TestCafe

devexpress.github.io/testcafe/blog/testcafe-v0-21-0-released.html

browser testing E2E ReleaseNote

TestCafe v0.21.0リリース。
テストページをHTTPSでアクセスできるように、スクリーンショットのパスに変数を使えるようになるなど

Dojo Version 3.0 | Dojo

dojo.io/blog/2018/07/27/2018-07-27-Dojo-version-3-release/

JavaScript library ReleaseNote

Dojo 3.0リリース。
パッケージが細かく別れていたものを@dojo/frameworkに統合して利用できるように変更。マイグレーションスクリプトも公開されている。

framework/V3-Migration-Guide.md at master · dojo/framework

ESLint v5.3.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2018/08/eslint-v5.3.0-released

ESLint ReleaseNote

ESLint 5.3.0リリース。
正規表現に関するルールが2つ、Async Functionに関するルールが2つ追加された。

Release 8.3.0 · developit/preact

github.com/developit/preact/releases/tag/8.3.0

React library ReleaseNote

Preact 8.3.0リリース。
getDerivedStateFromPropsとgetSnapshotBeforeUpdateに対応。moduleを.mjsで出力するように、setStateの挙動をReactに近づけるように修正など

Chromium Blog: Chrome 69 Beta: CSS tricks, and more

blog.chromium.org/2018/08/chrome-69-beta-av1-video-decoder-css.html

Chrome ReleaseNote

Chrome 69βリリース。 CSS conic gradients、CSS scroll snap、CSS env() functionのサポート。
ReportingObserver API、Keyboard Map APIのサポートなど

アーティクル

Vue.js で XSS を作り込まないために気を付けること - SSTエンジニアブログ

techblog.securesky-tech.com/entry/2018/08/01/110000

Vue security article XSS

Vue.jsでXSSが発生するポイントについての解説。
v-html、hrefのバインディグ、サーバサイドのテンプレートとCSRでのエスケープ漏れなどについて

JSDocで型チェックする - Qiita

qiita.com/shisama/items/016288d38165d542fffd

TypeScript article

TypeScriptのallowJsとcheckJsを使ったJavaScriptでの型チェックについて。
JSDocで書いた型アノテーションや型定義ファイルを元に型チェックを行う方法について

The Cost Of JavaScript In 2018 – Addy Osmani – Medium

medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

JavaScript article performance

JavaScriptのパフォーマンスコストについての記事。
ファイルサイズ、ロード時間、インタラクティブになるまでの時間、モバイルや低スペックマシンでのコスト。
またパフォーマンスを改善するパターンなどについて

I created the exact same app in React and Vue. Here are the differences.

medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd

Vue React article

VueとReactで同じTodoアプリを作って比較する記事。
処理ごとにそれぞれのやり方を比較して紹介している。

ちゃんと理解するCode Splitting - Qiita

qiita.com/seya/items/06b160adb7801ae9e66f

webpack article JavaScript

webpackにおけるCode Splittingの動作の解説。Code Splittingのメリットとデメリット。
Code SplittingするUIのパターンやDynamic Import、webpackPrefetchオプション、VueやReactでの対応についてなど

スライド、動画関係

Storybook Tutorial

www.learnstorybook.com/

React Angular Vue tutorial

Storybookのチュートリアル。
React、Angular、Vueに対応したStirybookでのコンポーネント開発やChromaticを使ったビジュアルテストなどについて書かれている

Chromatic visual testing for React

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

Frontend News

frontendnews.io/

CSS DOM JavaScript mail web

フロントエンドに関する1週間に1つのTipsについてを更新するサイト

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

Fusion.js Documentation

fusionjs.com/

JavaScript library plugin browser node.js

UberのプラグインベースなBrowser/Node.jsウェブフレームワーク。コアにプラグインの仕組みとDIの仕組みを持ち、ReactやRedux、KoaなどUberがよく利用しているものをプラグインとして導入できる。
webpackやbabelなどをラップするcliがあり、create-react-appのように設定ファイルを触らずに開発ができる。