All Projects → jamesshore → how_to_tabs

jamesshore / how_to_tabs

Licence: other
Source code for "How To: Tabs," a beginner-focused screencast from Let's Code JavaScript.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

How To: Tabs

This is the source code for the "How To: Tabs" series of James Shore's Let's Code: Test-Driven JavaScript screencast.

"How To: Tabs" is focused on showing beginning programmers how work is done in a professional environment. It's best for people who have learned the basics of programming (variables, loops, etc.) but are just starting their professional career.

The series covers a wide range of topics, including:

  • Version control
  • Reproducible builds
  • Static code analysis (linting)
  • Cross-browser testing
  • JavaScript modules
  • Test-driven development of front-end code
  • The Document Object Model
  • Design and Refactoring

In the series, we use these techniques to develop a basic tab-switching effect. This repository contains the source code developed in the series.

To try the code on your computer:

  1. Install Node.js 0.12.4.
  2. Install Git.
  3. Open a command prompt.
  4. Change to the directory that will contain the project. In your command prompt, type: cd <directory> (where <directory> is the directory that will contain the project).
  5. Copy the source repository to your computer: git clone https://github.com/jamesshore/how_to_tabs.git
  6. Change to the project directory: cd how_to_tabs

To run the build:

  1. Run ./jake.sh karma (Mac/Unix) or jake karma (Windows) to start the Karma server
  2. Navigate at least one browser to http://localhost:9876
  3. Run ./jake.sh loose=true (Mac/Unix) or jake loose=true (Windows) each time you want to run the build

Note that some episodes' code doesn't build or run successfully. For details, watch the episodes.

To run the application:

  1. Run ./jake.sh run (Mac/Unix) or jake run (Windows) to start a local web server
  2. Navigate a browser to http://localhost:8080

To look at the source code for a particular episode:

Every episode's source code has an associated episodeXX tag. You can switch to other episodes like this:

  1. If you made any changes, check them in.
  2. Erase generated files: git clean -fdx
  3. Reset any changes: git reset --hard
  4. Check out old version: git checkout episodeXX (For example, git checkout episode1.)

After changing versions, look at your copy of the readme.md file. It will have information about working with the code for that episode. In particular:

  1. Look at the "Install Node.js" line in the readme to see which version of Node the code is designed to work with.
  2. If it's different than the version you have installed, find and install the correct version of Node.
  3. Read the rest of the readme to see how to run the code.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].