-
-
-
-
-
-```
-The index.html is pretty simple, all it does is load the client.js file and provide a
-a div for the app and one for the view. The app.js that browserify uses to create the
-client.js will look like this:
-```javascript
-require('angular/angular');
-require('angular-route');
-require('angular-cookies');
-require('angular-base64');
-
-var notesApp = angular.module('notesApp', ['ngRoute', 'base64', 'ngCookies']);
-
-require('./controllers/notesController')(notesApp);
-require('./controllers/usersController')(notesApp);
-
-notesApp.config(['$routeProvider', function($routeProvider) {
- $routeProvider
- .when('/notes', {
- templateUrl: 'views/notes.html',
- controller: 'NotesController'
- })
- .when('/signin', {
- templateUrl: 'views/signin.html',
- controller: 'SigninController'
- })
- .otherwise({
- redirectTo: '/signin'
- });
-}]);
-```
-This code won't actually run as is, the controllers and the view have yet to be added but
-this is the overall structure of the app. It creates our notesApp object and then passes
-the notesApp object to the controller files to add the users and notes controllers. Then
-the /notes and /signin route are added to the notesApp with signin as the default.
-
-The next step is to create the signin controller and view. First the view which should be located
-in app/views/signin.html and should look something like this:
-```html
-
-
-```
-This view is bound to the SigninController controller. This view contains an email field and
-a password field and a button that when clicked runs the signin method of the controller.
-Pretty simple as far as views go. Now, it's time to create the SigninController, which
-will be located at app/controllers/signinController.js and should contain the following code:
-```javascript
-module.exports = function(app) {
- app.controller('SigninController', function($scope, $http, $base64, $cookies, $location) {
- $scope.signin = function() {
- $http.defaults.headers.common['Authentication'] = 'Basic ' + $base64.encode($scope.user.email + ':' + $scope.user.password);
- $http({
- method: 'GET',
- url: '/api/v1/users',
- }).success(function(data) {
- $cookies.jwt = data.jwt;
- $location.path('/notes');
- }).error(function(data) {
- console.log(data):
- });
- }
- });
-}
-```
-This controller really only contains the singin function which has two parts. First the controller
-sets the authentication header for the request. Of note is that passport basic authentication actually
-expects the basic auth to be base64 encoded. While this doesn't actually provide a secure means of
-transportation and isn't a replacement for https, it does prevent the password from being transported
-in the clear. The next portion of the signin function sends the request to the singin url and
-on success will set the response jwt to a browser cookie using the $cookie library. After setting
-the cookie it redirects to the /notes path. Which means, that the next file to create is the notesView.html
-in app/views/notesView.html
-```javascript
-Sign In
- - -
-
-```
-The notes view is simple, all it does is display the note body for each note. The next step is to
-add the note controller in app/controllers/notesController.js
-```javascript
-module.exports = function(app) {
- app.controller('NotesController', function($scope, $http, $cookies) {
- $http.defaults.headers.common['jwt'] = $cookies.jwt;
- $http({
- method: 'GET',
- url: '/api/v1/notes'
- }).success(function(data) {
- $scope.notes = data;
- }).error(function(data) {
- console.log(data);
- });
- });
-}
-```
-This controller once again sets a header but this time it is the JWT that was received after successfully
-authenticating and saved to a browser cookie. This does assume that the server side api can read the
-jwt from the headers and not the body of the request. Which should be as simple as changing the line
-in jwtauth from `var token = req.body.jwt_token` to `var token = (req.body && req.body.jwt_token) || req.headers.jwt`
-and then it should authenticate and send back an array of notes.
diff --git a/auth_auth/basic_authentication.md b/auth_auth/basic_authentication.md
deleted file mode 100644
index 9296ea7..0000000
--- a/auth_auth/basic_authentication.md
+++ /dev/null
@@ -1,316 +0,0 @@
-JSON Authentioncation with Passport and Basic HTTP
-===================================================
-Many modern web applications have an architecture that involves a client side
-Javascript web app talking to serverside persistence layer over JSON.
-
-Authentiation over a JSON api is a tricky subject, primarily due to its stateless nature.
-
-Although http is technically stateless, the browser is capable of storing
-cookies that can be checked by a webserver when requests are made to it. But
-with a JSON api the server does not have direct access to the browser. Each
-request has no knowledge of any of the previous requests, meaning that each
-request that needs to be authenticated needs to transmit its credentials with
-the request. The eventual goal is to have a piece of information that can be
-easily passed to every request that tells nothing about the user if passed in
-the clear. Most APIs (such as Twitter or Facebook) use a public/private key that
-have to be created on their site in order to use their api but asking a user to
-do this in order to use a website would be ridiculous. The goal is to have a token
-that will be created by the server and passed back to the client that can then
-sent with every request that needs to be authenticated. Eventually this well be
-JSON Web Token that contains an encrypted set of information that allows
-the server to find the user and all their attributes. However, the server
-first needs to determine if the should sent the token the client requesting it,
-which will require a user name and password.
-
-I have found two easy ways to implement this with passport, HTTP Basic and Digest.
-The basic method of authentication sends the username and password over in
-plain text which is less than ideal but digest request that the password be
-stored in plain text in the server's database which is even less ideal.
-Considering how easy it is to use HTTPS using node and frequently servers
-seem to get broken into my personal preference is to use http basic over a
-secured connection. During development the server will be using a self signed
-certificate but in production this would need be replaced with actual ssl
-cert to avoid scary warnings in the browser. Instructions on how to generate
-a certificate can be found here.
-
-The first step to authentication a node server with JSON api is to create a
-node server with a JSON api. Create a new repository with a package.json file
-that looks something like this.
-```javascript
-{
- "name" : "awesome-json-api",
- "description" : "my super awesome json api",
- "version" : "0.0.1",
- "dependencies" : {
- "express" : "^4.x",
- "passport" : "^0.2",
- "passport-http" : "^0.2"
- "mongoose" : "^3.8",
- "bcrypt" : "latest",
- "jwt-simple" : "^0.2",
- "moment" : "^2.7"
- }
-}
-```
-In our package.json file we're including express 4, passport for general passportyness,
-passport-http which provides the http-basic authentication mongoose for saving users to
-the database and bcrypt for encrypting the passwords that will be saved in the database.
-Make sure to run `npm install` from the root directory as well as generate a self signed
-ssl cert and key and place them in a folder called config. Now create a server.js file that looks
-something like this.
-```javascript
-var express = require('express');
-var passport = require('passport');
-var mongoose = require('mongoose');
-var https = require('https');
-var fs = require('fs');
-
-var app = express();
-
-var options = {
- key: fs.readFileSync('config/key.pem'):
- cert: fs.readFileSync('config.cert.pem'):
-};
-
-app.get('/', function(req, res) {
- res.json({'msg' : 'hello world!'});
-});
-
-var server = https.createServer(options, app);
-server.listen(process.env.PORT || 3000, function() {
- console.log('server running on port: ' + process.env.PORT || 3000);
-});
-```
-This server.js file pulls in the self signed certificate and key and creates a hello world
-https server based on those. The current version of this file also pulls in all of the libraries
-that will eventually be needed for authentication. The next step in the process is going to be
-the creation of a User model. This particular model comes primarily from the authentication
-setup described on the scotch.io site.
-the method of authentication there is pretty awesome but it doesn't work over a JSON api as
-it requires both access to the browser through session cookies and uses redirects for success/failure.
-Create a directory called called models from the project root and add the following User.js file to that
-directory.
-```javascript
-//models/User.js
-
-var mongoose = require('mongoose');
-var bcrypt = require('bcrypt');
-var jwt = reuqire('jwt');
-var moment = require('moment');
-
-var userSchema = mongoose.Schema({
- basic: {
- email: String,
- password: String
- }
-});
-
-userSchema.methods.generateHash = function(password) {
- return bcrypt.hashSync(password, bcrypt.genSaltSync(8), null);
-};
-
-userSchema.methods.checkHash = function(password) {
- return bcrypt.compareSync(password, this.basic.password);
-};
-
-userSchema.methods.createJWTToken = function(app) {
- var expires = moment().add('days', 7).valueOf();
- var that = this;
- var token = jwt.encode({
- iss: that._id,
- expires: expires
- }, app.get('jwtTokenSecret'));
- return token
-};
-
-module.exports = mongoose.model('User', userSchema);
-```
-This user model contains three methods, one that will run an incoming password through a one way hash
-and one that will check an incoming password against a hash saved in the database. Bcrypt handles
-all of details of encrypting a password and adding salt through the genSaltSync command. Keep in mind that
-the higher the number passed into that function the longer it will take to save a user to the database or
-check if a user's credentials are correct. It's a synchronous function so this is less than ideal.
-The third method is used to generate a JSON Web Token after a user's credentials have been successfully
-authenticated, I will go over this function once we get to the JWT portion of this tutorial.
-
-Now that the user model has been created, passport needs to know how to use it to authenticate requests.
-I like to keep all of my authentication related js files in lib/authentication/, create both those folders
-and add the following passportBasic.js file to it.
-```javascript
-//lib/authentication/passportBasic.js
-var BasicStrategy = require('passport-http').BasicStrategy;
-var User = require('../../models/User');
-
-module.exports = function(passport) {
- passport.use('basic', new BasicStrategy({
- usernameField: 'email',
- passwordField: 'password'
- },
- function(email, passord, done) {
- User.findOne({'basic.email': 'email'}, function(err, user){
- if(err) {
- return done(err);
- }
-
- if(!user) {
- return done(null, false);
- }
-
- if(!user.validPassword(password)) {
- return done(null, false);
- }
-
- return done(null, user);
- });
- }));
-};
-```
-This file essentially specifies what conditions mark a successful authentication. First we attempt to find the user
-if there's a error we return the error. If the user doesn't exist we return false for authentication. If the
-password doesn't authenticate we return false. If the program makes it past those conditions it means it found a
-valid user and we return the user to passport. Passport knows that if false is returned from this function it should send
-a 401 unauthorized to the client making the request. Something to keep in mind, this passport definition is only
-going to be used when a user signs in. When a user is created it won't need to go through an authentication process
-and every other request should be authenticated with the JWT that will be generated upon a successful sign in.
-The next step is to create the sign up/sign in routes for the application. Create a routes directory from the root directory
-and add the following userRoutes.js file to that directory.
-```javascript
-var user = require('../models/userRoutes');
-
-module.exports = function(app, passport) {
- app.post('/api/v1/users', function(req, res) {
- User.findOne({'basic.email': req.body.email}, function(err, user) {
- if(err) {
- return res.json(500, err);
- }
-
- if(user) {
- return res.json(401, {'msg' : 'email in use'}):
- }
-
- var newUser = new User();
- newUser.basic.email = req.body.email;
- newUser.basic.password = newUser.generateHash(req.body.password);
-
- newUser.save(function(err, resUser) {
- if(err) {
- return res.json(500, err);
- }
-
- return res.json(resUser):
- });
- });
- });
-
- app.get('api/v1/users', passport.authenticate('basic', {session: false}), function(req, res) {
- return res.json({'jwt': req.user.createToken(app)});
- });
-};
-```
-The first function creates a user on a post request and saves it to the database if there is no other user with
-the specified email after hashing the incoming password. With the login route(a get request /api/v1/users)
-the request will go through the authentication we specified with passport and if successful it will run
-the function that has been specified in the get route. The last step to hooking up basic authentication is to
-add it to the server.js file.
-```javascript
-var express = require('express');
-var passport = require('passport');
-var mongoose = require('mongoose');
-var https = require('https');
-var fs = require('fs');
-
-var app = express();
-
-app.set('jwtTokenSecret', process.env.JWT_SECRET || 'changemechangemechangeme');
-require('./lib/authentication/pasportBasic')(passport);
-require('./routes/userRoutes')(app, passport);
-
-var options = {
- key: fs.readFileSync('config/key.pem'):
- cert: fs.readFileSync('config.cert.pem'):
-};
-
-app.get('/', function(req, res) {
- res.json({'msg' : 'hello world!'});
-});
-
-var server = https.createServer(options, app);
-server.listen(process.env.PORT || 3000, function() {
- console.log('server running on port: ' + process.env.PORT || 3000);
-});
-```
-Those two require lines are all it takes to add the authentication to passport and then add the signup/signin routes
-to the app. This new server.js also sets the jwtTokenSecret that is used to encrypt the JSON web tokens that the
-User model generates.
-
-There is only one more piece to add to this application to be able to authenticate with JSON Web Tokens, the actual
-middleware that checks if the token/user on the incoming request is valid. Create a jwtAuth.js file in lib/authentication
-with the following code:
-```javascript
-//lib/authentication/jwtAuth.js
-
-var User = require('../../models/User');
-var jwt = require('jwt-simple');
-
-module.exports = function(app) {
- var jwtauth = {};
-
- jwtauth.auth = function(req, res, next) {
- var token = req.body.jwt;
-
- if(!token) {
- return res.send(401, {'msg': 'no token specified'});
- }
-
- var decoded = jwt.decode(token, app.get('jwtTokenSecret'));
- User.findOne({'_id': decoded.iss}, function(err, user) {
- if(err) {
- return res.send(500, err);
- }
-
- if(!user) {
- return res.send(401);
- }
-
- req.user = user;
- return next();
- });
- };
-};
-```
-In this function we create a jwtauth object with an auth function. This is due to the need to use a function as middleware
-which request a specific format a specific format but the app needs to passed in to the exported function in order to access the token secret.
-This function attempts to decode the token if one is specified. After the token is decoded this function attempts to find
-a user with the specified id and if one exists it calls the next function. If any of these conditions are not met the
-app sends a 401. This function can be placed within the call chain of a route. For instance to use it in our server.js
-hello world route we just add it before the function that sends hello world.
- ```javascript
-var express = require('express');
-var passport = require('passport');
-var mongoose = require('mongoose');
-var https = require('https');
-var fs = require('fs');
-
-var app = express();
-
-var jwtauth = require('./lib/authentication/jwtAuth')(app);
-
-app.set('jwtTokenSecret', process.env.JWT_SECRET || 'changemechangemechangeme');
-require('./lib/authentication/pasportBasic')(passport);
-require('./routes/userRoutes')(app, passport);
-
-var options = {
- key: fs.readFileSync('config/key.pem'):
- cert: fs.readFileSync('config.cert.pem'):
-};
-
-app.get('/', jwtauth.auth, function(req, res) {
- res.json({'msg' : 'hello world!'});
-});
-
-var server = https.createServer(options, app);
-server.listen(process.env.PORT || 3000, function() {
- console.log('server running on port: ' + process.env.PORT || 3000);
-});
-```
-To use the jwt authentication middleware just require it into the app and place it in the function chain for a route.
diff --git a/backbone/README.md b/backbone/README.md
deleted file mode 100644
index 1731d29..0000000
--- a/backbone/README.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Backbone! All the vertebrae you never wanted
-
-Backbone is a JavaScript library used for making Single Page Applications ([SPAs](http://en.wikipedia.org/wiki/Single-page_application))
-
-
-jQuery is awesome. Underscore is awesome. But Backbone is even better because it combines both, and gives your web app structure.
-
-SPAs have these benefits (over server generated pages):
-
-- Better User Experience. Code running in the browser is more responsive than waiting for a server generated page.
-
-- Models "get your truth out of the DOM". There should only ever be a single source of truth for any given item of information in your code.
-
-
-Why do we still teach Backbone over newer, more trendy frameworks?
-
-- Because it's a library, not a framework (smaller)
-
-- Because it's used at scale: Walmart.com. Enough said.
-
-- Because you learn more JavaScript by using it than Angular or Ember
-
-Backbone is used at other large companies, too:
-- LinkedIn
-- Trello
-- AirBnB
-- SoundCloud
-- Foursquare
-- Hulu
-- USAToday
-
-Backbone uses the MVC design pattern:
-
-
diff --git a/backbone/backbone_crud.md b/backbone/backbone_crud.md
deleted file mode 100644
index 01699d0..0000000
--- a/backbone/backbone_crud.md
+++ /dev/null
@@ -1,267 +0,0 @@
-Backbone CRUD
-===============================
-The final step in our backbone application is to make a CRUD interface
-for our Backbone app. CRUD stands for Create, Read, Update, Destroy
-and represents the basic functionality you need to have a working app.
-In the case of our Notes application we need to be able to create
-a new note, see that note, edit that note and remove that note from our
-notes list. We already have this CRUD setup on our express app, now
-we just a way for the average user to be able to do the same thing.
-
-We already have two different methods of 'reading' our notes. Both the
-simple view and the notes collection view. The next step is going to be
-the creation of new notes. There are three main pieces to this functionality.
-First, we need a template that contains a form for the note. Then, we need a
-view to be able to render the form. Finally, we need an action can get
-the data from the form and save it to our database using the rest api.
-
-Create a NoteForm.hbs file under `app/js/notes/templates` with the following
-code:
-
-```html
-
-```
-
-All this template contains is a text form for our note which really
-is just the noteBody. The next step is to create the view to contain
-this noteBody, which will contain the actual logic for creating the
-note and saving it. Add a file called NoteFormView.js to `app/js/notes/views`
-with the following code:
-
-```javascript
-// app/js/notes/views/NoteFormView.js
-
-'use strict';
-var Backbone = require('backbone');
-var $ = require('jquery');
-Backbone.$ = $;
-
-module.exports = Backbone.View.extend({
- tagName: 'div'
-
- intialize: function() {
- this.render();
- },
-
- events: {
- submit: "save"
- },
-
- render: function() {
- var template = require('../templates/NoteForm.hbs');
- this.$el.html(template(this.model.toJSON()));
- return this;
- },
-
- save: function(e) {
- e.preventDefault();
- var newNoteBody = this.$('input[name=noteBody]').val();
- this.model.save({noteBody: newNoteBody}, {
- success: function() {
- Backbone.history.navigate('index', {trigger: true});
- },
- error: function() {
- console.log('could not save note');
- }
- });
- }
-});
-```
-
-There is a lot of new functionality in this view. The first thing to notice is
-the events object, which is a lot like the routes object in our router. The left
-side of each entry is the action that we're listening for and the right side is
-the function to call when that action happens. In our case we're waiting for the
-notes form to be submitting and when that happens we call the save function.
-Notice that we don't require note model into this view. Instead we rely on the
-router to place the note model into our view as the model parameter and use the
-mode.save function with our new data specified in the first object argument
-We could instead do something like this:
-
-```javascript
-save: function(e) {
- var newNoteBody = this.$('input[name=noteBody]').val();
- var newNote = new Note();
- newNote.set('noteBody', newNoteBody);
- newNote.save({}, {
- success: function() {
- Backbone.history.navigate('index', {trigger: true});
- },
- error: function() {
- console.log('could not save note');
- }
- });
-}
-```
-
-And that would accomplish the same task but it would require that we pull in the
-Note model at the top of our view code. On a successful save you'll notice
-another new method `Backbone.history.navigate('index', {trigger: true})`
-which will send us to the index action of our router. The {trigger: true}
-options tells navigate to go to that page now.
-
-The main benefit of using the generic model.save form rather than creating a new model
-in our view and setting the parameters is that we can use the same functionality for
-updating our note. Instead of passing a new not into the model in the router, we can just pass
-a preexisting model. The next step, it would seem, is to exit our notes router.
-
-```javascript
-// NotesRouter.js
-
-'use strict';
-var Backbone = require('backbone');
-var $ = require('jquery');
-Backbone.$ = $;
-var Note = require('../models/Note');
-var SimpleNoteView = require('../views/SimpleView');
-var NotesCollection = require('../collections/NotesCollection');
-var NotesCollectionView = require('../views/NotesCollectionView');
-var NoteFormView = require('../views/NoteFormView');
-
-module.exports = Backbone.Router.extend({
- routes: {
- "notes": "index",
- "notes/new": "create",
- "notes/edit/:id": "update"
- },
-
- index: function() {
- var self = this;
- this.notes = new NotesCollection();
- this.notes.fetch();
- this.notesView = new NotesCollectionView({collection: self.notes});
- this.notesView.render();
- $('#content').html(self.notesView.el);
- },
-
- create: function() {
- var note = new Note();
- var noteFormView = new NoteFormView({model: note});
- $('#content').html(noteFormView.el);
- },
-
- update: function(id) {
- var note = new Note({'_id': 'id'});
- var noteFormView = new NoteFormView({model: note});
- note.fetch({
- success: function() {
- noteFormView.render();
- $('#content').html(noteFormView.el);
- },
- error: function() {
- cosole.log('couldn't find note');
- Backbone.history.navigate('index', {trigger: true});
- }
- })
- }
-});
-```
-
-Notice in the `:id` in the update route for, this tells backbone that any text
-following the `notes/edit` should be saved into the id variable which you'll notice
-is a parameter for the update function. We then use this variable to find the note
-that we're looking for and send it in as the model for the form model. If we find
-the model we render the form and set our content to that view. If not, we got back
-to the index route.
-
-Before we create links to all of these new routes we need to create a delete route.
-We can actually do this without creating a new view and just place it as an action
-in our router.
-
-```javascript
-// NotesRouter.js
-
-'use strict';
-var Backbone = require('backbone');
-var $ = require('jquery');
-Backbone.$ = $;
-
-var Note = require('../models/Note');
-var SimpleNoteView = require('../views/SimpleView');
-var NotesCollection = require('../collections/NotesCollection');
-var NotesCollectionView = require('../views/NotesCollectionView');
-var NoteFormView = require('../views/NoteFormView');
-
-module.exports = Backbone.Router.extend({
- routes: {
- "notes": "index",
- "notes/new": "create",
- "notes/edit/:id": "update",
- "notes/delete/:id": "destroy"
- },
-
- index: function() {
- var self = this;
- this.notes = new NotesCollection();
- this.notes.fetch();
- this.notesView = new NotesCollectionView({collection: self.notes});
- this.notesView.render();
- $('#content').html(self.notesView.el);
- },
-
- create: function() {
- var note = new Note();
- var noteFormView = new NoteFormView({model: note});
- $('#content').html(noteFormView.el);
- },
-
- update: function(id) {
- var note = new Note({'_id': id});
- var noteFormView = new NoteFormView({model: note});
- note.fetch({
- success: function() {
- noteFormView.render();
- $('#content').html(noteFormView.el);
- },
- error: function() {
- cosole.log('couldn't find note');
- Backbone.history.navigate('index', {trigger: true});
- }
- })
- },
-
- destroy: function(id) {
- var note = new Note({'_id': id});
- note.destroy({
- success: function() {
- console.log('note deleted');
- },
- error: function() {
- console.log('note could not be deleted');
- }
- });
- }
-});
-```
-
-All we do is create a new not with the id of the note that we're trying to delete
-and then calling the destroy function on that note. Backbone takes care of sending
-the proper request to our rest api. We don't need to add the redirect as this action
-won't have a view rendered for it, so we should already be on the index page.
-
-Now we need to add link to all of these functions. We really only have to do this
-in two places: the note simple view and the collection view. We'll add the update
-and destroy actions to the simple view and the new action to the collection view.
-Update the simple view template to look like this:
-
-```html
-Notes
-
-
-{{note.noteBody}}
-{{noteBody}}
-Edit Note -Delete Note -``` - -We use href link in this case as I find them easier to work with than the backbone -navigate feature. Although if you change your routing they will all have to be -update, tradeoffs. Next update the collection view to look like this: - -```html -New Note -Notes:
- -``` - -With that, we should now have a working crud interface that allows us to successfully -CRUD notes. diff --git a/backbone/collections.md b/backbone/collections.md deleted file mode 100644 index f701969..0000000 --- a/backbone/collections.md +++ /dev/null @@ -1,113 +0,0 @@ -Backbone Collections -========================================== -Backbone collections are a container for multiple Backbone models. -The represent the primary way that we will be communicating with our -Node/Express REST api. Create a collection directory under app/js/notes -and then create a NotesCollection.js file with the following code: -```javascript -var backbone = require('backbone'); -var Note = require('../models/Note'); - -module.exports = Backbone.Collection.extend({ - model: Note, - url: 'api/v1_0/notes' -}); -``` -The single Note model has to be required into the collection and set to -the model parameter. This lets Backbone know what the collection is -comprised of. The url parameter tells Backbone where to make REST -requests to in order to retrieve the data that we need. The collection -model has a fetch method that actually goes and retrieves the data -from our REST api. To use it, modify your client.js to look something -like this: -```javascript -var Note = require('./notes/models/Note'); -var NotesCollection = require('./notes/collections/NotesCollection'); -var SimpleView = require('./notes/views/SimpleView'); - -var notes = new NotesColleciton(); -notes.fetch({ - success: function() { - console.log(notes); - }, - error: function(err) { - console.log(err); - } -}); -``` -The fetch method takes a promise that has a success parameter and an error -parameter. If you include a promise to fetch this will almost always both -of these parameters will almost always be a function that will perform an -action on success or error. Later, we will actually set up a listener to -reload our view when the data inside of our collection is updated. But -before that we need to actually have a collection view. Create a Collection.hbs -file inside of app/js/notes/templates with the following: -```html -Notes:
- -``` -All we need in this template is a title that will be displayed at the top of the -page and an element to place all of our individual note views into. Now, -we need the actual view. Create a CollectionView.js file inside of app/js/notes/views -with the following code: -```javascript -var Backbone = require('backbone'); -var $ = require('jquery'); -Backbone.$ = $; - -var Note = require('../models/Note.js'); -var NotesCollection = require('../collections/NotesCollection.js'); -var NoteView = require('../views/SimpleView.js'); - -module.exports = Backbone.View.extend({ - tagName: 'div', - - initialize: function() { - this.collection.on('add', this.addNote, this); - this.collection.on('reset', this.addAll, this); - }, - - addNote: function(note) { - var noteView = new NoteView({mode: note}); - this.$el.append(noteView.el); - }, - - addAll: function() { - this.collection.forEach(this.addNote); - }, - - render: function() { - this.addAll(); - } -}); -``` -You will notice that the collection view extends the same backbone view as -our regular view. The only difference is the code that we put inside the -view. The initialize function actually registers two listeners on the collection -object that is passed to the view. The add listener is called when a new -model is added to the collection and the 'reset' function will be called when -a fetch is successfully called on the collection. The addNote function creates a -new view the model that passed to the function. If you remember when a single -view is created it gets rendered immediately. After the view is rendered it is -appended into our collection view. The add function does this for every note model -in the collection and all the render function does is call the add all. - -Now, we need to modify our client.js file to reflect the new collection view. -```javascript -var $ = require('jquery'); -var Notes = require('./notes/collections/NotesCollection'); -var NotesView = require('./notes/views/CollectionView'); - -var notes = new Notes(); -var notesView = new NotesView({collection: notes}); -notesView.render(); - -notes.fetch({ - success: function() { - $('#content').append(noteView); - } -}); -``` -This code first create a new collection and collection view then calls fetch on -the notes collection and on success appends the view to the document. In our case this -document is index.html and after a rebuild we should see all of our notes on the page. diff --git a/backbone/models.md b/backbone/models.md deleted file mode 100644 index 01dc301..0000000 --- a/backbone/models.md +++ /dev/null @@ -1,75 +0,0 @@ -Backbone Models -=========================== -The most fundamental piece of Backbone is the model. The model will -define all of the data interaction for the application. It not only -communicates with the server but also will provide methods for manipulating -that data. - -All of the components of Backbone are created by using the Backbone extends -method but before that we need to get backbone into the notes application. -Beacause Backbone is a client side framework we're going to install it using -bower. `bower install --save backbone jquery`. Jquery isn't a hard dependency -for Backbone but it is frequenty used primarily to tell our views how to get -their information into our html doccument, which will be covered in the views -section. - -After installing Backbone create a models direcotor under the client side app -directory `mkdir -p app/js/notes/models`. Now create a Note.js file in that -directory and add the following code. -```javascript -//Note - -var Backbone = require('backbone'); - -moduled.exports = Backbone.Model.extend({ - defaults: { - noteBody: 'hello world' - } -}); -``` -This file contains a constructor for a very simple model. I like to place a -comment at the top of my model files so I have a reminder besides the file name. -All this model currently does is set a default parameter of gretting to the string -'hello world'. The next step is plug this into our client.js file so it can -actually be used in browser. Modify your cleint.js file to look something like -this: -```javascript -var Backbone = require('backbone'); -var Note = require('./js/notes/Note'); - -var note = new Note(); -console.log(note.get('noteBody')); -``` -If you build using browserify and open this up in a browser the dev console should -have the string 'hello world' printed in it. The get and set methods are the one of -the ways that you can access properties of a backbone model. They both function in -the same way that the express app.get and app.set methods do. The get -takes the name of the parameter that you want the value of and the set method -take the name of a paramatere and a vaue to set it to. Both of these can be -also be accessed using dot notation, although this occasionally leads to unexpected -results. It's usually best to use the get and set methods when possible. - -Now, that console.log line is looking a little long and I need a flimsy excuse -to demonstrate Backbone model methods. Change your FristModel.js file to contain -something like this: -```javascript -//Note -var Backbone = require('backbone'); - -module.exports = Backbone.Model.extend({ - defaults: { - noteBody: 'hello world' - }, - displayNote: function() { - window.console.log(this.get('noteBody')); - } -}); -``` -This new code demonstrates a few new concepts, when in first layer functions in a -Backbone model this refers to the model itself, not the function. Second we can -add methods to Backbone model like we would any other javascript object. Also, -if you want to be able to call global methods like console.log you actually -have to refer to window.console.log. This is due to Backbone scoping which doesn't -give access to globals unless it's explicitly told to. In many cases you can -actually just call console.log but getting in the habbit of calling window.console.log -will save a lot of headache in the future. diff --git a/backbone/overview.md b/backbone/overview.md deleted file mode 100644 index c783ea6..0000000 --- a/backbone/overview.md +++ /dev/null @@ -1,42 +0,0 @@ -Backbone Overview -============================ -Backbone is a clientside mv* javascript web framework. In fact it's really the -oldest client side mv* javascript framework. The initial release for backbone was -back in the ancient times of 2010. Backbone ushered in the new era of web -applications with an mv* framework that sits in the browser and communicates to a server that is primarily in charge of data persistence. - -Backbone is loosely based off of the Model/View/Controller pattern which was created by -smalltalk developers and became massively popular for web development due primarily - to the Ruby on Rails framework. Backbone and - many other frameworks like it tend to have an explicit model and view and something - of their own design that roughly approximates a controller. - -Model --------------- -The Backbone model provides the interaction with the data of a Backbone web -application. It is the way that Backbone communicate with a server and provides -both built in and programmer defined methods for manipulating data. - -View ---------------- -The backbone views define the way that a Backbone application displays the data -gathered from the models. This is the way that Backbone interacts directly with - the browser. The main difference between Backbone and other mv* client side -javascript frameworks is that Backbone doesn't have built in interactions between -the view and the model. All interactions have to be defined by the programmer. - -And the rest ------------------- -The last major component in Backbone is the router. Backbone routers define what -happens when a user navigates to a certain route. It really defines the -interactivity of the application. It acts both as a traditional router and in many -cases a controller. The backbone router will determine which models a route should -grab data from and which views should be rendered to the screen. - -Now you may be asking yourself "WTF would I want to learn Backbone when EmbAngular -has all the magics?" Well, Ember/Angular have do make it very easy to create a -single page web application but it does a lot of the interaction under the hood -and learning one doesn't really give that much insight into the other. Backbone -provides a great learning platform because it doesn't provide the programmer with -a lot of magic. Once a developer learns Backbone it makes it very easy to learn -another more complex framework. diff --git a/backbone/routers.md b/backbone/routers.md deleted file mode 100644 index aa32547..0000000 --- a/backbone/routers.md +++ /dev/null @@ -1,66 +0,0 @@ -Backbone Routers -======================== -Routers are the last backbone component that we'll look at. -Routers determine which views/controllers get loaded based -on user actions. Backbone routers tie all the other pieces together -and really define what actions a user can perform in our application. - -Create the folder `app/js/notes/routers` then place a NotesRouter.js -file in that folder with the following code: -```javascript -//app/js/notes/routes/NotesRouter.js -'use strict'; - -var Backbone = require('backbone'); -var $ = require('jquery'); -Backbone.$ = $; -var Note = require('../models/Note'); -var SimpleNoteView = require('../views/SimpleView'); -var NotesCollection = require('../collections/NotesCollection'); -var NotesCollectionView = require('../views/NotesCollectionView'); - -module.exports = Backbone.Router.extend({ - routes: { - "notes": "index" - }, - - index: function() { - var self = this; - this.notes = new NotesCollection(); - this.notes.fetch(); - var notesView = new NotesCollectionView({collection: self.notes}); - notesView.render(); - $('#content').html(notesView.el); - } -}); -``` - -Alright, there are a lot of new concepts in this short segment of code. -The Router always has a routes parameter that actually sets up the routes -that are available to our application. This routes parameter is a json object -that takes the url to hit from our base and the name of a function to call when -that base in navigated to. In the index function we create both the notes -collection and the notes collection view and save them to the router. -We will eventually change this to occur on initialize but for now we only have -the one action. The collection view then replaces the div in our index.html -page with the id of content and we rebuild and navigate to our index page -we should see all of the notes we have saved in the database. - -Now we need to update our client.js file to reflect the addition of the -router: -```javascript -var Backbone = require('backbone'); -var $ = require('jquery'); -Backbone.$ = $; - -var NotesRouter = require('./notes/routers/NotesRouter'); - -var notesRouter = new NotesRouter(); - -Backbone.history.start(); -``` -You'll notice that our Backbone controller is much cleaner. All we need is -Backbone/jquery and the router. The `Backbone.history.start()` line merely -tells backbone to start routing urls. The router can also take a {pushState: true} -parameter that will translate '/' based routing into Backbone's '#' style routing. -We'll get into that a little more in the next section on CRUD with backbone. diff --git a/backbone/views.md b/backbone/views.md deleted file mode 100644 index d383c2a..0000000 --- a/backbone/views.md +++ /dev/null @@ -1,106 +0,0 @@ -Backbone Views -================== -The next important component in a backbone app is the views/templates. -These dictate how the data from the models are actually displayed. -Each backbone component is actually composed of two different pieces. -First, the template, which is usually a special kind of html file that -allows you to run javascript code in it. Second, the actual view object -that tells backbone how to actually render that html template. So the -first step is going to be to make directories to contain both our views -and our templates `mkdir app/js/notes/templates && mkdir app/js/notes/views`. - -Next we have to actually install the templating engine and tell browserify -how to talk to it. I prefer handlebars -for my templating engine. It's easy to understand and surprisingly powerful. -We're going to actually install the browserify transform hbsfy which is a browserify -plugin used to render hbs templates. `npm install --save-dev hbsfy`. Then change -your browserify task in your Gruntfile.js to look like this: -```javascript -browserify: { - dist: { - files: 'app/**/*.js', - dest: 'dist/client.js', - options: { - transform: ['debowerify', 'hbsfy'] - } - } -} -``` -This tells browserify to run the appropriate files through hbsfy which processes -the handlebars specific lines. For our Note the template is going to be very -simple. Create a file called simpleView.hbs in app/js/notes/templates that -contains the following: -```javascript -{{noteBody}}
-``` -The handlebars templates contain html code with javascript executed in {{}} blocks. -In our case we just want to display the noteBody of the model we are currently -rendering. - -Next create a file named SimpleView.js in app/js/notes/views/ with the -following code: -```javascript -var Backbone = require('backbone'); -var $ = require('jquery'); -Backbone.$ = $; - -module.exports = Backbone.View.extend({ - tagName: 'div', - - initialize: function() { - this.render(); - }, - - render: function() { - var template = require('../templates/simpleTemplate.hbs'); - this.$el.html(template(this.model.attributes)); - return this; - } -); -``` -Alright, there's quite a bit going on in this file. First, we pull in backbone -and jquery then we have to set backbone's internal reference to jquery to the -jquery library we pulled in. This is something specific to browserify and it -isn't necessary with other backbone implementations. Inside of our view object -we first have a tagName. This is the tag that our entire view will be wrapped it. -It could easily be a li element or a section or really any html tag that we want. -For simplicity, I have chosen a div tag. Next, the initialize function gets called -whenever a new instance of this view is created. For this view we really only want -to render the view internally, so we call the render function. In the render -function we first pull in the template that we created earlier and set it -to a variable named(surprise) template. Often you will see this template saved to -a parameter of the view object rather than a variable in the render function but -this pattern doesn't work with browserify. The next line is the real meat of the -view. Each view has an el element that contains all of the html for the view. The -$el lets us take advantage of jQuery functions such as the .html function. Whenever -we render something to the DOM this is the element we use to do it. In this case -we're passing the attributes of our model to the template we defined and rendering -it as html. The last step is to return the copy of the view that we're currently -working on. This updates the reference to the current view after we're done -manipulating it. - -After we create our view the next step is to actually render it to the dom. First -add the following line in the body tag of index.html(make sure you edit the one in -app and not the one in dist). -```html - -``` -Next edit your client.js file to look like this: -```javascript -var $ = require('jquery'); -var Note = require('./notes/models/Note'); -var SimpleView = require('./notes/views/SimpleView'); - -var note = new Note(); -var simpleView = new SimpleView({model: Note}); - -$('#backbone-content').append(simpleView.el); -``` -Now if we build this and open it in the browser we should see 'hello world' in large -friendly letters(friendliness may vary). Notice that when we create the view that -we pass our instance note to it as a model parameter. This is so we can -reference this.model from within the view. When our view is created it automatically -renders it as defined in the initialize function and then we can just append it -to our backbone-content div and it'll be loaded in the dom. - -Well, that's it on views for now. diff --git a/browserify-backbone.md b/browserify-backbone.md deleted file mode 100644 index 188a59f..0000000 --- a/browserify-backbone.md +++ /dev/null @@ -1,124 +0,0 @@ -# Browserify Based Backbone App with Express REST API - -Starting point: https://github.com/ivanoats/notes/tree/49eee7ae639e7d24208942b8044c3ca0f7e3d3e3 - -To get to starting point: -`git clone ivanoats/notes` (or [URL from github](https://www.github.com/ivanoats/notes) - if you're not using [hub](https://www.github.com/github/hub).) -``` -git checkout 49eee7ae63 -git checkout -b start -``` - -# Karma - -[Karma](http://karma-runner.github.io) is our test runner for front-end testing. - -Install karma and the plugins we use: - -``` -npm install -g karma-cli -npm install karma karma-browserify --save-dev -npm install karma-mocha karma-chrome-launcher karma-firefox-launcher karma-phantomjs-launcher --save-dev -``` - -Initialize the Karma configuration: - -``` -karma init test/karma.conf.js -``` - -* Press `tab` to select mocha as the testing framework. - * Choose `no` to use Require.js - - -* Capture any browsers automatically? Sure, Chrome, or Firefox, PhantomJS, Safari, etc. -* What is the location of your source and test files? - -``` -app/js/*.js -test/browser/*.js - -``` - -* Should any of the files included by the previous patterns be excluded ? (empty string) -* Do you want Karma to watch all the files and run the tests on change ? Yes -* You should see something like `Config file generated at "/Users/ivan/dev/notes/test/karma.conf.js"` -* add in 'browserify' as an extra element to the array in the frameworks line - -Here's my generated karma config file: -```javascript -// Karma configuration -// Generated on Wed May 21 2014 18:22:19 GMT-0700 (PDT) - -module.exports = function(config) { - config.set({ - - // base path that will be used to resolve all patterns (eg. files, exclude) - basePath: '..', - - - // frameworks to use - // available frameworks: https://npmjs.org/browse/keyword/karma-adapter - frameworks: ['mocha','browserify'], - - - // list of files / patterns to load in the browser - files: [ - 'app/js/*.js', - 'test/browser/*.js' - ], - - - // list of files to exclude - exclude: [ - - ], - - - // preprocess matching files before serving them to the browser - // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor - preprocessors: { - - }, - - - // test results reporter to use - // possible values: 'dots', 'progress' - // available reporters: https://npmjs.org/browse/keyword/karma-reporter - reporters: ['progress'], - - - // web server port - port: 9876, - - - // enable / disable colors in the output (reporters and logs) - colors: true, - - - // level of logging - // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - logLevel: config.LOG_INFO, - - - // enable / disable watching file and executing tests whenever any file changes - autoWatch: true, - - - // start these browsers - // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher - browsers: ['Chrome', 'Firefox', 'PhantomJS', 'Safari'], - - - // Continuous Integration mode - // if true, Karma captures browsers, runs the tests and exits - singleRun: false - }); -}; - -``` - -# Mocha for Front-End - - diff --git a/casper/acceptance_testing_with_casperjs.md b/casper/acceptance_testing_with_casperjs.md deleted file mode 100644 index 6c631ac..0000000 --- a/casper/acceptance_testing_with_casperjs.md +++ /dev/null @@ -1,139 +0,0 @@ -# Acceptance Testing with CasperJS - -Acceptance testing is also known as "Outside-in", or "black-box" testing. It -tests a system just like a web browser does. Except, instead of a person clicking -on a web browser, a "headless" browser operates in the command line, a bit more -behind the scenes. - - - -There are many options for acceptance testing, but we will be using one called -[CasperJS](http://casperjs.org). - -## Write our first acceptance test - -Let's just test to see if the home page is loading o.k., and that the title tag -and H1 tags are what we expect. Here's the code, it goes in -`test/acceptance/home_page_test.js`: - -BTW, if you want to make a new directory multiple levels deep, you can use: -`mkdir -p test/acceptance` from your project's home directory. - -```javascript -'use strict'; -/*global casper*/ - -casper.test.begin('home page', 3, function suite(test) { - - casper.start('http://localhost:3000/', function() { - test.assertHttpStatus(200); - }); - - casper.then(function(){ - test.assertTitle('Hello World Express', 'title is Hello World Express'); - }); - - casper.then(function() { - test.assertSelectorHasText('h1','Hello World'); - }); - - casper.run(function(){ - test.done(); - }); - -}); -``` - -So, we have three assertions that we expect to be true. The status should be 200 -OK, the title should be "Hello World Express", and the h1 should include the text -"Hello World". - -## Run our acceptance tests - -To run our acceptance test we'll need to make sure to start the express server. -We will use a grunt plugin to automate this. - -You can do this on your personal portfolio site, or your hello world express code. - -#### Hook up Grunt-Express-Server - -From the command line: -`npm install grunt-express-server --save-dev` - -And in Gruntfile.js add: -`grunt.loadNpmTasks('grunt-express-server');` - -#### Install and Configure CasperJS and PhantomJS - -Install Casper and PhantomJS globally, and Grunt integration locally - -``` -npm install -g phantomjs casperjs -npm install grunt-casper --save-dev -npm install grunt-express-server --save-dev -``` - -Edit your `Gruntfile.js` to include tasks like these below: - -```javascript -'use strict'; -module.exports = function(grunt) { - - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-express-server'); - grunt.loadNpmTasks('grunt-casper'); - - grunt.initConfig({ - express: { - options: { - // Override defaults here - }, - dev: { - options: { - script: 'server.js' - } - }, - prod: { - options: { - script: 'server.js', - node_env: 'production' - } - }, - test: { - options: { - script: 'server.js' - } - } - }, - casper: { - acceptance : { - options : { - test : true, - }, - files : { - 'test/acceptance/casper-results.xml' : ['test/acceptance/*_test.js'] - } - } - } - }); - - grunt.registerTask('server', [ 'jshint', 'express:dev' ]); - grunt.registerTask('test',['express:dev','casper']); - grunt.registerTask('default', ['jshint', 'test']); - -}; - -``` - -* I added a `server` task that runs the express server after JSHint passes. -* I added a `test` task that sets up the express server in dev mode, and then runs -the casper tests. -* I set the default task to run JSHint and then the test task. - -## Try it out - -Now try `grunt test` from the command line and see what happens… - - - - diff --git a/communication/connect_to_irc.html b/communication/connect_to_irc.html new file mode 100644 index 0000000..39cb71d --- /dev/null +++ b/communication/connect_to_irc.html @@ -0,0 +1,473 @@ + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/communication/connect_to_irc.md b/communication/connect_to_irc.md
deleted file mode 100644
index 32848a8..0000000
--- a/communication/connect_to_irc.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Connect to IRC
-
-Internet Relay Chat (IRC) despite being an ancient chat protocol, is highly
- used in the JavaScript, Node.js, and general web development community. It's
- __important__ that you're familiar with it and can utilize it for help and to
- connect with others in the community. We have our own channel to model this
- community. The channel has two "bots", a logging bot written in Ruby, and a fun
- bot called "codehue" written in NodeJS.
-
- * Connect to the class IRC channel #[codefellows](http://webchat.freenode.net/?channels=%23codefellows&uio=d4)
- on freenode.net and say hello.
- * If you want to be able to talk on the ##[javascript](http://webchat.freenode.net/?channels=%23%23javascript&uio=d4)
- channel, you need to register a nickname with Freenode. Type
- `/msg NickServ help` to get started from your IRC client.
- * Mac, best free client is [LimeChat](http://limechat.net/mac/).
- * Unix, your package manager should have [XChat](http://xchat.org/) or
- [Pidgin](http://www.pidgin.im/).
- * [http://www.irchelp.org/](http://www.irchelp.org/) is a great intro site if
- you're new to IRC.
- * A short article on irc etiquette: [http://geoff.greer.fm/2012/05/19/programmer-irc-etiquette/](http://geoff.greer.fm/2012/05/19/programmer-irc-etiquette/) Also see
- [https://speakerdeck.com/ivanoats/a-good-question](https://speakerdeck.com/ivanoats/a-good-question)
-
-There is no submission for this assignment. We'll see you on the #codefellows
-channel in class, and on Gitter.IM. They are very useful for sending links to
-everyone during class, asking questions in the evening, or just socializing.
-
-We also use [Gitter.IM](https://gitter.im/codefellows/sea-b20-javascript)
-as a chatroom just for our class. Click on this button to join.
-
-[](https://gitter.im/codefellows/sea-b20-javascript)
diff --git a/day1/README.html b/day1/README.html
new file mode 100644
index 0000000..06df2a8
--- /dev/null
+++ b/day1/README.html
@@ -0,0 +1,448 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Connect to IRC
+Internet Relay Chat (IRC) despite being an ancient chat protocol, is highly + used in the JavaScript, Node.js, and general web development community. It's + important that you're familiar with it and can utilize it for help and to + connect with others in the community. We have our own channel to model this + community. The channel has two "bots", a logging bot written in Ruby, and a fun + bot called "codehue" written in NodeJS.
+-
+
- Connect to the class IRC channel #codefellows +on freenode.net and say hello. +
- If you want to be able to talk on the ##javascript
+channel, you need to register a nickname with Freenode. Type
+
/msg NickServ helpto get started from your IRC client.
+ - Mac, best free client is LimeChat. +
- Unix, your package manager should have XChat or +Pidgin. +
- http://www.irchelp.org/ is a great intro site if +you're new to IRC. +
- A short article on irc etiquette: http://geoff.greer.fm/2012/05/19/programmer-irc-etiquette/ Also see +https://speakerdeck.com/ivanoats/a-good-question +
There is no submission for this assignment. We'll see you on the #codefellows +channel in class, and on Gitter.IM. They are very useful for sending links to +everyone during class, asking questions in the evening, or just socializing.
+We also use Gitter.IM +as a chatroom just for our class. Click on this button to join.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day1/agenda.md b/day1/agenda.md
new file mode 100644
index 0000000..f2741da
--- /dev/null
+++ b/day1/agenda.md
@@ -0,0 +1,22 @@
+# Day One Agenda
+
+- Computer Setup Questions
+ - verify node and npm version
+- Icebreaker.js
+- Core Protocols (Keynote)
+- Go over tools list (Mind Node)
+- Pull Request Workshop
+- Asana overview and mention want ads assignment
+ - don't check off things
+ - add your name as a subtask, use that URL of the subtask
+ - Github integration
+ - where is your API key?
+ - commit message format
+
+- Show video and Talk about Agile, intro Along-the-Way project, and share task in Asana
+- Check in on IRC / Gitter.IM
+- Demo Grunt and File Redirection
+
+- Get started on Day 2 - The Node Beginner Book
+
+- Show TATFT video (if time?)
diff --git a/day1/computer_setup.html b/day1/computer_setup.html
new file mode 100644
index 0000000..b846967
--- /dev/null
+++ b/day1/computer_setup.html
@@ -0,0 +1,559 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day1/initial_toolchain_practice.html b/day1/initial_toolchain_practice.html
new file mode 100644
index 0000000..9e50716
--- /dev/null
+++ b/day1/initial_toolchain_practice.html
@@ -0,0 +1,461 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Computer Setup
+Set up your computer with the following tools:
+Latest version of Ruby (for Sass, and other tools) Node.js, PostgreSQL, +MongoDB, Redis,
+Editors: We use Atom.io or Sublime Text 3 in class, and I'm betting you already do too +(unless you rock Vim or Emacs). Sublime Text has a fully-featured, unlimited time Trial mode.
+Optional: if you are coming from an IDE like Visual Studio or Eclipse, you +may like WebStorm (trial version) better +than Sublime Text because of the autocompletion and debugging tools. It's also +cheaper for an academic license ($29 vs $79)
+And if you're a strict proponent of open source, or want to dogwood and +customize your editor in JavaScript, there are two great free editors: +Brackets and Light Table.
+Sign up for these free web services:
+-
+
- GitHub (you may have this already but there is also https://education.github.com/discount_requests/new try it while you're here) +
- Pivotal Tracker https://www.pivotaltracker.com/faq#istrackerreallyfreeforpublicprojectsindividualusenonprofitsandeducators +
Mac OS:
+-
+
Homebrew http://brew.sh Note: the instructions are at the end of the web page.
+
+rbenv, ruby-build, ruby 2.1.1 and the sass gem
+-
+
brew doctor
+brew update
+brew install rbenv ruby-build rbenv-gem-rehash
+echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
+echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
+rbenv install 2.1.1
+rbenv global 2.1.1
+gem install sass
+- NOT use sudo to install ruby or gems +
- if you get a permissions error when installing sass, somehow system ruby is still active. Try restarting your terminal, or if it persists, check for the items above in your .bash_profile file +
+Node.js
+-
+
brew install nvm
+nvm install 0.10
+nvm alias default 0.10
+- add
source $(brew --prefix nvm)/nvm.shto your .bash_profile or .zshrc
+ - Install some commonly used packages with npm:
npm -g install grunt-cli jshint
+ - Reference the NVM README if you get stuck +
+PostgreSQL
+-
+
- Follow Ivan's blog post: https://www.codefellows.org/blogs/how-to-install-postgresql +
+
-
+
Pick a programmer's editor:
+-
+
- Try out http://atom.io and ask around for an invite. +
- or go with the crowd and choose Sublime Text 3:
-
+
- http://www.sublimetext.com/3 +
- Package Control: https://sublime.wbond.net/installation +
+ - Or, try Adobe's open source http://brackets.io +
- Which one to choose? I like Atom.io and Brackets because you can customize them with JavaScript. Customizing Sublime requires knowledge of Python. +
+MongoDB
+-
+
brew install mongodb
+- Follow the directions that homebrew tells you. You can always do
brew info mongo
+ - you can start mongo with
brew services start mongo
+ - you can stop redis with
brew services stop redis
+
+Redis
+-
+
brew install redis
+- Follow the directions that homebrew tells you. You can always do
brew info redis
+ - you can start redis with
brew services start redis
+ - you can stop redis with
brew services stop redis
+
+Heroku Toolbelt
+-
+
brew install heroku-toolbelt
+
+
Ubuntu:
+-
+
- No need for homebrew you already have a perfectly good package management system. +
- In your terminal preferences make sure that "Run Command as a login shell is an enabled profile preferences" check these two screenshots: http://cl.ly/image/220M3f093v2M http://cl.ly/image/3i2O0y0A3e04 +
- rbenv, ruby-build, and ruby: https://www.digitalocean.com/community/articles/how-to-install-ruby-on-rails-on-ubuntu-12-04-lts-with-rbenv--2
-
+
- NOTE you DO NOT have to buy a digital ocean server, this is instructions for how to install LOCALLY. Ignore the create a server droplet step +
- NOTE replace 1.9.3 with the latest version of ruby: 2.1.1 +
- Another alternative way to install rbenv: https://github.com/sstephenson/rbenv#basic-github-checkout +
+ - gem install sass // DO NOT use sudo to install gems +
- node.js: compile node from source, following the directions here: https://gist.github.com/tylermorgan86/e1c9df76cb71a0a007d3 +
- Install Grunt-CLI (command line interface)
npm -g install grunt-cli
+ - PostgreSQL
-
+
- Follow Ivan's blog post: https://www.codefellows.org/blogs/how-to-install-postgresql +
- no need to install the pg gem - you won't be connecting to Postgres from ruby here. +
+ - Sublime Text 3 + +
- MongoDB - https://www.digitalocean.com/community/articles/how-to-install-mongodb-on-ubuntu-12-04 NOTE you DO NOT have to buy a digital ocean server, this is instructions for how to install LOCALLY. Ignore the create a server droplet step +
- Redis - https://library.linode.com/databases/redis/ubuntu-12.04-precise-pangolin same as above +
- Heroku Toolbelt - sudo apt-get install heroku-toolbelt +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day1/pull_request_practice.html b/day1/pull_request_practice.html
new file mode 100644
index 0000000..64d8007
--- /dev/null
+++ b/day1/pull_request_practice.html
@@ -0,0 +1,454 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Test Out Grunt
+By testing to see if grunt works on a project we can see if you have done most
+of the setup tasks needed.
Let's just make sure your computer is set up with node and npm and can run tests.
+-
+
- Clone this Github project. +
- Run the tests, and redirect the output
+to a text file.
-
+
- the packages we need are +
- Install the npm modules need with
npm install
+
+ - Create a subtask with your name +
- Comment on your subtask, with a link to a text file posted on gist.github.com +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day10/README.md b/day10/README.md
deleted file mode 100644
index 7c789b8..0000000
--- a/day10/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Guest Speakers
-
-## AWS EC2
-
-## Functional Programming
diff --git a/day2/README.html b/day2/README.html
new file mode 100644
index 0000000..5d999a7
--- /dev/null
+++ b/day2/README.html
@@ -0,0 +1,447 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pull Request Practice
+Create a folder with your name in the class repository.
+Send a Pull Request to the class repo, with your own folder.
+Inside your folder should be a single readme.md file that contains some basic
+info about you. You should include your GitHub username, linked to your GitHub
+profile. Also link to your Twitter account, your LinkedIn page, and any other
+relevant information or online presence you'd like to share with your classmates.
I have created an example folder for myself.
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/hello-world-node/README.md b/day2/agenda.md
similarity index 56%
rename from hello-world-node/README.md
rename to day2/agenda.md
index e9b1bf4..005be67 100644
--- a/hello-world-node/README.md
+++ b/day2/agenda.md
@@ -1,8 +1,9 @@
# Day 2 Class Agenda
+- Class Structure
- Instructor Availability in the Mornings
- Open Questions
-- Grunt
+- Demo: Making a branch and pull request to your own repo
- Node Slides
- Node Beginner Book
-- NodeSchool.io
+- NodeSchool.io
\ No newline at end of file
diff --git a/day2/async_demo.html b/day2/async_demo.html
new file mode 100644
index 0000000..9c92f7b
--- /dev/null
+++ b/day2/async_demo.html
@@ -0,0 +1,461 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day2/hello_express.html b/day2/hello_express.html
new file mode 100644
index 0000000..2e78097
--- /dev/null
+++ b/day2/hello_express.html
@@ -0,0 +1,537 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Async Demo
+the Node REPL
+Use the node REPL - Read, Evaluate, Print Loop
+Simply type node from the command line.
Process.nextTick
+var truth_value = false;
+process.nextTick(function() {
+ console.log(truth_value)
+});
+truth_value = true;
+What will the output be? False or True?
+The answer is that the output will be true. Why? You might have thought +it would be false, right? It's like the statements are having out of order.
+It's because we are placing our function with conosole.log on the event queue.
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day26/README.md b/day26/README.md
deleted file mode 100644
index c344713..0000000
--- a/day26/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Day 26 - Authorization
-
-## Agenda
-- Resumes are due Wednesday
- - including peer review
-- AWS Activate credits are available
-- Authorization today (short lecture, live coding and q&A)
-- Elliot is coming in tomorrow
-- Graphing Chapter is due on day 34 (last class day, next thursday)
diff --git a/day3/Grunt.html b/day3/Grunt.html
new file mode 100644
index 0000000..3a7b0b4
--- /dev/null
+++ b/day3/Grunt.html
@@ -0,0 +1,449 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hello Express
+Express is a minimalistic web framework built on top of Node.js. Based on +Ruby's Sinatra framework it abstracts away a lot of the boiler plate +code required to get a Node web server up and running. Created by + TJ Holowaychuck Express is built +using Connect another abstraction +for creating web servers with Node. Express 3.x includes a suite of middleware +that were abstracted into their own modules with Express 4. Read more about it here
+The first step in creating an express application from scratch is to create
+a new folder with mkdir hello_express. Change into the director with cd hello_express
+and create a file with the name package.json. Inside of the file place the following:
{
+ "name" : "hello-express",
+ "description" : "a hello world web application written in express",
+ "version" : "0.0.1",
+ "dependencies" : {
+ "express" : "^4.0"
+ }
+}
+A package.json file is found in nearly every Node packag or application. It tells npm about our
+ application. The name and description would appear in npm if we were creatin a node
+package. The version is the Semantic Versioning version
+of our application and the dependencies tell npm what packages we need in order to
+run our application. In this case the only package that we need is express. After saving
+this file run npm install from the command in our hello_express directory and npm
+will install Express and all of it's dependencies and save them into a folder called node_modules.
+Now seems like a perfect time to create a git repository for our application.
git init
+touch .gitignore
+echo "node_modules/" >> .gitignore
+git add .
+git commit -m "add package.json and .gitignore"
+First we need to create a .gitignore file. This file tells git not include our node_modules +folder in our version control. This folder can get quite large and we already have our +dependencies declared in our package.json file, so it becomes redundant. Now we need to +create a simple web server. Create a file called server.js and add the following code:
+var express = require('express');
+var http = require('http');
+
+var app = express();
+
+app.get('/', function(req, res){
+ res.send('hello world!');
+});
+
+var server = http.createServer(app);
+server.listen(3000, function(){
+ console.log('the server is running on port 3000');
+});
+In this file we first require the express package within our server.js file. We then require
+http which will be used to create the actual server. Then we create our app by calling the root
+express function. The app.get line is a REST
+get request to our root url that simple writes 'hello world!' to the browser. In the final section
+we create a server and start it listening on port 3000, we pass a callback that gets called
+when the server is running that simple outputs 'the server is running on port 3000' to the console.
+To start our server simply run node server.js from the command line. Then point your preferred
+browser to http://localhost:3000, you should see the text hello world!.
Now this particular server isn't especially useful or interesting but we can modify it to serve +static html pages using one of the few optional middlewares that didn't get abstracted out of +Express 4, static. Modify your server.js file to look like this:
+var express = require('express');
+var http = require('http');
+
+var app = express();
+
+app.use(express.static(__dirname + '/public'));
+
+var server = http.createServer(app);
+server.listen(3000, function() {
+ console.log('the server is listening on port 3000');
+});
+Our server now serves any file located in the /public directory. The __dirname in this version of the server.js
+points to the root directory of our application. This is a node global and is available anywhere in a
+node program. Next we need to create the /public directory, run mkdir public from the console.
+Now place create an index.html file in the public directory and add the following to it:
<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8"/>
+ <title>Hello World Express</title>
+ </head>
+ <body>
+ Hello World from an html document!
+ </body>
+</html>
+If you close the server we had running and run node server.js again, when you browse to http://localhost:3000
+you should see the text Hello World from an html document. You can also serve up anything you place in the
+public directory, including javascript files, images, css stylesheets and other html files. Don't forget to commit
+the changes!
git add .
+git commit -m "serving static files"
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day3/Personal_Blog_Site_Tutorial_with_Yeoman_and_Zurb.html b/day3/Personal_Blog_Site_Tutorial_with_Yeoman_and_Zurb.html
new file mode 100644
index 0000000..130d49e
--- /dev/null
+++ b/day3/Personal_Blog_Site_Tutorial_with_Yeoman_and_Zurb.html
@@ -0,0 +1,538 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day3/README.html b/day3/README.html
new file mode 100644
index 0000000..f94ae84
--- /dev/null
+++ b/day3/README.html
@@ -0,0 +1,453 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Personal Blog Site Tutorial with Yeoman and Zurb
+Example Blog Layout and Tutorial
+This is a simple blog made as teaching example.
+Made with:
+-
+
- Yeoman + +
- Zurb Foundation + +
Other Technologies Used
+ +Tutorial
+Prerequisites
+-
+
- Node and NPM installed.
-
+
- I recommend
brew install nvmon Mac OS X instead ofbrew install node. +See the nvm README for more details.
+
+ - I recommend
- Yeoman and Grunt installed:
npm install -g yo grunt-cli
+
How I made this app
+Grab my copy of generator-browserify (until this pull request is closed).
+npm -g install ivanoats/generator-browserify
+Generate the app skeleton
+mkdir blog && cd blog
+yo browserify
+-
+
- Choose Grunt as the build system. +
- Choose Foundation as the front-end framework. +
- Yes, you'd like to include Modernizr to support your grand-dad on IE8. +
- No, let's skip Jade templating for now. +
- Choose Libsass as the sass compiler so that you don't need a Ruby dependency +in your project +
You'll see a lot of text scroll by, and on my system I saw the last lines like this:
+grunt-sass@0.9.0 node_modules/grunt-sass
+├── async@0.2.10
+└── node-sass@0.7.0 (node-watch@0.3.4, colors@0.6.0-1, mkdirp@0.3.5, optimist@0.6.1, mocha@1.13.0)
+Your directory listing should look something like this:
+total 80
+drwxr-xr-x 13 ivan staff 442 Apr 17 12:40 .
+drwxr-xr-x 256 ivan staff 8704 Apr 17 12:36 ..
+-rw-r--r-- 1 ivan staff 42 Apr 16 15:14 .bowerrc
+-rw-r--r-- 1 ivan staff 214 Apr 16 15:14 .editorconfig
+-rw-r--r-- 1 ivan staff 11 Apr 16 15:14 .gitattributes
+-rw-r--r-- 1 ivan staff 65 Apr 16 15:14 .gitignore
+-rw-r--r-- 1 ivan staff 390 Apr 16 15:14 .jshintrc
+-rw-r--r-- 1 ivan staff 11094 Apr 17 12:40 Gruntfile.js
+drwxr-xr-x 7 ivan staff 238 Apr 17 12:40 app
+-rw-r--r-- 1 ivan staff 213 Apr 16 15:14 bower.json
+drwxr-xr-x 2 ivan staff 68 Apr 17 12:40 dist
+drwxr-xr-x 32 ivan staff 1088 Apr 17 12:40 node_modules
+-rw-r--r-- 1 ivan staff 1277 Apr 17 12:40 package.json
+Now type grunt serve to launch the app in a web browser. You should see something
+like this:
That's great but let's start with a simpler blog layout: Go to + http://foundation.zurb.com/templates.html
+and download the blog layout HTML. Put that in the body tag of app/index.html in
+your project.
You can now start customizing your blog with the following files:
+-
+
- app/index.html +
- app/scss/app.scss +
- app/images +
Here's what I did:
+
Go to town! This generator also includes BackboneJS so you can even make your +blog a single-page app.
+Roadmap for the future for this app
+-
+
- Add a simple MongoDB / Express app as the blog's REST API +
- Build out the site with BackboneJS +
- Add some CasperJS ZombieJS or SuperAgent tests. +
Contributing
+Tested Pull-Requests welcome! I will list you as a contributor.
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day3/agenda.md b/day3/agenda.md
new file mode 100644
index 0000000..e6ccc4c
--- /dev/null
+++ b/day3/agenda.md
@@ -0,0 +1,5 @@
+# Day 3 Agenda
+
+* Responsive Web Design
+* Grunt
+* Yeoman
\ No newline at end of file
diff --git a/public/yeoman-assets-rwd/images/foundation_default.png b/day3/images/foundation_default.png
similarity index 100%
rename from public/yeoman-assets-rwd/images/foundation_default.png
rename to day3/images/foundation_default.png
diff --git a/public/yeoman-assets-rwd/images/ivan_blog.png b/day3/images/ivan_blog.png
similarity index 100%
rename from public/yeoman-assets-rwd/images/ivan_blog.png
rename to day3/images/ivan_blog.png
diff --git a/day4/Heroku.html b/day4/Heroku.html
new file mode 100644
index 0000000..5373391
--- /dev/null
+++ b/day4/Heroku.html
@@ -0,0 +1,524 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Day Three
+On day three, we will cover:
+-
+
- Responsive Web Design +
- Grunt +
- Yeoman +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day4/README.html b/day4/README.html
new file mode 100644
index 0000000..10d5296
--- /dev/null
+++ b/day4/README.html
@@ -0,0 +1,453 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Heroku
+Let's get our site LIVE ON THE WEB!! This process is called deployment.
+Slides
+Slides from class introducing Heroku.
+Installation
+Make sure you have the Heroku Toolbelt installed.
+You can usually brew install heroku-toolbelt or sudo apt-get install heroku-toolbelt. If those don't work you may need to donwload it.
Also, if you haven't already, sign up for an account on Heroku.com.
+Login
+Use heroku login to log in to heroku from the command line.
If you're already logged in, you can use heroku auth:whoami to see who you are logged in as.
Create a heroku app
+You'll want a nice name for your app instead of the random ones Heroku gives you.
+E.g. heroku create ivan-hello-world-express
Create the Procfile
+You need a file to tell heroku how to launch your app.
+Edit Procfile which should be in the root directory of your project. No file extension on this file, and it needs to start with a Capital letter. The procfile is simply:
web: node server.js
+This tells heroku that to start your web server, it needs to run the command node server.js
Test it out locally with node-foreman
+You can use a npm package called foreman to test that your Procfile works as expected. Install this globally.
+npm install -g foreman
This will give you the nf command. Try it out.
nf --help
And, now, try starting your server via foreman.
+nf start
It should start up your server on port 5000 as a default.
+This means that your server should not have any port 'hard-coded' as a default (like 3000). Make sure your server code looks something like this:
+var server = http.createServer(app);
+app.set('port', process.env.PORT || 3000);
+
+server.listen(app.get('port'), function() {
+ console.log('the server is NOW running on port', app.get('port'));
+});
+Commit any changes and push to Heroku
+Make sure to commit any changes you made to your app, like adding the Procfile, etc.
+git add .
git commit -m 'preparing for heroku'
Make sure you're on the master branch or that you merge you changes back to master.
+And now, to deploy your app to the web on Heroku:
+git push heroku master
You'll see a bunch of info scroll by from Heroku, but it should look something like this:
+$ git push heroku master
+Fetching repository, done.
+Counting objects: 7, done.
+Delta compression using up to 8 threads.
+Compressing objects: 100% (3/3), done.
+Writing objects: 100% (4/4), 343 bytes | 0 bytes/s, done.
+Total 4 (delta 2), reused 0 (delta 0)
+
+-----> Node.js app detected
+
+ PRO TIP: Specify a node version in package.json
+ See https://devcenter.heroku.com/articles/nodejs-support
+
+-----> Defaulting to latest stable node: 0.10.28
+-----> Downloading and installing node
+-----> Restoring node_modules directory from cache
+-----> Pruning cached dependencies not specified in package.json
+ npm WARN package.json hello-express@ No repository field.
+-----> Writing a custom .npmrc to circumvent npm bugs
+-----> Exporting config vars to environment
+-----> Installing dependencies
+ npm WARN package.json hello-express@ No repository field.
+-----> Caching node_modules directory for future builds
+-----> Cleaning up node-gyp and npm artifacts
+-----> Building runtime environment
+-----> Discovering process types
+ Procfile declares types -> web
+
+-----> Compressing... done, 5.3MB
+-----> Launching... done, v4
+ http://ivan-hello-world-express.herokuapp.com/ deployed to Heroku
+
+To git@heroku.com:ivan-hello-world-express.git
+ 3d47745..3f34feb master -> master
+And you can open your browser, and visit your app on the web!
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day4/Sass.html b/day4/Sass.html
new file mode 100644
index 0000000..f9cf583
--- /dev/null
+++ b/day4/Sass.html
@@ -0,0 +1,459 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day4/acceptance_testing_with_casperjs.html b/day4/acceptance_testing_with_casperjs.html
new file mode 100644
index 0000000..a4c4600
--- /dev/null
+++ b/day4/acceptance_testing_with_casperjs.html
@@ -0,0 +1,556 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sass
+Sass is CSS with Superpowers
+Credit is due to Dale Sande for preparing this material.
+Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.
+Is Sass somewhat of a mystery to you? How does it work? Why do some say that it is better then CSS?
+ + +-
+
- Official documentation: http://sass-lang.com/documentation/file.SASS_REFERENCE.html +
- More info: http://coderecipez.roughdraft.io +
Node Sass and Grunt
+Sass was orignally a Ruby gem, but it is also available as an npm package now. You can npm install node-sass in your projects.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/casper/images/js_acceptance_testing_landscape.jpg b/day4/images/js_acceptance_testing_landscape.jpg
similarity index 100%
rename from casper/images/js_acceptance_testing_landscape.jpg
rename to day4/images/js_acceptance_testing_landscape.jpg
diff --git a/heroku/pdf/cf_heroku.pdf b/day4/pdf/cf_heroku.pdf
similarity index 100%
rename from heroku/pdf/cf_heroku.pdf
rename to day4/pdf/cf_heroku.pdf
diff --git a/day5/README.html b/day5/README.html
new file mode 100644
index 0000000..b3ff244
--- /dev/null
+++ b/day5/README.html
@@ -0,0 +1,448 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Acceptance Testing with CasperJS
+Acceptance testing is also known as "Outside-in", or "black-box" testing. It +tests a system just like a web browser does. Except, instead of a person clicking +on a web browser, a "headless" browser operates in the command line, a bit more +behind the scenes.
+
There are many options for acceptance testing, but we will be using one called +CasperJS.
+Write our first acceptance test
+Let's just test to see if the home page is loading o.k., and that the title tag
+and H1 tags are what we expect. Here's the code, it goes in
+test/acceptance/home_page_test.js:
BTW, if you want to make a new directory multiple levels deep, you can use:
+mkdir -p test/acceptance from your project's home directory.
'use strict';
+/*global casper*/
+
+casper.test.begin('home page', 3, function suite(test) {
+
+ casper.start('http://localhost:3000/', function() {
+ test.assertHttpStatus(200);
+ });
+
+ casper.then(function(){
+ test.assertTitle('Hello World Express', 'title is Hello World Express');
+ });
+
+ casper.then(function() {
+ test.assertSelectorHasText('h1','Hello World');
+ });
+
+ casper.run(function(){
+ test.done();
+ });
+
+});
+So, we have three assertions that we expect to be true. The status should be 200 +OK, the title should be "Hello World Express", and the h1 should include the text +"Hello World".
+Run our acceptance tests
+To run our acceptance test we'll need to make sure to start the express server. +We will use a grunt plugin to automate this.
+You can do this on your personal portfolio site, or your hello world express code.
+Hook up Grunt-Express-Server
+From the command line:
+npm install grunt-express-server --save-dev
And in Gruntfile.js add:
+grunt.loadNpmTasks('grunt-express-server');
Install and Configure CasperJS and PhantomJS
+Install Casper and PhantomJS globally, and Grunt integration locally
+npm install -g phantomjs casperjs
+npm install grunt-casper --save-dev
+npm install grunt-express-server --save-dev
+Edit your Gruntfile.js to include tasks like these below:
'use strict';
+module.exports = function(grunt) {
+
+ grunt.loadNpmTasks('grunt-contrib-jshint');
+ grunt.loadNpmTasks('grunt-express-server');
+ grunt.loadNpmTasks('grunt-casper');
+
+ grunt.initConfig({
+ express: {
+ options: {
+ // Override defaults here
+ },
+ dev: {
+ options: {
+ script: 'server.js'
+ }
+ },
+ prod: {
+ options: {
+ script: 'server.js',
+ node_env: 'production'
+ }
+ },
+ test: {
+ options: {
+ script: 'server.js'
+ }
+ }
+ },
+ casper: {
+ acceptance : {
+ options : {
+ test : true,
+ },
+ files : {
+ 'test/acceptance/casper-results.xml' : ['test/acceptance/*_test.js']
+ }
+ }
+ }
+ });
+
+ grunt.registerTask('server', [ 'jshint', 'express:dev' ]);
+ grunt.registerTask('test',['express:dev','casper']);
+ grunt.registerTask('default', ['jshint', 'test']);
+
+};
+-
+
- I added a
servertask that runs the express server after JSHint passes.
+ - I added a
testtask that sets up the express server in dev mode, and then runs +the casper tests.
+ - I set the default task to run JSHint and then the test task. +
Try it out
+Now try grunt test from the command line and see what happens…
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day6/Browserify.html b/day6/Browserify.html
new file mode 100644
index 0000000..2704338
--- /dev/null
+++ b/day6/Browserify.html
@@ -0,0 +1,494 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/day6/Browserify.md b/day6/Browserify.md
deleted file mode 100644
index c3f0b77..0000000
--- a/day6/Browserify.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Browserify
-
-Use your modules, plus already existing node core modules, in the browser
-
-* includes assert, path, url, crypto, domain, events, querystring, util, buffer, etc…
-* bundles up modules into one file, increasing performance
-
-## What Code is a Good Candidate for Browserify?
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Full Stack JavaScript Engineering +
+
+
+
+
+
+
+ -
+
+
- + About the author + + + + +
- + Questions and Issues + + + + +
- + Edit and Contribute + + + + + + + +
- + Introduction + + +
- + + + 1. Prework + + + + + +
- + + + 2. Connect to IRC + + + + + +
-
+
+
+ 3. Day One
+
+
+
+
-
+
+
- + + + 3.1. Github Pull Request Practice + + + + +
- + + + 3.2. Computer Setup + + + + +
- + + + 3.3. Make sure grunt works + + + + +
+
+ -
+
+
+ 4. Day Two
+
+
+
+
-
+
+
- + + + 4.1. Async Demo + + + + +
- + + + 4.2. Hello Express + + + + +
+
+ -
+
+
+ 5. Day Three
+
+
+
+
-
+
+
- + + + 5.1. Grunt + + + + +
- + + + 5.2. Personal Blog Site Tutorial with Yeoman and Zurb + + + + +
+
+ -
+
+
+ 6. Day Four
+
+
+
+
-
+
+
- + + + 6.1. Acceptance Testing with CasperJS + + + + +
- + + + 6.2. Sass + + + + +
- + + + 6.3. Heroku + + + + +
+
+ - + + + 7. Day Five + + + + + +
-
+
+
+ 8. Day Six
+
+
+
+
-
+
+
- + + + 8.1. Readings + + + + +
- + + + 8.2. Browserify + + + + +
- + + + 8.3. Require.js + + + + +
+
+
+
+
+ - + Generated using GitBook + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Browserify
+Use your modules, plus already existing node core modules, in the browser
+-
+
- includes assert, path, url, crypto, domain, events, querystring, util, buffer, etc… +
- bundles up modules into one file, increasing performance +
What Code is a Good Candidate for Browserify?
+
Anything you want to use on the server and in the browser.
+-
+
- Validation - ensuring data from the user is in an acceptable format. For example, an email must have an @ sign and a "." +
Alternatives to Browserify
+-
+
- RequireJS
+ - ECMAScript 6 built in modules
+ - Others +
Automation and Distribution
+
-
+
- grunt-contrib-concat
-
+
- For JS +
- can be replaced by Browserify +
+ - grunt-contrib-copy
-
+
- For HTML, Images, plain CSS +
+ - grunt-contrib-connect +
- grunt-contrib-watch +
But wait, what about Bower?
+
-
+
bower installdoes not modify package.json
+- You could still use
<script>tags, but that’s missing out on the good stuff
+ - Use the debowerify transform package from npm to link bower+browserify +
More Resources
+-
+
- Intro to Browserify http://superbigtree.tumblr.com/post/54873453939/introduction-to-browserify +
- Read about the use case for browserify: http://lincolnloop.com/blog/untangle-your-javascript-browserify +
- How to make node and browserify talk to one another: https://blog.codecentric.de/en/2014/02/cross-platform-javascript +
- Express and Browserify: http://learnjs.io/blog/2013/12/22/express-and-browserify/ + +
-
-Anything you want to use on the server and in the browser.
-
-* Validation - ensuring data from the user is in an acceptable format. For example, an email must have an @ sign and a "."
-
-## Alternatives to Browserify
-
-* RequireJS 
-* ECMAScript 6 built in modules 
-* Others
-
-## Automation and Distribution
-
-
-
-* grunt-contrib-concat
- * For JS
- * can be replaced by Browserify
-* grunt-contrib-copy
- * For HTML, Images, plain CSS
-* grunt-contrib-connect
-* grunt-contrib-watch
-
-## But wait, what about Bower?
-
-
-
-* `bower install` does not modify package.json
-* You could still use `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+