Skip to content

Instantly share code, notes, and snippets.


Jared Williams jaredwilli

View GitHub Profile
View gist:1de0567035e393a7a996a7624adda387
* mergeDeep
* @param {*} target object to merge data into
* @param {*} source object containing the data to merge
export function deepMerge(target, source) {
let output = Object.assign({}, target);
if (isObject(target) || isObject(source)) {
Object.keys(source).forEach((key) => {
jaredwilli / Fetch.test.js
Created Mar 8, 2018 — forked from alfonsomunozpomer/Fetch.test.js
How to test a React component that sets its state in componentDidMount with fetch, and how to mock it, in Jest
View Fetch.test.js
import React from 'react'
import fetchMock from 'fetch-mock'
import Enzyme from 'enzyme'
import {shallow, mount, render} from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({ adapter: new Adapter() })
jaredwilli /
Created Feb 28, 2018 — forked from Restuta/
Sizes of JS frameworks, just minified + minified and gzipped, (React, Angular 2, Vue, Ember)

Below is the list of modern JS frameworks and almost frameworks – Angular, Ember and React.

All files were downloaded from and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan  4 22:03 angular2.min.js
jaredwilli / ga-with-unbounce-variant.js
Created Feb 5, 2018 — forked from EvanWillms/ga-with-unbounce-variant.js
Track each Unbounce landing page variant in Google Analytics separately
View ga-with-unbounce-variant.js
<script type="text/javascript">
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
return null;
jaredwilli / index.js
Created Dec 6, 2017 — forked from zkat/index.js
npx is cool
View index.js
#!/usr/bin/env node
console.log('yay gist')
jaredwilli / reactfire.js
Created Nov 28, 2017 — forked from fdidron/reactfire.js
ReactFire ES6 HOC proposal
View reactfire.js
import React from 'react';
* Returns the key of a Firebase snapshot across SDK versions.
* @param {DataSnapshot} snapshot A Firebase snapshot.
* @return {string|null} key The Firebase snapshot's key.

Sharing behaviour between React components

React 0.13 introduced using plain Javascript classes to create components, 0.14 introduced "stateless functional components" as another method of defining them. Neither of these have an in-built method for behaviour sharing such as we had with the mixins option passed to createClass. So now we get to review mixins as a pattern for behaviour sharing and, if necessary, come up with something better. If they're not all bad, we'll need to figure out how to, or even if we can, add them to the two new component definition options.

The problem

Dan Abromov's medium article from Mar 2015 makes the case for avoiding mixins.

For me (paraphrasing in the extreme), the key problems exposed are:

  • mixins can unintentionally hide / distribute the source of behaviour
jaredwilli / mock-axios.js
Created Nov 28, 2017 — forked from cowboy/mock-axios.js
axios mocking via interceptors
View mock-axios.js
import axios from 'axios'
let mockingEnabled = false
const mocks = {}
export function addMock(url, data) {
mocks[url] = data
View screening.js
// 1: how could you rewrite the following to make it shorter?
if (foo) {
} else {
jaredwilli / asyncawait.html
Created Nov 28, 2017 — forked from CrabDude/asyncawait.html
BayNode Node Night 11/3/15: async/await by Adam Crabtree
View asyncawait.html
<!DOCTYPE html>
<title>Async Await</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(;
@import url(,700,400italic);
@import url(,700,400italic);