Fork me on GitHub

2017-11-14のJS: React v16.1.0、Firefox DevTools、Docusaurus

Edit on GitHub 編集履歴を見る

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

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)]);

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

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


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

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

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


ヘッドライン


PolymerLabs/lit-html: HTML template literals in JavaScript

github.com/PolymerLabs/lit-html

JavaScript HTML DOM library

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


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などに対応するプラグインを公開している。


アーティクル


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

リソース取得の優先度について。
開発者ツールでの読み方、preloadpreconnect(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の開発者ツールのチュートリアル。
デバッガーの使い方、ブレークポイントの読み方、コールスタックの読み方などについて


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などの解説をしてる


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


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などのループをそのままフローチャートにしてくれる


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