Skip to content

Instantly share code, notes, and snippets.

View hooks-in-a-nutshell.js
// 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;
WebReflection /
Last active Jan 23, 2021
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 Aug 16, 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 19, 2020
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 Jan 26, 2021
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 Nov 21, 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);