From ade8e9abe7b197f3faf084cb00b69322ba5c2044 Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:08:39 -0700 Subject: [PATCH 01/15] corrects typos in README.md and 404.md --- 404.md | 4 ++-- README.md | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/404.md b/404.md index 7ab14e1..7e272ac 100644 --- a/404.md +++ b/404.md @@ -1,6 +1,6 @@ # 404 errors? -Errors are already addressed in Express for you. In the `app.js` file, there is the following: +Errors are already addressed in Express for you. In the `app.js` file, there are the following: ```javascript /// catch 404 and forwarding to error handler @@ -11,7 +11,7 @@ app.use(function(req, res, next) { }); ``` -Then in the `views/` dir, there is `errors.jade`. +Then in the `views/` dir, we see `errors.jade`. ```jade extends layout diff --git a/README.md b/README.md index cb0ad04..424033a 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,11 @@ [![Build Status](https://www.gitbook.io/button/status/book/anotheruiguy/nodeexpreslibsass_from-scratch)](https://www.gitbook.io/book/anotheruiguy/nodeexpreslibsass_from-scratch/activity) -Node.js What's all the buzz about? Why are so many people talking about it? How can I get some of this awesome? Follow along in this workshop/tutorial to get your head wrapped around what it takes to make a Node project from scratch. +Node.js -But it doesn't stop at Node. In the 'full stack JavaScript' world, there is a whole eco system of tools that you need to need to know about. Besides Node, there is Express, npm, Bower, Grunt, Gulp, etc .... This books's goal is not to deep dive into any one specific subject, but to provide the overview learning needed to build a good foundation. +What's all the buzz about? Why are so many people talking about it? How can I get some of this awesome? Follow along in this workshop/tutorial to get your head wrapped around what it takes to make a Node project from scratch. + +But it doesn't stop at Node. In the 'full stack JavaScript' world, there's a whole ecosystem of tools you need to know about. On top of Node, we have to worry about Express, npm, Bower, Grunt, Gulp, etc .... This book's goal is not to dive deeply into any one specific subject, but to provide the overview needed to build a solid foundation. #### Fun deck From a3ce6877dac3552dfedf84a255f5f60132874a7a Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:12:32 -0700 Subject: [PATCH 02/15] update writing in add-some-data --- add-some-data.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/add-some-data.md b/add-some-data.md index 3102187..3a6efc4 100644 --- a/add-some-data.md +++ b/add-some-data.md @@ -1,8 +1,8 @@ # Add some data -Great [demo](http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/) that adds the next layer of awesome to this workshop. Adding a Mongo DB to the project to make a simple i/o UX. +Great [demo](http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/) that adds the next layer of awesome to this workshop. It adds a Mongo DB to the project in order to make a simple i/o UX. -> My favorite thing about MongoDB is that it uses JSON for its structure, which means it was instantly familiar for me. If you're not familiar with JSON, you'll need to do some reading, as I'm afraid that's outside the scope of this tutorial. +> My favorite thing about MongoDB is that it uses JSON for it's structure, which means it was instantly familiar to me. If you're not familiar with JSON, you'll need to do some reading, as I'm afraid that's outside the scope of this tutorial. > Let's add a record to our collection. For the purposes of this tutorial, we're just going to have a simple database of usernames and email addresses. Our data format will thus look like this: From 2d5324519da65032c57b6114248652236e57b61d Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:16:09 -0700 Subject: [PATCH 03/15] typo correction in bower-grunt-sass --- bower-grunt-sass.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/bower-grunt-sass.md b/bower-grunt-sass.md index 2c3f6df..63de278 100644 --- a/bower-grunt-sass.md +++ b/bower-grunt-sass.md @@ -1,6 +1,6 @@ # Bower - Grunt - Sass -Now that we know the powers of Bower to easily manage our front-end development dependencies, what do we need to do to add a Bower package of Sass code to our project? +Now that we know the powers of Bower in easily managing our front-end development dependencies, what do we need to do to add a Bower package of Sass code to our project? ## Bower install @@ -10,13 +10,13 @@ First off, let's install a simple Bower package for illustration: $ bower install css-calc-mixin --save ``` -There, we now have the library of code in our project. +There. We now have the library of code in our project. ## Update Gruntfile.js -Next we want to update the `Gruntfile.js` so that we can easily include the library into our Sass files. Without this step, we would need to write fill paths in our Sass file to this and that's simply lame. +Next we want to update the `Gruntfile.js` so that we can easily include the library in our Sass files. Without this step, we would need to write fill paths in our Sass file to this and that's simply lame. -In the Grunt-Sass API we have options and the one we need to use is `includePaths`. Here we can pass in a string that is the full path from root to the Bower package into an array. +In the Grunt-Sass API we have options and the one we need to use is `includePaths`. Here we can pass in a string that is the full path, from root to Bower package, into an array. ```javascript module.exports = function(grunt) { From 0abbdcc62561bbc2725ba9f206ff6c993a10ecb8 Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:34:36 -0700 Subject: [PATCH 04/15] update writing in bower.md --- bower.md | 58 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/bower.md b/bower.md index 217359e..3362ca5 100644 --- a/bower.md +++ b/bower.md @@ -1,18 +1,18 @@ # Bower all the things -Unless you live in a hole, you are well aware that the JavaScript revolution is all around us. Many of the amazing concepts I discovered in the Rails ecosystem are now bursting out into the JavaScript space allowing for a greater distribution of awesome. The three pillars are; Yeoman, Bower and Grunt. +Unless you live in a hole, you are well aware that the JavaScript revolution is all around us. Many of the amazing concepts I discovered in the Rails ecosystem are now bursting out into the JavaScript space, allowing for a greater distribution of awesome. The three pillars are; Yeoman, Bower and Grunt. The problem I need to solve is; what is the best way to get some library code up on Github and make it easily accessible to users without having to clone the project? Because, that's pretty lame, right? ## Yeoman generators -Initially I came across [generator-sass-boilerplate](https://github.com/srsgores/generator-sass-boilerplate), a 'Yeoman generator for quickly scaffolding out Sass styles'. This is a very interesting approach for creating a complex library and allowing the user to customize the install. But for a simpler library of code, maybe just some functions and mixins, this is way to much overhead. +Initially I came across [generator-sass-boilerplate](https://github.com/srsgores/generator-sass-boilerplate), a 'Yeoman generator for quickly scaffolding out Sass styles'. This is a very interesting approach for creating a complex library and allowing the user to customize the install. But, for a simpler library of code, maybe just some functions and mixins, this is way too much overhead. ## Bower is the answer -Fast forward to now. I recently came across new posts that really break down what Bower is and what it is best at. And it hit me, this IS the answer! +Fast forward to now: I recently came across new posts that really break down what Bower is and what it's best at. And it hit me: This IS the answer! -For those not in the know, Bower is an extremely simple solution for front-end package management. +For those of you not in the know: Bower is an extremely simple solution for front-end package management. > It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. @@ -20,7 +20,7 @@ The beauty of Bower is held within it's simplicity. Bower has a registry, but it Sticking with the 'dirt simple' theme, you can use Bower to easily pull a repo into your project without having to clone it. Even if it doesn't have a `bower.json` file. -For example Stipe, a Compass Extension library I wrote, is not Bower aware at all. +For example: Stipe, a Compass Extension library I wrote, is not Bower aware at all. ``` $ bower install git://github.com/Toadstool-Stipe/stipe.git @@ -30,7 +30,7 @@ Run that command in any folder and you will pull in the entire repo with no Gith ## Getting started with Bower -To get started, it's simple really. Assuming that Node and npm is installed on your local box, run: +To get started is simple, really. Assuming that Node and npm are installed on your local box, run: ``` $ npm install -g bower @@ -44,29 +44,29 @@ I won't go into exhaustive detail here, but 99% of the time you simply need to r $ bower install ``` -As stated above, there are alternate install options, but the primary solution is to have a `bower.json` file in the repo and have it registered with Bower. +As stated above there are alternate install options, but, the primary solution is to have a `bower.json` file in the repo and have it registered with Bower. -If you have a `bower.json` file in your project, explained in the next section, you can add the `--save` flag with the install and this will add the library as a dependency in your project. Sweet. +If you have a `bower.json` file in your project, as explained in the next section, you can add the `--save` flag along with the install and this will add the library as a dependency in your project. Sweet. When you distribute the project, a user who clones it only has to run `$ bower install` and it will pull in all the external resources. Nice! ## Commit or not to commit!? -This new system of creating and distributing resources raises an interesting question; do you commit all your bower packages or not? In the Ruby world, Gems are not actually part of the project, but dependencies of the project, and never committed to the project's version control. In this new JavaScript world, Node and Bower package dependencies are referenced via a manifest, much like the Gemfile in Ruby, but are actually installed into the root of the project directory. +This new system of creating and distributing resources raises an interesting question: do you commit all your Bower packages or not? In the Ruby world, Gems are not actually part of the project, but dependencies of the project, and never committed to the project's version control. In this new JavaScript world, Node and Bower package dependencies are referenced via a manifest (much like the Gemfile in Ruby), but are actually installed into the root of the project directory. -There is a [whole discussion](http://addyosmani.com/blog/checking-in-front-end-dependencies/) on this topic. I look at it this way, when you install a Bower library, are you leaving this as a dependency or are you making modifications? +There is a [whole discussion](http://addyosmani.com/blog/checking-in-front-end-dependencies/) on this topic. I look at it this way: When you install a Bower library are you leaving this as a dependency or are you making modifications? -The choice is up to you, the arguments are strong on either side. In a situation where you are actually forking the code you installed, then the answer is pretty clear, it should be committed to the project or you need to fork the dependency. +The choice is up to you. The arguments are strong on either side. In a situation where you are actually forking the code you installed then the answer is pretty clear: it should be committed to the project or you need to fork the dependency. ## Generate new Bower package -Creating a new Bower package is again, really simple. +Creating a new Bower package is, again, really simple. ``` $ bower init ``` -In the CLI, this will initiate a series of questions, the answers of which will be plugged into the new `bower.json` file it creates. Put as much in as you want, but all you really need is: +In the CLI this will initiate a series of questions, the answers to which will be plugged into the new `bower.json` file it creates. Put as much in as you want, but all you really need is: ``` { @@ -75,25 +75,25 @@ In the CLI, this will initiate a series of questions, the answers of which will } ``` -And that's it really. You have just created your first Bower resource library. Now go forth and build! Build out your resources, documentation, etc ... your package is ready to go at any time. +And that's it, really. You have just created your first Bower resource library. Now go forth and build! Build out your resources, documentation, etc ... your package is ready to go at any time. For easy testing, remember the `$ bower install git://github.com/ ...` trick? Run this against a new repo and see how it installs. -Be mindful of this step and what the package contains. In my opinion, I see Bower as a great way to distribute smaller, specific libraries of code. When I pull in your Bower package, do I really want all your documentation, tests, demonstration resources, etc ... As an example, I am going to pick on the Bourbon kids here, run: +Be mindful of this step and what the package contains. In my opinion, I see Bower as a great way to distribute smaller, specific libraries of code. When I pull in your Bower package do I really want all your documentation, tests, demonstration resources, etc ..? As an example, I am going to pick on the Bourbon kids here. Run: ``` $ bower install bourbon ``` -Running this installer, you will get the whole repo. I don't want the whole repo, all I really want is what is in the `dist/` dir. To solve this, another developer forked Bourbon and created a new repo called [bower-bourbon](https://github.com/hmps/bourbon): +Running this installer you will get the whole repo. I don't want the whole repo. All I really want is what is in the `dist/` dir. To solve this another developer forked Bourbon and created a new repo called [bower-bourbon](https://github.com/hmps/bourbon): ``` $ bower install bower-bourbon ``` -Running this install you actually only get what is in the `dist/` dir. But are these forks reliable? Ohh open source, you are a wild one. +Running this install you actually only get what is in the `dist/` dir. But are these forks reliable? Ohh, open source, you are a wild one. -**UPDATE:** It's been brought to my attention that using the Bower install of Bourbon pulls in it's 3.2 Beta and appears not to be fully functional. This section was not intended to say "bad Bourbon" but to simply illustrate that in some cases, using Bower, you will get more of the library then you really want. +**UPDATE:** It's been brought to my attention that using the Bower install of Bourbon pulls in it's 3.2 Beta and appears not to be fully functional. This section was not intended to say "bad Bourbon" but to simply illustrate that, in some cases, using Bower, you will get more of the library then you really want. ## Bower registration @@ -109,34 +109,34 @@ Once you have all of that, run this command with your new package name and the G $ bower register ``` -Registration is painless. Once you get the green light on everything, give it a test and do a `$ bower install ` +Registration is painless. Once you get the green light on everything give it a test and do a `$ bower install ` ## Bower and Sass -Bower and Sass libraries are an amazing pairing. There are small repos all over Github where the complexity of making them a Ruby Gem/Compass Extension was just to much overhead. You are required to either fork, clone, or god forbid, copy and paste code into your project. What? Are we not civilized? +Bower and Sass libraries are an amazing pairing. There are small repos all over Github where the complexity of making them a Ruby Gem/Compass Extension was just too much overhead. You are required to either fork, clone, or, *god forbid*, copy and paste code into your project. What? Are we not civilized? In the Ruby world, developers are used to having Gems and Compass Extensions installed in a safe, *untouchable location. The new Gem is added to the Gemfile and we simply reference the library in the project. ##### *Untouchable is a frustration with many developers. Importing Sass libraries that they did not have control over, or were unable to modify, that actually output CSS can be very frustrating. -In the new JavaScipt world, the library is added to the `bower.json` manifest or simply installed, but instead of it being in a obscured location, it is installed into the root of the project. This keeps things simple from an install perspective, but this means our Sass imports are in relative directories. Not a big deal, but different from what we are used to. +In the new JavaScipt world, the library is added to the `bower.json` manifest, or simply installed, but instead of it being in an obscured location, it is installed to the root of the project. This keeps things simple from an install perspective, but this means our Sass imports are in relative directories. Not a big deal, but different from what we are used to. -So, what does a Sass Bower package look like? Let's take a simple project I created called, [sass-icon-fonts](https://github.com/anotheruiguy/sass-icon-fonts). This package is simply a couple of mixins, one that allows the developer to easily create a `@font-face` set of rules and another is the ability to quickly generate a series of icon-font rules. The mini library comes with instructions and a very simple API. +So, what does a Sass Bower package look like? Let's take a simple project I created called, [sass-icon-fonts](https://github.com/anotheruiguy/sass-icon-fonts). This package is simply a couple of mixins, one that allows the developer to easily create an `@font-face` set of rules, and another with the ability to quickly generate a series of icon-font rules. The mini-library comes with instructions and a very simple API. -Now, let's imagine you are building a Node project and you want to use this package as a resource, run: +Now, let's imagine you are building a Node project and you want to use this package as a resource. Run: ``` $ bower install sass-icon-fonts --save ``` -This installs the package and adds the dependency to your `bower.json` file. Located at the root level of the project is your `sass/` directory, within that is your `application.scss` file. At your root is the `bower_components` directory. For your `application.scss` file to access the new library, you will need to import a relative path to the library, as illustrated in the following: +This installs the package and adds the dependency to your `bower.json` file. Located at the root level of the project is your `sass/` directory. Within that is your `application.scss` file. At your root is the `bower_components` directory. For your `application.scss` file to access the new library you will need to import a relative path to the library, as illustrated in the following: ``` @import "../bower_components/sass-icon-fonts/_ico-font.scss"; ``` -While the previous example works, while I found this acceptable, I didn't really find it awesome. Digging more into the Grint-Sass API I discovered the [includePaths](https://github.com/sindresorhus/grunt-sass#includepaths) function. This allows you to set an import path to include. +While the previous example works (it's an *acceptable* solution) I didn't really find it awesome. Digging more into the Grunt-Sass API I discovered the [includePaths](https://github.com/sindresorhus/grunt-sass#includepaths) function. This allows you to set an import path to include. ``` options: { @@ -146,16 +146,16 @@ options: { } ``` -Now that you have this in your Grunt file, you can simply reference the library's main manifest file with a simply Sass import, like so: +Now that you have this in your Grunt file, you can simply reference the library's main manifest file with a Sass import, like so: ``` @import "bourbon"; ``` ## Bower in your npm -One of the things that I find slightly annoying about using Bower is that I have to run separate commands when initialing a new project. I already have to use npm, can't I just bind these things together? +One of the things that I find slightly annoying about using Bower is that I have to run separate commands when initializing a new project. I already have to use npm. Can't I just bind these things together? -Yes, yes you can. In your `package.json` file, simply extend the `scripts` object and pass in the the `bower install` command. This is why I really LOVE this stuff! +Yes. Yes, you can. In your `package.json` file, simply extend the `scripts` object and pass in the the `bower install` command. This is why I really LOVE this stuff! ``` "scripts": { @@ -177,6 +177,6 @@ Thank you [Stack Overflow](http://stackoverflow.com/questions/15669091/bower-ins ## Summary -When I say I want to Bower all the things, I mean just that. Now understanding Bower, I am looking at simple package management in a whole new light and I hope that you do to. +When I say I want to Bower all the things, I mean just that. Now, understanding Bower, I am looking at simple package management in a whole new light and I hope that you do to. No more forking, cloning, deleting `.git/` directories just to include a library into a project. I am looking at creating Sass modules in a whole new light as well. Not that Compass extensions were difficult, but Bower frees me of multiple dependencies. Something that has been a real issue on many projects. From bf85f5718317c2364f8197f3c3f38e6cc8bcaa04 Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:40:29 -0700 Subject: [PATCH 05/15] update writing in deploy-app --- deploy-app.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/deploy-app.md b/deploy-app.md index 856e67f..06fe67b 100644 --- a/deploy-app.md +++ b/deploy-app.md @@ -1,11 +1,11 @@ # Deploy your first app -At this point, you should have an app that works locally on your computer. The following steps outline updates you need to make in order to deploy the codes. +At this point you should have an app that works locally on your computer. The following steps outline updates you need to make in order to deploy the codes. ## Update package.json -In this step, we need to add some code to the `package.json` file so that we can run the app from a remote server. +In this step we need to add some code to the `package.json` file so that we can run the app from a remote server. Right now, there is a good chance that the file will look like this: @@ -29,7 +29,7 @@ Right now, there is a good chance that the file will look like this: } ``` -At the end of the `dependencies": { ... }` object, you need to add a comma `,` so that we can add more code. First let's add the `main` keyword: +At the end of the `dependencies": { ... }` object you need to add a comma `,` so that we can add more code. First let's add the `main` keyword: ``` "main": "app.js", @@ -73,9 +73,9 @@ You should have something that looks like the following: ### Don't forget the Grunt + Bower -If at this time you do not have any of the Grunt packages or Bower in the `dependenciess` object, we need to get that in there. +If, at this time, you do not have any of the Grunt packages or Bower in the `dependenciess` object, we need to get that in there. -You can either add them manually to the `package.json` file or dun: +You can either add them manually to the `package.json` file or run: ``` $ npm install --save grunt @@ -83,25 +83,25 @@ $ npm install --save grunt-sass $ npm install --save bower ``` -Something that you probably don't have is the ability for the deployed server to run the Grunt tasks. For this we need Grunt-CLI. +Something that you probably don't have is the ability of the deployed server to run Grunt tasks. For this we need Grunt-CLI. ``` $ npm install --save grunt-cli ``` -Right about now, you should be looking pretty good. +Right about now you should be looking pretty good. ### Postinstall instructions -When we deploy the codes to Heroku, we have to tell it to run some commands, basically install the Bower packages and run the Grunt tasks. To do this, we need to add the instructions within the `scripts` object of the `package.json` file. +When we deploy the codes to Heroku we have to tell it to run some commands. Basically, install the Bower packages and run the Grunt tasks. To do this we need to add the instructions within the `scripts` object of the `package.json` file. -Directly under the `"start": "node ./bin/www"`, add: +Directly under the `"start": "node ./bin/www"` add: ``` "postinstall": "./node_modules/.bin/bower install && ./node_modules/.bin/grunt" ``` -There, now we have everything that Heroku needs to install the packages and run the scripts. +There. Now we have everything that Heroku needs to install the packages and run the scripts. ## Add the Procfile @@ -117,14 +117,14 @@ Add the following code: web: npm start ``` -Heroku will use this to kick start the app. +Heroku will use this to kickstart the app. ## Make this a Git repo -It is important to make this a git repo BEFORE you create the Heroku server. **WAIT!** Before you go all crazy on the Git, there are some things we need to do. +It is important to make this a git repo BEFORE you create the Heroku server. **WAIT!** Before you go all crazy on the Git there are some things we need to do. -You should have a `.gitignore` file in your repo at this point. open that up and make sure you are ignoring all the `node_modules`, all the `bower_components` and anything in the `/stylesheets/*.css` spectrum. +You should have a `.gitignore` file in your repo at this point. Open that up and make sure you are ignoring all the `node_modules`, all the `bower_components` and anything in the `/stylesheets/*.css` spectrum. ``` node_modules @@ -143,7 +143,7 @@ It is not required at this time to make this a Github repo, but you may want to ## Deploy the codes -This is pretty hard here. Make sure to follow the commands specifically: +This right here is pretty hard. Make sure to follow the commands specifically: ``` $ heroku create @@ -152,7 +152,7 @@ $ git push heroku master ## Rejoice -If all is well, you should see a return like this: +If all is well you should see a return like this: ``` http://.herokuapp.com/ deployed to Heroku From 48816f910c14a755eea5f9e1b90c7dcb42ce6b0b Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:43:57 -0700 Subject: [PATCH 06/15] update writing in express.md --- express.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/express.md b/express.md index e307cbb..54affe2 100644 --- a/express.md +++ b/express.md @@ -6,16 +6,16 @@ It has a wealth of [APIs](http://expressjs.com/4x/api.html) and is FAST AS HELL!! -Express is well known for NOT following after Rails as far as frameworks go, but more so it takes after another Ruby framework called [Sinatra](http://www.sinatrarb.com/). The concept is simple, the framework gives you enough to get things up and running as fast as possible and all without getting in your way. +Express is well known for NOT following after Rails as far as frameworks go, but more so it takes after another Ruby framework called [Sinatra](http://www.sinatrarb.com/). The concept is simple: The framework gives you enough to get things up and running as fast as possible and all without getting in your way. For the most part, Express continues to live up to this statement. -For this workshop, we will be using Express as the core tool for getting a web app up and running with a server, route support, error pages, loggers, etc ... +For this workshop we will be using Express as the core tool for getting a web app up and running with a server, routing support, creating error pages, loggers, etc ... ## Install Express -Installing Express with npm is really easy. Keep in mind that there are two parts to Express, the library that runs it and an awesome generator. +Installing Express with npm is really easy. Keep in mind that there are two parts to Express: The library that runs it and an awesome generator. To install Express: From 96522e0c2dd1e1a33cb7fc4c71406c13040e1431 Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:48:00 -0700 Subject: [PATCH 07/15] update writing in grunt-watch --- grunt-watch.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/grunt-watch.md b/grunt-watch.md index 2dc7882..e2d67c7 100644 --- a/grunt-watch.md +++ b/grunt-watch.md @@ -1,14 +1,14 @@ # Grunt-watch w/Livereload -Now that we have Grunt set up with Sass, when we run the `grunt` task in the CLI, this will process the edits we have. While in rapid development, going back the the CLI, typing in `grunt` and then refreshing the browser will get old fast. +Now that we have Grunt set up with Sass, running the `grunt` task in the command line will process our edits. While in rapid development going back the the CLI, typing in `grunt`, and then refreshing the browser will get old fast. -Thankfully, we have options. `grunt-contrib-watch` is a npm package that will watch our Sass files and when one is touched, it will run the Grunt tasks to process it. To install: +Thankfully, we have options. `grunt-contrib-watch` is a npm package that will watch our Sass files and, when one is touched, will run the Grunt tasks to process it. To install: ``` npm install --save-dev grunt-contrib-watch ``` -As an added bonus, not only can we run a watcher that will process our Sass, but we can also watch `.jade` files for changes as well. +As an added bonus, not only can we run a watcher that will process our Sass, but we can also watch `.jade` files for change. In the `Gruntfile.js` we need to add some Grunt tasks: @@ -40,7 +40,7 @@ module.exports = function(grunt) { }; ``` -And there we have it. Grunt is installed, we have a functional `Gruntfile.js` and we can start writing some Sass too. +And there we have it. Grunt is installed, we have a functional `Gruntfile.js` and we can start writing some Sass, too. ## Add Livereload to layout.jade @@ -64,4 +64,4 @@ html script(src='http://localhost:35729/livereload.js') ``` -After this is added, go back and REFRESH the browser and then any edit in either Sass or Jade should fire the Livereload. +After this is added go back and REFRESH the browser, and then any edit in either Sass or Jade should fire the Livereload. From 21d560aac053d2daa0768ff2b259e1e6792dfed6 Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:50:02 -0700 Subject: [PATCH 08/15] update writing in grunt.md --- grunt.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/grunt.md b/grunt.md index 6745e5f..d43b12a 100644 --- a/grunt.md +++ b/grunt.md @@ -1,8 +1,8 @@ # Install and set up Grunt -Grunt is the workhorse of the Node world. You need tasks run, then you put Grunt to work. If you are from the Rails world, Grunt is much like make or Rake. There is a TOM of documentation out there on this task runner, but in this workshop, I will focus on the basics that will get you up and running with an application. +Grunt is the workhorse of the Node world. You need tasks run? You put Grunt to work. If you are from the Rails world, Grunt is much like make or Rake. There is a TON of documentation out there on this task-runner but, in this workshop, I will focus on the basics that will get you up and running with an application. -Grunt is pretty simple to set up, create a new `Gruntfile.js` file in the root of your project and add the following shell syntax: +Grunt is pretty simple to set up. Create a new `Gruntfile.js` file in the root of your project and add the following shell syntax: ```javascript module.exports = function(grunt) { @@ -16,7 +16,7 @@ module.exports = function(grunt) { }; ``` -To run Grunt, it is typical to install Grunt globally: +To run Grunt it is typical to install Grunt globally: ``` npm install grunt -g @@ -28,4 +28,4 @@ BUT WAIT!! What about deployment? If we create tasks that require Grunt to run o npm install --save grunt ``` -Using this base structure and Grunt installed, we can now begin to add new features to our app. +Using this base structure, and with Grunt installed, we can now begin to add new features to our app. From dca33118ec099bab682dfdb781ebaef2667f04a2 Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:51:44 -0700 Subject: [PATCH 09/15] update writing in grunt.md --- grunt.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/grunt.md b/grunt.md index d43b12a..ceb30ef 100644 --- a/grunt.md +++ b/grunt.md @@ -1,6 +1,6 @@ # Install and set up Grunt -Grunt is the workhorse of the Node world. You need tasks run? You put Grunt to work. If you are from the Rails world, Grunt is much like make or Rake. There is a TON of documentation out there on this task-runner but, in this workshop, I will focus on the basics that will get you up and running with an application. +Grunt is the workhorse of the Node world. You need tasks run? You put Grunt to work. If you are from the Rails world, Grunt is much like make or Rake. There is a TON of documentation out there on this task runner but, in this workshop, I will focus on the basics that will get you up and running with an application. Grunt is pretty simple to set up. Create a new `Gruntfile.js` file in the root of your project and add the following shell syntax: From e1c0c919fdd9fe7e32c8825eeb124c6ca7c1f7a9 Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:54:01 -0700 Subject: [PATCH 10/15] update writing in gulp.md --- gulp.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/gulp.md b/gulp.md index 9143008..d1145a1 100644 --- a/gulp.md +++ b/gulp.md @@ -4,19 +4,19 @@ The following are some interesting articles that need to be worked into this wor ### Getting Started With Gulp -> This article will make the assumption that you have never used a task runner or command-line interface before and will walk through every step required to get up and running with gulp. +> This article will make the assumption that you have never used a task runner or command-line interface before and will walk through every step required to get up and running with Gulp. [source](http://travismaynard.com/writing/getting-started-with-gulp) ### Roll Your Own Asset Pipeline with Gulp -> I’ve found myself using Gulp for just about everything involving HTML/CSS/JS these days. It’s super fast, quick to write scripts for and flexible. I’m at a point now where I have a ton of projects I can just cd into, run gulp and be up and running. It’s the best solution I’ve found for delivering static assets whether for local development or production. +> I’ve found myself using Gulp for just about everything involving HTML/CSS/JS these days. It’s super fast, quick to write scripts for and flexible. I’m at a point now where I have a ton of projects I can just cd into, run Gulp in and be up and running. It’s the best solution I’ve found for delivering static assets for either local development or production. [source](http://blog.carbonfive.com/2014/05/05/roll-your-own-asset-pipeline-with-gulp/) ### Advanced Gulp File -> With gulp starting to find itself into my everyday workflow - I've started to understand its quirks and twists, and how to get along with it. My baseline gulfile.js has become a lot neater and advanced in its functionality that the one I originally developed back in March. +> With Gulp starting to find itself into my everyday workflow I've started to understand it's quirks and twists, and how to get along with it. My baseline Gulpfile.js has become much neater and more advanced in it's functionality than the one I originally developed back in March. [source](http://www.mikestreety.co.uk/blog/an-advanced-gulpjs-file) From 51da6d476ea9d4177aced340d84bc9ebbb28d402 Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:55:47 -0700 Subject: [PATCH 11/15] update writing in heroku.md --- heroku.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/heroku.md b/heroku.md index 118662e..27577d6 100644 --- a/heroku.md +++ b/heroku.md @@ -1,14 +1,14 @@ # Heroku -The following are basic steps needed to quickly set up a Node.js app with Express and deploy to Heroku. +The following are basic steps needed to quickly set up a Node.js app with Express and then deploy it to Heroku. ### Step 1 - Heroku account -Make sure you have a Heroku account set up +First, make sure you have a Heroku account set up. ### Step 2 - Install Heroku Toolbelt -Download and install the tool belt package specific for your OS +Download and install the tool belt package specific for your OS. ##### OSX @@ -26,7 +26,7 @@ $ wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh ### Step 3 - Log into you account -Once toolbelt is installed, you should be able to access your account +Once your toolbelt is installed you should be able to access your account. ``` $ heroku login @@ -39,4 +39,4 @@ Generating new SSH public key. Uploading ssh public key /Users/adam/.ssh/id_rsa.pub ``` -That's pretty much about it. Pass these steps and you are ready to DEPLOY THE CODES! +That's pretty much it. Pass these steps and you are ready to DEPLOY THE CODES! From 382c00a546eeae433c7339305ead0b7995952dfd Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 19:59:18 -0700 Subject: [PATCH 12/15] update writing in new-app --- new-app.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/new-app.md b/new-app.md index f1fa3b9..ba68a8f 100644 --- a/new-app.md +++ b/new-app.md @@ -1,12 +1,12 @@ # Crate a new Express app -At this point, you should be able to go forth and create an app. In this example, we will create a Node.js app with Express framework. +At this point you should be able to go forth and create an app. In this example we will create a Node.js app with the Express framework. ``` $ express ``` -Running this command (using `demo-app` as the example), you should see the following: +Running this command (using `demo-app` as the example) you should see the following: ``` create : demo-app @@ -34,11 +34,11 @@ Running this command (using `demo-app` as the example), you should see the follo $ DEBUG=my-application ./bin/www ``` -BOOM! Express takes care of most of the labor. Now, we do what the computer says, change directory into the app dir and run `npm install`. +BOOM! Express takes care of most of the labor. Now we do what the computer says: Change directory into the app dir and run `npm install`. ## What's in the app? -At this point, you should be able to do a `ls` and see the new structure that was created for you. +At this point you should be able to run `ls` and see the new structure that was created for you. ``` app.js node_modules/ public/ views/ @@ -47,9 +47,9 @@ bin/ package.json routes/ #### app.js -This is the logical starting point for your app. Some of the things in there, lets talk about: +This is the logical starting point for your app. Let's talk about some of the things in here: -The following lines, for this type of app, we don't need them: +For this particular type of app we don't need the following lines: ``` var user = require('./routes/user'); @@ -57,19 +57,19 @@ var user = require('./routes/user'); app.get('/users', user.list); ``` -Sets the path to the dir where the view files are located: +This sets the path to the dir where the view files are located: ``` app.set('views', path.join(__dirname, 'views')); ``` -Sets the path to the dir with static assets: +This sets the path to the dir with static assets: ``` app.use(express.static(path.join(__dirname, 'public'))); ``` -Sets the root route for the app: +This sets the root route for the app: ``` app.use('/', routes); @@ -85,11 +85,11 @@ Directory for all static assets like images, JavaScript, CSS, fonts, etc ... #### views/ -Where all your layout and view Jade files will live. +Where all your layout and View Jade files will live. #### bin/ -There is a single file here, `www` and this is what activate the Node server. +There is a single file here, `www`, and this is what activates your Node server. #### package.json @@ -105,4 +105,4 @@ This is the code that allows you to run `npm start` for the app. #### routes/ -This is the directory where you will build out the RESTful routes for your app. With a base install there should be two files in there, `index.js` and `users.js`. +This is the directory where you will build out the RESTful routes for your app. With a base install there should be two files in there: `index.js` and `users.js`. From 113be21eff43699885004632ab6a14fb685c1327 Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 20:07:01 -0700 Subject: [PATCH 13/15] update writing in node-npm --- node-npm.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/node-npm.md b/node-npm.md index f1e87dc..f7a9282 100644 --- a/node-npm.md +++ b/node-npm.md @@ -1,6 +1,6 @@ # Introduction to Node -There is more then enough documentation out there that supports the question, "Why Node?". Something that really rings true with me is not where Node is today, but where Node is going. Without a doubt, the Rails community has brought a lot to the table, but what made all those awesome ideas hard to swallow was the fact that they were locked inside Ruby. As amazing as Ruby is, not everyone wants to be a Ruby developer. +There's a ton of documentation out there that tries to answer the question, "Why Node?". Something that really rings true with me is not where Node is today, but where Node is going. Without a doubt the Rails community has brought a lot to the table, but what made all those awesome ideas hard to swallow was the fact that they were locked inside Ruby. As amazing as Ruby is, not everyone wants to be a Ruby developer. I particularly like this quote from _Why The Hell Would I Use Node.js? A Case-by-Case Introduction_ [[reference](http://www.toptal.com/nodejs/why-the-hell-would-i-use-node-js)] by [Tomislav Capan](http://www.toptal.com/resume/tomislav-capan) @@ -15,11 +15,11 @@ Before you run any installers, make sure you know what is on your computer. To s $ node --version ``` -Of course to create and run a Node app, you need to have Node installed. To install Node, you can run the [installer from their site](http://nodejs.org/). +Of course, to create and run a Node app you need to have Node installed. To install Node, you can run the [installer from their site](http://nodejs.org/). [Installing Node and npm](http://www.joyent.com/blog/installing-node-and-npm/) is a great article on all the ways to get this set up. Pay attention to Step 4 where there are some pretty solid opinions on how to set things up. -A [gist](https://gist.github.com/579814) is made available that illustrates a series of ways to install node. +A [gist](https://gist.github.com/579814) is available that illustrates a series of ways to install node. The article does state a personal opinion against using Homebrew. Brew has worked for me rather well, but this is an opinion you may need formulate on your own. @@ -28,9 +28,9 @@ The article does state a personal opinion against using Homebrew. Brew has worke > npm is a NodeJS package manager. As its name would imply, you can use it to install node programs. Also, if you use it in development, it makes it easier to specify and link dependencies. -[Learn more](http://howtonode.org/introduction-to-npm) about npm +[Learn more](http://howtonode.org/introduction-to-npm) about npm. -Depending on your install process you may or may not have NPM installed. To check, simply run: +Depending on your install process you may or may not have npm installed. To check, simply run: ``` $ npm --version @@ -38,7 +38,7 @@ $ npm --version #### If you do not have npm installed, run the following: -Note: npm is the package manager for Node, so you can't use the package manager to install the package manager o_O +Note: npm is the package manager for Node, so you can't use the package manager to install the package manager. o_O ``` $ curl http://npmjs.org/install.sh | sh @@ -46,7 +46,7 @@ $ curl http://npmjs.org/install.sh | sh ## Using npm -Now that you have npm installed, all registered packages are a simple command away. For a basic package install, run: +Now that you have npm installed all registered packages are a simple command away. For a basic package install, run: ``` $ npm install @@ -60,7 +60,7 @@ To do this, you need to add the `-g` flag n the install process: $ npm install -g ``` -**Note:** Depending on how Node is installed on your system, you may not have access to install a global package. To get around this, simply add the `sudo` command before the npm install method: +**Note:** Depending on how Node is installed on your system you may not have access to install a global package. To get around this, simply add the `sudo` command before the npm install method: ``` $ sudo npm install -g @@ -70,7 +70,7 @@ $ sudo npm install -g The most common use case for npm is to maintain a manifest of dependencies for your project. This is maintained with a [package.json](https://www.npmjs.org/doc/json.html) file. -You can either crate this file yourself, or there are ways to generate this file too. In any directory simply run `npm init` and the CLI will walk you through a series of questions and out put something like the following: +You can either create this file yourself, or there are ways to have it generated for you. In any directory, simply run `npm init` and the CLI will walk you through a series of questions and output something like the following: ``` { @@ -86,13 +86,13 @@ You can either crate this file yourself, or there are ways to generate this file } ``` -Once you have this in your project adding to it using `npm install` is very easy. Simply add the `--save` flag to the command like the following: +Once you have this in your project, adding to it using `npm install` is very easy. Simply add the `--save` flag to the command like the following: ``` $ npm install --save ``` -Adding Grunt to the project would update the `package.json` by adding a `dependencies` object in the json file: +Adding Grunt to the project will update the `package.json` by adding a `dependencies` object in the json file: ``` { @@ -111,7 +111,7 @@ Adding Grunt to the project would update the `package.json` by adding a `depend } ``` -Adding to this, if you wanted to add a dependency that is only for development versus production, you pass in the `-dev` flag: +Adding to this, if you wanted to add a dependency that is only for development, as opposed to production, you would pass in the `-dev` flag: ``` $ npm install --save-dev @@ -141,11 +141,11 @@ Adding Gulp as a development dependency we get the following update to the `pack ### Learn more about npm -npm is an amazingly complex utility when it comes to package management. See this [npm cheatsheet](http://blog.nodejitsu.com/npm-cheatsheet/) for more in-depth information. +Npm is an amazingly complex utility when it comes to package management. See this [npm cheatsheet](http://blog.nodejitsu.com/npm-cheatsheet/) for more in-depth information. ### Learn more about package.json -The `package.json` has many features. To learn more about how this all works [package.json An interactive guide](http://package.json.nodejitsu.com/#) is an amazing tool to learn from. +The `package.json` has many features. To learn more about how this all works, [package.json An interactive guide](http://package.json.nodejitsu.com/#) is an amazing tool to learn from. ## Maintaining dependencies @@ -155,7 +155,7 @@ For the most part you probably don't want to do this. Versioning is maintained v ### Using .gitignore -To keep npm libraries out of your version control, add the following to your .gitignore file. +To keep npm libraries out of your version control add the following to your .gitignore file. ``` node_modules @@ -163,7 +163,7 @@ node_modules ### Getting the dependencies -The `package.json` file is maintaining your app's dependencies and you are not committing your dependencies to your Git repo, those who clone your project need to get these install these dependencies. Installing is very simple: +The `package.json` file is maintaining your app's dependencies and you are not committing your dependencies to your Git repo. Those who clone your project need to install these dependencies. Installing is very simple: ``` $ npm install From 22074b294fb4abede9ed00b7804ad46758aad14f Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 20:12:48 -0700 Subject: [PATCH 14/15] update writing in routes.md --- routes.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/routes.md b/routes.md index 7a4bb45..79dfdd2 100644 --- a/routes.md +++ b/routes.md @@ -1,8 +1,8 @@ # Fun with Routes -The `app.VERB()` methods provide the routing functionality in Express, where **VERB** is one of the HTTP verbs, such as `app.post()`. Multiple callbacks may be given, all are treated equally, and behave just like middleware, with the one exception that these callbacks may invoke `next('route')` to bypass the remaining route callback(s). This mechanism can be used to perform pre-conditions on a route then pass control to subsequent routes when there is no reason to proceed with the route matched. +The `app.VERB()` methods provide the routing functionality in Express, where **VERB** is one of the HTTP verbs, such as `app.post()`. Multiple callbacks may be given. All are treated equally, and behave just like middleware, with the one exception that these callbacks may invoke `next('route')` to bypass the remaining route callback(s). This mechanism can be used to perform pre-conditions on a route then pass control to subsequent routes when there is no reason to proceed with the route matched. -The following snippet illustrates the most simple route definition possible. Express translates the path strings to regular expressions, used internally to match incoming requests. Query strings are **not** considered when peforming these matches, for example `GET /` would match the following route, as would `GET /?name=tobi`. +The following snippet illustrates the most simple route definition possible. Express translates the path strings to regular expressions, used internally to match incoming requests. Query strings are **not** considered when peforming these matches. For example `GET /` would match the following route, as would `GET /?name=tobi`: [source](http://expressjs.com/4x/api.html#app.VERB) @@ -11,7 +11,7 @@ The following snippet illustrates the most simple route definition possible. Exp app.VERB(path, [callback...], callback) ``` -Lets get into setting up some routes. In the `app.js` file the following line is how this comes together: +Let's get into setting up some routes. In the `app.js` file the following line is how this comes together: ```javascript var routes = require('./routes/index'); @@ -19,13 +19,13 @@ var routes = require('./routes/index'); What's happening here? Basically, Express is setting the `var` of `routes` to require the path and file of `./routes.index`. -This var is then used to set the root path of the app +This var is then used to set the root path of the app. ```javascript app.use('/', routes); ``` -Another thing we can do is `res.send()` and what ever we put in there will get sent directly to the browser. For example: +Another thing we can do is `res.send()` and whatever we put in there will get sent directly to the browser. For example: ```javascript router.get('/foo', function(req, res){ @@ -33,7 +33,7 @@ router.get('/foo', function(req, res){ }); ``` -Using the `res.send()` we can do fun things like even send in JSON objects. +Using the `res.send()` we can do fun things, like send in JSON objects. ```javascript router.get('/foo', function(req, res){ @@ -41,7 +41,7 @@ router.get('/foo', function(req, res){ }); ``` -This method allows us to then keep all our routes in the `index.js` file if needed. There are better ways to address a more complicated routing solution, but for the scope of this workshop, this is great. +This method allows us to then keep all our routes in the `index.js` file, if needed. There are better ways to address a more complicated routing solution, but for the scope of this workshop this is great. ## What's in the index.js file? @@ -61,15 +61,15 @@ module.exports = router; ##### router.get -This is the function that will 'get' the URL path of `/`. Then we need to create a function that will make a `req` (request) and `res` (response). The is another concept of `next` for chaining events would go here as well, but not shown in this example. +This is the function that will 'get' the URL path of `/`. Then we need to create a function that will make a `req` (request) and `res` (response). The is another concept of `next` for chaining events that would go here as well, but is not shown in this example. ##### What is module.exports? -This is the object that's actually returned as the result of a require call. This is a Node feature, more on this at [nodejs.org/api](http://nodejs.org/api/modules.html#modules_module_exports). +This is the object that's actually returned as the result of a require call. This is a Node feature. More on this at [nodejs.org/api](http://nodejs.org/api/modules.html#modules_module_exports). ## Build a new route -Looking at the syntax pattern, if we wanted to add a new route to the app, we can simply do something like the following: +Looking at the syntax pattern, if we wanted to add a new route to the app, we could simply do something like the following: ```javascript router.get('/app', function(req, res) { @@ -87,7 +87,7 @@ router.get('/app', function(req, res) { ## It's a route? It's a controller? -What's interesting about this is that the route function is containing logic. Inside the route is a `res.render` function: +What's interesting about this is that the route function contains logic. Inside the route is a `res.render` function: ```javascript res.render('foo', { title: 'Express' }); @@ -107,8 +107,8 @@ These are two examples of how we can pull data from the 'controller/route' and d

