This is the curriculum for the 2018 Foxtrot Web Developer Bootcamp.

Welcome

Welcome to LEARN!

Firstly, congratulations on making the decision to become a software developer. No matter what past experience you have, after you've completed this program you'll be able to build a fully-functioning database-backed web app that is responsive, dynamic, and interactive. That, however, is not the greatest skill you will gain here at LEARN. You might ask, "What's more important than learning a skill that will get me a job in something great like software/web development?". But here, we aim to teach you how to LEARN how to program, so that you can continue to teach yourself. In web development, the only constant is change, and you will repeat this learning process over and over throughout your career.

Repetition! Now there's something that will help you learn how to do something. Sure, everyone learns differently, but repetition of something is necessary no matter how you learn. Together we're going to take a web page and break it down into its basic parts and then learn how to build it back up multiple times and in multiple ways. First thing to learn, however, is how to make a static web page with HTML, CSS, and Bootstrap.

HTML (Hyper Text Markup Language) is the code that tells a browser what to display on your screen and has been around since 1989. It has evolved and is currently in its 5th generation. Where things show up in a browser window is mostly due to the use of CSS (Cascading Style Sheets) which, while proposed in the early 1990s, didn't become big until around 1998.

CSS allows designers the ability to position, color, size, and do many other things with the content on a web page. Together HTML and CSS allow designers to make static web pages that are visually stimulating and unique. A static web page doesn't have much to offer, but with the use of Bootstrap we can also make our web pages responsive to changes.

Bootstrap is a framework which combines elements of HTML, CSS, and JavaScript together in a way that is remarkably easy to use. It gives us some JavaScript functionality without having to write the code for it!

However, we're programmers and we want to be able to do more with our programs than only what someone else says we can do, so next we're going to mix in some JavaScript. JavaScript (often called just JS) is what allows your websites to be interactive in new and exciting ways. How's it do that? It gives us functionality like drop-down menus, forms that update with error text immediately, showing and hiding content on demand, and so much more. If your website were a house, HTML would be the structure, CSS would be the paint, carpet, etc, and JavaScript would be the plumbing, the electricity, the AC (and who wants to be without AC ). JavaScript is an object oriented programming language where we create objects and then do things with those objects through functions. In addition to all of that, JavaScript is a lot of what allows us to communicate with other websites through APIs, but more on that later.

Ruby on Rails

Ruby on Rails, or just Rails, is going to take all of the information that you've learned and combine it into a format that is incredibly easy for other developers to understand. Code that other people can't understand is a very sad thing, and using Rails properly will ensure that doesn't happen. The organizational format that Rails uses is commonly called MVC, or Model-View-Controller. It will help you organize your program into small chunks of code that are themselves organized by what they do.

React

Javascript has evolved dramatically over the past several years, and leading the way is the React.js library released by Facebook. React is a way to organize our front end code on desktop webpages, mobile webpages, and even native mobile applications. Its an incredibly powerful tool to have in your toolbox and sooner rather than later, you're going to run into it or have an opportunity to introduce it in your professional career.

SQL

If you're don't think you've ever used a database before, here's a surprise... You have! A database is, in its simplest form, a way to store information in an organized manner in a computer. Ever used an Excel spreadsheet with multiple sheets? That's a simple database. Organized your emails into different folders? You've just created a database. The type of databases that we'll be using in class are SQL based.

