Skip to content

Instantly share code, notes, and snippets.

View StevenLangbroek's full-sized avatar

Steven Langbroek StevenLangbroek

View GitHub Profile
@StevenLangbroek
StevenLangbroek / button.jsx
Created October 30, 2015 10:32
"Pure" components
import component from './component'
import cx from 'class-names';
export default component(({ link, type, text }) => (),
<a href={link} class={cx('button', `btn-${type}`)}>{text}</a>
);
export defa
@StevenLangbroek
StevenLangbroek / component-with-decorator.js
Created August 7, 2015 07:16
Difference between mixins and higher-order components (as ES7 decorators).
import React from 'react';
function animateIn(Component){
return class DecoratedComponent extends React.Component {
componentWillEnter(){
// Do some swanky animation
}
render(){
// Inherit all props
// index.js
// by requiring `babel/register`, all of our successive `require`s will be Babel'd
require('babel/register');
require('./server.js');
// server.js
import express from 'express';
let app = express();
const PORT = 3000;
@StevenLangbroek
StevenLangbroek / 00_decorators.js
Last active September 20, 2016 08:22
Backbone with decorators (warning: untested) *update*: corrections from Ben applied.
import _ from 'underscore';
export function on(eventName){
return function(target, name, descriptor){
if(!target.events) {
target.events = {};
}
if(_.isFunction(target.events)) {
throw new Error('The on decorator is not compatible with an events method');
return;
@StevenLangbroek
StevenLangbroek / onFetch.js
Last active August 29, 2015 14:23
Even more ES6 fun!
const { assign } = Object;
class Directors {
onFetch(directors) {
this.directorsHash = directors.reduce((memo, director) =>
assign(memo, { [director.id]: director })
, {});
}
}
@StevenLangbroek
StevenLangbroek / setParentState.jsx
Created June 9, 2015 21:02
Child -> Parent communication in React
import React, { Component } from 'react';
class Parent extends Component {
getInitialState(){
return {
title: 'Hello world!';
}
}
render(){
return (
@StevenLangbroek
StevenLangbroek / listenToMany.js
Last active August 29, 2015 14:19
Backbone Utility for listening to multiple events on another Class (has to extend Backbone.Events)
import _ from 'underscore';
/**
* Backbone utility, to listen to multiple Backbone Events,
* structured like the native 'events' hash. Shortcuts things like
* `collectionEvents` on CollectionView, and `triggers` on Views.
* @param {class instance} obj object to listen to.
* @param {object} eventHash hash of events (prop:event, prop on current object) and handlers (value)
* @param {class instance} context optional context to call handlers with.
* @return {null} Doesn't return.
@StevenLangbroek
StevenLangbroek / 01_readme.md
Created March 30, 2015 13:46
Marty.js weirdness

When I render OfferList through React Router, The result is a rejected promise, saying:

`An error occured when handling the DONE state of a fetch`

{
  message: "Not found",
  name: "Not found",
  status: 404

}

@StevenLangbroek
StevenLangbroek / UserView.js
Last active August 29, 2015 14:17
Backbone pattern not possible with ES6 Classes
import BaseView from './BaseView';
import listenToMany from '../utils/listenToMany';
import template from '../templates/user';
// Backbone's extend + ES6
export default BaseView.extend({
template,
listenToMany
});
@StevenLangbroek
StevenLangbroek / README.md
Created March 23, 2015 17:22
"Get Posts" Tag independent of "the loop".

Get Posts independent of URL.

As a stand-in to a full-fledged, publicly accessible JSON API, it would be incredibly liberating to have a Handlebars helper which allows us to loop through posts by parameters (maybe query params could even be mixed into the Handlebars context) instead of some internal state dictated by the URL. This would allow for easy creation of "related content", or a "search" function.