Fork me on GitHub

2017-10-24のJS: CKEditor 5、MDN Web Docsへのドキュメント統合

Edit on GitHub 編集履歴を見る

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 5では内部的にドキュメントモデルを持ち、エディタのインターフェースやAPI経由での変更はこのドキュメントモデルを操作するようになりました。
今まではContentEditable + プリプロセスで行っていたため、汚いHTMLが生成される場合もあります。ドキュメントモデルから一意なHTMLを出力できるようになっています。また、ドキュメントモデルからの出力先としてMarkdownへの出力などもできるようになっています。

このドキュメントモデルを内部的にもつアプローチは同様のリッチエディタでは採用されることが多くなっています。
Draft.jsProseMirrorQuillParchmentTrixSlateの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 ReleaseNote

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 ReleaseNote

Safari Technology Preview 42リリース。
Payment Requestの機能実装、font-displayの実装、constant()env()にリネーム、link rel=preconnectimport.metaのサポート、Web InspectorにCanvasタブを追加など


Mozilla brings Microsoft, Google, the W3C, Samsung together to create cross-browser documentation on MDN - The Mozilla Blog

blog.mozilla.org/blog/2017/10/18/mozilla-brings-microsoft-google-w3c-samsung-together-create-cross-browser-documentation-mdn/

Mozilla MS google W3C document news

Mozilla、Microsoft、Googleなどがウェブ開発系のドキュメントをMDNへ集約することになった。


CKEditor 5: A new era for rich text editing | CKEditor.com

ckeditor.com/blog/CKEditor-5-A-new-era-for-rich-text-editing/

JavaScript editor library ReleaseNote

CKEditor 5の変更点について。
今までのアーキテクチャを一新し、編集するテキストをデータモデルとしてもつことでContentEditable特有の出力を回避できるように。
またエディタ共通の問題についてを扱うEditor Recommendationsサイトの公開など


アーティクル


New in Chrome 62  |  Web  |  Google Developers

developers.google.com/web/updates/2017/10/nic62

Chrome ReleaseNote

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

opinion React article

Reactアプリケーションのディレクトリ構造について。
index.js or コンポーネント名.js、階層構造、exportするものについてなど


Node.js Security Overview

nemethgergely.com/nodejs-security-overview/

node.js security article

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

JavaScript library article

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 JavaScript article

Vueを使った各種フォーム要素の管理やバリデーションについての紹介記事


スライド、動画関係


BlinkOn 8 - Tokyo, Japan - YouTube

www.youtube.com/playlist?list=PL9ioqAuyl6UK7Z0HHswBM5JgAp-izn_3S

blink video イベント

BlinkOn 8の動画一覧


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


prantlf/nettime: Prints timings of a HTTP/S request, including DNS lookup, TLS handshake etc.

github.com/prantlf/nettime

node.js Tools network

特定のURLに対するDNS LookupやTCPコネクションの時間などネットワークの接続や通信にかかった時間を計測するCLI


Micro Frontends - extending the microservice idea to frontend development

micro-frontends.org/

JavaScript architecture 組織

Micro Frontendsについて。
マイクロサービスアーキテクチャ的な考えをフロントエンドの中にも適応していく話。
機能でのチーム分割、独立したコンポーネントとWeb Components、ナビゲーションなど各トピックごとの実現方法についてを書いていくとのこと


Chrome User Experience Report  |  Tools for Web Developers  |  Google Developers

developers.google.com/web/tools/chrome-user-experience-report/

Chrome 統計

Chromeの使用統計データを元にしたoriginごとのRUMを集めたBigQueryのデータセット。
origin、通信タイプ、デバイスの種類、first_paintのヒストグラムを扱うデータセット。


HTTP Archive (beta)

beta.httparchive.org/

webservice performance 統計

新しい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

JavaScript Tools

Acornを使って特定のECMAScriptバージョンでパースできるかをテストするツール。
コードが構文的にそのECMAScriptバージョンをサポートしてるかチェックできる


kbrsh/wade: Blazing fast, 1kb search for Javascript

github.com/kbrsh/wade

JavaScript library

深さ優先探索で文字列検索を行うライブラリ


EyeJS - testing framework

eye.js.org/

JavaScript testing library

nodeとbrowserのモードを持ったテストフレームワーク。


この記事へ修正リクエストをする
JSer.info Slackに参加する