Fork me on GitHub

2019-09-24のJS: Safari 13、Chrome 78 Beta(Native File System trial)、Storybook 5.2(CSF)

Edit on GitHub 編集履歴を見る

JSer.info #454 - iOS 13、macOS 10.14.5(Mojave)に搭載されるSafari 13のリリースノートが公開されています。

Web Authentication APIを使ったFIDO2のセキュリティキーに対応、__Secure-__Host-のクッキーprefixのサポート、Pointer EventsやVisual Viewport APIのサポートなどが行われています。
iOS 13のSafariでWebDriverのサポート、ITP 2.3へのアップデート、WebSQLの削除なども含まれています。


Chrome 78 Betaがリリースされました。

CSS Custom Propertiesを使ったアニメーションのサポート、Native File System APIとSMS Receiver APIのorigin trialでのサポートが含まれています。

WebSocketsにおけるArrayBufferのダウンロード速度の改善、performance.markなどに対してメタデータを付与できるUser Timing API Level 3のサポートもふくまれています。
また、unload時にはポップアップやSync HXRが禁止されるなどの制限の追加、MSEdgeに引き続いてXSS Auditorが廃止されています。


デザインシステムツールであるStorybook 5.2がリリースされました。

UIコンポーネントに対してMDXを使ってドキュメントを書けるDocsPageという機能が追加されています。
詳しくは次の記事でも解説されています。

今までは、Stroy#addのようなAPIでストーリを記述する形式でした。

storiesOf('atoms/Button', module)
  .add('text', () => <Button>Hello</Button>)
  .add('emoji', () => <Button>😀😎👍💯</Button>);

Storybook 5.2ではこれに加えてComponent Story Format (CSF)というストーリの形式がサポートされました。
CSFはストーリーをモジュールとしてexportすることで表現できるようになっています。

export default { title: 'atoms/Button' };

export const text = () => <Button>Hello</Button>;
export const emoji = () => <Button>😀😎👍💯</Button>;

詳細は次の記事で書かれています。


ヘッドライン


Moving Firefox to a faster 4-week release cycle - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2019/09/moving-firefox-to-a-faster-4-week-release-cycle/

Firefox news

Firefoxのリリースサイクルが7週ごとから4週ごとへと変更される予定について。
一方でFirefox ESRのリリースサイクルは変更されない。


Safari 13 Release Notes | Apple Developer Documentation

developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

safari ReleaseNote

Safari 13の変更点について。
FIDO2のセキュリティキー、__Secure-__Host-のクッキーprefix、Pointer Events、Visual Viewport APIのサポートなど。
iOS 13のSafariでWebDriverのサポート、WebSQLの削除など


jasmine/3.5.0.md at master · jasmine/jasmine

github.com/jasmine/jasmine/blob/master/release_notes/3.5.0.md

JavaScript library ReleaseNote testing

Jasmine 3.5リリース。
toHaveBeenCalledWithのエラー結果の出力の改善、resolveTorejectWithの追加、カスタム非同期Matcherを定義するaddAsyncMatchersの追加など


Chromium Blog: Chrome 78 Beta: a new Houdini API, native file system access and more

blog.chromium.org/2019/09/chrome-78-beta-new-houdini-api-native.html

Chrome ReleaseNote

Chrome 78 Betaリリース。
CSS Custom Propertiesを使ったアニメーションのサポート、Native File System APIとSMS Receiver APIのorigin trialの開始など。
WebSocketsにおけるArrayBufferのダウンロード速度の改善、User Timing API Level 3のサポート。
また、Sync HXRがunload時などには禁止、XSS Auditorの削除など


Storybook 5.2 - Storybook - Medium

medium.com/storybookjs/storybook-5-2-794958b9b111

JavaScript Tools ReleaseNote

Storybook 5.2リリース。
MDXを使ったドキュメントを書けるDocsPageの追加、Storyをモジュールとして作れるCSFのサポート。
TypeScriptのサポート、React Hooksのサポート、 Standalone modeなど


アーティクル


Fresher service workers, by default  |  Web  |  Google Developers

developers.google.com/web/updates/2019/09/fresher-sw

Chrome ServiceWorker article

Chrome 78ではimportScriptで読み込むファイルも変更があればHTTP Cacheはデフォルトで無視されるようになった。
Chrome 68で追加されたupdateViaCacheオプションを使ってHTTP Cache-Controlを見るかを制御できる。


Practical Ways to Write Better JavaScript - Stack Overflow Blog

stackoverflow.blog/2019/09/12/practical-ways-to-write-better-javascript/

JavaScript TypeScript article

より良いJavaScriptを書くためにどうするかという記事。
TypeScriptを使う、ES2015+の機能を活用する、分散を考える。
Lint、テストを行うなどについて


✩ Wikipedia's JavaScript initialisation on a budget

phabricator.wikimedia.org/phame/live/7/post/175/wikipedia_s_javascript_initialisation_on_a_budget/

JavaScript refacoring performance article

Wikipediaの初期表示に読み込むJavaScriptのファイルサイズを削減した話。
目標のbudgeを28KBと設定してどのように初期ロードのJavaScriptサイズを減らしていったかについて


Intelligent Tracking Prevention 2.3 | WebKit

webkit.org/blog/9521/intelligent-tracking-prevention-2-3/

safari privacy article

Safari 13(iOS 13/macOS Catalina)に実装されたITP 2.3について。
CookieからLocalStorageに保存場所を移行したサードパーティトラッカーに対する制限の追加、document.referrerにもeTLD+1の制限を追加、デバッグモードの改善など


Techniques to make a web app load fast, even on a feature phone

web.dev/load-faster-like-proxx/

JavaScript performance article

PROXXのローディングパフォーマンスに利用したテクニックの紹介記事。
WebPageTestを使ったリソースロードのwaterfall分析、コネクション数の削減、preload、prerendering、CSSのインライン化、Code Splittingなどについて


スライド、動画関係


Backbone.Model に 型をつけて剥がす - Typing to destroy Backbone.Model - Speaker Deck

speakerdeck.com/fsubal/backbone-dot-model-ni-xing-wotuketebo-gasu-typing-to-destroy-backbone-dot-model?slide=34

backbone.js TypeScript JavaScript slide refacoring

Backbone.Modelに型をつけてリファクタリングしていく話。
Backbone.ModelをただのJSONとして扱い、JSONのスナップショットに対してテスト行う


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


faboulaws/fakingoose: An automatic fixture generator for mongoose using the schema definition

github.com/faboulaws/fakingoose

JavaScript testing library

データスキーマからダミデータを生成してくれるライブラリ


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