path: root/cmd/basics.txt

Test this with an article for CSSTricks and a sign up for a tips mailing list. Just write the article, a weeks worth a tips and pitch to see what happens.




The reason the command line comes across as pure wizardry much of the time is that popular tutorials and books teach commands, tools and skills that web developers don't necessarily need. 

Unless you're the rare web developer / sysadmin you don't really need to know how to tail log files, search with grep and awk, pipe things between apps or write shell scripts.  All of those things can come in handy, but they're not essential for web developers.

For web developers like us most command line books fail the basic "how will this help me?" test. 

I know because I've read a bunch of them and, while they all eventually did prove useful down the road, none of them helped me automate tasks with Grunt or got me started with Sass or helped improve my development environment and deployment tools. 

All that I had to figure out myself with man pages, scattered tutorials and more than a healthy dose of trial and error. More like trial and error, error, error, trial, error, error, error, error, error, error.

**** tk I want to spare you that rather lengthy process and get you started using command line tools. This book is not cumulative. That is each chapter is designed to stand alone. Scan the table of contents here, find one thing you want to learn how to do and go read that chapter.***

**** Once you've accomplished something then come back here and you can learn a little more foundational stuff.***

## The Basics: Open Your Terminal Application

If you're on OS X the built in application is Terminal, which lives in Applications >> Utilities. While Terminal will work, I highly suggest you grab iTerm instead. It's free, much faster and has a boatload of useful features for when you're more comfortable.

If you're on Windows grab [Cygwin][1] and follow the setup instructions.

If you're on Linux you probably didn't buy this book. But on the outside chance you did, your distro most likely came with some sort of terminal application installed. Search for "terminal" or "command line" and see what you can find. If you want an everything and kitchen sink terminal, check out [Terminology][2].

Okay so you've got a window open in some kind of terminal emulator. 

Let's start with some basics, like why is it called an emulator?

Well back in the day a terminal was just a screen and a keyboard that connected to a mainframe via a serial port. Seriously. The terminal was literally at the end of the line. You sat down and typed your command into the terminal and the terminal then sent them off to the actual computer. So a terminal emulator is just emulating that basic interface.

Oh my gawd, why the @#$% would I want to go back to those days? 

I don't know, why do you drive a car with a 12,000 year old invention like the wheel still primitively strapped to the bottom of it? 

Because it works.

So a terminal emulator opens up and then it loads a shell. Now a shell is an extra layer between you and that metaphorical mainframe off in the distance. To stick with the wheel analogy, a shell is like a rubber wheel vs the stone wheel of a bare terminal. While wheels are just as useful as ever after all these years, most of us don't use the stone ones anymore. Same for the terminal. The shell is much nicer than a bare terminal.

By default most operating systems these days will load the Bash Shell. Another popular shell you'll sometimes see referenced is the Z Shell or more commonly ZSH. The two are pretty much  indistinguishable in the beginning, though Zsh has some very powerful autocomplete feature Bash does not. For now we'll stick with Bash. In the next chapter we'll kick off the Bash training wheels and start using Zsh.

## Basics: Figure Out Where You Are

Okay, you've probably got a screen that looks something like this:

![tk screen of terminal no frills]

Go ahead and open up the preferences for your terminal and pick a color scheme that's a little easier on the eyes. I happen to like [Solarized Dark][3] which is the blueish color you'll see in all the screenshots. So when I open a terminal it looks like this:

![tk iTerm win]

Ah, that's so much better. Okay, now where are we? It turns out our terminal is telling us the answer to that question, we just need to figure out how to read it. Here's the basic line from the screenshots above:

~~~
Last login: <date> on ttys018
You have mail.
iMac:~ sng$ 
~~~

So first there's a line about the last time I logged in, which you can pretty much ignore unless you're a sysadmin, in which case email me for a refund. Then there's a line about me having mail because I have a cron job running that sometimes errors out and sends me a message that it failed. As you can see I just ignore this message. 

Then we have the stuff that actually matters, this bit:

~~~
iMac:~ sng$ 
~~~

Yours will be a little different because you machine name may well be more creative than "iMac" and your username will not be `sng`. But there is something else in there to note... See that `~` character after the colon and before the username?

That's where we are. It just so happens that by default terminal windows open up in the user's home directory, another throwback to the old mainframe days, but one that still makes sense. After all there's a really good chance you want to be in your home directory since that's where all your projects and files are.

If you want to know where you are, you can always find out just by typing `pwd`. The `pwd` command just tells you the absolute path to the current working directory.

~~~
~ » pwd
/Users/sng
~ » 
~~~ 

Note that For the rest of the book I'm going to use a simplified prompt in all the example code. I'll omit the machine name (iMac in the above example) and use the >> symbol instead of the $. So everything will look like this:

~~~
~ » command
~~~

Nice and clean and simple. In a few chapters I'll show you how to modify what yours looks like.

Okay, so we know we're in our home directory, let's see what's in this mysterious directory, type `ls` and hit return:

~~~
~ » ls
Downloads                  Library                    Public                     
Dropbox                    Movies                     Pictures                   
Documents                  Music                      Sites
~~~

