Skip to content

Instantly share code, notes, and snippets.

🏄

Jared Williams jaredwilli

🏄
Block or report user

Report or block jaredwilli

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
@jaredwilli
jaredwilli / gist:5469626
Last active Jan 2, 2020
HTML5 Canvas Performance and Optimization Tips, Tricks and Coding Best Practices
View gist:5469626

HTML5 canvas Performance and Optimization Tips, Tricks and Coding Best Practices With canvas being still very new to internet, and no signs of it ever getting old that I can see in the future, there are not too many documented best practices or other really important tips that are a must know for developing with it in any one particular place. Things like this are scattered around and many times on lesser known sites.

There's so many things that people need to know about, and still so much to learn about, so I wanted to share some things to help people who are learning canvas and maybe some who already know it quite well and am hoping to get some feedback from others about what they feel are some best practices or other tips and tricks for working with canvas in HTML5.

I want to start off with one I personally found to be quite a useful yet surprisingly uncommon thing for developers to do. Indent your code Just as you would any other time, in any other language whatever the case may be. It has been a best p

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
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
// https://github.com/alfonsomunozpomer/react-fetch-mock
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
jaredwilli / framework-sizes.md
Created Feb 28, 2018 — forked from Restuta/framework-sizes.md
Sizes of JS frameworks, just minified + minified and gzipped, (React, Angular 2, Vue, Ember)
View framework-sizes.md

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

All files were downloaded from https://cdnjs.com 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
View .aliases
#!/usr/bin/env bash
# Easier navigation: .., ..., ...., ....., ~ and -
alias ..="cd .."
alias ...="cd ../.."
alias ....="cd ../../.."
alias .....="cd ../../../.."
alias ~="cd ~" # `cd` is probably faster to type though
alias -- -="cd -"
@jaredwilli
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
jaredwilli / cloudSettings
Last active Dec 22, 2017
New Mac Visual Studio Code Settings Sync Gist
View cloudSettings
{"lastUpload":"2017-12-22T17:14:41.087Z","extensionVersion":"v2.8.7"}
@jaredwilli
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
jaredwilli / reactfire.js
Created Nov 28, 2017 — forked from fdidron/reactfire.js
ReactFire ES6 HOC proposal
View reactfire.js
import React from 'react';
/*************/
/* HELPERS */
/*************/
/**
* 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.
View sharing-behaviour-between-react-components.md

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
You can’t perform that action at this time.