A friend recently sent me the ambiguous text message “How do I become a rails developer?”. I sent him back: “the rails way”. I’m not sure how helpful that really was so I decided to write him a short primer on not Rails development, but just web development in general, with a ruby flavor.

Note to reader. If you know what HTML, CSS, Ruby, Sinatra or Rails. This read is not for you. This post is for someone who has zero web development experience.

Purpose of this article:

This article purpose is not detail. It is a nice 1000 foot view of some of the tools you would need to become proficient in to do web development (with Ruby). We will look at 5 things:

1. HTML
2. CSS
3. The Terminal – A program on Mac OS
4. Ruby – A programming language
5. Sinatra – a very simple Ruby web framework

HTML

HTML in short is what web browsers eat for breakfast, lunch and dinner. It tells them how to layout each webpage you go to. Want an example? Well you’re using a web browser right now aren’t you? If you’re using Safari go to the View menu and select ‘View Source’. That source is HTML. Don’t worry if it looks incredibly complex, it is! That’s why we use web frameworks to simplify it down. But more on that later.

Hyper Text Markup Language (HTML) is made up elements. Each element can have attributes (style, id, class etc) and each can have child elements. Usually HTML elements are denoted with two tags. The starting tag <p> and the ending tag </p>. Inside those two tags are that elements child elements. Think about HTML as a big russian nesting doll. Let’s look at a very basic example:

The main element is the ‘html’ element. Note the starting tag on the first line and the ending tag on the last line. Everything else is a child element of the html element. It’s two direct child elements are the ‘head’ and ‘body’ elements. The head element holds information like the page’s title and other files the web browser needs to load to display the page correctly. The body is where all the elements that are going to be rendered in the web browser’s window go. This can include tables, links, headers, images, videos, etc. If you’d like to see the example in action: click here

That was a SUPER quick intro to HTML if you’d like more information W3 Schools has a great free tutorial. Link

CSS

Let’s bring some style to the web. CSS or Cascading Style Sheets are how we make the web pretty. We could manually set the style on each element by setting the ‘style’ attribute on each element, but that’s really annoying. With CSS you set selectors. These selectors find elements on the page. You then you give those selectors styles. The styles then ‘cascade’ down all the elements the selector finds. Let look at and example.

Here we set our selectors and the style we’re going to give them. The first selector is ‘body’. The ‘body’ selector will select the body element from our HTML and apply all the styles between the curly braces { }. For this example I decided to give it a nice limegreen background color. CSS styles are denoted by an attribute followed by the desired value. In this case our attribute is ‘background’ and our desired value is ‘limegreen’.

You’ll notice the next selector has a ‘#’ in front of it. This means it is an id selector. It will look for an element that has ‘id’ set to the value after the ‘#’. So in this case it will look for the element that has the id ‘main_title’. For the main_title I wanted to make the font size really big. I did this by setting the attribute ‘font-size’ with the value ‘100px’. This will make the font size of the text in that element 100px.

The last selector has a ‘.’ in front of it. That means it is a class selector. It will look for all elements that have the ‘class’ of the value after the ‘.’. In this case it will look for all the elements that have the ‘main’ class. I’ve added some example styles to that selector, read through them and see if you can guess what they do.

To add our style to our HTML document we have to load it in the head. Below is our style added to the HTML from the first example. If you’d like to see this example in action: click here

Again W3 Schools has an great free tutorial you should really checkout: Link

The Terminal

When reading the next section please remember ‘With great power comes great responsibility’. The terminal is your direct connection to your Mac. No buttons, menus or prompts in your way. You type, it does. So be careful what you type. I’ll give you a couple commands in this section so you can navigate your way around your computer in your terminal. The terminal is used by a web developer to run servers, open files, download files and saving your work. Almost everything.

Step 1 – Open Terminal: Terminal should be located in Applications > Utilities. If you can’t find it, there is always Spotlight to help you out.

Step 2 – Where the crap am I?: When you open your terminal you should see something like the image below. Probably not totally like mine (I’ve got some fancy add-ons) but if you have some text then a box that reminds you of a 1995 DOS machine, you’re in the right place.

