If you don’t know, Rails has things called Gems, which are essentially packaged up libraries of code, usable throughout your applications within the MVC framework. Two of these, OmniAuth and Mini FB, offer a fantastically easy roll-out of a basic Facebook Connect powered app.

OmniAuth

OmniAuth, officially, is “a flexible authentication system utilizing Rack middleware”, but it is basically a Gem you can install which handles the authentication process for services like Twitter and Facebook, leaving you to take the reigns at the callback stage. This is mind blowing for me, as a lot of the work in building apps with these services is hooking up to them, swapping tokens etc…

To get OmniAuth working with Facebook on your app is really simple. First of all, add:

to your Gemfile and run bundle install. This will add the Gem for you to start working with. Secondly, you need to create a flle in your config/ folder called omniauth.rb with:

…and thats it! Simply run the rails application and point it at localhost:3000/auth/facebook and it will prompt you to authenticate with Facebook. Bingo bango! You’ll also notice that when the application is successfully authenticated, it redirects back to localhost:3000/auth/facebook/callback, which you can do whatever you require with: creating a user, starting a session etc….

Mini FB

What good is being connected to Facebook if you can’t easily retrieve that juicy Connect data? That’s where the Gem Mini FB comes in. It bundles up a few methods for you to make calls and receive the data back in hash format. Set up is similarly breezy. Add the following to your Gemfile:

As with OmniAuth, that’s pretty much the work done for you, now all you have to do is making some calls. If you have already authenticated using OmniAuth then you should have a user token. You can use this, for example, to get a list of all the current users friends:

Now you’ve got an object that you can loop through using an each loop and display it however you want!

It really is incredibly simple to get a basic app up and running but the great thing about these tools is just how much it opens up. Make sure you check out this amazing tutorial from Nettuts+, which goes further than I’ve gone with the examples or head straight on over to the official Github-based wiki for OmniAuth or Mini FB.

Lucikly there is a website called jsperf.com which allows you to test & compare different blocks of code against each other, and see the results of each – recording how fast each block ran in which browser. Here are some simple but handy tips.

Document Ready

http://jsperf.com/ready/2

When calling for jQuery to fire when the whole page has loaded – aka on document ready – there are a few options available to initiate this. The test shows that the quickest, by quite a way is:

A better .each() loop

http://jsperf.com/jquery-each-vs-quickeach

Looping through X amount of the same element can be quite time intensive, especially if you’re doing manipulation in each loop. The built in .each method does a decent job, but James Padolsey at jsperf has taken advantage of object caching to create a faster loop extension, called .quickEach:

CSS3 Selector vs Jquery

http://jsperf.com/jquery-css3-not-vs-not

Ok, so this is a test for the latest browsers (which you should be on anyway) but this test shows that using a CSS3 selector to help jQuery navigate the code is quicker than relying on the library itself.

Switch vs If/Else

http://jsperf.com/switch-if-else

Quite an interesting one, this. It seems that an if/else conditional block is faster, in all browsers, than a switch/case block – remember this if you’ve got a switch/case block in a loop.

jQuery selector vs normal javascript

http://jsperf.com/getelementbyid-vs-jquery-id/5

This is a bit obvious this one, but one that is often forgotten. This test proves that, if you can, using standard javascript is always preferable if you’re optimizing as it doesn’t require the loading of a large library before firing. Although jQuery is very useful for pretty much all web JS development, there is absolutely no excuse for using jQuery to just select a canvas element.

If you enjoyed the look of that, head on over to the App Store to try it out!

So here’s a list of some essential web development resources.

ThemeForest – Part of the Envato Suite

A store of literally thousands of premium WordPress & eCommerce themes, html builds and PSD templates, all at very low prices making it the perfect place to start if you’ve got a small budget or limited resources. Starting with a premium theme can often get rid of the headaches caused by the menial jobs (hover states, contact forms, cross-browser compatibility)

Github – Code Repository Browser

Looking through open-source work is a brilliant way to learn a new language or way of working. Github is a hosted GIT repository site that houses millions of lines of code for you to look through. Viewing code is free, as is hosting publicly visible repositories but there is also a paid-version to keep your code hidden.

Litmus – Email Test Suite

Although the price is pretty high, starting at $50 per month, the service is invaluable if you’re considering an email campaign which needs to support a wide array of email clients (and all of their quirks!). Litmus allows you to test out your build, rendering it in all clients you could want – from Lotus Notes and Outlook to iPad & BlackBerry.

Smashing Magazine – Resource Blog

Wonderful articles ranging from theory to practical implementations of code. The site is aimed more towards HTML5/CSS3 than heavyweight back-end languages like C# or PHP, although there are a few.

StackOverflow – Q&A

If you’ve been banging your head against the desk for a few hours on a small issue that you swear should work, then I highly recommend StackOverflow. There are thousands of intelligent and helpful developers out there who will be able to help you with your issue, or at least point you in the correct direction. It is a question & answer platform, however, so don’t forget to contritube both ways.

The game itself can be played and tested here but the real value of it is that it is open source and on GitHub. The codebase itself is as tidy as you’d expect from a Mozilla release which makes it a great source of education if you’re looking at making in-browser games with multiplayer support.

BrowserQuest is a tribute to classic video-games with a multiplayer twist. You play as a young warrior driven by the thrill of adventure. No princess to save here, just a dangerous world filled with treasures to discover. And it’s all done in glorious HTML5 and JavaScript.

Social Break is the innovative new iOS game which blends addictive arcade action with the massively popular social network, Twitter. You’ll never have to make the break-time decision again: play a game or check Twitter?

Chilled/Atmospheric music and sound effects make this a perfect way to get away from the hustle and bustle and give yourself a true Social Break.

Game Center supported, compare your scores to your friends and others across the world.

Features

• Classic and addictive Breakout gameplay!
• Blocks have a chance to become readable Tweets!
• Sliders mean you control how many Tweet blocks you might see and how long they appear on the screen – slower for the slower readers, faster for the social gaming hardcore.*
• Positive and negative power-ups: help or hinder with resizing paddles, extra lives and double points.
• Never miss a Tweet: read all your collected Tweets when your game is over.
• Game Center supported, so you can compare your high scores with your friends, or the world.*
• Chilled, atmospheric audio to really use your time to relax.
• Offline Mode for when you’re not able to access Twitter, or if you just want to focus on beating your friends’ high-scores.

*Full version only.

In the first episode, I show how to add the non-ARC supported CocosDenshion library to an ARC project.

Created by London-based independent game developers, Wicked Little Games, Social Break is already making headlines with the tech savvy, TheNextWeb reporting that the game “doesn’t stop being fun” and commenting that “this is the perfect app to play during any of your idle time”.

The magic of Social Break is the star-decorated Twitter blocks which, when hit, cause a recent tweet from your timeline to appear. The gameplay is reminiscent of the arcade classic, Breakout, and will keep you on your toes with a wide variety of positive and negative powerups – including double points, bigger paddle and reverse controls. There are also options to tweak the number of tweets shown and for how long, to suit your social reading habits.

iOS5-powered Game Center & Twitter integration means it is easy to compete with your friends or followers around the world.

Social Break is a brand new way of interacting with your Twitter timeline and is undoubtably the most fun. Now you will no longer have to make the tough coffee-break choice: play a game or be social?

Social Break is now available on the App Store. Social Break Lite is FREE on the App Store right now.

Wicked Little Games are on Twitter and Facebook. Follow us for all the latest news and updates.