Chris Buttery chrisbuttery

Install MongoDB on macOS Sierra

This procedure explains how to install MongoDB using Homebrew on macOS Sierra 10.12.
Official MongoDB install documentation: here

Install Homebrew

Installing Homebrew is effortless, open Terminal and enter :
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

Redux Selector Pattern

Imagine we have a reducer to control a list of items:

function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Object> {
  switch(action.type) {
    case 'SHOW_ALL_ITEMS':
      return action.data.items
    default:

We're excited to have you attend one of our workshops! Here's a JavaScript (re)fresher to help you get up-to-speed on some features of the language we'll be using.

Let and Const

JavaScript has always had var:

var name = 'Ryan'

This is a proposal for a lightning talk at the Reactive 2015 conference.

NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut!

The Joy of Composition

Why stateless rendering is pure bliss

React just got stateless components, meaning that they are in essence pure functions for rendering. Pure functions make it dead simple - even fun - to refactor your views

Use these rapid keyboard shortcuts to control the GitHub Atom text editor on macOS.

Key to the Keys

⌘ : Command key
⌃ : Control key
⌫ : Delete key
← : Left arrow key
→ : Right arrow key
↑ : Up arrow key

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>
	$(document).ready(function() {
	var socket = io.connect('http://localhost');
	$('#button').click(function(e){
	socket.emit('click');
	e.preventDefault();

	import { render, element } from 'deku';

	let Button = {

	propTypes: {
	liked: { type: 'boolean' }
	},

	initialState (props) {
	return {

	console.highlight = function(text, sample) {
	var escapedSample = sample.replace(/[-\/\\^$*+?.()\|[\]{}]/g, '\\$&');
	var reSample = new RegExp(escapedSample, 'g');
	var args = [''];
	var highlightedText = text.replace(reSample, function(match) {
	args.push('background-color: #ffc', 'background-color: none');
	return '%c' + match + '%c';
	});
	args[0] = highlightedText;
	console.log.apply(console, args);