hop.ie

It's a Quacker!

July 30, 2012

So I thought I’d share some info about a fun side project I’ve just put online. Quacker is a tool that translates a tweet before posting it to your Twitter account. It’s also been a chance to learn more about some modern (and free) web technologies.

The project was a good chance to combine HAML & SASS on the front-end, deploy the app using Heroku, and share the Quacker site code using GitHub. The site also uses Microsoft’s translation API.

##Quack quack, quack?

Some birds tweet, but ducks speak a different language: they quack.

The Quacker site is admittedly a bit of a MacGuffin, but I’m quite happy with it as a fun idea. Sometimes it’s worth wrapping an idea around a technology, if only as a means of providing better motivation to learn it.

##Sinatra takes the stage

Sinatra is a beautifully light Ruby based framework for quickly building light web applications. I’d been introduced to it by the excellent @stevebiscuit last year. This was the first time I’d really taken a good look at it, and I’m glad I did.

As simple as 1,2,3,4

Moving from front-end code into the back-end coding can be a bit of a mental jump, but with Sinatra, it’s pretty easy. It works by describing URLs and then actions that take place at that URL. For example, a home page can be served up by defining a GET request, but login action can be associated with POST requests to the same URL. A great introduction can be found here.

One of the benefits of this light, fast framework is the availability of Ruby gems. Sinatra is itself a gem, and since it is based on Ruby I was able to incorporate some amazingly helpful tools, such as HAML, Omniauth (for Twitter), and even a Microsoft Translator gem.

A complete list of dependencies can be found in my Gemfile.

HAML & SASS

I’ll admit that when I first started using HAML I was confused by it’s use of significant whitespace but it’s grown on me. I am now much faster (and happier) putting together HTML layouts using HAML. If you’re in the business of churning out reams of HTML layout code, take the time to check this one out.

###Compass: I’d be lost without it

Compass is a framework that gives you tools to generate CSS that does a lot, while having to write very little code. Variables, mixins, and the ability to reuse classes make it a must-have when starting any web projects. The end result is well-optimised CSS that can be set to be generated as a compressed single file, perfect for deployment.

The documentation can be a little confusing at times but there are plenty of great examples. I would recommend getting a small local project instantiated using Compass and play around with how it works. One tip that has saved me a load of time: Set up a base file to store all your variables and requires.

##Hosting with Heroku

Heroku is a cloud application platform that is handy for easily deploying Ruby applications. For small experiment apps, their free hosting is invaluable, and it can be managed using git. Deploying to heroku is as easy as pushing a git repo to master. Check out instructions on getting started with Heroku and git.

##Social code with GitHub

Building this website would have been much more work if it wasn’t for the amazing resources shared on GitHub. It’s a great place to discover tools, see how others have approached issues, and both learn about and share code. With that in mind I’m very happy to be sharing my Quacker source and I hope it is useful.