JSer.info #357 - React v16.1.0がリリースされました。

• Release v16.1.0 · facebook/react

Bower向けの配布は終了したため代わりにCDNの利用の推奨しています。React.Children utilがPortalをサポート、React DOM ServerにsuppressHydrationWarning属性の追加などが行われています。

また、react-call-returnというパッケージが試験的に公開されています。
次の記事で解説されていますが、ReactCallReturn.unstable_createCallでChildrenに値を渡して呼び出し、その結果を使って別の要素を返すことができる仕組みのようです。

// https://github.com/facebook/react/blob/2d23a4563ef2bec7d90c4a7edff2657c890b4334/packages/react-call-return/src/__tests__/ReactCallReturn-test.js
class Counter extends React.Component {
  state = {value: 5};
  render() {
    return ReactCallReturn.unstable_createReturn(this.state.value);
  }
}
function App(props) {
 return ReactCallReturn.unstable_createCall(
   [
     <Counter key="a" id="a" />,
     <Counter key="b" id="b" />,
     <Counter key="c" id="c" />,
   ],
   (p, returns) => returns.map((y, i) => <span key={i} prop={y * 100} />),
   {},
 );
}

ReactNoop.render(<App />);
ReactNoop.flush();
expect(ReactNoop.getChildren()).toEqual([span(500), span(500), span(500)]);

• React Call Return — What and Why – componentDidBlog

Firefoxの開発者ツールのデバッガーの使い方を学べるサイトが公開されています。

• Debugger PlayGround | Introduction | Mozilla
• Go beyond console.log with the Firefox Debugger – Mozilla Hacks – the Web developer blog

以前公開されたCSS Grid PlayGroundと同じく実際にデバッガーを使って体験できる形式のチュートリアルとなっています。

まだ正式にOSSとしては公開されていませんが、Facebook系のOSSが利用している静的サイトジェネレーターのサイトが公開されています。

• Docusaurus

PrettierやJestのサイトではすでに取り入れられていて、OSSのソフトウェアやライブラリ、ツールといったプロダクトに特化した静的サイトジェネレーターとなっています。

Markdownで書くことができ、GitHubの編集リンク、翻訳への対応、ブログ機能やalgoliaを使った検索、Reactを使ったカスタマイズなどが行えるようになっています。

JSer.infoをサポートするには

• 😘 知り合いにJSer.infoをおすすめする
• ❤️ GitHub Sponsorsで@azuのスポンサーになる
• 🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

PolymerLabs/lit-html: HTML template literals in JavaScript

github.com/PolymerLabs/lit-html

JavaScript HTML DOM library

Tagged Template literalでHTMLを書いてレンダリングできるライブラリ。テンプレートのキャッシュが行われ再描画のコストを小さくするモチベーション。<template>要素との連携が考えられていて、Custom Elementでの利用がしやすくなっている。

• lit-HTML (Chrome Dev Summit 2017) - YouTube
• lit-html を調べたメモと考えたこと - EagleLand

Release v1.0.0 · addyosmani/critical

github.com/addyosmani/critical/releases/tag/v1.0.0

JavaScript CSS Tools

クリティカルパスの解析、インライン化を行うライブラリであるcritical 1.0.0リリース。
実行エンジンがPhantomJSからChrome headlessへ変更された

Dev.Opera — What’s new in Chromium 62 and Opera 49

dev.opera.com/blog/opera-49/

Opera ReleaseNote

Opera 49 (based on Chromium 62)リリース。
Network Information API、OpenType Variable Fonts、DOM要素のMedia Captureなど

Release v16.1.0 · facebook/react

github.com/facebook/react/releases/tag/v16.1.0

React ReleaseNote

React 16.1.0リリース。
Bowerのサポート終了、React.Children utilがPortalをサポート、React DOM ServerにsuppressHydrationWarningの追加など

Announcing DraftJS Plugins 2.0 – Nik Graf – Medium

medium.com/@nikgraf/announcing-draftjs-plugins-2-0-8c25f2a4df55

JavaScript React plugin ReleaseNote

DraftJSのプラグイン集であるDraftJS Plugins 2.0リリース。
画像の操作、整形、D&D、mentionやemojiなどに対応するプラグインを公開している。

