Skip to content

Instantly share code, notes, and snippets.


Johan Steenkamp jsteenkamp

View GitHub Profile
jsteenkamp / one-way-binding.js
Created Nov 3, 2015
Replace Angular 1.x two-way binding with one-way binding
View one-way-binding.js
Using one-way data bindings may offer an easy way to make sure such reassignments don't happen by accident.
If the component indeed does reassign the value on purpose, an explicit output binding should be used instead
of piggybacking on the two-way input.
- Replace a two-way '=' binding on the directive configuration with an expression binding '&'.
- Change all accesses to the binding inside the component to function calls.
jsteenkamp / todo.js
Last active Mar 11, 2016
Commented EggHead Redux Example
View todo.js
// Reducers are prue functions that implement the update logic of the applications
// Reducers define how to calculate the next State from the current State and the dispatched Action
// Reducer function returns the current State if not Action is performed.
// Redux passes the new State to each component and React re-renders them.
// Reducers are typically called by Container components. Container components do not emit DOM (so they
// do not have any associated CSS)
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
jsteenkamp / readFromAmazonS3.cfm
Last active May 27, 2016
Replacement for ColdFusion <cffile.../> to upload and read (acl = public-read) to/from Amazon S3
View readFromAmazonS3.cfm
<cffunction name="readFromAmazonS3">
<cfargument name="fileName" required="true"/>
<cfargument name="bucket" default="mybucket"/>
<cfhttp method="GET" url="" timeout="300" result="result"></cfhttp>
<cfreturn result.filecontent/>
jsteenkamp / index.js
Created Jun 14, 2016
React Stand Alone component with config
View index.js
// only entry point for CSS processed via webpack
import '../styles/main.scss';
import React from 'react';
import { render } from 'react-dom';
import { browserHistory } from 'react-router';
import configureStore from './store';
import root, { Root } from './root';
const store = configureStore(root.rootInitialState);
jsteenkamp / upload.cfc
Created Jul 30, 2011
ColdFusion code for Plupload file uploading including chunked transfers
View upload.cfc
<cffunction name="upload" access="remote" returntype="struct" returnformat="json" output="false">
var uploadDir = expandPath('.') & '/uploads/'; // should be a temp directory that you clear periodically to flush orphaned files
var uploadFile = uploadDir & arguments.NAME;
var response = {'result' = arguments.NAME, 'id' = 0};
var result = {};
// if chunked append chunk number to filename for reassembly
if (structKeyExists(arguments, 'CHUNKS')){
jsteenkamp / elevations.js
Created Jun 22, 2018
Google Material Design Elevations
View elevations.js
// Google Material Design 1-24dp elevations (shadows)
const umbraOpacity = '0.2';
const penumbraOpacity = '0.14';
const ambientOpacity = '0.12';
// map index are [0-24]
const elevationUmbraMap = [
jsteenkamp / foo.js
Last active Aug 27, 2018 — forked from ryanflorence/foo.js
Animation/transition using react spring
View foo.js
// Adds a lovely fade in of the modal
// and a gentle slide-down of the modal content
class Demo extends React.Component {
state = { showDialog: false };
render() {
return (
<button onClick={() => this.setState({ showDialog: true })}>
Show Dialog
jsteenkamp /
Created Sep 4, 2018
Simple queue using async/await

Queue using async/await

Implement a queue using async/await.

I created a single instance, easy enough to convert to a factory if you want multiple queues or add features like timeout with configuration object.

Although this solution is simple and does not require any additional libraries I do not think it is robust. For example retries after errors or timeouts is not supported. Rather than solve these issues it makes more sense to look at proven solutions such as message/task queues.


jsteenkamp /
Created Nov 11, 2018 — forked from jamtur01/
Kickstarter Engineering Ladder