Instantly share code, notes, and snippets.

View Frontend best practices.md

DOM events

Performance

  • 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 ]
box(1)
.map(n => n * 2)
.map(n => n + 2)
.pop()
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
$i=0
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: https://gist.github.com/peeke/42a3f30c2a3856c65c224cc8a47b95f9
*
* @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 {
...FullType
}
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() {
View auto-deploy.md

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 compile.sh 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.