Fork me on GitHub

2018-04-17のJS: Safari 11.1の新しい機能、Chrome 67開発者ツール、Webdash

Edit on GitHub 編集履歴を見る

JSer.info #379 - New WebKit Features in Safari 11.1 | WebKitという記事では、Safari 11.1で追加された新しい機能の概要がまとめられています。

  • Service Worker API
  • Payment Request API for Apple Pay
  • Directory Upload & Clipboard API Updates
  • Beacon API
  • Video as Image Assets
  • CSS font-display
  • HTML Image Decoding(decoding属性)
  • Passive Event Listeners
  • Storage Access API
  • Subresource Integrity
  • WebDriver

など大きな機能追加があるので興味がある人は見てみると良さそうです。

また、Safari 11のTechnology PreviewではUA文字列を固定される変更が行われていました。
しかし正式リリースする際にはUA文字列固定は取りやめたことについてが次の記事で紹介されています。


What's New In DevTools (Chrome 67)  |  Web  |  Google Developersという記事ではChrome 67(2018年6月リリース予定)の開発者ツールの変更点がまとめられています。

Meltdown/Spectreでのサイドチャネル攻撃の対策として導入されたSite Isolationに対応した変更が含まれています。
異なるプロセスのサンドボックスでJavaScriptなどが実行されるため、パフォーマンスパネルなども分離されたサンドボックス毎の記録を取れるようになっています。

加えてネットワークパネルの検索改善、リクエストをfetch APIのコードとしてコピーできるように、Auditパネルの改善、無限ループを停止できるなどの変更が含まれています。

また、Improving DevTools’ performance, one iteration at a time – Firefox Nightly Newsという記事ではFirefox 60(2018年5月8日リリース予定)の開発者ツールのパフォーマンス改善について書かれています。
InspectorでのCSSルール変更時の描画速度改善、大量のconsole.logを表示時のパフォーマンスを改善など開発者ツール自体のパフォーマンス改善が行われています。

加えて、現在Firefox Nightlyで開発者ツールにAccessibility Inspectorが実装されていることがIntroducing the Accessibility Inspector in the Firefox Developer Tools – Marco's Accessibility Blogという記事で紹介されています。


ヘッドライン


Prettier 1.12: Fixes, Features, and Formatting, Oh My! · Prettier

prettier.io/blog/2018/04/11/1.12.0.html

JavaScript Tools ReleaseNote

Prettier 1.12リリース。
JavaScript、Markdown、GraphQLのサポート改善など


New WebKit Features in Safari 11.1 | WebKit

webkit.org/blog/8216/new-webkit-features-in-safari-11-1/

safari ReleaseNote

Safari 11.1の変更点や追加された機能についての開設。
Service Worker、Payment Request API、Clipboard API、Passive Event Listeners、Offscreen Canvasなど


Ember.js - Ember 3.1 and 3.2 Beta Released

emberjs.com/blog/2018/04/13/ember-3-1-released.html

JavaScript ReleaseNote

Ember 3.1リリース。
Computed PropertiesがES5 getterで定義されるようになり、Ember.get()this.get()使わなくても値が取得できるようになった。
@ember/optional-featuresがリリースされ、ember-cli経由でEmber自体のBreaking Changeをフラグ管理ができるようになるなど


Release v0.70.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.70.0

flowtype ReleaseNote

Flow 0.70.0リリース。
React 16.3(createContextcreateRef)の対応、--json-version 2の出力結果に破壊的な変更など


Release 8.3 “Benigno Numine” · postcss/autoprefixer

github.com/postcss/autoprefixer/releases/tag/8.3.0

CSS Tools ReleaseNote

Autoprefixer 8.3.0リリース。
grid-template@mediaの組み合わせをサポート


zzarcon/default-passive-events: Makes {passive: true} by default when EventListenerOptions are supported

github.com/zzarcon/default-passive-events

DOM JavaScript library

Passive Event Listenersをデフォルトで有効化するようにEventTarget.prototype.addEventListenerの処理を上書きするライブラリ


アーティクル


Improving DevTools’ performance, one iteration at a time – Firefox Nightly News

