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.

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.

Parse.com

Parse allows a developer to “add a backend to your mobile app within minutes”. Instead of having to build your own API service, host & balance it, Parse.com allows you to structure your mobile backend using their service.

The implementation is fantastic, the tutorials guide you through your first use of Parse and before long your mind starts racing with the potential of being able to host simple bits of data, without all the hassle.

Best of all, they offer a free service which should be enough to get you started, at least.

Playtomic – Game Analytics

As the name implies, this is a game-centric tip which also works for a multitude of platforms (including HTML5 and Flash), but this is still a great addition to any lists based around making a developers life easier when developing iOS apps.

The premise is simple: you can create custom logging events using the Playtomic library and then login to your account via the website and see your results. Heatmaps, in-game statistics, play length can all be collected and sifted through for that juicy bit of information that your app might just be needing.

As with Parse, the best part of this service is that it is free, easy and reliable, meaning theres really no reason to not add it in next time you’re trying to know Rovio from top-spot.

iOS Boilerplate

This Github hosted collection of codes is the perfect copy&paste go-to link. It is intended to provide you with a base code to begin with, with which you can expand out to make any app you can dream of. It’s not a simple collection either, there are some very detailed applications that you can take advantage of: Geo location, Pull down to refresh functionality, a built in web-browser, JSON and Dictionary helpers… basically anything you need, its there.

Obviously, because it’s on github it is an open source project so don’t forget to give as much as you take!

iRate – Rate my App reminder

An unbelievably simple piece of code to set up, which makes use of the new iOS ARC feature (see below…), iRate allows you to add a “rate this app” reminder to any iOS development project you want. It’s as simple as importing the library and adding ONE line of code. Simple and it works brilliantly.

iOS5 itself: Storyboards & Transitions

If you want to get straight into iPhone and iPad development but don’t know much Objective C*, then Storyboards are the perfect jumping off point.

Using the brilliant Interface Builder, a newbie iOS developer can drag and drop elements into place, assigning click events to trigger transitions to different views. Labels can be edited and buttons can be placed.

Of course, this is only the tip of the iceberg in terms of iOS development, but it is brilliant to see how much a developer with zero knowledge of Obby C can do.

Check this video out to see the power of the Storyboards.

*side note – I’m not saying that it is a good idea to make iPhone apps without knowledge of the language, I’m simply stating that it is possible…

iOS5 itself: ARC

Purists will argue against this being in the list – but in my opinion, ARC removes most of the headaches involved in developing, testing and maintaining iOS apps. ARC, very blandly, stands for “Automatic Reference Counting”, which in basic terms means that it handles all garbage collection & memory allocation for you. That’s right, no more “object = nil. [object release] etc…”, that is all done at compile time meaning you can focus on the more interesting parts of coding.

Because ARC is a relatively new feature of iOS development, there will be times when you want to use a library or snippet of code which has objects being released all over the show. Luckily, Apple have provided a way to disable ARC running for individual files. In my latest project, Social Break, I was able to use the CocosDenshion library, complete with crazy amounts of memory tweaking, alongside my ARC-overwatched codebase. It appears to have worked a treat.

As shown in the video, Construct 2 makes it insanely easy to make interesting and addictive games such as a platformers or puzzles. It has a large array of ready-to-use assets such as sprites, sound effects and animations. The program generates HTML5 code so is fantastically portable. One thing to note is that, unlike most other “no-code coding” programs – Construct2 does not feel as though it is dumbed down; it really feels like developers made this for developers.

The free version of the program has limited functionality but will still allow you to play around and get a feel for the possibilities of the app, whilst the full versions are limitless, allowing you to go crazy.

Impact – HTML5 Canvas & JavaScript Game Engine

Impact is, it claims, the “most awesomest way to create even more HTML 5 games” and at first glance, you’d be hard pressed to argue against that. The slick website demonstrating the engine shows a game created using the engine running on browsers both on desktops and on mobile. It also comes with its own dedicated level editor so people who are more design orientated are looked after as well.

The engine’s greatest strength is its well written and nicely presented documentation – with examples of each class in action. All this for just $99 is a steal – however there are free alternatives out there…

LimeJS HTML5 Game Framework

Available via Github, LimeJS is entirely free and open source – allowing you to build fast and (more importantly) native-experience games for multiple platforms. It has a decent community around it, however it does seem to suffer from the “too many cooks” issue and the documentation is poorly presented – offering little more than is absolutely necessary. As a free alternative, however, you’d be hard-pressed to find anything better suited for HTML5 game development.

JawsJS

More of an individual’s attempt to work with HTML5 canvas, JawsJS definitely has some legs. It has since been extended beyond the canvas and the developer promises plenty of updates in the following few months. Definitely one to watch.

GameQuery

Perhaps the one that interests me the most, GameQuery attempts to create a gaming engine based around the already fantastic jQuery framework. The developers are specifically promising that it will be easy, quick and stick to the jQuery philosophy. As an avid jQuery fan myself, this one has me excited. Supporting solid gaming features such as collision detection and animation and promising that beginners can develop basic 2D games – this could do for game development what jQuery did for carousels.