React class=container matters ... needs to surround all components.  having components declared outside and the page will not render

Cliff Notes for React.js Component State

• Mutate State only using the provided methods.  (e.g. setState())
• In the render method retrieve properties with  "this.state.varname"

https://facebook.github.io/react/docs/component-api.html

• Refs to include any child components as "state"
• Warned "By default, use the Reactive data flow and save refs for use cases that are inherently non-reactive"

https://facebook.github.io/react/docs/more-about-refs.html


To ponder further:
"Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use refs to "make things happen" – instead, the data flow will usually accomplish your goal."

And data flow is well described here:
https://github.com/facebook/flux

Further Experiments with grunt-init

The examples on https://github.com/r3b/ConnectJS2014 walk through an iterative build up of tools node --> npm --> grunt --> express

Key tool seems to be the grunt-init task which works like an archetype builder,   using  a template it sets up a standard of config files for various steps
 - package.json  :  for all module dependencies
 - Gruntfile.js :  build, test, deploy tasks.

Get new templates by cloning the Git repository to your ~/.grunt-init directory.
Command to instantiate the new archetype should be run inside an empty directory, followed by npm to download dependencies, and lastly grunt to execute default tasks.
>grunt-init {templatename}
> npm install
> grunt

Have learned since then:
> grunt -h
   lists all available tasks with handy descriptions, so easy to find out what a template does.

Curious to see how best to handle grunt-init "mashups"  and combining of templates.  Since grunt-init is for empty directories only,  seems like you still need to then iterate by hand as your project grows... or install a bunch of fluff at first for when you think you will need it later.

And have tried a couple of grunt + express templates... none of which seem to just "run" off the bat...

Fun with JS scope and closure : Sep 15 ATL.JS Chris Aquino

Inspired from tonights ATL.JS talk

Closure and the for loop problem:  If you really like 10
for(i=0; i < 10; i++){
setTimeout( function(){
console.log("i is " + i);}, 10);

}
Javascript is A) Lazy and B) Single Threaded.  So....  contrary to what you want:  For loop executes in the thread,  AND then the  i inside the closure function executes and sees that i now = 10 (last value).

Scope is a matter of perspective:  if you prefer undefined instead of 10
for(i=0; i < 10; i++){
setTimeout( function(i){
console.log("i is " + i);}, 10);

}
So now,  i is an argument, and it's not assigned when the function is created.  It stays undefined.

And even explicit assignment doesn't help.  The y here is part of the for loop,  so gets assigned 9 times, then function executes:
for(i=0; i < 10; i++){
var y = i;
setTimeout( function(){
console.log("i is " + y);}, 10);

}
So for readable, manageable scope: create a function to create the function, so that each execution of the loop the iterator value is captured to a isolated scope and preserved until later.

function showI(i){
function show() {
console.log("i is "+ i);
};
return show;
}

for(i=0; i < 10; i++){
setTimeout( showI(i), 10);

}

AngularJS - Scope Kata

Scope is where a good part of Angularjs magic happens,  binding allows data to be updated by events on the DOM and for changes of data to be reflected by data in the DOM. Scope is more than just a handle for a bunch of variables and it can behave unexpectedly until you understand what's going on behind the scenes

"Scope is not the model.. it is just a reference to what's happening [inside the dom]" egghead.io tutorial

• Root scope sits at the top of the scope inheritance, changes to this model can be reflected across all other application scopes which are children of the root scope.
• Root scope is accesible without direct reference
• Controller scopes are children of root scope, and variables not found local will be pulled from parent scopes all the way back to root.
• If you declare 2 of the same controller on a view, they are siblings and each has it's own scope, so variables are not shared between them

Plain Variables

Plain variables lose inheritance as soon as written in child scopes. They are local to the current scope only after that.

Model Variable 

Model variables are declared as properties of an object "model.variable".  These will maintain inheritance from parent to child scopes,  as unlike plain variables,  each child is pulling the model reference from parent and only changing the property on the shared object.

Of course if Controllers are siblings, the scopes are not shared regardless if you use plain variables or model notation variables.

Basic Scope Behavior with Controllers.  Code available https://github.com/lauramoore/angularkata

Java, Groovy, Android and the URL with underscore problem

lesson for today:

Groovy HTTPBuilder chokes on URLs where the hostname contains and underscore character.  For example  http://xx_host.name.domain.com.   Apparently the blame lies with the underlying java URL class which fails to parse due to the "illegal" underscore character.

What I find weird is how quietly folks seem to be accepting this limitation. Affects android as well.   Yes, strictly speaking underscores are not valid hostname characters,  but apparently that rule has been relaxed for subdomains and DNS configurations?    Either way from the various posts I've seen looks like underscores are here to stay and problems have been encountered with facebook, amazon aws and other big names.

If there's a workaround out there other than injecting the IP address instead of hostname  would love to hear about it.  I really, really hate it when my code is tied to a strict IP address.

Rails - Record Handling Tricks learned the hard way

- use dynamic model query methods described in: http://api.rubyonrails.org/classes/ActiveRecord/Base.html
- Story.order("column_ord").find_all_by_state("B").size returns the collection
- Story.order("column_ord").find_by_state("B").size returns only one story
- render(@collection) throws error if said collection is empty, so check <% if @collection then render(@collection) end %>
- assigns[:variablename] is how to get hold of a page object in the controller_test