Fork me on GitHub

2018-09-04のJS: Browser Interoperability、Mobile Form Design、400回記念イベントページ公開

Edit on GitHub 編集履歴を見る

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の答えがあるものから、答えがないものまで質問は自由です。(大体いいね順で上から進めていくので、意図が分かりやすい質問文を考えておくとよいです)


ヘッドライン


Release Notes for Safari Technology Preview 64 | WebKit

webkit.org/blog/8406/release-notes-for-safari-technology-preview-64/

safari ReleaseNote

Safari Technology Preview 64リリース。
WebWorkerのnameオプションをサポート、Safari Push Notificationsでパーミッションを要求するのはユーザージェスチャ起因じゃないとできなくなるなど


Chromium Blog: Charting Browser Interoperability

blog.chromium.org/2018/08/charting-browser-interoperability.html

browser WebPlatformAPI

ブラウザのAPIに関するinteroperabilityについての記事
ブラウザ固有のAPIの数、削除されているAPIの数などのデータの見方。
またそれらのAPIをどのように集めているかについてなど


Release v3.5.0 · fuse-box/fuse-box

github.com/fuse-box/fuse-box/releases/tag/v3.5.0

node.js bundler ReleaseNote

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

flowtype ReleaseNote

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 article

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/

mobile design article

モバイルでのフォームのデザインについての記事。
ラベルの置き方、フィールドのサイズ、確認項目、パスワードの表示、フィールドの分割、選択肢の置き方、アクセシビリティについてなど


Introducing F2 – Sima – Medium

medium.com/@SimaZwx/https-medium-com-simazwx-introducing-f2-c44fb4e74c2d

JavaScript グラフ library mobile article

モバイル向けに作られたインタラクティブグラフライブラリのF2について。


Using the React DevTools Profiler to Diagnose React App Performance Issues | Netlify

www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues/

React performance article

Reactの新しい開発者ツールのProfierを使ったパフォーマンスの問題の見つけ方について。
React Renderのcommits回数が多い問題を見つけて、debounceでcommitを減らすようにした話


マイクロサービス/API時代のフロントエンド開発 - @IT

www.atmarkit.co.jp/ait/series/9324/

BFF server API article

BFF(Backends For Frontends)についての連載記事。
UIのためAPIサーバであるBFFの役割、ユースケース、アンチパターンについてなど


Array.prototype.sort について | メモログ

memolog.org/2018/about-array-prototype-sort.html

JavaScript V8 article

各ブラウザの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 slide

TypeScriptを使ったアプリケーション開発についてのスライド。
今のTypeScriptでは型定義ファイルの管理方法、途中から導入するための手段などが整備されている点について。
また型を活用したリファクタリングを行いやすいアーキテクチャについてなど


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


dy/font-measure: Compute font metrics such as x-height, cap height, ascent, descent and tittle for any web font.

github.com/dy/font-measure

JavaScript library

font familyを指定すると、そのfontのメトリクス情報を返してくれるライブラリ。 Canvasを使い計測している


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


UpperCod/Atomico: 🔥 A small library to work with web components

github.com/uppercod/atomico

WebComponents jsx JavaScript library

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

WebGL book

2018年8月24日発売
WebGL Insightsの翻訳本


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