• DraftJS Plugins - High quality plugins with great UX

アーティクル

ES proposal: `import.meta` – module metadata

2ality.com/2017/11/import-meta.html

ECMAScript proposal node.js

Stage 3のECMAScript Proposalであるimport.metaについて。
モジュールのメタデータを扱うオブジェクトの仕様

Creating a Star to Heart Animation with SVG and Vanilla JavaScript | CSS-Tricks

css-tricks.com/creating-star-heart-animation-svg-vanilla-javascript/

SVG article

SVGとJavaScriptでスターやハートを書きアニメーションさせる話。

Angular 5: Upgrading & Summary of New Features ← Alligator.io

alligator.io/angular/angular-5/

Angular article

Angular 5の変更点について。
Angular CLIの改善や最適化オプション、updateOnオプション、@angular/service-workerの追加などについて

High-performance service worker loading  |  Web Fundamentals  |  Google Developers

developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading

ServiceWorker article

Service Workerのローディングについてのプラクティス。
HTMLのキャッシュ、Application Shellパターン、fetchハンドラで何もしない処理を登録するのは避ける、preloadについて

Resource Prioritization – Getting the Browser to Help You  |  Web Fundamentals  |  Google Developers

developers.google.com/web/fundamentals/performance/resource-prioritization

performance browser debug article

リソース取得の優先度について。
開発者ツールでの読み方、preload、preconnect(dns-prefetch)、prefetchでの優先度の指定やそれぞれのユースケースの紹介など

Proper Error Handling in JavaScript ― Scotch

scotch.io/tutorials/proper-error-handling-in-javascript

JavaScript article

JavaScriptのエラーハンドリングや基本的な構文について。
try...catch...finally、throw、window.onerror、コールスタックの読み方、Promiseのエラーハンドリングについてなど

Browser automation revisited - meet Puppeteer

nemethgergely.com/puppeteer-browser-automation/

Chrome JavaScript debug article

Puppeteerを使ったデバッグの自動化についての記事。
コンソールログの取得、スクリーンショット、プロファイルの記録、HTTPリクエストの制御などを行う方法についてを紹介している

スライド、動画関係

コンポーネント指向と余白の設計

www.slideshare.net/manabuyasuda1/ss-71261608

design CSS slide

Atomic Design/コンポーネント指向とmargin/paddingのパターンについてのスライド。

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

Docusaurus · Easy to Maintain Open Source Documentation Websites

docusaurus.io/

React Markdown API document Tools

PrettierやJestなどが利用している静的サイトジェネレータ。
Reactを使ったカスタマイズ、翻訳への対応、ブログ機能やalgoliaを使った検索などライブラリサイト向けの機能を持っている。

Debugger PlayGround | Introduction | Mozilla

mozilladevelopers.github.io/playground/debugger

firefox debug tutorial

Firefoxの開発者ツールのチュートリアル。
デバッガーの使い方、ブレークポイントの読み方、コールスタックの読み方などについて

• Go beyond console.log with the Firefox Debugger – Mozilla Hacks – the Web developer blog

Bogdan-Lyashenko/Under-the-hood-ReactJS: Entire React code base explanation by visual block schemes (Stack+Fiber versions)

github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS

React document

Reactのコードベースの解説リポジトリ。
コードの構造などの図などとともに、React Fiber、Stack reconcilerなどの解説をしてる

• Bogdan-Lyashenko/js-code-to-svg-flowchart: js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design your code. Refactor code. Document code. Explain code.

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

lifenautjoe/noel: A universal, human-centric, replayable javascript event emitter.

github.com/lifenautjoe/noel

JavaScript library

イベントハンドラを登録する前に発火したイベントも後からリプレイして再度発火することができるEventEmitterライブラリ

PaperCSS · the less formal CSS framework

www.getpapercss.com/

CSS library

手書き風のCSSフレームワーク

Bogdan-Lyashenko/js-code-to-svg-flowchart: js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design your code. Refactor code. Document code. Explain code.

github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

JavaScript SVG Tools library

JavaScriptのコードから制御フローチャートの図を作成するツール。 ifやwhileなどのループをそのままフローチャートにしてくれる