Skip to content

Instantly share code, notes, and snippets.

treshugart /
Last active Apr 20, 2020
HMR for generic web components

Generic web component HMR

I'm messing around with a generic way to do hot-module-replacement with generic web components whether they be vanilla, or done in a framework like Polymer or Skate.

The idea is that you call hmr(customElementConstructor) in your module files and it will set up the proper hooks.

The const filename should be inserted at build time so that it can remember the original localName of the component for the module.

WTF is "x-layout", "Layout" and "filename"

View eventtarget.js
function eventTarget(o) {
const {port1} = new MessageChannel();
o.dispatchEvent = port1.dispatchEvent.bind(port1);
o.addEventListener = port1.addEventListener.bind(port1);
// Usage:
let myObj = { /* ... */ };
zcaceres /
Last active Jun 28, 2020
Understanding Binding and 'this' in Javascript by

How to Eyeball Your ‘This’ Context in Javascript


The early programmer struggles with the Javascript keyword this. But understanding your this context is easier than it seems.

This is all about where a function is invoked. Often, early programmers worry about where the function was declared. Perhaps the function was declared in a specific file or a particular object. Surely this changes it's this!


WaldoJeffers / compose.js
Last active Feb 3, 2020
JavaScript one-line compose (ES6)
View compose.js
const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)))
// Usage : compose functions right to left
// compose(minus8, add10, multiply10)(4) === 42
// The resulting function can accept as many arguments as the first function does
// compose(add2, multiply)(4, 10) === 42
marcysutton /
Last active Nov 19, 2019
Enable Chrome Accessibility Experiment

NOTE: This is no longer an experiment! You can use the accessibility inspector in Chrome Devtools now, including a fantastic color contrast inspection tool. Read more:

Just like any good element inspector helps you debug styles, accessibility inspection in the browser can help you debug HTML and ARIA exposed for assistive technologies such as screen readers. There's a similar tool in Safari (and reportedly one in Edge) but I like the Chrome one best.

As an internal Chrome experiment, this tool differs from the Accessibility Developer Tools extension in that it has privileged Accessibility API access and reports more information as a result. You can still use the audit feature in the Chrome Accessibility Developer Tools, or you could use the aXe Chrome extension. :)

To enable the accessibility inspector in Chrome stable:


Interactive Machine Learning

Taught by Brad Knox at the MIT Media Lab in 2014. Course website. Lecture and visiting speaker notes.

gaearon / connect.js
Last active Jun 14, 2020
connect.js explained
View connect.js
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
fresc81 / index.js
Last active Aug 7, 2016
simple Todo example of how to use and together; use ajax if javascript is available otherwise use html forms;
View index.js
module.exports = function (hook) {
// setup:
// Route /(:action)(/:id)
// Gist URL
// View
// Presenter
// create a collection on
// create two env variables:
// orchestrate_auth_token
View es6mixin.js
var Bar1 = base => class extends base {
var Bar2 = base => class extends base {
jtangelder /
Created Dec 24, 2014
Python SimpleHTTPServer with HTML5 pushState support
#!/usr/bin/env python
# execute in the folder you want the server to run
# starts at port 80
import os
import urlparse
import SimpleHTTPServer
import SocketServer
You can’t perform that action at this time.