koalahamlet/famousUniversity101.md

## famousUniversity101.md

      
    Raw
  

              famousUniversity101.md
            
          
    Here are my notes about the Famo.us University 101

** --> concepts
## --> things to possibly improve

In general, there needs to be a reset code button. There were a few times in the course of progressing through everything that it would have been more helpful to have 'reset code' button rather than Ctrl+z-ing my way back to the start.
=============================================================================
Famo.us 101: Displaying content.


#####step 1 Displaying Content
Introduces the concept of a *renderable*.
The most basic renderable is called a *surface*
A renderable needs someplace to live, these are called Contexts.
A famo.us app can have more than one context whereas most mobile/web apps have just one.


#####step 2 Our First Surface
introduces how to add content
-- #text should be white if possible as I couldn't make it out at first and thought that I had a compile error#


#####step 3 Adding Content
shows different things that can be added as content to a *surface*
 var firstSurface = new Surface({
 	content: 'stuff'
 });
 firstSurface.setContent('\<h1>HELLO WORLD\</h1>');


#####step 4 Styling
shows how to add css-like properties to a surface


#####step 5 Sizing
sizing a surface can be done with the formulae [x,y], [undefined, y] or [x, undefined], [true, true]


####EXERCISE 1
I copy/pasted from the previous step for my boiler plate.
 var Engine = require('famous/core/Engine');
 var Surface = require('famous/core/Surface');
 var mainContext = Engine.createContext();
 var firstSurface = new Surface({
     size: [200, undefined],
     content: 'mike',
     properties: {
         color: 'white',
         fontSize: '40px',
         textAlign: 'center',
         backgroundColor: '#FA5C4F',
         borderRadius: '15px'
     }
 });
 mainContext.add(firstSurface);

####Step 6 Finish

Overall, this was a very clear and concise tutorial set. Nothing to improve within the scope of this tutorial.
=============================================================================
###Famo.us 101: Positioning.


#####step 1 State Modifiers
Introduces oncept of *State Modifier* which is added to main context
#Will it be explained why the state modifier must be added before the surface?#
#It says that state modifier and transform are part of the same thing but they have different package names.
This seems inconsistent with wording#


step 2 Transforms


shows two surfaces, one normal and one transformed.
\#I found it fairly difficult to parse this the first time through. I modified the code so that the additions to the main surface took place one after the other. This helpled my head not jump around as much.\#

```javascript
 mainContext.add(surface);
 mainContext.add(stateModifier).add(modifiedSurface);
```


#####step 3 Chaining Modifiers
This example shows that order matters and does so in a easy to understand way. Great example.


#####step 4 Branching Modifiers
AKA, adding the same properties up to a point, and then differentiating.
  var node = mainContext.add(downMod);
  node.add(leftSurface);
  node.add(rightMod).add(rightSurface);


- #####step 5 Align and Origin
Introducing the \*origin\* and \*align\* properties of \*modifiers\*. 

   \#Did not understand the concepts individually at first as both origin and align were altered simultaneously.\#

- #####step 6 Align vs Origin
Contrast the ideas of \*align\* and \*origin\*

   \#Still did not understand at first due to ideas not being presented seperately\#
began to understand origin more as I played around with it. 
As this geometry does not directly correspond to the standard x,y plane, I think including some colored 
circles at the points of interest (say [1,1]) would be very helpful to students. 

   \#Perhaps a prompt to play around with origin values in alignOriginModifier\#

- #####step 7 Origin and Transform
Enforces the concept that \*origin\* is the point in an element around which transforms are applied. 

   \#still found things confusing witout a reference to exactly where the reference point was. instead of using a 
