Digital Notion

The first tool in our arsenal is Terminal. Terminal is a terminal emulator. You may also hear it called a CLI (short for command-line interface), or a shell – these all refer to roughly the same thing.

You know how in the movies, whenever there’s a hacking scene, the resident hacker is banging away on the keyboard while a stream of text rapidly scrolls by? That’s a terminal emulator.

On your Mac,  you’ll find Terminal under Applications -> Utilities. Launch it now. You’ll be using it often, so you may want to add it to your dock.

You should be looking at a window with some text and a cursor. That’s Terminal. It’s purely text-based – there’s nothing graphical in Terminal. The way it works is you type a command, press Enter, and Terminal will print the output to the screen. That’s the whole interface. No buttons, menus or anything GUI.

Try typing the command

ls

and press Enter. (Note: that’s an L, not a 1) You should see a list of names that are strangely familiar. They should be: they’re the files and folders in your Home folder. Don’t believe me? Check for yourself. Open Finder and click on your Home folder under Places (it’s the one with the house). Compare the list in Terminal against what you see there and you’ll see they’re identical.

ls is short for “list”. The command lists the contents of your current folder. When you first open Terminal, your current folder is always your home folder.

Ok, so how do we change our current folder? In Finder, we’d just double-click on the folder we want to open, and that folder becomes our current folder. But that won’t work in Terminal. Click and double-click are graphical interface concepts, and in Terminal all we have is text commands.

The command to change your current folder is cd. cd is short for “change directory”, and directory is simply another word for folder (the terms are completely interchangeable). Let’s change to our Desktop directory. In Terminal, type

cd Desktop

Notice how when you press Enter, the prompt changes to let you know you’re in a new folder. List the contents and compare them the Desktop folder in Finder. Cool, huh?

Ok, let’s create a folder for our new project. We’re going to create it within the Desktop folder so we’ll have easy access to it. Since we’re already in the Desktop directory, just type and run the following commands in sequence:

mkdir dntutorial
cd dntutorial

Before you continue, spend some time playing around in Terminal. There are a couple things you will need to know. First, while you know how to go into a directory, I haven’t shown you how to get out of a directory. If you use the command

cd ..

it will take you up one level into the folder you were in before. If you get lost while jumping around directories, using the command cd on its own will take you back to your home folder.

As an exercise, list the contents of your Documents folder and your Pictures folder. You should also look up the mkdir command on Wikipedia.

You may find this difficult. Keep at it, keep trying different things until you’ve listed the contents of those directories. With the commands I’ve shown you, you can’t mess anything up, so keep playing around until you finish the exercise. If you’re totally stuck (and you’re not totally stuck until you’ve spent at least half an hour on it), post in the comments and we’ll help you out.

Ok, that’s it for Terminal! Now if you’re ever stuck in a lab with dinosaurs surrounding you, you’ll know what to do.

Ready to move on? Continue to Part 2B: The Text Editor

Welcome back! In this part of the tutorial, we’re going to set up your development environment.

Your development environment is the set of tools that you’ll use to write and run code. When you’re at a party and a programmer says, “I use Vim and gcc on Linux to develop in C”, they’ve just described their development environment. The best programmers are very comfortable with their development environments and have often spent hours tweaking them to suit their particular coding styles.

Be warned: this will probably be one of the longest and most frustrating parts of this tutorial. The upside is that if you can get through it, the rest is easy.

To make this easier to digest, I’ve separated this part into several sub-parts. Read them in order or it’ll be confusing.

Down the rabbit hole! Continue to Part 2A: Terminal

This series of posts is an attempt to introduce non-technical founders to programming. I’ll take you through building a web application (specifically, a Hot-Or-Not style picture voting application) step-by-step, including the front-end, the database, and online hosting. No programming experience required. Before I go on, let me anticipate and answer some questions:

Will this make me an expert programmer and eliminate the need for a technical founder?

Probably not. The goal of this series is not to make you a self-sufficient programmer, but to give you a flavor of what programming is, how programmers work, and the components and decisions that go into building a functional product. This tutorial will proceed at a faster pace than most programming tutorials, and you’ll have something tangible and useful by the end of it. My hope is that you’ll get excited by the possibilities programming creates for you and go on to properly learn a language and build something unique.

Wait, what? If I won’t be a programmer after this, what’s the point?

Having an understanding of the programming process is useful, regardless of whether or not you actually write code. You can understand the technologies your developers are using, have a better sense of what’s possible and in what timeline, specify the product more completely, and generally know what the hell is going on.

Ok, so what will I learn?

By the end of this tutorial, you’ll know what terms like “framework”, “application server” and “database” mean, and what the components they refer to are used for within a web application. You’ll understand what sort of security issues websites deal with and what it takes to build an app that supports a thousand users vs one that a supports a million. Of course, you’ll learn some programming along the way and have a platform upon which to expand your knowledge.

It looks like you’re using Ruby, but at my company we’re using PHP/Java/Python. Will this still be useful to me?

Yes! Programming language and environment selection is a very small part of programming. The general concepts are the same across most languages, and many of the other components (the database, for example) are independent of language. I chose Ruby because it’s easy to read and learn, very popular, has great tools and a helpful community supporting it, and most importantly is powerful enough that you can continue to use it for serious development projects.

Interested? Good! One last thing though…

I’m going to be making some assumptions about you. I’m assuming:

• You have no programming experience at all. If you’re already an expert programmer but have never done web development with Ruby before, you may find this slow, but useful. If you’ve already done web development, move along, there’s nothing to see here.
•  You know how to use computers. I’m expecting that you know how to install applications, copy files around, and do other basic computer-related tasks.
• You’re intelligent and motivated. Programming is hard, and even if you follow the instructions on here perfectly, things are still likely to go wrong. I’m expecting that you will spend the time it takes to Google around and ask friends to help you solve the problems that will come up during the course of this project. There’s no better way to learn this stuff,
• You’re using a Mac. Ok this is probably a bad assumption, but to keep this tutorial from exploding I have to assume a certain development environment. I chose Mac OS X because it’s the environment that many Ruby developers use, it’s fairly standardized, and it’s easily available to me. If you’re using Windows and can manage to get your environment set up on your own, you should have no trouble with most of this tutorial. If you’re using Linux, I’m sure you’ll figure it out.

Still here? Ok, then let’s get started. In Part 2, we’ll set up our development environment so we can get to writing code!

Questions? Feedback? Rant? Leave a comment!