Andrea Giammarchi WebReflection

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:

What's SWR?

It's React Hooks for Remote Data Fetching, a hook designed to render data on demand.

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

uce vs lit-element

A very simple comparison table between these two libraries.

	uce	lit-element
version	1.11.9	2.4.0
license	ISC (simplified MIT)	BSD-3-Clause License
language	JS w/ TS definition	TS w/ JS transpilation
size ^{_{( brotli )}}	9437b ES5 / 6811b ES2015+	8634b ES5 / 6708b ES2015+

FE vs BE

TL;DR enough of this kind of nonsense

I've been in the field for ~20 years and started as BE developer, and this is a reference for people thinking that because they are on the BE side, they're somehow entitled to:

earn more money
feel superior about FE developers
joke about JavaScript or minimize the FE effort in any way

	// 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;
	};

	// Least Recently Used
	class LRUMap extends Map {
	constructor(length) {
	super().length = length;
	}
	_(key) {
	const value = super.get(key);
	super.delete(key);
	super.set(key, value);
	return value;