JSer.info #399 - Chromium Blog: Charting Browser Interoperabilityという記事では、ブラウザのWeb APIの相互運用性などについて見られるWeb API Confluence Dashboardについての紹介がされています。
それぞれのブラウザ固有のAPIの数やその固有のAPIがどの程度削除されているか。
またブラウザごとにAPIが実装されているかを一覧するといった、ウェブブラウザの相互運用性をチェックできるダッシュボードについて紹介されています。
またそれらのAPIをどのような仕組みで収集しているかのアルゴリズムについても解説されているので、クロスブラウザに興味がある人は見てみると面白いかもしれません。
Best Practices For Mobile Form Design — Smashing Magazineという記事では、モバイルのブラウザにおいてのフォームデザインについて幅広いプラクティスがまとめられています。
フォームの複雜さや入力のコストについて書かれていて、それぞれのフィールドの種類ごとによくないやり方とよいやり方についてを紹介しています。
Touchに考慮したデザインや具体的な事例、バリデーション、アクセシビリティなど幅広い項目について書かれています。
お知らせ
2018年9月22日(土)に JSer.info 400回目記念イベントを開催します - JSer.infoで紹介しましたが、イベント参加の募集を開始しています。
次のページから参加、発表などで申し込みできます。
発表枠がまだまだありそうなので、JavaScriptに関して(ウェブでもOK)の発表したい方を募集しています。すごい抽象的なテーマなので、前々から話したかったけど普段のイベントだとテーマが合わないから保留していたというようなものも歓迎しています。
（毎年発表内容はJavaScriptに関係しそうというぐらいであとはバラバラです）
また、参加する人もJavaScript Discussionという質問をベースにしたDiscussionを行うコーナーで聞きたいことなどについての質問を事前に用意しておくといいです。
YES/NOの答えがあるものから、答えがないものまで質問は自由です。（大体いいね順で上から進めていくので、意図が分かりやすい質問文を考えておくとよいです）
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release Notes for Safari Technology Preview 64 | WebKit
webkit.org/blog/8406/release-notes-for-safari-technology-preview-64/
Safari Technology Preview 64リリース。
WebWorkerのnameオプションをサポート、Safari Push Notificationsでパーミッションを要求するのはユーザージェスチャ起因じゃないとできなくなるなど
Chromium Blog: Charting Browser Interoperability
blog.chromium.org/2018/08/charting-browser-interoperability.html
ブラウザのAPIに関するinteroperabilityについての記事
ブラウザ固有のAPIの数、削除されているAPIの数などのデータの見方。
またそれらのAPIをどのように集めているかについてなど
Release v3.5.0 · fuse-box/fuse-box
github.com/fuse-box/fuse-box/releases/tag/v3.5.0
FuseBox 3.5.0リリース。
targetにnpm-server, npm-browser, npm-universalを追加など
Release v0.80.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.80.0
Flow 0.80.0リリース。
Flow lintのseverity算出の仕組みの変更、いつくかのlibdefの型を変更など
アーティクル
What's New In DevTools (Chrome 70) | Web | Google Developers
developers.google.com/web/updates/2018/08/devtools
Chrome 70の開発者ツールの変更点について。
Live Expressions、ネットワークスロットリングをコマンドメニューから選択できるように、AudioContextに関するEvent Listener BreakPointのサポートなど
Best Practices For Mobile Form Design — Smashing Magazine
www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/
モバイルでのフォームのデザインについての記事。
ラベルの置き方、フィールドのサイズ、確認項目、パスワードの表示、フィールドの分割、選択肢の置き方、アクセシビリティについてなど
Introducing F2 – Sima – Medium
medium.com/@SimaZwx/https-medium-com-simazwx-introducing-f2-c44fb4e74c2d
モバイル向けに作られたインタラクティブグラフライブラリのF2について。
Using the React DevTools Profiler to Diagnose React App Performance Issues | Netlify
Reactの新しい開発者ツールのProfierを使ったパフォーマンスの問題の見つけ方について。
React Renderのcommits回数が多い問題を見つけて、debounceでcommitを減らすようにした話
マイクロサービス/API時代のフロントエンド開発 - ＠IT
www.atmarkit.co.jp/ait/series/9324/
BFF（Backends For Frontends）についての連載記事。
UIのためAPIサーバであるBFFの役割、ユースケース、アンチパターンについてなど
Array.prototype.sort について | メモログ
memolog.org/2018/about-array-prototype-sort.html
各ブラウザのJavaScriptエンジンのsotの実装について。 仕様では安定ソートを保証しないが、大体が安定ソートになっていっている。
V8はV8 7.0/Chrome 70でTimSortになる。
スライド、動画関係
TypeScript導入で得られる「変えていく勇気」 / The courage to change by TypeScript - Speaker Deck
speakerdeck.com/okunokentaro/the-courage-to-change-by-typescript
TypeScriptを使ったアプリケーション開発についてのスライド。
今のTypeScriptでは型定義ファイルの管理方法、途中から導入するための手段などが整備されている点について。
また型を活用したリファクタリングを行いやすいアーキテクチャについてなど
サイト、サービス、ドキュメント
dy/font-measure: Compute font metrics such as x-height, cap height, ascent, descent and tittle for any web font.
font familyを指定すると、そのfontのメトリクス情報を返してくれるライブラリ。 Canvasを使い計測している
ソフトウェア、ツール、ライブラリ関係
UpperCod/Atomico: 🔥 A small library to work with web components
JSXをサポートしたWebComponentを作成するライブラリ。
Custom ElementにReactライクなライフサイクルイベントを追加している
書籍関係
WebGL Insights 日本語版 - アスキードワンゴ
asciidwango.jp/post/176833750840/webgl-insights-%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%89%88
2018年8月24日発売
WebGL Insightsの翻訳本
