Skip to content

Instantly share code, notes, and snippets.

@WebReflection
WebReflection / dom-libraries.md
Last active Jul 28, 2020
A recap of my FE / DOM related libraries
View dom-libraries.md

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
WebReflection / handle-event-doodle.md
Last active May 26, 2020
The `handleEvent` ASCII doodle
View handle-event-doodle.md

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     |
View differential-js-loader.md

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

Compatibility

This technique has been successfully tested down to IE9.

<!DOCTYPE html>
<html lang="en">
<head>
View why-i-use-web-components.md

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
ireade / sw.js
Last active Aug 16, 2019
Handle broken images with the service worker
View sw.js
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open("precache").then((cache) => cache.add("/broken.png"))
);
});
function isImage(fetchRequest) {
return fetchRequest.method === "GET" && fetchRequest.destination === "image";
}
@bradtraversy
bradtraversy / docker-help.md
Last active Aug 11, 2020
Docker Commands, Help & Tips
View docker-help.md

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) {
this.c.dispatchEvent(
new CustomEvent(this.n, {
@morrelinko
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
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
WebReflection / hyper-lit.md
Last active Jul 28, 2020
lit-html is awesome, but it came afterwards
View hyper-lit.md

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.