Andrea Giammarchi WebReflection

About

Highly Experimental

If you are using this already, consider changes soon due the discussion around current ESX proposal.

Feel free to keep an eye on udomsay as that will be the implementation reference for consumers.

Brainstorming a smarter JSX

Deprecated

The new proposal and hopefully the new transformer will be out soon.

This gist tries to narrow down all features and complexity hidden behind a smarter JSX, something landed already as @ungap/babel-plugin-transform-hinted-jsx module but not yet concretely, or efficiently, implemented.

How to use:

./wordle.sh

Or try the unlimit mode:

Apparently there's no share button after wordling in my browsers, so I created this copy/paste JS to put in console, which will produce an output like:

Wordle 212 4/6

⬛⬛🟨⬛🟨
🟨🟨🟨🟨⬛
🟩🟨⬛🟨🟨
🟩🟩🟩🟩🟩

A Runtime ImportMap Example - now as a module

While it's not possible to define a <script type="importmap"> within a module, it is possible to define it in a synchronous <script> tag, as long as it's before any module starts executing.

Example ^{_{(works in Chrome / Edge / WebKit / Safari / Firefox)}}

<!DOCTYPE html>
<html lang="en">
<head>

Toward better libraries

I am recently re-branding my libraries as µ ^(micro), refactoring these when necessary, dropping IE < 11 support, improving the logic where possible, or providing a better, more robust, or faster, API.

In few words, on the right there is the modern version of libraries I've used for the last ~5 years in production or for side projects, and I suggest anyone having one of the earlier dependencies, to have a look at their modern, micro, counterpart.

How to read these tables

All sizes are minified, brotli compressed, and representing these two files, when possible:

	/*
	Made by Elly Loel - https://ellyloel.com/
	With inspiration from:
	- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
	- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
	- Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

	Notes:
	- `:where()` is used to lower specificity for easy overriding.
	*/

	// WARNING: There's much more to know/do around hooks, and
	// this is just a simplification of how these work.

	// shared references, updated
	// per each hook invoke
	let execution = null;
	let current = null;
	let context = null;
	let args = null;

	const If = expression => {
	let call = true, value;
	return {
	then: callback => Promise.resolve(value).then(callback),
	Then(callback) {
	if (call && expression) {
	call = false;
	value = callback(expression);
	}
	return this;

	const {isArray} = Array;

	const sync = async values => {
	for (let {length} = values, i = 0; i < length; i++) {
	const value = await values[i];
	values[i] = isArray(value) ? await sync(value) : value;
	}
	return values;
	};