Nick Williams WickyNilliams

"How do I get started with Node?" is a commonly heard question in #Node.js. This gist is an attempt to compile some of the answers to that question. It's a perpetual work-in-progress.

And if this list didn't quite answer your questions, I'm available for tutoring and code review! A donation is also welcome :)

Setting expectations

Before you get started learning about JavaScript and Node.js, there's one very important article you need to read: Teach Yourself Programming in Ten Years.

Understand that it's going to take time to learn Node.js, just like it would take time to learn any other specialized topic - and that you're not going to learn effectively just by reading things, or following tutorials or courses. _Get out there and build things!

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Use wget to mirror a single page and its visible dependencies (images, styles)

Graphic via State of Florida CFO Vendor Payment Search (flair.myfloridacfo.com)

This is a quick command I use to snapshot webpages that have a fun image I want to keep for my own collection of WTFViz. Why not just right-click and save the image? Oftentimes, the webpage in which the image is embedded contains necessary context, such as captions and links to important documentation just incase you forget what exactly that fun graphic was trying to explain.

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.

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.

	$browser-context: 16;

	@function em($pixels, $context: $browser-context) {
	@return #{$pixels/$context}em
	}

	@mixin link-line($shadow, $shadow-context, $color, $position, $size) {
	text-shadow: em(1,$shadow-context) 0 0 $shadow, em(2,$shadow-context) 0 0 $shadow,
	em(3,$shadow-context) 0 0 $shadow, em(-1,$shadow-context) 0 0 $shadow,
	em(-2,$shadow-context) 0 0 $shadow, em(-3,$shadow-context) 0 0 $shadow,

	// Simple wrapper to use bootstrap's grid system to position elements side-by-side
	var VerticalFieldsElement = React.createClass({
	render: function() {
	return dom.div(
	{ className: 'clearfix' },
	React.Children.map(this.props.children, function(child) {
	if(!child) {
	return child;
	}

	/*
	A full list of simple easing equations inspired by GIST from greweb - https://gist.github.com/gre/1650294
	Equations source - http://gsgd.co.uk/sandbox/jquery/easing/
	*/

	{
	linear: function(t) {
	return t
	},
	inQuad: function(t) {

	var Dialog = React.createClass({
	mixins: [Portal],

	createPortal: function() {
	this.dialog = $(this.portalNode).dialog({
	autoOpen: false,
	title: this.props.title,
	close: this.props.onClose
	}).data('ui-dialog');
	},

	var Dialog = React.createClass({
	render: function() {
	// 1) render nothing, this way the DOM diff will never try to do
	// anything to it again, and we get a node to mess with
	return React.DOM.div();
	},

	componentDidMount: function() {
	// 2) do DOM lib stuff
	this.node = this.getDOMNode();