WebReflection

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

WebReflection

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:

WebReflection

function useState(value) {
  const {caller} = arguments.callee;
  const {arguments: a} = caller;
  const {stack} = useState;
  if (!stack.has(caller))
    stack.set(caller, {a, i: 0, s: []});
  const state = stack.get(caller);
  state.a = a;
  const {i, s} = state;
  if (i === s.length) {

WebReflection

This site throws in users and, most importantly, developers face, the fact publishing websites with hundreds of JS Kilobytes just to see some content, content that might also break due JS itself or browsers that haven't been tested or targeted, is very bad.

The same site is also great to remind everyone that a11y (accessibility) matters, and if you got upset by its disruptive technique, and you are a Web developer, now you know how it feels for people incapable of surfing the "modern Web" with its overly-bloated frameworks and practices that way too often don't take a11y into account.

However, JS is not to blame here, while developers abusing JS without following graceful enhancement practices, or without testing their sites offer some meaningful content even for users that might have disabled JS for whatever reason, are to blame so ... please "don't be that kind of developer".

That being said, as an exercise to see if I could surf it via JS, I've created this ti

WebReflection

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

WebReflection

const proxies = new WeakMap;
const hyphen = name => name.replace(/([a-z])([A-Z])/g, '$1-$2');
const handler = {
  get: (el, name) => el.getAttribute(hyphen(name)),
  set: (el, name, value) => {
    el.setAttribute(hyphen(name), value);
    return true;
  }
};
const set = el => {

WebReflection

WeakMap.prototype.hasInherited = function hasInherited(obj) {
  let found = false;
  while (obj && obj !== Object.prototype && !(found = this.has(obj)))
    obj = Object.getPrototypeOf(obj);
  return found;
};

WeakMap.prototype.setInherited = function setInherited(obj, value) {
  let ref = obj;
  while (ref && ref !== Object.prototype) {

WebReflection

async / return await explained

This is yet another explanation of why async and return await is pointless, coming from this post.

// async means that this:
const fn = async (...args) => {/* stuff */};

// is basically the equivalent of this:

WebReflection

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);

WebReflection

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+