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へ移行していったかについて書かれています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Node v14.10.0 (Current) | Node.js
nodejs.org/en/blog/release/v14.10.0/
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
Serverless Frameworkのserverless 2.0リリース。
Node.js 10未満のサポート終了、slssのaliasを削除、AWSのhttoApiのtimeout設定の削除など
Release v1.4.0 · denoland/deno
github.com/denoland/deno/releases/tag/v1.4.0
Deno 1.4.0リリース。
WebSocket APIの実装、Deno.systemMemoryInfo()の追加。
また、unstableな機能としてdeno run --watch、deno test --coverageの追加など
Release [email protected] · pikapkg/snowpack
github.com/pikapkg/snowpack/releases/tag/snowpack%402.11.1
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
ユーザーの入力状態をトラッキングするライブラリ。
現在の入力状態がmouse, keyboard, touchなのかを判定できる
Release v1.4.0 · microsoft/playwright
github.com/microsoft/playwright/releases/tag/v1.4.0
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/
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
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 leading-trimプロパティについて
A Practical Guide to the Web Cryptography API - DEV Community 👩💻👨💻
dev.to/voraciousdev/a-practical-guide-to-the-web-cryptography-api-4o8n
Web Cryptography APIの基本的な使い方。
Encryption、Decryption、転送や保存について
サイト、サービス、ドキュメント
type-challenges/type-challenges: Collection of TypeScript type challenges with online judge
github.com/type-challenges/type-challenges
TypeScriptの型定義の問題に挑戦できる問題集
microsoft/FluidFramework: Library for building distributed, real-time collaborative web applications
github.com/microsoft/FluidFramework
分散型リアルタイムコラボレーションのためのウェブアプリケーションフレームワーク。
ソフトウェア、ツール、ライブラリ関係
brahmosjs/brahmos: Super charged JavaScript library with modern React API and native templates.
ReactのようなAPIとJSXで記述できるUIライブラリ。
Babel pluginでJSXをTagged Template Literalに変換し、lit-htmlのような形でレンダリングする
cookie-universal/packages/cookie-universal at master · microcipcip/cookie-universal
github.com/microcipcip/cookie-universal/tree/master/packages/cookie-universal
ブラウザと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
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
クリックしたらその場で編集できるedit in placeを提供するAngular向けのライブラリ
sabljakovich/mongoose-execution-time: Mongoose plugin for measuring and logging query execution time
github.com/sabljakovich/mongoose-execution-time
mongooseでqueryの実行時間をログ出力するライブラリ
書籍関係
JavaScript for Data Science
データサイエンティスト向けのJavaScriptの入門書
