kellishouts

// oop.py
# class definition (blueprint)
class Animal:

  # class constructor method
  def __init__(self, name):

    # instance properties
    self.name = name
    self.last_ate = None

kellishouts

// oop.rb
class Animal

  # properties
  attr_accessor :name, :last_ate

  # constructor
  def initialize( name )
    @name = name
    puts "made an Animal named #{name}"

kellishouts

//callbacks
var counter = 0;
var english = ["zero","one","two","three"];

function increase( cb ){
  
  counter = counter + 1;
  
  var counter_in_english = english[counter];
  

kellishouts

Closure

a closure is the local variables for a function - kept alive after the function has returned

a closure is a stack-frame which is not deallocated when the function returns



// scope
function outer_scope() {

kellishouts

Code is not Math

Equality is Weird

• = does not mean “equals” it means “set a value”
• == means “equal”
• === also means “equal”

Programmers start counting at 0

• var potatoes = [0, 1, 2, 3, 4, 5]

kellishouts

Starting up a project with /app/public for final output files AND using Foundation

---

In your project root

Copy over relevant assets into a ./Layouts directory.

Make this file to ignore installable components.
.gitignore

kellishouts

// Requires a custom media query $medium-down
// Uses the following markup:

// <nav class="top-bar" data-topbar role="navigation">
//   <ul class="title-area">
//     <li class="name">
//       <a href="#" class="clearfix">
//         <div class="logo_image"></div>
//         <h1>
//           <span id="flappy">Flappy</span> 

kellishouts

// Your markup may be different. The following styles only apply for this markup snippet:

//   <header id="page_header">
//     <div class="row">
//       <div class="large-6 medium-3 small-12 columns">
//         <div class="title">
//           <h1>
//             <span class="flappy">flappy</span>
//             <span class="app">app</span>
//           </h1>

kellishouts

@import "http://fonts.googleapis.com/css?family=Lato:400,700.css";
@import "partials/settings";
@import "../public/bower_components/foundation/scss/foundation.scss";
$break-small: 480px;
$break-medium:768px;
$flappy-dark-grey:#2B2D33;
$flappy-blue:#00CCCC;

body{
  background-color:$flappy-dark-grey;

kellishouts

// d. Media Query Ranges
// - - - - - - - - - - - - - - - - - - - - - - - - -

$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em, 99999999em);

$screen: "only screen";