Skip to content

Instantly share code, notes, and snippets.

WebReflection /
Last active Jul 28, 2020
A recap of my FE / DOM related libraries

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 /
Last active May 26, 2020
The `handleEvent` ASCII doodle

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     |

This is an alternative to the Modern Script Loading tchnique, that doesn't need to wait for the load event.


This technique has been successfully tested down to IE9.

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

Why I use web components

This is some sort of answer to recent posts regarding Web Components, where more than a few misconceptions were delivered as fact.

Let's start by defining what we are talking about.

The Web Components Umbrella

As you can read in the dedicated GitHub page, Web Components is a group of features, where each feature works already by itself, and it doesn't need other features of the group to be already usable, or useful.

ireade / sw.js
Last active Aug 16, 2019
Handle broken images with the service worker
View sw.js
self.addEventListener('install', (e) => {
e.waitUntil("precache").then((cache) => cache.add("/broken.png"))
function isImage(fetchRequest) {
return fetchRequest.method === "GET" && fetchRequest.destination === "image";
bradtraversy /
Last active Aug 11, 2020
Docker Commands, Help & Tips

Docker Commands, Help & Tips

Show commands & management commands

$ docker

Docker version info

View Mutilator.js
function Mutilator(data, name, context) {
this.n = name || `mutilation-${+new Date()}`;
this.d = data;
this.c = context || window;
this.isArr = function(p) {
return this.d[p].constructor == Array;
this.dispatch = function(p, v, t) {
new CustomEvent(this.n, {
morrelinko / compiler.js
Last active Mar 17, 2020
Nunjucks Components
View compiler.js
'use strict'
const { nodes, runtime } = require('nunjucks')
module.exports = function compileComponent (node, frame) {
let componentId = this._tmpid()
let templateId = this._tmpid()
let templateId2 = this._tmpid()
let componentVar = `component_${componentId}`
argyleink / easings.css
Created Feb 26, 2018
Handy CSS properties for easing functions
View easings.css
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
WebReflection /
Last active Jul 28, 2020
lit-html is awesome, but it came afterwards

The history of hyperHTML followed by lit-html

While many remember the epic hyperHTML: A Virtual DOM Alternative post I've published the 5th of March 2017, the first official implementation of the library was working as hyperHTML.bind(node) function for tagged literals the day before, and it's been in my experiments folder already for a little while.

The hilarious reaction from the skeptical community

At first glance people couldn't believe performance of the DBMonster demo shown in that article,

You can’t perform that action at this time.