2017-11-14のJS

PolymerLabs/lit-html: HTML template literals in JavaScript

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

Release v1.0.0 · addyosmani/critical

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

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

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

Release v16.1.0 · facebook/react

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

Announcing DraftJS Plugins 2.0 – Nik Graf – Medium

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

ES proposal: \`import.meta\` – module metadata

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

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

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

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

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

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

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

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

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

Proper Error Handling in JavaScript ― Scotch

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

Browser automation revisited - meet Puppeteer

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

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

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

Docusaurus · Easy to Maintain Open Source Documentation Websites

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

Debugger PlayGround | Introduction | Mozilla

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

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

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

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

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

PaperCSS · the less formal CSS framework

手書き風の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.

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