Day 3: Megaroster

Wednesday, May 17, 2017

Lecture Videos

Morning:

Afternoon:

Topics

Git

  • Starting a new repository
  • Adding a remote repository (like Github)
  • Seeing what changed with git diff
  • Forking and cloning repositories

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

DOM Manipulation

Examples

Git

Starting a new project with a git repository

First make a new directory and then navigate into the new directory. Then start a new repository with git init.

user@localhost ~
  
mkdir my_new_project
cd my_new_project
git init

To be able to make our first commit, we need to first add something to our empty project folder. A common first choice is a README.md file, which is a document written in markdown that provides information about the project.

user@localhost ~
  
echo "# My New Project" >> README.md
git add .
git commit -m "Initial commit"

Once we have our first commit, we can add a ‘remote’ for our repository, like github or bitbucket. For github, log in to github.com, then hit the ‘+’ button in the top right of the screen to add a new repository. Then, it will give you the following commands to run from the command line.

user@localhost ~
  
git remote add origin git@github.com:myusername/my_new_project.git
git push -u origin master

This adds the github remote as ‘origin’ and sets it as the default for when you push your changes. From this point forward, just type git push to push your changes to the remote.

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

Presentations

Projects

Megaroster

Morning | 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

Finish yesterday’s homework, using my Megaroster (morning | afternoon) as a base. Don’t forget to keep the students array in sync with the DOM.

Bonus Credit

Fool around with Foundation and/or CSS to make it look nicer.

Mega Bonus Credit

Add buttons to change the position of the student within the list. In other words, add “Move Up” and “Move Down” buttons.

Super Mega Bonus Credit

Persist the student data using window.localStorage.