SQL stands for Structured Query Language and is how most database backed programs send information to, and receive information from, the place where they store their data. There are several SQL type database programs (and even some that don't use SQL), but the program we'll be using is called PostgreSQL. Most programming languages today don't require users to actually type the SQL commands, but instead have an interface which translates your commands into SQL commands. We're going to spend a couple days on SQL so that you can understand how the database works behind the scenes, but we'll quickly transition to using ActiveRecord, an ORM (Object Relation Mapper) built into Ruby on Rails to help us translate database records into objects that we'll use in our programs.

APIs

Modern web applications are powered by APIs. An api is a data interface for front end applications and other applications to make requests against. We'll be using other people's apis, and building our own, to build rich, data driven applications. Using rich and interesting data sets is a lot of fun, and we're going to have a blast. Apis will expand your opportunities for creativity dramatically.

Pair Programming

What is it?

  • Two people
  • collaborating on one computer to collectively produce one program.
  • That's it!

Why?

  • Increased specialization requires more collaboration.
    • Different people have different knowledge and strengths
    • Two people problem solving leads to better solutions
  • Distributing cognitive load
    • Easier to perform individual functions
    • Easier to catch mistakes and produce high-quality code
  • Not tempted to take short-cuts
  • Not distracted by email, sms, fb, instagram,...

How?

The Ingredients

  • 2 people
  • 1 computer
  • 1 screen
  • 1-or-more keyboards
  • 1-or-more mouse

The Roles

  • "DRIVER"
    • Using keyboard and mouse
    • Managing the editor
  • "NAVIGATOR"
    • Watching, advising, thinking
    • Responsible for higher-level input to the code
    • Catching errors, bugs, typos
  • Talk a lot!
    • Both must understand Why and How

The Process

  • Switch roles every 10-20 mins
    • Pomodoro method
      • Decide on the task to be done
      • Set timer to 25 minutes
      • Work on the task until the timer rings
      • Take short break: 3 to 5 minutes
      • Switch roles; repeat
      • After four pomodoros, take long break
  • Code // Comment
    • One person writes block of code
    • Other person writes comments each line

Who?

  • Everyone will have one person to pair with after week 2
    • ...at least one
  • Who will I pair with?
    • Similar or diverse interests
    • Similar or diverse IT backgrounds
    • Practical considerations

How to Pair Programme Well


  • Agree on one tiny goal at a time

  • Switch roles often, at least every half hour, to help with this we will use the Pomodoro Technique

  • Rely on your partner, support your partner

  • Talk a lot

  • Stay on the same page

  • Take a moment to celebrate as you complete tasks and overcome problems

  • Communicate calmly and with respect

Some of the Benefits of Pair Programming

  • Increased code quality: "programming out loud" leads to clearer articulation of the complexities and hidden details in coding tasks, reducing the risk of error or going down blind alleys
  • Better transfer of skills, as junior developers pick up broader skills from more experienced team members
  • Improved resiliency of a pair to interruptions, compared to an individual developer: when one member of the pair must attend to an external prompt, the other can remains focused on the task and can assist in regaining focus afterwards

Some Arguments You may hear against Pair Programming


  • Both programmers must be actively engaging with the task throughout a paired session, otherwise no benefit can be expected

  • A simplistic but often raised objection is that pairing "doubles costs"; that is a misconception based on equating programming with typing - however, one should be aware that this is the worst-case outcome of poorly applied pairing

  • At least the driver, and possibly both programmers, are expected to keep up a running commentary; pair programming is also "programming out loud" - if the driver is silent, the navigator should intervene

  • As a beginner we will be working on the ability to participate as navigator, in particular, to intervene appropriately and able to participate as driver, in particular to explain code while writing it

  • Stay on the same page

  • Take a moment to celebrate as you complete tasks and overcome problems

  • Communicate calmly and with respect

Pomodoro Technique

During pair programming in class we will be using the Pomodoro technique. This will accomplish two things:

  • Ensure that you look after yourselves when working for long periods at a desk by taking regular breaks, it also makes sure that everyone gets a fair crack at "driving" and "navigating".
  • Essential to the Pomodoro Technique is the notion that taking short, scheduled breaks while working eliminates the "running on fumes" feeling you get when you've pushed yourself too hard.

Whether it's a call or a Facebook message, many distracting thoughts and events come up when you're at work. The Pomodoro Technique will help you log your distractions and order them according to priority levels.

We can keep track of the time by using the Tomato Timer. This is simple to use and will keep you on track.

Things that you could or should do during your break:

Try some simple desk exercises. WorkAwesome is a good source for these or simply take a walk. Do a simple hand or neck massage to release tension and breathing exercises. Do a quick organizational chore. Just something small, like reorganizing your bag or your desk area. And it is important to hydrate.

Core Protocols

At LEARN we use the Core Protocols to facilitate effective communication.

Some of the most used protocols are:





Sources:

Atom Basics

Open file in the terminal with atom

  • atom .

Configure preferences

  • Atom > Preferences > Editor Settings > Indent guide or Auto indent or Softwrap or Packages or Minimap

Useful Keybindings

As you become more familiar with the keyboard, it is important to start to use keybindings to quicken up how you navigate around a file. The fewer times you have to move your hands away from the keyboard, the more efficient you will become as a programmer. Below are some of the more useful keybindings in Atom:

Operation Keys
How to indent and out-indent lines `tab` / `shift + tab`
How to indent and out-indent blocks `cmd + l` (multiple times), then `tab`
How to comment/out a line or block `cmd + l` (multiple times for a block), then `cmd + /`
How to move lines up and down Select line(s) if necessary, then `ctrl + cmd + up` or `ctrl + cmd + down`
How to do multi-insert click in various places with `cmd` pressed, then type the change, and finally click out
How to split pane left/right/up/down `cmd + k`, `left`/`right`/`up`/`down`

There is a useful cheat sheet with more keybindings here... Atom Cheat Sheet

Atom on the LEARN work stations have been set up to autosave, that is files are automagically saved when you click in another window.

Tech Stack

Front End

View

  • HTML
  • CSS
  • Javascript
  • React

Business Processes

Controller

  • Ruby
  • Ruby on Rails

Persistant Storage

Model

  • PostgreSQL
  • ActiveRecord

MVC

For more info on MVC and why its important, we recommend this video:
CS50 MVC

Command Line Basics

Terminal

Get to your terminal

  • Spotlight
  • Search for "terminal"
  • Enter

Change the look

  • Shell
  • New Window
  • Choose style

Command Line Basics

Command Description
pwd shows what directory you are in
ls list out all directories and files available
cd is your home directory
cd desktop puts you into the desktop directory
mkdir my_folder creates a new directory called my_folder
open . opens the directory as if you double clicked on a folder.
atom . opens the atom editor within your current directory.
; semicolon allows multiple commands in sequence.
cd /drag/and/drop/folder puts path to directory
cd .. goes back one directory
history see all commands used
clear clear the terminal

Command Line Navigation

Command Description
Arrow up/down scrolls through history of commands
alt-(arrow key) moves cursor to beginning of command
tab when half-way through a command, tab will autocomplete
command - k clears the screen
command - + increase Terminal text size

Quickly access a file or folder in the Terminal

Tab completion is great for terminal-only approaches to accessing projects, however, for the local system you can simply drag and drop any file or folder to the Terminal window, that will enter a full path at the point of the cursor. Once the Finder item has been dropped into the terminal, the entire path to the item is automatically typed out instantaneously, maintaining both proper capitalization as well as automatically filling in the appropriate \ before a space appears.

Command Line Challenge

Working in Terminal and Atom

  • Open a terminal.
  • Change the look
  • Show what directory you are in.
  • List out all directories available.
  • Get to the desktop directory.
  • Create a new directory and get into the newly created directory.
  • Open the directory in a window.
  • Open the directory in Atom.
  • Go back to the desktop directory.
  • Drag and Drop for a directories path.
  • Show passed commands used
  • Clear the Terminal
  • Arrow up
  • Increase the Terminal text size
  • Move cursor to beginning of text

Todays Tentative Schedule


9:00 - 9:30 - Initial Meet and Greet


9:30 - 10:00 - Welcome Package


10:00 - 11:00 - Contents, working forms, emotional wellbeing


11:15 - Pairing Demo


11:15 - 12:00 Icebreaker


12:00 - 1:00 Lunch


1:30 - Tech Stack Presentation


2:30 - Command Line


3:30 - Git Demo


5:00 - End of Class