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+

WebReflection

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

WebReflection

// it notifies about the highest peak, and it logs it in console
// it also saves it to the window.participants property
(function () {
  var max = 0;
  var timer = 0;
  var target = document.querySelector('[type="participants"]');
  var Notification = self.Notification || {permission: 'denied'};
  (new MutationObserver(() => {
    var now = Math.max(parseInt(target.innerText.trim()), max);
    if (max < now) {

WebReflection

#!/usr/bin/env bash

echo ""
echo "benchmarking $(tput bold)$1$(tput sgr0)"
echo ""

case $1 in
  nginx )
    sudo systemctl start nginx.service ;;
  express )

WebReflection

Anchorable Headers / Elements

Passing any element through this function, will make it navigable via keyboard.

function anchorAble(e) {
  /*! (c) Andrea Giammarchi - ISC */
  if ('currentTarget' in e) {
    if (/^(?:32|13|undefined)$/.test(e.keyCode)) {
      e.preventDefault();

WebReflection

import {define as hookedDefinition} from 'hooked-elements'; // or wicked-
import css from 'ustyler';

export const define = (selector, definition) => {
  // let the library throw on duplicated selectors
  const result = hookedDefinition(selector, definition);
  // add styles for this selector
  if (definition.style) css(definition.style);
  // return the wicked/hooked magic 🌈
  return result;

WebReflection

class WeakValue extends Map {
  #registry = new FinalizationRegistry(key => {
    if (this.has(key) && !this.get(key).deref())
      this.delete(key);
  });
  get(key) {
    const value = super.get(key);
    return value && value.deref();
  }
  set(key, value) {

WebReflection

My FE/DOM Libraries

a gist to recap the current status, also available as library picker!

Minimalistic Libraries

do one thing only and do it well

• µhtml (HTML/SVG auto-keyed and manual keyed render)
• augmentor (hooks for anything)
• wickedElements (custom elements without custom elements ... wait, what?)

WebReflection

About This Gist

This gist summarizes the handleEvent(event) pattern features, something standard, something described by me many times, written in my tiny book, tweeted about, and yet it's something most Web developers ignore.

The handleEvent ASCII Doodle

                  ┌---------------------------------┐
var handler = {   | any object that inherits or     |

WebReflection

const findLimit = async (type, create) => {
  console.log(
    `%c ${type} benchmark `,
    `font-weight:bold;color:white;background-color:black`
  );
  localStorage.clear();
  let i = 0;
  let length = 0;
  while (true) {
    try {