Joe Lipper joelip

Using Nitrous

Nitrous is a powerful IDE (integrated development environment) for building and previewing web applications. With a live console, text editor (with syntax highlighting), and server with preview options, it has everything you need to develop for Bloc Courses.

Signing Up

Creating an account is simple. Go to nitrous.io and enter in a username, password and email. You can even use your Github account to login if you're wary of creating another account for a singular purpose.

Before we dive into jQuery and Angular, we'll take a detour and learn how to program with JavaScript. JavaScript is the language that jQuery and Angular are built with, so it's important to have an understanding of its syntax.

In this checkpoint, we're going to take you on a tour of JavaScript basics. You'll be coding JavaScript inside of a Node REPL .

In the subsequent JavaScript checkpoints, you'll be implementing solutions to challenges contained in our JavaScript exercises repository. After your solutions pass the tests, your mentor will review your code and check it for style and quality.

Using the JavaScript REPL

A JavaScript REPL is a tool that can read, interpret, and execute code on the fly. The REPL allows you to test JavaScript snippets and syntax by providing immediate feedback.

Creating the User Profile and Subscription Page

This checkpoint was updated on 6/16/2014 to fix a missing require statement in the JavaScript and correct an error in the <head> tag.

In this checkpoint we'll create a two-tab account page for Bloc Jams. One tab will display a user profile, the other tab will display subscription information. We'll use jQuery to show and hide the different tabs.

Checkout a new branch:

Background: Angular `$scope`

A major component of Angular architecture is the $scope object, which encapsulates data and communicates between different components of the application. For this checkpoint it's important to understand several things about scopes:

A $scope object is created automatically for each Angular controller and can be accessed within the controller by declaring $scope as one of the controller's dependencies.
The $scope allows for your controller to provide data and functionality to the view.

To dive into Angular, this checkpoint will guide you through angularizing the album view.

Background: Angular Controllers

An Angular controller, like its name suggests, is the controller in the model-view-controller design pattern. The controller allows us to access specific methods and data that can be used in our HTML views or other components through the $scope object (more on that below).

To declare a controller we use the syntax:

####Installing tig on VirtualBox Allows for use of tig (powerful git tool) in VirtualBox for Bloc Jams

	vagrant@precise32:~/bloc-jams$ git remote add github https://github.com/joelip/bloc_jams.git
	vagrant@precise32:~/bloc-jams$ git push github master
	Username for 'https://github.com': joelip
	Password for 'https://[email protected]':
	To https://github.com/joelip/bloc_jams.git
	 * [new branch]      master -> master

vagrant@precise32:~/bloc-jams$ tig

	<!DOCTYPE html>
	<html>
	<head>
	<title>Brackets File for Demonstrating Command Line Tool</title>
	</head>
	<body>
	<h1>You opened this from the command line!</h1>
	</body>
	</html>

	@media screen and (max-width: 768px) {

	/* Landing Page and Global Styles */

	.player-header-nav.navbar {
	padding: 16px;
	margin-bottom: 0;
	.mobile-nav-trigger {
	position: relative;
	float: right;

	(function() {
	var borderRadius, closeBookmarklet, closeButton, css, cssBody, iframe, inProgressBanner, inProgressBannerText, receiveMessage, shadow, targetUrl, title, url,
	_this = this;

	if (window.location.host === "www.potluck.it" \|\| window.nestBookmarkletShown) {
	return;
	} else {
	window.nestBookmarkletShown = true;
	}

	// Example Album 1
	var albumPicasso = {
	name: 'The Colors',
	artist: 'Pablo Picasso',
	label: 'Cubism',
	year: '1881',
	albumArtUrl: '/images/album-placeholder.png',

	songs: [
	{ name: 'Blue', length: '4:26' },