Phil Pluckthun kitten

dev tools at @expo 𝝠 • 🗻 n+1 GraphQL/TS/React projects • 🔨 gql.tada, urql

kitten / gist:a2ca1a7718d9fe94aa7d

Created April 2, 2015 00:58

Little bash function that uses Spark to display the CPU usage on a dual core Mac.

	function cpu() {
	usage=$(ps aux \| awk {'sum+=$3;print int(sum/4+.5)'} \| tail -n 1)
	graph=$(spark 0 ${usage} 100 \| awk '{print substr($0,4,3)}')
	echo "[$usage%] $graph"
	}

kitten / Old React Component Pattern.js

Last active August 29, 2015 14:21

React ES6 Code Samples for Medium #1

	var React = require("react");

	var HelloWorld = React.createClass({
	mixins: [
	DummyMixin
	],
	getInitialState: function() {
	return {
	world: "World"
	};

kitten / New React Component Pattern.js

Created May 18, 2015 20:50

React ES6 Code Samples for Medium #2

	import React from "react";

	export default class HelloWorld extends React.Component {
	constructor(props) {
	super(props);

	this.state = {
	world: "World"
	};
	}

kitten / CompatComponent Pattern.js

Last active August 29, 2015 14:21

React ES6 Code Samples for Medium #3

	import { PropTypes } from "react";
	import { CompatComponent } from "react-compat-component";

	export default class HelloWorld extends CompatComponent {
	getMixins() {
	return [
	DummyMixin
	];
	}

kitten / Store Pattern.js

Last active August 29, 2015 14:21

React ES6 Code Samples for Medium #4

	var AppDispatcher = require('../dispatcher/AppDispatcher');
	var EventEmitter = require('events').EventEmitter;
	var assign = require('object-assign');

	var CHANGE_EVENT = 'change';

	var _elements = {};

	function create(obj) {
	_elements[obj.id] = obj;

kitten / Insert Store Pattern.js

Created May 18, 2015 22:36

React ES6 Code Samples for Medium #5

+import ExampleStore from "../stores/example-store.js";
+import { CompatComponent } from "react-compat-component";
+export default class Example extends CompatComponent {
+  getInitialState() {
+    data: ExampleStore.getList()
+  }
+  componentDidMount() {
+    ExampleStore.addChangeListener(this._update);
+  }

kitten / Store.js

Created May 18, 2015 22:51

A generic Store class, that utilises Immutable.js

	import { EventEmitter } from "events";
	import { Map } from "immutable";

	const CHANGE_EVENT = "change";

	class Store extends EventEmitter {
	constructor() {
	super();
	this.data = new Map();
	}

kitten / Transmit.js

Created May 18, 2015 22:59

A Transmit class, that takes a Store and a Component, wraps the component in an anonymous wrapper and injects the store's data

	import React from "react";
	import Store from "./Store.js";
	import assign from "object-assign";

	class Transmit {
	constructor(Component, Storage) {
	const Container = React.createClass({
	displayName: Component.displayName + "Container",
	getInitialState() {
	return {

kitten / Example.js

Created May 18, 2015 23:06

Transmit + Store Example

	import { PropTypes } from "react";
	import { CompatComponent } from "react-compat-component";
	import Transmit from "./transmit.js";
	import ExampleStore from ",/example-store.js";
	import { List } from "immutable";

	class Example extends CompatComponent {
	getPropTypes() {
	return {
	data: PropTypes.instanceOf(List).isRequired

kitten / Store.js

Created June 25, 2015 22:58

A generic Store factory, that utilises Immutable.js and RxJS

	import { EventEmitter } from "events";
	import { Observable } from "rx";
	import { Map, List } from "immutable";

	export default {
	createStore(extend) {
	const CHANGE_EVENT = "change";
	const EventListener = Object.assign({}, EventEmitter.prototype, {
	changed() {
	this.emit(CHANGE_EVENT);