Welcome to Express

``` -All of this seems to be a bleed of concerns as the route may also contain controller info? This is true and there is a movement in the community to change the name of the dir from `routes` to `controllers`. +All of this seems to be a bleed of concerns as the route may also contain controller info. This is true and there is a movement in the community to change the name of the dir from `routes` to `controllers`. A great example of this can be seen at [Holowaychuk](https://github.com/visionmedia/express/tree/master/examples/mvc)'s Express MVC example repo. -But for the sake of this workshop and consistency, we will keep the current convention. +But, for the sake of this workshop, and consistency, we will keep the current convention. From 23cd997f1ae2f8eb932b2ddf52c01c2f03bbf5aa Mon Sep 17 00:00:00 2001 From: bwstud Date: Wed, 18 Jun 2014 20:14:23 -0700 Subject: [PATCH 15/15] update writing in sass.md --- sass.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sass.md b/sass.md index 0005cd8..11ee8e7 100644 --- a/sass.md +++ b/sass.md @@ -1,6 +1,6 @@ # Add libsass -Sass, and it's port libsass, is the leading CSS pre-processor and by far the most feature rich. But one thing that separates libsass from others in the JavaScript community is that it's not written in JavaScript. It's actually written in C/C++. So, the same library is portable to just about any language that a wrapper can be written for. And by far the most popular wrapper is `node-sass`. +Sass, and it's port libsass, is the leading CSS pre-processor and by far the most feature rich. But, one thing that separates libsass from others in the JavaScript community is that it's not written in JavaScript. It's actually written in C/C++. So, the same library is portable to just about any language that a wrapper can be written for. And by far the most popular wrapper is `node-sass`. All of this doesn't really matter. The only thing this means is that we need to go through some additional, although extremely simple, setup steps. @@ -39,7 +39,7 @@ In the `files:` object you will list the path to the output CSS and then the pat ## Add the Sass -To get this running, we need to add the `sass` directory and put the `style.scss` file in there. In the root of the project: +To get this running we need to add the `sass` directory and put the `style.scss` file in there. In the root of the project: ``` $ mkdir sass