Jason Miller developit

`<script> async, defer, async defer, module, nomodule, src, inline` - the cheat sheet

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

https://github.com/ehanley324/layout-instability/blob/master/explainer.md

Platform wishlist

An unconnected list of things it'd be nice to have in the platform. I may add to this over time

SVG 2

Is this ever going to happen? SVG 1.1 is really showing its age, and it feels like something browser vendors have long since stopped caring about

Cmd-F

ANSI Escape Sequences

Standard escape codes are prefixed with Escape:

Ctrl-Key: ^[
Octal: \033
Unicode: \u001b
Hexadecimal: \x1B
Decimal: 27

suspense-loader

Installation (sorry)

npm i THIS_URL

Usage

Generic web component HMR

I'm messing around with a generic way to do hot-module-replacement with generic web components whether they be vanilla, or done in a framework like Polymer or Skate.

The idea is that you call hmr(customElementConstructor) in your module files and it will set up the proper hooks.

The const filename should be inserted at build time so that it can remember the original localName of the component for the module.

	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const jsdom = require('jsdom');

	/** @typedef {import("webpack/lib/Compiler.js")} WebpackCompiler */
	/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
	/** @typedef {(import 'jsdom').ResourceLoaderConstructorOptions} ResourceLoaderConstructorOptions */

	class PrerenderHtmlPlugin {
	constructor(options) {
	this._options = options \|\| { };

	const { performance } = require('perf_hooks');

	const h1 = (tag, props, children) => ({ tag, props, children })
	const h2 = (tag, props, children) => ({ tag, props, children })

	function serializeProps(props) {
	let out = '';
	for (let i in props) out += ` ${i}="${props[i]}"`;
	return out;
	}

	/**
	* Copyright 2018 Google Inc. All rights reserved.
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software

	const http2 = require('http2');
	const fs = require('fs');
	const path = require('path');
	const zlib = require('zlib');
	const brotli = require('brotli'); // npm package

	const PORT = 3032;
	const BROTLI_QUALITY = 11; // slow, but we're caching so who cares
	const STATIC_DIRECTORY = path.resolve(__dirname, '../dist/');
	const cache = {};