JSer.info #354 - Mozilla、Microsoft、Google、W3Cが協調してウェブ開発のドキュメントをMDN Web Docsに集約していくことを発表しました。
目に見える変化としては、MSDNのドキュメントがMDNにリダイレクトされていきます。
ブラウザ固有のドキュメントに関してはMicrosoft Edge documentation - Microsoft Edge Development | Microsoft Docsなどに残ります。
以前、Web Platform APIのドキュメントを統合しようという動きはWebPlatform.orgという試みが行われていましたが、2015年にdiscontinueとなっています。
CKEditor 5: A new era for rich text editing | CKEditor.comという記事ではリッチエディタライブラリであるCKEditor 5の変更点について書かれています。
- ckeditor/ckeditor5: Development environment for CKEditor 5; the best browser-based rich text editor.
CKEditor 5では内部的にドキュメントモデルを持ち、エディタのインターフェースやAPI経由での変更はこのドキュメントモデルを操作するようになりました。
今まではContentEditable + プリプロセスで行っていたため、汚いHTMLが生成される場合もあります。ドキュメントモデルから一意なHTMLを出力できるようになっています。また、ドキュメントモデルからの出力先としてMarkdownへの出力などもできるようになっています。
このドキュメントモデルを内部的にもつアプローチは同様のリッチエディタでは採用されることが多くなっています。
Draft.js、ProseMirror、QuillのParchment、Trix、Slateのdata modelなどが似たような仕組みを持っています。
興味がある人は合わせて見るとよいかもしれません。
ヘッドライン
What’s New in Microsoft Edge in the Windows 10 Fall Creators Update - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog
blogs.windows.com/msedgedev/2017/10/17/edgehtml-16-fall-creators-update/
MSEdge 16の変更点について。
CSS Grid Layout、object-fit、Payment Request APIのサポート。
Service Workerの試験的サポート、WebVR対応の改善など
Release Notes for Safari Technology Preview 42 | WebKit
webkit.org/blog/8001/release-notes-for-safari-technology-preview-42/
Safari Technology Preview 42リリース。
Payment Requestの機能実装、font-displayの実装、constant()がenv()にリネーム、link rel=preconnect、import.metaのサポート、Web InspectorにCanvasタブを追加など
Mozilla brings Microsoft, Google, the W3C, Samsung together to create cross-browser documentation on MDN - The Mozilla Blog
Mozilla、Microsoft、Googleなどがウェブ開発系のドキュメントをMDNへ集約することになった。
- Documenting the Web together - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog
- Chromium Blog: Building unified documentation for the web
- W3C to work with MDN on Web Platform documentation | W3C Blog
CKEditor 5: A new era for rich text editing | CKEditor.com
ckeditor.com/blog/CKEditor-5-A-new-era-for-rich-text-editing/
CKEditor 5の変更点について。
今までのアーキテクチャを一新し、編集するテキストをデータモデルとしてもつことでContentEditable特有の出力を回避できるように。
またエディタ共通の問題についてを扱うEditor Recommendationsサイトの公開など
アーティクル
New in Chrome 62 | Web | Google Developers
developers.google.com/web/updates/2017/10/nic62
Chrome 62の変更点について。
Network Information API、OpenType Variable Fonts、WebVRのorigin trialの開始など
The 100% correct way to structure a React app (or why there’s no such thing)
hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed
Reactアプリケーションのディレクトリ構造について。
index.js or コンポーネント名.js、階層構造、exportするものについてなど
Node.js Security Overview
nemethgergely.com/nodejs-security-overview/
Node.jsと関連するエコスシステムのセキュリティについてをざっくりと。
Core、npm、express、security.txt、関連サービスやツールなどについて
Introducing PayPal’s open-source cross-domain javascript suite
medium.com/@bluepnume/introducing-paypals-open-source-cross-domain-javascript-suite-95f991b2731d
PayPalが使ってるクロスドメイン関係のライブラリまとめ。
postMessageを使ったやり取り、コンポーネント、Util、同期的なPromiseであるZalgoとsetTimeoutのブロックについて、CORSとiframeについてなど
An imperative guide to forms in Vue.js – LogRocket
blog.logrocket.com/an-imperative-guide-to-forms-in-vue-js-7536bfa374e0
Vueを使った各種フォーム要素の管理やバリデーションについての紹介記事
スライド、動画関係
BlinkOn 8 - Tokyo, Japan - YouTube
www.youtube.com/playlist?list=PL9ioqAuyl6UK7Z0HHswBM5JgAp-izn_3S
BlinkOn 8の動画一覧
サイト、サービス、ドキュメント
prantlf/nettime: Prints timings of a HTTP/S request, including DNS lookup, TLS handshake etc.
特定のURLに対するDNS LookupやTCPコネクションの時間などネットワークの接続や通信にかかった時間を計測するCLI
Micro Frontends - extending the microservice idea to frontend development
Micro Frontendsについて。
マイクロサービスアーキテクチャ的な考えをフロントエンドの中にも適応していく話。
機能でのチーム分割、独立したコンポーネントとWeb Components、ナビゲーションなど各トピックごとの実現方法についてを書いていくとのこと
Chrome User Experience Report | Tools for Web Developers | Google Developers
developers.google.com/web/tools/chrome-user-experience-report/
Chromeの使用統計データを元にしたoriginごとのRUMを集めたBigQueryのデータセット。
origin、通信タイプ、デバイスの種類、first_paintのヒストグラムを扱うデータセット。
HTTP Archive (beta)
新しいHTTP Archiveのβ版が公開された。
lighthouseを使ったLoad Speed関連の統計データやDesktopとmobileの比較データなどをみることができる
ソフトウェア、ツール、ライブラリ関係
dollarshaveclub/es-check: Checks the version of ES in JavaScript files with simple shell commands 🏆
github.com/dollarshaveclub/es-check
Acornを使って特定のECMAScriptバージョンでパースできるかをテストするツール。
コードが構文的にそのECMAScriptバージョンをサポートしてるかチェックできる
kbrsh/wade: Blazing fast, 1kb search for Javascript
深さ優先探索で文字列検索を行うライブラリ
EyeJS - testing framework
nodeとbrowserのモードを持ったテストフレームワーク。