The exact spacing of the list and folders within it will depend on what's in your home directory. But if you go open up your file browser (that's the Finder on OS X and Windows Explorer in Windows) you should see the exact same like of directories or, as your file browser calls them, folders.

So what is `ls`? Well the short answer is that it's the list command, it lists the contents of the current directory. 

When you type `ls` and nothing else it will show you the content of the current directory. Chances are, regardless of what platform you're on, there's a Documents folder in your home directory. Let's see what's in it:

~~~
~ » ls Documents
~~~

Chances are that produced a very long, jumbled and difficult to read list of all the stuff that's in your documents folder. To make it a bit prettier, let's use what are called flags or options, in case we'll add `-lh`

~~~
~ » ls -lh Documents
drwxr-xr-x@   4 sng  staff   136B Mar  5 09:08 Virtual Machines.localized
drwxr-xr-x@  20 sng  staff   680B Jan 12 20:57 archive
drwxr-xr-x@  31 sng  staff   1.0K Feb 19 17:27 bak
drwxr-xr-x@ 368 sng  staff    12K Oct 29 11:25 bookmarks
drwxr-xr-x@  42 sng  staff   1.4K Mar  9 21:36 dotfiles
drwxr-xr-x@  12 sng  staff   408B Sep 24 14:22 misc
drwxr-xr-x@   6 sng  staff   204B Oct 20 11:39 reading notes
drwxr-xr-x@  85 sng  staff   2.8K Dec 30 09:33 recipes
drwxr-xr-x@   8 sng  staff   272B Sep  1  2014 reference
drwxr-xr-x@  15 sng  staff   510B Oct 13 10:49 writing
drwxr-xr-x@  36 sng  staff   1.2K Mar  9 19:56 writing luxagraf
drwxr-xr-x@  18 sng  staff   612B Feb 19 19:12 yellowstone
~~~

Now what's all that crap? Well, ignore the first column for now, those are the permissions flags, then comes the number of files in the directory if the item is a directory, then the owner, then the group name, then the file size. Because we added the `-h` flag we got the files size in 3 digits, in the example above you can see everything is either kilobytes or bytes, but if you have larger files you might see megabytes (MB) or gigabytes (GB). Then there's the last modified date and time and finally the name of the directory or file.

Now you know how to see the contents of any directory on your machine using the command line. Or at least all the stuff you'd see in a graphical program. There may be hidden files though. To see the hidden files you can add the `-a` flag to the `ls` command. Try running this in your home directory to see some files you might have never known were there (they'll be the ones that start with a dot)

~~~
~ » ls -lah 
~~~

Now you may have noticed that there's no easy way to tell directories from files. Some files might have extensions, like .txt or .pdf, but they don't have to have extension so how do you tell them apart? The most common way is with either color or bold text. Typically directories will be bold or a different color.

So now we know how to figure out where we are (just type `pwd`) and what's in any folder (just type `ls -lh path/to/direcotry), let's figure out how to move to another directory so we can work in it.

## Basics: How To Move Around

Let's start by creating a (possibly) new folder in our home directory. We'll create a "Sites" folder where we can keep all our web dev projects. To do that we use the `mkdir` command, which is short for "make directory". 

~~~
~ » mkdir Sites
mkdir: Sites: File exists
~~~

As you can see I already have a Sites folder so `mkdir` did nothing, but if there were no folder there named Sites there would be now. Now let's create a sample project inside the Sites folder named "my-project". We'll use mkdir again, but this time we'll add the `-p` flag:

~~~
~ » mkdir -p Sites/my-project
~~~

Now go to your file browser (Finder/Windows Explorer) and see for yourself. There's a new folder inside your sites folder.

The `-p` flag tells mkdir to make every directory in the specified path all at once. So if we wanted to create a folder at the path `Sites/my-project/design/sass/partials/` we could do it in a single step just by typing:

~~~
~ » mkdir -p Sites/my-project/design/sass/partials
~~~

Okay, let's now move to the my-projects folder inside the Sites folder.

~~~
~ » cd Sites/my-projects
Sites/my-project » 
~~~

Now notice the prompt has changed, the `~` is gone and we now see the path to where we are is Sites/my-project. Cool.

Quick question though, did you type out "Sites" and "my-project"? I'd wager you did, but you didn't need to. 

Let's go back to our home directory, just type `cd` and hit return. 

Okay, we're home. Now type `cd S` and hit tab. Did that S magically turn into Sites? Very cool. Now type "m" and hit tab again to see "my-project" also auto-complete. Learn to love the tab key, it will autocomplete just about everything. you should never really need to type more than a few letters of what you're looking for and hit tab and it will autocomplete.

Okay hit return and we're once again in our Sites/my-project folder. You can verify that you're in that folder by looking at your prompt.

## Conclusion

That was a lot, but now you know the basics of the command line. 

You can see where you are, list what files and folders are on your machine, create new folders when you need one and change to any folder you want. The only thing we didn't cover is how to create files, for that you can use `touch`. From your my-projects folder type this:

~~~
~ » touch my-first-file.txt
~~~

Now you can type `ls` and you'll see the file you just created.

That's the basics of navigating the file system of your computer (or a remote computer you've logged into) from the command line.


[1]: http://cygwin.com/
[2]: http://www.enlightenment.org/p.php?p=about/terminology
[3]: