mundi morgado mundizzle

Aspirational Dropbox SCSS Principles

This is purposefully ambitious and aspirational. Some concepts that are worth understanding in addition to the principles outlined here include:

Here’s a CodePen I’ll periodically update with the compiled CSS to use as a testing playground.

TLDR: a React component should either manage its own state, or expose a callback so that its parent can. But never both.

Sometimes our first impulse is for a component to entirely manage its own state. Consider this simple theater seating picker that has a letter for a row, and a number for a seat. Clicking the buttons to increment each value is hardly the height of user-interface design, but never mind - that's how it works:

/* @flow */
var React = require('react');

var Letter: React.ReactClass = React.createClass({
  getInitialState: function(): any {

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

JavaScript function hoisting by example

Below are many examples of function hoisting behavior in JavaScript. Ones marked as works successfuly print 'hi!' without errors.

To play around with these examples (recommended) clone them with git and execute them with e.g. node a.js

Notes on hoisting

(I may be using incorrect terms below, please forgive me)

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

	// declaration
	function foo (n) { return n + 1; }

	// expression
	// note, fat arrow functions have very different meaning (usually what I want, though)
	var foo = function (n) { return n + 1; };
	var foo = (n) => { return n + 1; };
	var foo = n => n + 1;

	// object methods

	# Hello, and welcome to makefile basics.
	#
	# You will learn why `make` is so great, and why, despite its "weird" syntax,
	# it is actually a highly expressive, efficient, and powerful way to build
	# programs.
	#
	# Once you're done here, go to
	# http://www.gnu.org/software/make/manual/make.html
	# to learn SOOOO much more.

	<div id="styleguide-icon-grid"></div>
	<object data="/assets/icons.svg" id="svgembed" height=0; width=0></object>

	<script>
	var grid = document.querySelector('#styleguide-icon-grid');
	var tmpl = '<div class="item"><svg class="icon"><use xlink:href="/assets/icons.svg#{id}"></use></svg><span>#{id}</span></div>';

	function svgloaded() {
	var svgEmbed = document.querySelector("#svgembed");
	var svg = svgEmbed.getSVGDocument();

	var cheerio = require('gulp-cheerio');
	var svgmin = require('gulp-svgmin');
	var svgstore = require('gulp-svgstore');

	gulp.task('svgstore', function () {
	return gulp
	.src('assets/icons/*.svg')
	.pipe(svgmin())
	.pipe(svgstore({ fileName: 'icons.svg', prefix: 'icon-' }))
	.pipe(cheerio({

	// array utils
	// =================================================================================================

	const combine = (...arrays) => [].concat(...arrays);

	const compact = arr => arr.filter(Boolean);

	const contains = (() => Array.prototype.includes
	? (arr, value) => arr.includes(value)
	: (arr, value) => arr.some(el => el === value)