Day 3: Jeffervescence / Dinoplasty

Wednesday, June 7, 2017

Lecture Videos

Morning:

Afternoon:

Topics

Git

  • Forking and cloning repositories

Markdown

Foundation

  • The grid system
  • Responsive design (adjusting style based on window size)
  • Foundation Docs

Functions as methods

  • Methods calling methods (e.g. megaRoster.addChild calls this.buildListItem)
  • Binding: Manually setting the value of this with .bind

Examples

Git - Forking a Repo

Making your own copy of an existing repo is called forking. Unlike a cloned copy, which retains the permissions set by the original owner, a forked copy now belongs to you (meaning you can make any changes you want to it).

Just hit the ‘Fork’ button in the upper right of the repo page, and this will add a copy to your personal github.

Hit the 'Fork' button in the upper right of the repo page, and this will add a copy to your personal github.

Foundation

Foundation is a CSS (and JS) framework that makes it easy to create stylish, responsive web pages. The foundation (get it?) of it is the grid system. The grid splits the page into 12 equally-sized columns, making it easy to set the alignment of elements on the page by specifying how many columns they span.

In addition, you can add sizes of ‘small’, ‘medium’, ‘large’, etc, to specify different behavior at different screen sizes. In the following example, the two child divs will be full screen width at small screen sizes (stacked on top of each other), and half of the screen width at medium and larger screen sizes (appearing next to each other).



<div class="row">
  <div class="small-12 medium-6 columns">
  </div>
  <div class="small-12 medium-6 columns">
  </div>
</div>

Manually setting this with bind

In JavaScript, the value of this in any function depends on the context in which the method was called. For example, if a function is an event listener callback, this will be set to the target that caused the event to fire. Sometimes, this is not the this we want. Luckily, JavaScript also has the .bind method, which allows a function to be ‘bound’ to a particular value of this.



this.x = 9        // here, 'this' is the global window object

const module = {
  x: 81,
  getX: function() {
    return this.x
  }
}

module.getX()     // 81
// getX was called on module, so 'this' is module and this.x is 81

const retrieveX = module.getX
retrieveX()       // 9
// retrieveX is a const declared in the global scope, so 'this' is window

const boundGetX = retrieveX.bind(module)
boundGetX()       // 81
// by binding to module, 'this' will always be set to module for boundGetX

`this` is Fun!

JavaScript’s this is a source of consternation for many a developer, but it doesn’t have to be! Make the effort to learn it early in your career, and it will pay off in the long run. Here is a great article with lots of code examples that will help you get a grasp on the nuances of this. Let’s Settle ‘this’ - Part One | Part Two

Projects

Jeffervescence (morning) | Dinoplasty (afternoon)

These are links directly to the repo as of the commits where we left off today. Even after we add more commits tomorrow, these links will still point to this point in time.

Homework

  • Store the flicks/dinosaurs in an array, as well as in the DOM.

Mega Bonus Credit

  • Add a promote/fav button, just like you did yesterday!
  • Add a delete button, just like yesterday!

Super Mega Bonus Credit

  • Add buttons to move a flick/dinosaur up and down the list.

Super Mega Bonus Credit Hyper Fighting

  • Persist the flicks/dinosaurs data using window.localstorage. The flicks/dinosaurs should stay in the list even when the page is refreshed.