blog.nightly.mozilla.org/2018/04/10/improving-devtools-performance-one-iteration-at-a-time/

firefox debug performance article

Firefox 60での開発者ツールのパフォーマンス改善について。


What's New In DevTools (Chrome 67)  |  Web  |  Google Developers

developers.google.com/web/updates/2018/04/devtools

Chrome debug article

Chrome 67の開発者ツールの変更点について。
ネットワークパネルの検索改善、リクエストをfetch APIのコードとしてコピーできるように、Auditパネルの改善、無限ループを停止できるように。
また、メモリパネル、パフォーマンスパネルでSite Isolationを適応時のプロセス分離に対応など


Introducing the Accessibility Inspector in the Firefox Developer Tools – Marco's Accessibility Blog

www.marcozehe.de/2018/04/11/introducing-the-accessibility-inspector-in-the-firefox-developer-tools/

firefox accessibility article debug

FirefoxのNightlyビルドで開発者ツールにアクセシビリティパネルが追加されたことについて。
DOMツリーのアクセシビリティについてをデバッグする機能について


Whats New in Angular 6 ?Walking Tree Technologies | Walking Tree Technologies

walkingtree.tech/whats-new-angular-6/

Angular article

現在RC版が公開されているAngular 6の変更点の概要


SafariのUA文字列が固定されて固定されなくなったおはなし - fragmentary

myakura.hatenablog.com/entry/2018/04/16/083000

safari article

Safari TP 46でUA文字列固定化は一度導入されたが、固定を取りやめることになった経緯について


モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った | Web Scratch

efcl.info/2018/04/16/hatebupwa/

JavaScript PWA React almin DDD article

https://hatebupwa.netlify.com/ の技術スタックについて。
WebWorkerを使った別スレッドでのフィルタリング処理、Servie Workerでのキャッシュ、React ContextとAlmin、domainのシリアライズと永続化についてなど


スライド、動画関係


Automatic Progressive Web Apps using Angular Service Worker by Maxim Salnikov

slides.com/webmax/ngsw-ijs-2018#/

Angular slide PWA

AngularとPWAについてのスライド。
Angular CLIでの開発方法、NGSW、Service Workerのバージョン管理や登録を解除するスイッチの導入などについて


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


VuePress

vuepress.vuejs.org/

Vue Tools

Vue.jsを使った静的サイトツール。
docusaurusのようにビルトインの機能があり、Vueを使ったテンプレートのカスタマイズができるツール


Sneak Peek at WebAssembly Studio – Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2018/04/sneak-peek-at-webassembly-studio/

WebAssembly editor webservice

ブラウザ上でC/C++/RustのコードをWebAssemblyにコンパイルして実行できる開発環境のWebAssembly.Studioがβ公開された


Webdash | The customizable web dashboard

webdash.xyz/

JavaScript Tools project

ウェブプロジェクトに関するダッシュボードツール。
パッケージの可視化、npm scriptをボタンで実行、Performance Budgetの表示、Workbox連携などを行う。


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


sarahdayan/dinero.js: 💸 An immutable library to create, calculate and format monetary values.

github.com/sarahdayan/dinero.js

JavaScript library

通貨の計算を扱うライブラリ。
Immutableなデータとして通貨と金額を扱い、また浮動小数点数の問題を回避した計算するメソッドを提供する。
フォーマットにはNumber.prototype.toLocaleStringを利用している。


github.com/glidejs/glide

JavaScript library UI

依存がないカルーセル/スライダーUIライブラリ


書籍関係


基礎から学ぶ Vue.js | mio |本 | 通販 | Amazon

www.amazon.co.jp/dp/4863542453/

JavaScript Vue book

2018年5月29日発売。
リファレンス形式のVue.jsについての書籍


ECMAScript Cookbook | PACKT Books

www.packtpub.com/web-development/ecmascript-cookbook

ECMAScript book

ECMAScript 2015以降のコードについて扱うクックブック


Introduction · Front-End Developer Handbook 2018

frontendmasters.com/books/front-end-handbook/2018/

JavaScript book

Front-End Developer Handbook 2018が公開された


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