To find out where you are, type pwd then hit return. This will return the absolute path of where you are. This is most likely something like ‘/Users/(your username)’. This means you’re in your user folder right now.

Step 3 – What’s in here?: Okay we know what folder we’re in. Now lets see what we got. Type ls and hit return. This will return a list of the items in the folder.

Step 4 – How do I move around?: You probably don’t want to stay in the same folder forever. Lets get a move-on. The cd command is how we’ll move around. You can pass cd either a relative path from where you are or an absolute path to get anywhere on your computer. To denote an absolute path you start your path with a ‘/’.

Let’s try it out. You know what folders are in your current folder by the information ls returned. Choose a folder and type cd then the folder name and hit return. (Pro tip: if you can’t remember the exact spelling or name of a path hit tab. It will try to autocomplete what you are typing). For example if I wanted to move into the Desktop folder I would type cd Desktop.

Now that you know how to get into a folder you need to know how to get out. By typing cd ../ you will go back to the folder you were just in. It moves you from the current directory to that directory’s parent directory.

One really useful shortcut is cd ~/. Enter that command and where ever you are it will take you directly back to your home folder.

Step 4.5 – I’m bored make it do something for me: Okay okay… The terminal is also a place where you can run ‘utility’ programs or programs that have no user interface. Let’s start off with a really simple one. Make sure your volume is at a decent level, then type say hello there friend and hit return. You just ran a utility called say. In the terminal you first write what program you’d like to run, then the parameters you’d like to pass the program. In this case we ran the program say with the parameters hello there friend.

Step 5 – Lets make something!: Use cd ~/Desktop to move into your Desktop. Type ls again to list the item on your desktop. Look right? Good. We are now going to make a new folder. Type mkdir awesome and hit return. This should create a new folder (aka directory) on your desktop. Go look at your desktop a new folder named “awesome” should waiting for you.

For reference here’s a quick cheat sheet:

pwd - Absolute path of where you are.
ls - List current directory's (aka folder's) contents.
cd - Change directory aka move to path.
mkdir - Make directory aka make new folder.
say - Make your computer talk funny.

I think that’s enough for now. Next up the best programming language ever: RUBY ¹.

Ruby

Ruby is a programming language. More specifically Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It was created by a dude in Japan named Yukihiro Matsumoto aka ‘Matz’.

Ruby is a good language for beginners. It’s a very expressive dynamic language which has a lot less overhead to learn compared to other languages like C or Java. It also doesn’t need to be compiled. You can give your ruby code straight to the interpreter and it will run. And look how pretty it is. Below are two pieces of code that do the same thing. One written in C, the other in Ruby. Try to figure out what they do. Which one would you rather work with?

C	Ruby

What’s even better is you probably already have Ruby installed on your computer! Go back to Terminal and type ruby -v and hit return. It should return something like:

ruby 1.8.7 (2008-08-11 patchlevel 72) [universal-darwin10.0]

You also don’t need any fancy program to develop in Ruby. All you need is a good text editor. For Ruby development, I would recommend getting something like TextMate http://macromates.com/ which is free for the first 30 days. But something as simple as Textedit would work.

Let’s program something already damn it

Okay lets do something with Ruby! First things first, go back to Terminal. You should be somewhere where you don’t mind making a couple files. If you’re not cd to a directory where you don’t mind having some random files lying around. Then type touch my_first_ruby.rb and hit return. You just created a file named ‘my_first_ruby.rb’ in that folder. Now open that file with TextEdit or TextMate if you downloaded it.

You now have a canvas for your first creation. What will it do? How about complement you on how nice you are? Sounds good to me. Copy or enter the code you see below into your ‘my_first_ruby.rb’ file and save it.

Take a minute and look through the code you just created. Look over each line and see if you can guess what it’s going to do.

Now go back to your Terminal and type ruby my_first_ruby.rb and hit return. You should get something like:

