Nick Wientge nickw

Please go here for latest post and feel free to comment

[new post] (https://gist.github.com/idibidiart/49a095b6bc528638f34f)

###Redux Egghead Video Notes###

####Introduction:#### Managing state in an application is critical, and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently.

Redux is an evolution of the ideas presented by Facebook's Flux, avoiding the complexity found in Flux by looking to how applications are built with the Elm language.

####1st principle of Redux:#### Everything that changes in your application including the data and ui options is contained in a single object called the state tree

Moving to ES6 from CoffeeScript

I fell in love with CoffeeScript a couple of years ago. Javascript has always seemed something of an interesting curiosity to me and I was happy to see the meteoric rise of Node.js, but coming from a background of Python I really preferred a cleaner syntax.

In any fast moving community it is inevitable that things will change, and so today we see a big shift toward ES6, the new version of Javascript. It incorporates a handful of the nicer features from CoffeeScript and is usable today through tools like Babel. Here are some of my thoughts and issues on moving away from CoffeeScript in favor of ES6.

While reading I suggest keeping open a tab to Babel's learning ES6 page. The examples there are great.

Punctuation

Holy punctuation, Batman! Say goodbye to your whitespace and hello to parenthesis, curly braces, and semicolons again. Even with the advanced ES6 syntax you'll find yourself writing a lot more punctuatio

A String is not an Error

Why Error Handling?

Default behavior for programs is to terminate on an error, or enter the debugger
Terrible user experience

Why Handle Errors?

Gracefully Handle Errors (retry connections, re-prompt for user input, etc)
Non Local Control Flow (Display error messages and screens)

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.

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

New React Element Factories and JSX

In React 0.12, we're making a core change to how React.createClass(...) and JSX works.

If you're using JSX in the typical way for all (and only) React components, then this transition will be seamless. Otherwise there are some minor breaking changes described below.

The Problem

	import globalNavigation from './components/GlobalNavigation/reducer';
	import tabs from './components/ApplicationTabs/reducer';
	import feed from './components/Feed/reducer';
	import { combineReducers } from 'redux-immutable';

	const scopeNavigationReducer = (reducer, scopeName) => {
	return (state, action) => {
	if (action.scope && action.scope !== scopeName) {
	return state;
	} else {

	/**
	* A redux middleware for processing Meteor methods
	* When an action is dispatched, it will pass through our middleware.
	* if denoted a method, we will dispatch the action with readyState of loading
	* The method passed in is then called, and dispatches further ready states for success/error
	* The reducer shape should include { data, readyState } for use in the UI
	* @returns {Function}
	*/
	export default function methodMiddleware() {
	return (next) => {

	#!/usr/bin/env node

	// This plugin replaces text in a file with the app version from config.xml.

	var wwwFileToReplace = "js/build.js";

	var fs = require('fs');
	var path = require('path');

	var rootdir = process.argv[2];