Skip to content

Instantly share code, notes, and snippets.

View camerow's full-sized avatar

Will Cameron camerow

29 followers · 30 following
  • Washington
View GitHub Profile
@camerow
camerow / add-react-jest-airbnb-linting.sh
Created September 27, 2017 18:31 — forked from rakannimer/add-react-jest-airbnb-linting.sh
Adding react-airbnb styleguide linting to create-react-app
( export PKG=eslint-config-airbnb; npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add -D "$PKG@latest"; )
yarn add babel-eslint
echo "{
\"parser\": \"babel-eslint\",
\"env\": {
\"browser\": true,
\"node\": true,
\"jest\": true,
},
\"extends\": \"airbnb\",
@camerow
camerow / js-observables-binding.md
Created August 10, 2017 20:22 — forked from austinhyde/js-observables-binding.md
Vanilla JavaScript Data Binding

Observables

You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:

var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }

console.log(getN()); // 5

setN(10);

@camerow
camerow / compose.html
Last active August 23, 2016 18:34 — forked from anonymous/index.html
JS BinExample of higher order functions using compose// source http://jsbin.com/hiweso
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Example of higher order functions using compose">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
@camerow
camerow / index.html
Created July 6, 2016 01:29 — forked from anonymous/index.html
JS Bin // source http://jsbin.com/werapifuja
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
@camerow
camerow / ReactFire-ES6-ReactMixin.js
Created May 10, 2016 06:41 — forked from kulakowka/ReactFire-ES6-ReactMixin.js
How to mixin reactfire to es6 react class. More info: https://github.com/firebase/reactfire/issues/38#issuecomment-192963227
import React, { Component } from 'react'
import Firebase from 'firebase'
import ReactFireMixin from 'reactfire'
import reactMixin from 'react-mixin'
const ref = new Firebase('https://<APPNAME>.firebaseio.com/users')
class UsersList extends Component {
constructor (props, context) {
super(props, context)
@camerow
camerow / on-jsx.markdown
Created November 16, 2015 17:50 — forked from chantastic/on-jsx.markdown
JSX, a year in

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I lead the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can'