Now it’s time to learn a bit of Ruby. You don’t need me for that: Checkout http://www.tryruby.org/ (make sure you’re using Firefox not Safari or Chrome). It is an interactive tutorial on Ruby!

Sinatra

Sinatra is a very simple Ruby web framework. So simple in fact you can get a web server up and running in less than 6 lines of code:

Make a new file named ‘my_first_server.rb’ on your desktop. You can use touch my_first_server.rb to make it. Copy the code above into ‘my_first_server.rb’ file you just created on your desktop and save it. Then type ruby my_first_server.rb into Terminal and hit return. You should get an error like the one below:

This is because you haven’t installed Sinatra yet. Ruby has libraries of code called ‘gems’. These libraries hold pre-made functionality for you. Sinatra boxes up a nice and clean way to make a simple web server with minimal effort. Luckily it’s easy to install new gems. Back in Terminal type:

sudo gem install sinatra --source http://gemcutter.org/

Before you hit return, let me explain that command. The first word sudo tells terminal to run the following command as the “superuser” or administrator of the computer. The rest of the command gem install sinatra --source http://gemcutter.org/ will install the library. It tries to locate a copy of the software on the ruby gem server (gemcutter.org), downloads it and installs it. Now hit return. It will ask you your password since you are running this command as a superuser. Type in your password (don’t worry if you don’t see anything) and hit return to install Sinatra.

If you run into any trouble you might need to update your gem utility. To do that type the following into your Terminal and hit return:

sudo gem update --system

Then try ruby my_first_server.rb in Terminal once again. Your server should start correctly:

Sinatra just started up a server for you on port 4567. Make another window or tab and go to http://0.0.0.0:4567/ (the 0.0.0.0 is your computer local address). When you visit http://0.0.0.0:4567/ you should see your brand new web server responding back!

To use Sinatra you set “routes” by writing get '(route)'. In our example we set the route “/”, which is the root route to our server. Once you set a route you need to set what Sinatra will return when someone visits that route. Sinatra will return the last line of the code block declared after the route. In the example above the last line in our code block was ‘Well hello there’. So when someone visits http://0.0.0.0:4567/ it will return ‘Well hello there’ to them.

Let’s set some more routes. Replace the code in ‘my_first_server.rb’ with the code below and save it. Stop your server in Terminal by holding down CTRL-C and restart your server by typing ruby my_first_server.rb in Terminal once again.

Now trying going to http://0.0.0.0:4567/what_time_is_it and http://0.0.0.0:4567/super/secret/route in a web browser. In the first route (http://0.0.0.0:4567/what_time_is_it) we are generating what the server will return dynamically by getting the current time Time.now converting it to a string .to_s and appending it to the string ’The current time is ’. Now when you go to http://0.0.0.0:4567/what_time_is_it you can see what time it is.

Our Sinatra server doesn’t return valid HTML yet. So let’s take care of that little problem. To do that we’ll use files called ERB template views. These are templates that will render down to HTML but allow us to add dynamic elements into them. To do this we’ll have to make some new files and folders. Below is a screen shot of the files and folders you need to create.

Create the files you see above and copy the code from sinatra_server.rb and index.html into their respective files. Now navigate you way into that folder in Terminal and run your Sinatra server by runing ruby sinatra_server.rb.

Again navigate your way to http://0.0.0.0:4567/ . Hit reload a couple times. You’ll see ‘the coolest number in the world’ switch around. This is because your server is evaluating the index.erb file every time the page is loaded. Go look back at the index.erb file. You’ll see:

<%= rand(1000) %>

Anything you put between <%= and %> will be evaluated. You could replace that with the current time, something you pull from a web resource or the user’s current ip.

If you’d like to learn more about Sinatra check out: http://www.sinatrarb.com

Conclusion

The goal of this article was for you to get a feel of what tools a Ruby developer works with. These are just the very basics but gives you a glimpse into the world of web development. If you liked what you saw congratulations there is the exciting world of web development waiting for you. If you didn’t, well I’m sorry, but at least now you know a little more about the web.

Thanks for reading!

Notes

¹ Okay, Ruby might not be the best programming language ever. But I still love it.