Skip to content

Instantly share code, notes, and snippets.

Bran van der Meer branneman

Block or report user

Report or block branneman

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View Frontend best

DOM events


  • Always use a DocumentFragment when appending children to the main DOM tree.
    • Further reading: mdn
peeke / box.es6
Created May 22, 2017
The box pattern
View box.es6
// The box pattern:
// Array chaining methods for single values
const box = v => [ v ]
.map(n => n * 2)
.map(n => n + 2)
peeke / ArrayLikeObservable.es6
Last active May 30, 2017
Array function based Steam & EventStream implementation. Also handles promises.
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)
peeke / DataStore.js
Last active Oct 21, 2016
A single data store for modules to communicate with.
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
peeke / observer.js
Last active Sep 21, 2017
Used for inter-object communication. (Semi-)drop in replacement for Rik Schennink's Observer.
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
craigbeck / introspection-query.graphql
Created Apr 6, 2016
Introspection query for GraphQL
View introspection-query.graphql
query IntrospectionQuery {
__schema {
queryType { name }
mutationType { name }
subscriptionType { name }
types {
directives {
sebmarkbage / Enhance.js
Last active Oct 19, 2019
Higher-order Components
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() {
domenic /
Last active Nov 10, 2019
Auto-deploying built products to gh-pages with Travis

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.

You can’t perform that action at this time.