Skip to content

Instantly share code, notes, and snippets.

View joshblack's full-sized avatar

Josh Black joshblack

View GitHub Profile
@joshblack
joshblack / Image.js
Created July 11, 2015 21:10
React Components
import Radium from 'radium';
import { PropTypes } from 'react';
export default class Image {
static propTypes = {
src: PropTypes.string.isRequired,
alt: PropTypes.string.isRequired
}
render() {
@joshblack
joshblack / logger.js
Created July 7, 2015 04:03
Logger decorator for class and functions
function logger(target, name, descriptor) {
const fn = descriptor.value;
descriptor.value = function (...args) {
console.log(`Calling ${name} with:\n${args.join('\n')}`);
console.log(args);
const result = fn.apply(target, args);
console.log(`Result:\n${result}`);
const transform = {
translate(x, y) {
return transformFunction('translate', x, y);
}
}
function transformFunction(property, ...values) {
return `${property}(${values.join(', ')})`;
}
const transform = {
translate(x, y) {
return transformFunction('translate', x, y);
}
}
function transformFunction(property, ...values) {
return `${property}(${values.join(', ')})`;
}
// particle
// particle() -> DOM node
function particle() {
const node = document.createElement('div');
node.style.background = 'black';
node.style.position = 'absolute';
node.style.width = px(50);
node.style.height = px(50);
@joshblack
joshblack / 2dmotion.js
Last active August 29, 2015 14:23
Motion Tutorials
function particle() {
const node = document.createElement('div');
node.style.position = 'absolute';
return document.body.appendChild(node);
}
function position(particle, pv) {
const { translate } = transform,
p = pv.map((p) => px(p));
@joshblack
joshblack / perf.js
Last active August 29, 2015 14:22
Messing around with performance decorators on async methods
function measure(target, name, descriptor) {
const fn = descriptor.value;
descriptor.value = async function () {
const mark = `mark_${name}`;
performance.mark(mark);
const result = await fn();
performance.measure(mark);
@joshblack
joshblack / fill.js
Last active August 29, 2015 14:21
Creates an array of a given amount and fills it with the given item
function fill(amount, item) {
const a = Array(amount),
i = j = 0;
for (i; i < amount; i++) {
a[j++] = item;
}
return a;
}
@joshblack
joshblack / animation-test-1.js
Created May 22, 2015 04:42
Animating SVG react elements and normal DOM elements with setState
const styles = {}
styles.base = {
width: '150px',
height: '150px',
background: 'mediumorchid',
transition: '0.35s all ease-in-out'
};
styles.circle = {
@joshblack
joshblack / SVG.js
Created May 22, 2015 03:38
Brief examples of using SVG in React
import { PropTypes } from 'react';
// Add check for children types, only a limited subset of SVG shapes that it can take
// Sketch SVG to react?
// Path
// Animation
export default class SVG {
static propTypes = {
// Aria Required Properties
title: PropTypes.string.isRequired,