JSer.info #386 - iOS 12、macOS 10.14に搭載予定のSafari 12の変更予定のリリースノートが公開されています。
font-displayのサポート、Intelligent Tracking Prevention 2.0、Cross-Origin Read Blocking (CORB)の一部をサポート、またPassword AutoFillに関する機能が追加されています。
少し前にリリースされたSafari Technology Preview 57でもCross-Origin-Options HTTP response headerというクロスオリジンに関するセキュリティヘッダが試験的に実装されています。
JavaScriptテストフレームワークのJest 23がリリースされました。
Interactive Snapshot Modeの追加、非同期なカスタムmatcherを作成できるように、jest-eachがコアに同梱、toStrictEqualなどのmatcherの追加が行われています。
また、テストがハングした際のデバッグを補助する--detectOpenHandlesオプションが追加されています。
sucraseというTypeScript、Flow、JSXと一部のES.nextの機能の変換に限定したTranspilerが公開されています。Babelとは異なりES2015+をES5へ変換するのではなく、ES2015+がそのまま実行できる環境向けにモジュールやTypeScript、Flow、JSXなどを高速にJavaScriptへ変換することが目的となっています。
- website: https://sucrase.io/
Babelのパーサをforkしたものを利用していて、TypeScriptなども@babel/preset-typescriptのように型情報を外してJavaScriptに変換できます。
（型チェックはおこないません）
Motivationにも書かれているように、Babelとは異なりASTまでは生成せずtokenレベルでのコード変換を行います。
そのため、BabelのようなASTプラグインはサポートしていませんが、変換ステップが少なくなるため高速な変換を行えます。
- Babel: Source -> Token -> AST -> Transform -> AST -> Source
- sucrase: Source -> Token -> Transform -> Source
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
New in Chrome 67 | Web | Google Developers
developers.google.com/web/updates/2018/05/nic67
Chrome 67リリース。
Desktop PWA、Generic Sensor API、BigIntのサポート、開発者ツールの更新など
Announcing TypeScript 2.9 | TypeScript
blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/
TypeScript 2.9リリース。
import() typeの追加、JSONファイルをimportしたときに型推論がされるように、Tagged Template Stringの型改善など
Release 1.0.0-beta.5 · avajs/ava
github.com/avajs/ava/releases/tag/v1.0.0-beta.5
AVA 1.0.0-beta.5リリース。
ava.config.jsの設定ファイルのサポート、t.throwsでcodeプロパティをサポートなど
Release 8.6 “Follow Reason” · postcss/autoprefixer
github.com/postcss/autoprefixer/releases/tag/8.6.0
Autoprefixer 8.6リリース。
CSS Gridのgapをサポートなど
Release Notes for Safari Technology Preview 57 | WebKit
webkit.org/blog/8307/release-notes-for-safari-technology-preview-57/
Safari Technology Preview Release 57リリース。
クロスオリジンWindow間でのアクセスを制限できるCross-Origin-Options HTTPヘッダの試験的サポート、modern EME APIをデフォルトで有効化など。
Jest 23: 🔥 Blazing Fast Delightful Testing · Jest
facebook.github.io/jest/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html
Jest 23リリース。
Interactive Snapshot Modeの追加、非同期なカスタムmatcherを作成できるように、jest-eachがコアに同梱、toStrictEqualなどのmatcherの追加
What’s New in Safari - Apple Developer
developer.apple.com/safari/whats-new/
Safari 12の変更予定。
watchOSで動作するように、font-displayのサポート、ITP 2.0、CORBの一部をサポート、.safariextzスタイルのSafari拡張を非推奨化など
アーティクル
Simplify Web Worker code with Comlink
davidea.st/articles/comlink-simple-web-worker
Web Workerの動作についての解説やComlinkを使ったWeb Workerの利用方法について
Beyond SPAs: alternative architectures for your PWA | Web | Google Developers
developers.google.com/web/updates/2018/05/beyond-spa
Service WorkerとExpressを使ったページ単位の(SPAではない)ウェブアプリのためのアーキテクチャと実装サンプルについて。
ルーティングをクライアントとサーバで共有し、パーシャルなViewをStream APIで取得しレンダリングする。また動的なメタ情報の渡し方についてなど
Getting Started With CSS Layout — Smashing Magazine
www.smashingmagazine.com/2018/05/guide-css-layout/
CSSのレイアウトについての記事。
Float、Flex、Gridなどのレイアウトの仕組み。
BoxとContents、Alignmentなどについて
スライド、動画関係
JavaScript engines: The Good Parts™ // slidr.io
slidr.io/mathiasbynens/javascript-engines-the-good-parts#1
JavaScriptエンジンの最適化パスについてのスライド。
V8、Spidermonkey、Chackra、JavaScriptCoreそれぞれの最適化パスの流れやShapeと最適化が崩れるパターンについて
サイト、サービス、ドキュメント
GoogleChromeLabs/critters: 🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
github.com/GoogleChromeLabs/critters
クリティカルCSSのインライン化、外部ファイルのlazy loadとprefetchの対応を行うwebpack plugin。
Reach Router - Overview
React向けのルーターライブラリ。
React Routerの元々の作者が作成していて、Focus Mangementなどのアクセシビリティが考慮されている。
ソフトウェア、ツール、ライブラリ関係
alangpierce/sucrase: Super-fast alternative to Babel for when you can target modern JS runtimes
github.com/alangpierce/sucrase
BabelのParserをforkして作られたJSX/Flow/TypeScriptなどをJSに変換するツール。
ES2015+が動く実行環境向けへコードを変換する際に、それ以外(JSX/Flow/TypeScript)の変換を高速に行うことが目的。
Babelとは異なりプラグインのステップを省くことで変換速度を向上させている。
hybridsjs/hybrids: UI library for creating Web Components with simple and functional API
lit-htmlのようにCustom Elementを作成できるhtmlやdefineなどを提供するライブラリ。
Alex1990/tiny-cookie: A tiny cookie manipulation plugin for the browser.
github.com/Alex1990/tiny-cookie
小さなクッキー操作ライブラリ
GoogleChromeLabs/comlink: Comlink makes WebWorkers enjoyable.
github.com/GoogleChromeLabs/comlink
Proxyを使ったWeb Workerライブラリ。
Worker内での実装をProxyしてpostMessageなどのメッセージングを隠蔽してくれる
marblejs/marble: Marble.js - functional reactive HTTP middleware framework built on top of Node.js platform, TypeScript and RxJS library.
Rxjsを使ったHTTPミドルウェアフレームワーク。
Node.jsにおいてリクエスト、レスポンスに対する処理を書ける。
Keyframes.app
CSS animationのGUIエディタ。 CSS animationのプロパティを設定して、実際にアニメーションとして再生しながら変化するプロパティを決めたCSSを出力できる
書籍関係
Testing Vue.js Applications: Edd Yerburgh: 9781617295249: Amazon.com: Books
2018年8月31日発売。
Vue.jsのテスト本。
