Step 1: Installing CoffeeScript

like most other Node.js packages, installing coffeescript is easy:

npm install coffee-script

Now that we have CoffeeScript installed, we can write a basic ‘hello world’ server is CoffeeScript. If you aren’t familiar with the CoffeeScript syntax, you can refer to the (CoffeeScript Documentation)[http://coffeescript.org/]. Write the following to a hello.coffee file:

1
2
3
4
5

require http = 'http'
http.createServer (req, res) ->
        res.writeHead 200
        res.end 'Hello, World!'
.listen 4000

Step 2: Compilation

CoffeeScript files can’t be executed directly by node, they have to be compiled to JavaScript first. We can run the following command to compile our hello.coffee file:

coffee --compile hello.coffee

This will generate a hello.js file. now we can run node hello.js and see our message at localhost:4000. Here is the resulting compiled JavaScript:

1
2
3
4
5
6
7
8
9
10
11

(function() {
  var http;

  http = require('http');

  http.createServer(function(req, res) {
    res.writeHead(200);
    return res.end('Another Message!');
  }).listen(4000);

}).call(this);

The resulting JavaScript is more verbose than what we wrote originally, but it is still very easy to see how the CoffeeScript maps to the resulting code. Unfortunately this constant compilation isn’t very rapid, now is it? Let’s look at how we can streamline this process.

Step 3: Automation

The CoffeeScript compiler has a --watch option, which we can use to tell it to automatically compile any .coffee file whenever there is a change. Run the following command, and set it to a background process:

coffee --compile --watch *.coffee

That will take care of the compilation issue. However, you will still have to wait until everything compiles, and then restart your server, right? Wrong! Now we are going to install a second package, called (Nodemon)[http://remysharp.com/2010/10/12/nodejs-rapid-development-nodemon/] which will listen for changes to files, and automatically restart the Node.js server whenver one is detected. Start by installing the package:

npm install nodemon

Now, you’ll want to create a file named nodemon-ignore in your app’s main directory, and add an exception for .coffee files:

1
2

#creates an exception for .coffee files
*.coffee

This way, you won’t have any conflicts with the CoffeeScript compiler. When the files compile, it will cause the .js files to change, but the server won’t restart before those files are ready. When you are ready to begin, run the following command:

nodemon hello.js

Nodemon will listen to changes to all of your non-CoffeeScript files, and automatically restart the server whenever it detects a change. And now you are able to write your node apps in CoffeeScript, and not have to worry about compiling or server restarts, enabling you to write and develop more quickly.

• Read Part 1 Here

Now that we have learned the basics of navigating the terminal, lets start looking at how to we affect the file system we’re working in. In this tutorial, we’ll cover the following: creating and deleting directories, copying and moving files and directories, and creating and deleting files.

###Creating and Deleting Directories

Wherever you left off in the last lesson, let’s start by going back to home directory, and working from there. Remember that we can do this by running the command cd ~. Now, since we will be manipulating the file system in this tutortial, let’s create a new directory that we can work in. You can do this by using the mkdir command. mkdir is short for “make directory”. just type mkdir and the name of the folder you would like to create. For this example, we’ll call it ‘terminal-tutorial’

mkdir terminal-tutorial
ls

When you run ls, you’ll see that a new directory has been created. mkdir defaults to creating the directory inside the directory you are currently located. if you define a path, it will created the directory there. For example, lets make a directory inside of our terminal-tutorial directory, and then navigate there.

mkdir terminal-tutorial/to-delete
cd terminal-tutorial
ls

You should see just the to-delete directory. If you tried to create a directory in a directory that did not exist, you would get an error. You can create nested directories at once by using the -p option, Like so:

mkdir -p multiple/subdirectory/example

creates 3 new directories with those paths. Now lets says you need to get rid of a directory. For this we can use the rmdir command, which is short for ‘remove directory’. Lets get rid of that pesky to-delete folder we made earlier, and the multiple directory example

rmdir to-delete
rmdir multiple
rmdir: failed to remove `multiple': Directory not empty

You’ll see that you get the following error message since multiple is not empty. rmdir can only remove empty directories. Later in this artice we will discuss how can remove entire directories of files

Creating and Deleting Files

Now we can start creating and deleting files as well as directories. Let’s start with the touch command. touch is to files what mkdir is to directories. so let’s create a file:

touch to-delete
ls

This creates an empty file named to-delete. To actually delete this file, we use the rm command, which is short for remove:

rm to-delete

rm can also be used on directories, by using the -r option, which is short for recursive. This will also remove all the contents inside of a directory. Occasionally you may get a prompt asking if you are sure you want to delete something. You can get rid of this with the -f option. You can use this to get rid of the multiple directory you created earlier

rm -rf multiple

If you want to open and edit text files, you will need to get accquainted with a good text editor. Vim and Emacs Are the two most popular, but both are very complex and a whole series of tutorials could be written on either one.

WARNING

It is a common joke on the internet to try to get people to run the command rm -rf / in the terminal. / refers to the base directory of your entire filesystem, so rm -rf / basically translates into “delete my everything forever, and don’t ask for my permission”. It is a seriously dangerous command to run, and now you know why.

Copying And Moving Files and Directories

Let’s start by creating a couple more directories for this section:

mkdir cars
mkdir vechicles

You may have decided that you made a mistake, and the cars directory should be inside of the vehicles directory. For situations like these, we have the mv command, which is short for move:

mv cars vechicles/cars

The first option of the mv command is the directory you would like to move, the second argument being where you would like it to go. Since the names do not nessicarily have to match, mv also acts as a ‘rename’ operation for files and directories. If you want to guarantee the names match (and save you some typing), you can replace the final name of the file/directory with a . character, so these two commands are equivalent:

mv cars vehicles/cars
mv cars vehicles/.

If you wanted to maintain the original cars directory and just put a copy of it in the vehicles directory, then you can do that wih the cp command, which is short for “copy”. Much like rm, cp works with both files and directories, but requires a -r for directories. The structure of the arguments is the same as mv though. So copying cars would have looked like this:

cp -r cars vehicles/.

Note that the . syntax to keep the same name still works here as well.

Protip: Tab Completion

All of this typing on the command line can get tiresome. One of the best tricks to learn to cut down on the amount of keystrokes it takes to type commands is to learn about and get used to frequently using tab completion. If you type the first few letters of a directory or file name and hit tab, the shell will complete it for you! You must type enough characters for it to be unique. If not, pressing tab twice on most shells will show you all the directories and files that match the start of the name you typed. so for example, if you typed this:

mkdir terminal-tutorial
cd te   

and this pressed the tab button, the terminal should automatically fill out:

cd terminal-tutorial

Now we have a good set of tools for working with and manipulating the file system. Next time we’ll take a look at users, groups, and the permissions system that UNIX is based on.

For reference, I’ll be using the PERL-style regular expression syntax used by languages like PHP. Here’s a Regular Expressions Cheat Sheet That I’ll be referencing throughout this article, and it is a great resource to keep around.

Regular Expressions: A Language Unto Itself

The tricky thing about regular expressions is that it is its own language within a programming language. It has its own collection of symbols and syntax. Those long, scary strings that regexes are made up of are collections of these symbols and are used to make the pattern you want to match. Think of a regular expression as a sentence, and each one of the symbols as a word.

Writing “Words” in Regular Expressions

Most of the words of your regular expression are going to be made of a few different language constructs:

• Ranges : defining a set of characters that can match. Common examples are [A-Z], which means all capital letters, [0-9] or which means all digits. These can be combined as well. A common on is [A-Za-z0-9-_] which would match all letters, numbers, hyphens, and underscores.
• Character Classes : similar to ranges. \s means ‘any white space character’, where \S means ‘any non-white space character’.
• Metacharacters : characters that have thier own special meaning, the most common being the pipe | character, which means ‘or’ similar to || in most programming languages. A subset of metacharacters is anchors, where can denote the beginning of a string (^) or the end of a string ($).
• Quantifiers : quantifiers are a kind of ‘modifier’ to the above patterns. These let you tell the pattern how many of the previous pattern to look for. The common ones are: * for 0 or more, + for 1 or more, and ? for 0 or 1. You can also explicity state an amount with something like {5} for 5 characters, or a range, such as {3-6}, which matches anywhere between three and six characters.

Building Patterns with Words

Let’s look at the following example problem:

we have a system that has to match social security numbers. 
They can look like any of the following:

123-45-6789
123/45/6789
123456789

so, now that we have the set of patterns we want to match, we can start building up smaller words to match each part of the pattern. Writing regular expressions is similar to writing functions or classes: you start by breaking down the problem, figuring out smaller parts of it, and then start working on combining these smaller solutions into a large one. So let’s start by writing out our pattern in plain english:

• We have the start of the string,
• then three digits,
• then either a hyphen, forward slash, or neither,
• then two digits,
• then either a hyphen, forward slash, or neither,
• then four digits,
• and that is the end of the string.

So, let’s look at this step by step:

• We have the start of the string : this is where we start with one of the anchors we mentioned earlier, ^.
• Three Digits : We discussed the range of digits earlier ([0-9]), but that only matches a single digit. To match exactly 3, we will need a quantifier as well. So this word can be writen as [0-9]{3}.
• Either a hyphen, forward slash, or neither : this is going to take another quantifier, but which one? It helps if we rephrase this statement a bit, and think of it as this: “exactly 0 or 1 hyphen or forward slash”. Now we can see that we need the ? quantifier. We also see that we’ll need to use an ‘or’ for this statement. For statements like this, you can wrap this part of the expression in parenthesis so that its clear whats going on. The answer here is (-|/)?. Declaring parts of a regular expression inside of parenthesis like this is called defining a subpattern
• Two Digits : similar to above: [0-9]{2}.
• Either a hyphen, forward slash, or neither : same as above: (-|/)?.
• Four Digits : similar to above: [0-9]{4}.
• End of the String : another anchor, the $ one this time.

So, now let’s put that all together, and we have a full regular expression:

^[0-9]{3}(-|/)?[0-9]{2}(-|/)?[0-9]{4}$

Tada! Now that you can see how the regular expressions is really just a bunch of small parts that fit together, hopefully you can figure out how to both write your own regular expressions, and read other ones you come across.

This is just the tip of the regex iceberg though. There is a whole lot more you can do with it that is much more than the span of this article. Play around with them, refer back to the cheatsheet, and see what you can come up with.

Edit

I realized there was a small problem with the regular expression above. While this work for most of our cases, there is the scenario of getting a number formatted like so: 123-45/6789 which the pattern would match, even though it is not in a valid format. I asked about this on Stack Overflow And learned about using backreferences for situations like this. you can use the syntax \1 where 1 is the number of the subpattern you want to reference. By doing so, you can make sure that the second delimiter matches the first. So our regular expression would now look like this:

^[0-9]{3}(-|/)?[0-9]{2}\1?[0-9]{4}$

Step 1: Creating A Template

To start, we are going to make two new files, a layout view, and a localized controller. Let’s start by creating a layout.php file in views, and add the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name="viewport" content="width=device-width" />
<title>Title Goes Here</title>
<!--[if IE 9]>
  <style type="text/css"> .gradient { filter: none;} </style>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>

This is based on the HTML5 set up from Paul Irish. We’ll use this as the basis for all of our pages. Now, to use this, we are going to create a MY_Controller inside of appliction/core/MY_Controller.php, and create a new function that we’ll call render

1
2
3
4
5
6
7
8
9
10
11

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class MY_Controller extends CI_Controller {
  protected $layout = 'layout';
  protected function render($content) {
    $view_data = array(
      'content' => $content
    );
    $this->load->view($this->layout,$view_data);
  }
}

This will allow us to use the layout file to wrap all of our content. We’ve also stored the layout file as a protected variable of the MY_Controller, so that we can use different layouts for different controllers if we so choose. Now, let’s modify the template file to be able to render the content. Change the body tag so that it looks like this:

1
2
3

<body>
  <?= $content; ?>
</body>

Now, let’s set up an example view and an example controller to see how it works.

1
2

  <h1>Hello, World!</h1>
  <p> Example page using layouts </p>

1
2
3
4
5
6
7
8

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Example extends MY_Controller {
  public function index() {
    $content = $this->load->view('example/index',null,true);
    $this->render($content);
  }
}

Step 2: Adding the Asset Helper

To help us manage our CSS, JavaScript, and image files, we are going to add some tools for asset manage. First, let’s include this Asset Helper In our project, and update our autoload.php file so that it is automatically included. Now we are going to set up the directory structure for this. Here is how to do it from the base of your CodeIgniter project (assuming you are using the standard naming conventions):

mkdir assets
mkdir assets/css
touch assets/css/app.css
mkdir assets/js
touch assets/js/app.js
mkdir assets/images

Now, we are going to keep a list of all of the standard CSS and JavaScript files inside of our MY_Controller, and pass them along to the layout:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class MY_Controller extends CI_Controller {
  protected $layout = 'layout';
  protected $stylesheets = array(
    'app.css'
  );
  protected $javascripts = array(
  'app.js'
  );

  protected function render($content) {
    $view_data = array(
      'content' => $content,
      'stylesheets' => $this->get_stylesheets(),
      'javascripts' => $this->get_javascripts()
    );
    $this->load->view($this->layout,$view_data);
  }

  protected function get_stylesheets() {
    return $this->stylesheets;
  }

  protected function get_javascripts() {
    return $this->javascripts;
  }
}

And now we’ll update our template using the css_asset() and js_asset() functions from the helper we included earlier:

1
2
3
4
5
6
7
8
9

<!-- in the <head> .. -->
<? foreach($stylesheets as $stylesheet): ?>
  <?= css_asset($stylesheet); ?>    
<? endforeach; ?>

<!-- right before <body> -->
<? foreach($javascripts as $javascript): ?>
  <?= js_asset($javascript); ?>
<? endforeach; ?>

If you view the source, you should see that your app.css and app.js files are now included.

Step 3: Adding Local Assets

One of the better ideas Rails 3.0 brought to the table was the idea of the ‘asset pipeline’, which includes being able to define JavaScript and CSS files that are specific to a particular controller. Now let’s set up our CodeIgniter project to be able to behave in a similar manner.

This was my motivation for writing the get_stylesheets() and get_javascripts() functions in the MY_Controller class earlier. since we are going to be changing how we get the arrays, we can now do so without touching the render() function since we have abstracted out the interface in which we get our files.

So let’s update those two functions, and add two more protected variables to our MY_Controller file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MY_Controller extends CI_Controller {
  protected $layout = 'layout';
  protected $stylesheets = array(
    'app.css'
  );
  protected $javascripts = array(
  'app.js'
  );
  protected $local_stylesheets = array();
  protected $local_javascripts = array();

  //other parts of the class..

  protected function get_stylesheets() {
    return array_merge($this->stylesheets,$this->local_stylesheets);
  }

  protected function get_javascripts() {
    return array_merge($this->javascripts,$this->local_javascripts);
  }

}

Now we are able to add additional asset files to the local_stylesheets and local_javascripts variables in classes that extend MY_Controller, allowing us to keep our code seperated and more organized. With this and templates, we now have a good system in place to manage the visual aspects of our web application.

You’ve woken up in a strange place. Maybe you’ve decided you want to be a power user with your mac. Maybe you’ve finally decided to check out this strangle ‘Linux’ thing you’ve heard so much about. Maybe its your first day in software engineering class and the teacher is telling you you are going to have to work on the school’s server to turn in all of your work. Either way, you find yourself eye-to-eye with a terminal (commonly called the command line) and you don’t know what to do.

Where Are We?

Let’s start by doing what anyone would do when dropped off in a new strange land. Let’s figure out where we are and take stock of our surroundings. Type the following command:

pwd

this will tell you the directory you are currently in. It may look something like this:

/home/glenn/

Let’s make sure we are still who we think we are:

whoami

This will tell you your username:

glenn

Now, let’s see what else is in the directory with us:

ls

this gives us a list of all the files and directories in the directory we are currently in. but maybe we want a bit more information about this. let’s type the following command:

ls -la

and we get something like this:

drwxr-xr-x 70 grp   glenn    4096 2012-02-15 09:35 .
drwxr-xr-x  3 root  root     4096 2011-03-15 16:55 ..
drwxr-xr-x  2 grp   glenn    4096 2012-02-07 09:21 Pictures
drwxr-xr-x  2 grp   glenn    4096 2011-08-23 15:29 Public
drwxr-xr-x  5 grp   glenn    4096 2011-09-28 13:30 Rails
drwxr-xr-x  6 grp   glenn    4096 2011-11-08 16:35 Repositories
drwxr-xr-x 12 grp   glenn    4096 2012-01-15 17:09 Server
drwxr-xr-x  2 grp   glenn    4096 2011-03-15 17:03 Templates
drwxrwxr-x  2 grp   glenn    4096 2011-08-11 08:46 Ubuntu One
drwxr-xr-x  2 grp   glenn    4096 2011-03-15 17:03 Videos

Whoa! there is a lot to take in here. Why did adding -la to the ls command change the output so much, And what is all of this stuff in front of the file names now? Why are there two files named . and ..?

Commands And Options

ls and pwd are both commands. pwd is short for Print Working Directory and well, prints your current working directory. ls is shorthand for list and lists the contents of the current working directory. These are the first of many commands we’ll be going over. You can pass options to commands to change how they work. These are almost always formatted in the form of a single hyphen and a single letter, or two hypens and a complete word. You can combine single letter options with one hyphen, which is what we did when we typed ls -la. You could also write ls -l and ls -a and both would be valid commands. the -l argument tells the ls command to list the files on a single line with additional details. The -a command tells ls to show all files, including hidden ones. All directories contain at least two hidden directories, one called . and one called .., but we’ll get to those in a moment.

Many commands have similar options, where the same arguments have similar effects with similar commands. There is one option that works with almost every command on the terminal, and its the most important one you’ll ever learn. Are you ready? Got a pen?

--help

This will print out an explination of the commands function, and a list of options it can take and what they do. Go try running the following commands and checkout the output:

whoami --help
ls --help

You’ll see that whoami is a relatively simple command with very few arguments, where ls has a lot more options availble. I could just replace a lot of text in this and upcoming articles with “just run --help”, but I’m not going to. Feel free to explore some of the other commands and options that are available to them, and see what you can do with them.

Traversing Directories

Now I bet you are still wondering about that . and .. stuff. These are both directories, or rather things that point to directories, that can be found in every single directory inside of linux based system. . Always points to the current directory. .. Always points to the parent directory. If your current working directory is /home/glenn/, then .. would point to /home/. If you make it all the way to the bottom directory (/), then .. will still be there, but will also point to /.

Now let’s learn how to change our working directory so that we can start traversing the folders around us. This brings us to our next command and last one of this article:

cd

cd is short for ‘Change Directory’. To use this, we’ll look at another thing we can do with commands: pass arguments to them.

Passing Arguments

Commands take arguments when they need additional information on what they do. You could think of it as a ‘target’ for the command. Commands can take multiple arguments, but in this case we’ll only need one: Telling cd what directory we would like to change our directory too. So, if we want to go into the Pictures directory earlier. try running these two commands:

cd Pictures
pwd

Now, based on the folder structure we looked at earlier, we should get an output similar to this:

/home/glenn/Pictures

If we wanted to go back to where we were, we can reference that .. directory:

cd ..
pwd

and we are back at

/home/glenn

cd ProTips

You can chain together directories to move multiple steps at once, like so:

cd Pictures/Vacations/Vegas
cd ../../../

There are also two handy shortcuts available to the cd command:

cd -
cd ~

the first is sort of an ‘undo’ option. if will take you back to your last working directory. the tilde (~) is short hand for your home directory which every user has.

Writing with Octopress

I love being able to write in emacs using markdown. It feels simple. It feels easy. It feels right.

Deploying with Github

This also allows me to host with github pages for free, and use git for deployment. So many headaches just went away for me when it comes to writing.

Version Control based writing.

I can take the same approach to writing as I can with coding, publishing fast, fixing mistakes as they are found, and changing content as need be. What you are currently reading isn’t the first version of the post, and likely not the last. I also like the idea of ‘open source’ writing. If anyone has anything they would like to add or change, feel free to send a pull request to this repo, and I’ll take it under consideration.

The Right Plugins

There aren’t many plugins or themes available for octopress (yet), but it has all the things that are needed to get good content going. That’s what I love about it, it is all content based. The default theme is a beautiful starting off point, it’s clear and responsive.