Instantly share code, notes, and snippets.

Bran van der Meer branneman

View GitHub Profile
View Frontend best

DOM events


  • Always use a DocumentFragment when appending children to the main DOM tree.
    • Further reading: mdn
View box.es6
// The box pattern:
// Array chaining methods for single values
const box = v => [ v ]
.map(n => n * 2)
.map(n => n + 2)
View ArrayLikeObservable.es6
class Observable {
constructor(fn) {
this._fn = fn;
this._children = [];
const handler = {
get(target, prop) {
return prop in target || !(prop in Array.prototype)
View run-chromedriver-cluster.ps1
param (
[string]$instances = 10
docker rm -f selenium-hub
docker run --restart=always -d -p 4444:4444 --name selenium-hub selenium/hub:3.0.0-dubnium
while($i -ne $instances)
View DataStore.js
* A single data store for modules to communicate with. Keeping 'the truth' in a single place reduces bugs and allows
* for greater seperation of concerns.
* The module can be used as a singleton through DataStore.getSingleton('key'), or on instance basis through the new keyword.
* Uses the Observer module found here:
* @name DataStore
* @author Peeke Kuepers
View observer.js
* Used for inter-object communication.
* (Semi-)drop in replacement for Rik Schennink's Observer.
* Implementation differences:
* - ES6
* - The use of WeakMaps
* - inform() and conceal() don't return a boolean indicating success.
* - Subscription fn's are called with seperate arguments, instead of one data parameter. This is backwards compatible.
View model-mixin.js
import Events from 'eventemitter3';
const modelMixin = Object.assign({
attrs: {},
set (name, value) {
this.attrs[name] = value;
this.emit('change', {
prop: name,
value: value
View introspection-query.graphql
query IntrospectionQuery {
__schema {
queryType { name }
mutationType { name }
subscriptionType { name }
types {
directives {
View Enhance.js
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
componentDidMount() {
this.setState({ data: 'Hello' });
render() {

Auto-deploying built products to gh-pages with Travis

This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.

Create a compile script

You want a script that does a local compile to e.g. an out/ directory. Let's call this for our purposes, but for your project it might be npm build or gulp make-docs or anything similar.

The out/ directory should contain everything you want deployed to gh-pages. That almost always includes an index.html.