Paweł Lesiecki plesiecki

Polyfill dynamic import() in all ES Modules-supporting browsers.

Drop this polyfill into your page: https://github.com/GoogleChromeLabs/dynamic-import-polyfill

... then add the Babel transform:

import dynamicImportPolyfill from 'dynamic-import-polyfill';

Handy Custom Elements' Patterns

^{Photo by Ricardo Gomez Angel on Unsplash}

This gist is a collection of common patterns I've personally used here and there with Custom Elements.

These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.

`navigator.sendBeacon(url, data)`

The data parameter is an ArrayBufferView, Blob, DOMString, or FormData object containing the data to be transmitted.

no plain old key-value JS object :| serialization of an object to a string up to the developer
always POST, not possible to send GET :|
when DOMString passed, the request type is Content-Type: text/plain, hence expressjs middlewares that read postdata won't process it :/ need to write custom middleware

Rationale for serving ES6

Write ES6 without transpilation (perf reasons aside; developer convenience)
Perf reasons (untranspiled code is smaller and faster)

Expectations vs reality

┓┏┓┏┓┃
┛┗┛┗┛┃＼○／

@developit/replaceall

~80b ponyfill for String.prototype.replaceAll() with good performance.

Why ponyfill? Because this is a proposal for a spec, and polyfilling it in-place before it gets solidified could break code that relies on an incorrect implementation.

Alternate Version

Proposal: Importable Constructable Stylesheets

We're getting Constructable Stylesheets. This seems like an intuitive value to obtain when importing CSS from JavaScript, since it's the DOM's representation of a Stylesheet:

import stylesheet from './style.css';
console.log(stylesheet);  // CSSStyleSheet

No such system is in place to allow this to work (see [whatwg/loader]), however frontend build tooling has congregated around this approach as a mechanism for bringing CSS assets into the JavaScript module graph. There are many benefits to be obtained from moving CSS into this graph, however the most important is that imported CSS can be attributed to the consuming JS Module. This allows it to be bundled, optimized, and potentially dead-code-eliminated leveraging static analysis performed on the surrounding module graph.

	/*
	To support dynamic type in iOS, we need to set Apple's
	system font and then define font-families and rem-based
	font-sizes on descendant elements:
	*/
	@supports (font: -apple-system-body) {
	html {
	font: -apple-system-body;
	}
	}

	SELECT
	form_factor.name AS form_factor,
	cls.start,
	ROUND(SUM(cls.density), 4) AS density
	FROM
	`chrome-ux-report.all.201905`,
	UNNEST(experimental.cumulative_layout_shift.histogram.bin) AS cls
	WHERE
	origin = 'https://www.nytimes.com'
	GROUP BY

	/**
	* @module holy-albatross
	* @description
	* A custom element for switching between horizontal and vertical layouts
	* using Flexbox, where the switch property defines the minimum container width
	* for the horizontal layout
	* @property {string} switch A CSS width value
	* @property {string} margin A CSS margin value
	*/

	{
	"scripts": {
	"preinstall": "node --eval \"!process.env.npm_config_user_agent.startsWith('pnpm/')&&(console.log('Use `pnpm install` to install dependencies in this repository')\|\|true)&&process.exit(1)\""
	}
	}