Skip to content

Instantly share code, notes, and snippets.


Johan Steenkamp jsteenkamp

View GitHub Profile
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 / 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 / block-scope.js
Last active Oct 28, 2015
JavaScript and DOM question
View block-scope.js
'use strict';
// Solution using ES6 block scope
var list = document.createElement('UL');
for (var i = 1; i <= 5; i++) {
var item = document.createElement('LI');
item.appendChild(document.createTextNode('Item ' + i));
View angular-loadscript-with-documentwrite.js
* This module is a variant which supports document.write. If you need document.write use this instead
* Author: Deepak Subramanian @subudeepak(
* Distributed under MIT License
/*global angular */
(function (ng) {
'use strict';
app.directive('script', function() {
return {
jsteenkamp / factory-beats-class.js
Last active Aug 29, 2015
Better to use Prototypal OO and not ES6 class (Angular example)
View factory-beats-class.js
'use strict';
import _ from 'lodash';
// generate some list items
let items = _.times(10).map((n) => {
return {
title: `This is log item ${n + 1}`,
description: `This is item description ${n + 1}`
jsteenkamp / detached
Last active Aug 29, 2015
Detached DOM nodes
View detached
// create an element to attach to document
var d = document.createElement('div');
// take heap snapshot and filter on 'detached' will show the above node
// now attach element to document
// take heap snapshot and the detached node is no longer listed
// you can look at diff between two snapshots and see it has been added to HTMLBodyElement
jsteenkamp / prototype
Last active Aug 29, 2015
JavaScript new vs Object.create( ... )
View prototype
*** see ***
*** Don't do this ***
function MyClass() {}
MyClass.prototype.method1 = function () { ... };
MyClass.prototype.method2 = function () { ... };
// ...
MyClass.prototype.methodN = function () { ... };
jsteenkamp / app.js
Last active Aug 29, 2015
Angular 1.x Component Architecture Application using JSPM for ES6 and importing CSS and HTML
View app.js
'use strict';
// vendor modules
import angular from 'angular';
import 'angular-touch';
import 'angular-animate';
import 'angular-aria';
import 'angular-ui-router';
// app modules
jsteenkamp / osx-dsclean
Last active Aug 29, 2015
OSX bash function and alias to remove hidden directories from zip files
View osx-dsclean
$ nano ~/.bash_rc
function dsclean() {
if [ -f $1 ]
echo "Delete __MACOSX folder from $1"
zip -d "$1" __MACOSX*
echo "Delete all .DS_Store folders from $1"
zip -d "$1" \*.DS_Store
jsteenkamp / codepen-save
Created Jan 26, 2015
JSON object saved by CodePen
View codepen-save
pen: {
"defaultAJAXTimeout": 10000,
"failedRequestMsg": "Unable to reach Please contact",
"auto_run": true,
"checksum": 1415964482,
"created_at": "2015-01-26T19:05:43Z",
"css": "",
"css_external": "",
"css_pre_processor": "none",
You can’t perform that action at this time.