JSer.info #383 - フロントエンドツールアンケート2018の結果が公開されています。
JavaScriptやCSSに関するツールやライブラリなどについてのアンケート結果をまとめたもので、前回の結果からの変化などについても掲載されています。
利用言語、ライブラリ、Lint、テスト、bundlerなどについて項目ごとのアンケート結果が公開されているので見てみると良さそうです。
Firefox 60.0がリリースされました。
- Firefox — Notes (60.0) — Mozilla
- Firefox 60 – Modules and More – Mozilla Hacks – the Web developer blog
- Firefox 60 for developers - Mozilla | MDN
ES Modulesの有効化、Same-Site Cookiesのサポート、Array#values
の有効化、Web Authentication APIのサポート、WebVR APIがmacOSで有効化などが行われています。
ES ModulesはこれでIEを除くメジャーブラウザでサポートされたことになりました。
また、Firefox Quantum for Enterpriseと名がついたエンタープライズ向けのESR(Extended Support Release)版もFirefox 60がベースとなっています。
Lighthouse 3.0がプレリリースされ新しい機能について解説されています。
レポートUIの変更、First Contentful Paintの追加、RTTのコスト表示の追加など。
その他の変更点として、スコアのWeightの変更、First InteractiveをFirst CPU Idleに名前の変更など指標が変更されています。
また、LightHouseの記録下内容をPerformanceタブで見るView Traceなどといった機能も追加されています。
この機能については次の発表動画でデモがおこなわれています。
Google I/Oの発表でもLighthouseを扱った内容は多いのであわせて見るとよさそうです。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Node v10.1.0 (Current) | Node.js
nodejs.org/en/blog/release/v10.1.0/
Node v10.1.0リリース。
require("fs/promises")
がrequire("fs").promises
に変更、request.aborted
プロパティの追加など
Firefox — Notes (60.0) — Mozilla
www.mozilla.org/en-US/firefox/60.0/releasenotes/
Firefox 60.0リリース。
ES Modulesの有効化、Array#values
の有効化、Web Authentication APIのサポート、WebVR APIがmacOSで有効化。
またESRのバージョンが60へ更新など。
- Firefox 60 – Modules and More – Mozilla Hacks – the Web developer blog
- Firefox 60 for developers - Mozilla | MDN
Video.js 7 is here! 🎉 | Video.js Blog
blog.videojs.com/video-js-7-is-here/
Video.js 7リリース。
Video.js HTTP Streaming (VHS)プラグインでHLSとDASHを試験的にサポート。
古いブラウザサポートのコードを削除、オプトアウトだったGoogle Analyticsの収集を終了など
Release v1.0.0 · webpack-contrib/webpack-serve
github.com/webpack-contrib/webpack-serve/releases/tag/v1.0.0
webpack-serve 1.0.0リリース。
webpack-dev-server
の後継となるwebpack向けの開発サーバ
Release v0.72.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.72.0
flow 0.72.0リリース。
$Either<T>
, $All<T>
, $Type<T>
の廃止。
Language Server Protocolの改善、Stage 1のnullish coalescingをサポートなど
The Front-End Tooling Survey 2018 - Results - AshleyNolan.co.uk - Blog and Portfolio for Ashley Nolan
ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results
JavaScript、CSS、ツールなどについての開発者アンケート。 利用言語、ライブラリ、Lint、テスト、bundlerなどについて項目ごとのアンケート結果が公開されている
アーティクル
Using Lighthouse To Improve Page Load Performance | Web | Google Developers
developers.google.com/web/updates/2018/05/lighthouse
Lighthouseによって検出できるページロードパフォーマンスの問題について。
preloadした方がいいリソースの表示、JavaScriptのパースと実装の時間表示、リダイレクト検出、利用してないコード量の表示、preconnectによるRTTのコストの削減予測など
The npm Blog — `npm audit`: identify and fix insecure...
blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure
npm 6で入ったセキュリティチェックをするnpm audit
コマンドについての解説
Introducing the Microsoft Edge DevTools Protocol - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog
blogs.windows.com/msedgedev/2018/05/11/introducing-edge-devtools-protocol/#0b7zCRAl1ApIqZ6D.97
リモートデバッグができるMicrosoft Edge DevTools Protocolの解説。
実践PWA:光る電卓「Llumino PWA」の開発と技術解説 - ここぽんのーと
cocopon.me/blog/2018/05/pwa-llumino-dev/
ネイティブアプリだったものをPWAで再現する話。
CSSアニメーション、Service Worker、Web App Manifest、インタラクションについて
Announcing Lighthouse 3.0 | Web | Google Developers
developers.google.com/web/updates/2018/05/lighthouse3
Lighthouse 3.0プレリリース。 レポートUIの変更、それぞれのスコアのWeightの変更、First Contentful Paintの追加、RTTのコスト表示の追加など。 その他の変更点としてFirst InteractiveをFirst CPU Idleに名前の変更など
スライド、動画関係
Google I/O 2018 - All Sessions - YouTube - YouTube
www.youtube.com/playlist?list=PLOU2XLYxmsIInFRc3M44HUTQc3b_YJ4-Y
Google I/O 2018の動画まとめ
TSConf 2018 - YouTube - YouTube
www.youtube.com/playlist?list=PL2z7rCjEG2ksF0rJ8Qwp1y5eTjqiPIRfT
TSConf 2018の動画まとめ
What's new in Chrome DevTools (Google I/O '18) - YouTube
www.youtube.com/watch?v=mfuE53x4b3k&feature=youtu.be
Chromeの開発者ツールの新しい機能について。
非同期処理やWorkerでのブレークポイントの改善、検索機能の改善、LightHouseのアップデートとView Traceのデモ、コンソールのEaget Evaluationのデモなど
ソフトウェア、ツール、ライブラリ関係
jspm.io - Native ES Modules CDN
npmモジュールをES moduleとしてロードできるようにしてくれるCDNサービス。
CommonJSなモジュールはES moduleとして読み込めるように変換される。
isomorphic-git/isomorphic-git: A pure JavaScript implementation of git for node and browsers!
github.com/isomorphic-git/isomorphic-git
Pure JavaScriptなGitの実装ライブラリ。
Node.jsとブラウザで動作する
Nest - A progressive Node.js web framework
Node.jsのウェブフレームワーク。
TypeScriptで書かれていて、AngularのようにDecoratorを使った宣言的な記述を行う。
jorgebucaran/classcat: JavaScript function for conditionally concatenating CSS classes.
github.com/jorgebucaran/classcat
CSSのクラス名文字列を結合したり、条件付きで消したりするライブラリ。