Dan Couper DanCouper

So's I don't forget anything

rails new app_name -db mysql

Then uncomment the edge Rails line in the Gemfile:

gem 'rails', github: 'rails/rails'

The future is here: Classless object-oriented programming in JavaScript.

Douglas Crockford, author of JavaScript: The Good parts, recently gave a talk called The Better Parts, where he demonstrates how he creates objects in JavaScript nowadays. He doesn't call his approach anything, but I will refer to it as Crockford Classless.

Crockford Classless is completely free of class, new, this, prototype and even Crockfords own invention Object.create.

I think it's really, really sleek, and this is what it looks like:

function dog(spec) {

This is an update to https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers, with the coffeescript syntax replaced with current advised best-practice ES6 idioms. I've tried not to remove anything, only add explanation where necessary.

For ES6 reference as it relates to React, Babel has a good overview: http://babeljs.io/blog/2015/06/07/react-on-es6-plus

*For ES6 reference, Exploring ES6 by Axel Rauschmayer is excellent, & does a much better job than I have attempted here. In particular, the sections on let/const, replacing concat with ..., object destructuring, arrow functions, [new object literal features](http://exploringjs.com/es6/ch_oop-besides-classes.html#_new-objec

Record Collection

Free Code Camp's Record Collection challenge seems to be the point in their curriculum at which JavaScript gets hard for new learners. It is the first relatively complex challenge, the first that isn't a simple exploration of syntax. It is also the first challenge that simulates common semi-complex functionality of the kind that would be found in real-world applications, so understanding it is important.

This article is long and ends with a possible solution, followed by refactoring:

	# Simple Phoenix authentication plug
	#
	# - based on Plug's session store
	# - redirects unauthenticated requests to login page "/login/<request url>"
	# - /static/... requests are not authenticated
	# - authentication is valid as long as session is valid (you can change this behaviour easily)

	# Because we need session to be fetched BEFORE this plug, we must put this to router.ex:

	#----------------------------

	defmodule Minesweeper.GameGrid do
	@moduledoc """
	Represent a game grid as a unidirected graph. For example:

	```
	{0,0} ━ {1,0} ━ {2,0}
	│ ╳ │ ╳ │
	{0,1} ━ {1,1} ━ {2,1}
	│ ╳ │ ╳ │
	{0,2} ━ {1,2} ━ {2,2}

	/**
	* Description: HTML5 reset/normalize
	* Version: 0.8.0
	* Last update: 2015/05/22
	* Dependencies: none
	*
	* Summary:
	* Mainly ripped from :: https://github.com/murtaugh/HTML5-Reset
	* Eric Meyer :: http://meyerweb.com
	* HTML5 Doctor :: http://html5doctor.com

	// Sadly, this doesn't work: img onerror events
	// don't bubble, despite what the spec says:
	// $(document).on('error', 'img', (e) => {

	// So just do the following
	// NOTE: depending on latency/loading time etc,
	// there will be a FoUC, with the alt text flashing up:
	$(document).on('ready page:load', () => {
	// FIXME: naïve version, hits every image:
	$('img').on('error', (e) => {

	// Currently at
	// https://github.com/emberjs/ember.js/blob/62e52938f48278a6cb838016108f3e35c18c8b3f/packages/ember-application/lib/system/dag.js
	function visit(vertex, fn, visited, path) {
	var name = vertex.name,
	vertices = vertex.incoming,
	names = vertex.incomingNames,
	len = names.length,
	i;
	if (!visited) {
	visited = {};

	<div class="vip-content-block">
	<h2 class="vip-content-block-title">VIP Benefits</h2>
	<h3 class="vip-content-block-subtitle">Exclusive promotions, luxury events, a £5k jackpot in a private Executive Lounge... There's all of this and so much more to enjoy!</h3>


	<div id="vip-benefits-collapsible" class="layout-html collapse">
	<div>
	<ul class="vip-benefits-tabs-nav" role="tablist">
	<li role="presentation" class="vip-benefits-tabs-nav-item active"><a href="#vip-benefits-bronze" aria-controls="vip-benefits-bronze" role="tab" data-toggle="tab">Bronze</a></li>
	<li role="presentation" class="vip-benefits-tabs-nav-item"><a href="#vip-benefits-silver" aria-controls="vip-benefits-silver" role="tab" data-toggle="tab">Silver</a></li>