Beginners guide to one modern web development stack

This post is for a person who knows how to program, and wants to learn a modern web development stack. At my new job we use Padrino, an alternative to Ruby on Rails, so I’ll be describing that.

First, learn Ruby. I edit my ruby code in Sublime Text 2, it has nice syntax highlighting. I already knew how to program when I learned Ruby, so I simply read this book to pick up the syntax. I then read the first few chapters of this book to learn Ruby community standards, such as not using tabs, and always indenting with two spaces.

Now learn Sinatra and Padrino. Sinatra is a very lightweight ruby-based web framework you can pick up pretty fast. It’s so lightweight that some folks created Padrino to sit on top of Sinatra to recreate some of the features they missed from Rails. Be warned: padrino and sinatra were written by very experienced ruby on rails developers, and their documentation makes constant reference to rails. I don’t know rails so that made the docs a bit difficult at times. Overall though the docs are excellent.

Sinatra Documentation

Padrino Website

Websites consist of HTML, CSS, and javascript. In my stack, these have all been replaced with template languages, respectively, they are haml, less, and coffeescript. Learn all three, they will make you faster. Padrino allows you to mix file types, for example, you can have raw css files mixed in with less files, and it will intelligently handle the situation. There are many template options, haml’s competitors include erb, and less competes with sass/scss.

Haml website

Less website

Coffeescript website

We use the bootstrap javascript library. I’m a mathy guy who loves writing backend code, and find design very hard. Bootstrap is a lifesaver because it lets me make beautiful widgets easily.

Bootstrap demo

JQuery is a totally ubiquitous javascript library. It allows you to make asynchronous websites like gmail.

JQuery homepage

To do professional software development as part of a team, you need to use version control software. I recommend git. It was written by Linus Torvalds (my hero!) in C. He used his advanced knowledge of filesystems to make git much faster than the competition. Git is also how you use the website github, which is central to the open-source world. Go ahead and make yourself a github profile if you don’t have one already.

Git homepage

Github starting guide

There is a lot of talk on hacker sites about SQL and NoSQL data stores. At work we use mongoDB, a NoSQL database system, to store data. The ruby gem to interact with MongoDB is mongoid.

MongoDB homepage

Mongoid homepage

Bundler is a ruby gem that saves a lot of developer time managing libraries (called gems in ruby).

Bundler homepage

Although it is not strictly necessary, I suggest you learn the twitter rubygem, it’s one of my favorites πŸ˜‰

Twitter gem homepage

Heroku is a way to deploy ruby sites without having to do sysadmin work. They let you put up low traffic sites for free. Once you learn this stack, you’ll be able to put something together in a few days, throw it up on Heroku, and you have a working webpage that would have taken weeks to build and deploy a few years ago. Also, Heroku is a cool company because matz works there, the guy who invented Ruby.


If you spend a few weeks learning this stack, build a nice website, and deploy it on Heroku, you’ll be able to get a job in New York or anywhere else hiring Ruby devs. Although many ruby shops use rails, after learning padrino you’ll be able to pick up rails pretty fast.


9 thoughts on “Beginners guide to one modern web development stack

  1. isomorphismes says:

    Great post, D_____. One request, would you throw in a screenshot of Sublime Text 2?

    • isomorphismes says:

      I like how you were extremely thorough and also took an appropriate tone for the semi-beginner (maybe semi-beginner=intermediate?)

  2. Eric Rygh says:

    Helpful overview… thanks!

  3. WedTM says:

    Just a quick fix, the ruby driver for MongoDB is actually ruby_mongo. Mongoid is an ORM (Object Relation Model) system that makes database records into usable OOP objects. Mongoid uses ruby_mongo underneath to interact with MongoDB.

    Other than that, great post!

    • jaffachief says:

      (Pedantry warning) ORM actually stands for Object-Relational Mapping. Mongodb is not a relational database so the mongoid folks refer to mongoid as an Object-Document Mapper

  4. […] Beginners guide to one modern web development stack « Coffee Spoons of Code – […]

  5. […] Beginners guide to one modern web development stack « Coffee Spoons of Code – This post is for a person who knows how to program, and wants to learn a modern web development stack. At my new job we use Padrino, an alternative to Ruby on Rails, so I’ll be describing that. […]

  6. virtueinfo11 says:

    interesting and informative post on web development. thanks πŸ™‚

  7. Jeff Dickey says:

    Nice list. Can you recommend tuts/resources for folks experienced in Rails/Coffeescript/jQuery who want to swap out Rails for Padrino (or bare Sinatra)? Is the convention to use a separate, explicit CS->JS compilation step in place of Rails’ “magic” asset pipeline?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: