Fork me on GitHub

2020-09-15のJS: playwright 1.4.0、snowpack 2.11.1、Migrating to JavaScript modules(Chrome Dev Tools)

Edit on GitHub 編集履歴を見る

JSer.info #505 - クロスブラウザの自動化ライブラリであるplaywright 1.4.0がリリースされました。

playwright 1.4では依存するブラウザをそれぞれChromium 86/Firefox 80/WebKit 14ベースにアップデートしています。
APIとしてelementHandle.waitForElementState()elementHandle.waitForSelector()の追加なども行われています。
その他には、実験的な機能として動画の録画機能が追加されています。

また、同時にPlaywright CLIが正式リリースされています。

Playwright CLIでは、操作を記録して再生するコードの生成、要素のInspect、スクリーンショット、PDFの生成などができるコマンドラインツールとなっています。


フロントエンド向けのビルドツールであるSnowpack 2.11.1がリリースされました。

@snowpack/plugin-optimizeという最適化プラグインが追加されています。
@snowpack/plugin-optimizeは、esbuildでJS、CSSOでCSS、HTMLMinifierでHTMLをそれぞれ圧縮します。これに加えて<link rel="modulepreload">を使ったプリロードに対応しています。

その他には、build --watchでHMR/Livereloadの対応、@snowpack/plugin-webpackでもHTMLのminifyする変更がされています。


DevTools architecture refresh: Migrating to JavaScript modules  |  Webという記事では、Chrome Dev ToolsのコードベースをES Modulesに移行した話が書かれています。

Chrome Dev Tools(元はWebKit)は、ES Modulesが策定される前から書かれているため、独自のモジュールの仕組みを持っていました。
標準化されたES Modulesのメリットなどを考慮して、どのように独自の仕組みからES Modulesへ移行していったかについて書かれています。


ヘッドライン


Node v14.10.0 (Current) | Node.js

nodejs.org/en/blog/release/v14.10.0/

node.js ReleaseNote

Node.js 14.10.0リリース。
ランダムなintegerを返すcrypto.randomInt()の追加、performance.eventLoopUtilization()の追加など


Release 2.0.0 (2020-09-10) · serverless/serverless

github.com/serverless/serverless/releases/tag/v2.0.0

node.js library ReleaseNote serverless

Serverless Frameworkのserverless 2.0リリース。
Node.js 10未満のサポート終了、slssのaliasを削除、AWSのhttoApitimeout設定の削除など


Release v1.4.0 · denoland/deno

github.com/denoland/deno/releases/tag/v1.4.0

deno ReleaseNote

Deno 1.4.0リリース。
WebSocket APIの実装、Deno.systemMemoryInfo()の追加。
また、unstableな機能としてdeno run --watchdeno test --coverageの追加など


Release snowpack@2.11.1 · pikapkg/snowpack

github.com/pikapkg/snowpack/releases/tag/snowpack%402.11.1

bundler ReleaseNote JavaScript

snowpack 2.11.1リリース。
esbuildなどをベースにした@snowpack/plugin-optimizeの追加、build --watchでHMR/Livereloadの対応。
また、@snowpack/plugin-webpackでもHTMLのminifyをするようになるなど。


ten1seven/what-input: A global utility for tracking the current input method (mouse/pointer, keyboard or touch).

github.com/ten1seven/what-input

JavaScript library browser DOM

ユーザーの入力状態をトラッキングするライブラリ。
現在の入力状態がmouse, keyboard, touchなのかを判定できる


Release v1.4.0 · microsoft/playwright

github.com/microsoft/playwright/releases/tag/v1.4.0

browser library Tools ReleaseNote

playwright 1.4.0リリース。
playwright-cliを正式リリース、Chromium 86/Firefox 80/WebKit 14へアップデート。
elementHandle.waitForElementState()elementHandle.waitForSelector()の追加など


アーティクル


AVIF has landed - JakeArchibald.com

jakearchibald.com/2020/avif-has-landed/

browser Image article

AV1 video由来の画像フォーマットであるAVIFについて。
jpeg、WebP、AVIFのサイズや画質の比較。
AVIFのエンコード、デコード時間、プログレッシブ表示できないといった特徴についてなど


DevTools architecture refresh: Migrating to JavaScript modules  |  Web

developers.google.com/web/updates/2020/09/migrating-to-js-modules

JavaScript Chrome article refacoring

Chrome Dev Toolsのコードベースを独自モジュールシステムからES Modulesに移行した話。
標準であるES Modulesの利点、移行戦略、exportの変更/importの変更の段階的な移行について。
また技術的な負債により初期の見積もり(数週間)よりも大きく時間(数ヶ月)かかったことについてなど


Leading-Trim: The Future of Digital Typesetting | by Ethan Wang | Microsoft Design | Aug, 2020 | Medium

medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202

CSS article

CSS leading-trimプロパティについて


A Practical Guide to the Web Cryptography API - DEV Community 👩‍💻👨‍💻

dev.to/voraciousdev/a-practical-guide-to-the-web-cryptography-api-4o8n

JavaScript article

Web Cryptography APIの基本的な使い方。
Encryption、Decryption、転送や保存について


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


type-challenges/type-challenges: Collection of TypeScript type challenges with online judge

github.com/type-challenges/type-challenges

TypeScript tutorial

TypeScriptの型定義の問題に挑戦できる問題集


microsoft/FluidFramework: Library for building distributed, real-time collaborative web applications

github.com/microsoft/FluidFramework

JavaScript library webservice

分散型リアルタイムコラボレーションのためのウェブアプリケーションフレームワーク。


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


brahmosjs/brahmos: Super charged JavaScript library with modern React API and native templates.

github.com/brahmosjs/brahmos

React jsx library babel

ReactのようなAPIとJSXで記述できるUIライブラリ。
Babel pluginでJSXをTagged Template Literalに変換し、lit-htmlのような形でレンダリングする


github.com/microcipcip/cookie-universal/tree/master/packages/cookie-universal

browser node.js library JavaScript

ブラウザとNode.jsで動くCookieを扱うライブラリ。


microsoft/playwright-cli: CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.

github.com/microsoft/playwright-cli

node.js browser console Tools

PlaywrightのCLI。
操作を記録して再生するコードの生成、要素のInspect、スクリーンショット、PDFの生成などの機能をもっている


ngneat/edit-in-place: A flexible and unopinionated edit in place library for Angular applications

github.com/ngneat/edit-in-place

JavaScript library Angular

クリックしたらその場で編集できるedit in placeを提供するAngular向けのライブラリ


sabljakovich/mongoose-execution-time: Mongoose plugin for measuring and logging query execution time

github.com/sabljakovich/mongoose-execution-time

MongoDB JavaScript library

mongooseでqueryの実行時間をログ出力するライブラリ


書籍関係


JavaScript for Data Science

js4ds.org/

JavaScript book

データサイエンティスト向けのJavaScriptの入門書


この記事へ修正リクエストをする
JSer.info Slackに参加する