circle, I added a bright green unit square to help with orientation\#
```javascript
var originSquare = new Surface({size: [15, 15],
properties: {
  border: '1px solid \#00ff00',
   borderRadius: 'px'
  }
  });
  var modifier2 = new StateModifier({
  align: [0.5, 0.5],
  // apply an origin below
  origin:[1, 1],
  transform: Transform.rotateZ(Math.PI/6)
  });
  mainContext.add(modifier2).add(originSquare);

#An aside question, why did I have to make a second modifier to see the shape? Shouldn't the modifier support
more than one shape?#


#####step 8 Opacity
Demonstrates the opacity property of *modifiers*. This is done in a straightforward fashion.


#####step 9 Finish
Hopefully you have a solid grasp on the render tree and how modifiers affect the renderables below them.
#I do not feel like a have a good concept of the render tree. I learned certain properties and
behaviors of modifiers, but I do not feel like I understand what a modifier really is. Knowing that they can
be branched and chained does give me a clue into how the render tree works, but it is not enough information
to grok it on first reading this article.
I think that this tutorial could benefit from exactly that, a decent description of what a modifier is, why it
can't take more than one shape, etc. Also a discussion of why the render tree behaves as it does would be
appropriate. Also, the concepts of origin and align might be presented seperately at first and then combined into one example.#


=============================================================================
###Famo.us 101: Animating


#####step 1 setTransform()
Describes the inputs and funciton of the .setTransform() function.
#not entirely sure what happened here but I wasn't able to see the animation until I opened this tutorial in
an incognito window, using google chrome 39.0.2171.95 (64-bit)#


#####step 2 Easing Curves.
Gives the user the names of several transitions. Perfect place for such a list. I thought this was a very fun section.


#####step 3 Chaining Animations
Demonstrates that animations will be executed in the order that they are added to the modifier.
Notes that this only works on the same modifier.
#maybe more than two examples here? The box could make a 5 point arc as it's traveling across the screen#


#####step 4 Interrupting Animations
Shows the implementation of a click listener on a surface.
#The text did not note that halting an animation does not stop it in place, but instead snaps it to the end#


#####step 5 Halt with Chaining
Attempts to demonstrate halt with chaining. It does show how to properly handle going from one transition to
another from a click.
#"However if we call halt() on the first animation, the second animation will begin immediately." This isn't
true from what I can see. We've set the transformation to trigger on a click, the engine does not take halt()
as a signal to jump to the next animation if they've been chained exactly like they were in step 3. If chained
like in step 3 and halted, it seems to snap to the position determined at the end of the second animation.#
tested with this code:
stateModifier.setTransform(
    Transform.translate(0, 100, 0),
    { duration : 3000, curve: 'linear' }
);
stateModifier.setTransform(
    Transform.translate(0, 500, 0),
   { duration : 700, curve: Easing.outBounce }


);
surface.on('click', function() {
stateModifier.halt();
surface.setContent('halted');
// stateModifier.setTransform(
//   Transform.translate(0, 500, 0),
//   { duration : 400, curve: Easing.outBounce }
// );
});

- #####step 6 Physics Transitions
Shows one of the (I assume) many physics transitions that famo.us offers. Shows how to construct a JS object 
containing the method name and parameters to invoke the method registered with the Transitionable object. 

    I thought that this section was really well explained. The itemized coneptual steps along with line number is 
a powerful tool in code teaching, and I think it's well suited here. As this is the last slide, maybe hint at 
what the 'velocity:' parameter is and give the student a hint and some reasonable valuess to play around with 
it.

- #####step 7 Finish
Overall, this tutorial set felt very good. I saw several animations clearly demonstrated, was shown how to 
chain them if necessary, and how to interact with shapes on a click. A very good tutorial set overall. 

    Were I to improve anything about these sections, it would be to itterate on the wording slightly. As noted 
above, there are a few times where the wording seems inconsistent with the functionality of the software. 

=============================================================================

###Famo.us 101: Handling Events
A quick overview of the different kinds of events
\*Surface events\*, \*Engine events\*, and \*Program events\*

- #####step 1 Surface events
This shows the basic interface for a \*surface\* to capture a DOM event.

```javascript
surface.on('click', function() {
  surface.setProperties({
    backgroundColor: '#878785'
  });
});


#####step 2 Engine Events
This demonstrates how to capture DOM events at the engine level

Engine.on('keydown', function(e) {
  surface.setContent(e.which);
});


#####step 3 Engine Events
Introduces the engine events 'prerender', 'postrender', and 'resize'. Includes warning that pre and postrender should be used sparingly due to their high frequency of being called.


#####step 4 Event Handlers
Here we find a basic Event handler implementation.
#maybe some numbered lines for where something is being created, where is it registered, where is it called, etc.#


#####step 5 Event Handlers
The example is expanded to a more realistic situation of multiple handlers. This example is another very good one anc
communicates the principles very clearly.


#####step 6 Pipe & Subscribe
This section illuminates the fact that pipe and subscribe are inverse versions of each other to be utilized with event handlers.


#####step 7 Events
The concept of a *View* is presented here. Their importance is explained in that they have input and output handlers.
We also demonstrate receiving a click inside of a view with a click listener.


#####step 8 Events
Here it is  demonstrated how to emit an event from a view and listen for the event outside of the view.


#####step 9 Finish
This tutorial set was explained nicely as well. I'm now feeling ready to take on a small project after finishing this set.