Its popularity is due to many things, but chief amongst them is the speed at which you can put together a site in Rails, as well as the intelligent and vibrant community that are involved in it.

Whilst there are some well known success stories using Ruby on Rails out there, the sheer number and diversity of Rails apps is astounding. In celebration of that, and partly to satisfy our own curiosity, we thought offer our round up of some of the best rails sites out there.

1. Basecamp

http://basecamphq.com/

An extremely popular, browser-based project collaboration tool.

2. Twitter

http://twitter.com/

The ubiquitous social networking site.

3. Scribd

http://www.scribd.com/

The world’s largest social publishing company.

4. Fanpop

http://www.fanpop.com/

A huge network of music, TV and movie fan clubs.

5. Geni

http://www.geni.com/

A great family tree building tool.

6. Penny Arcade

http://www.penny-arcade.com/

A webcomic, largely focused on video gaming.

7. Pitchfork

http://pitchfork.com/

An online indie music mag.

8. Crazy Egg

http://crazyegg.com/

A heatmap tool that lets you visualize how users interact with your website.

9. Shopify

http://www.shopify.com/

A popular e-commerce platform.

10. Github

http://github.com/

A code hosting app with a strong social networking element.

11. Hulu

http://www.hulu.com/

A TV channel streaming shows and movies from NBC, Fox, ABC and more.

12. Backpack

http://backpackit.com/

From the makers of Basecamp, Backpack is an intranet for your business that lets you share anything and everything with your team.

13. Assembla

http://www.assembla.com/

A collaboration tool ideal for small teams.

14. Lighthouse

http://lighthouseapp.com/

A superb project management app.

15. Wayfaring

http://www.wayfaring.com/

A tool for creating and sharing maps.

16. CommunityWalk

http://www.communitywalk.com/

Another map creating tool, which lets users incorporate photos and comments into maps they create.

17. Insiderpages

http://www.insiderpages.com/

A place to find reviews of local businesses, from dentists to restaurants

18. Rentometer

http://www.rentometer.com/

Enter your address into this site to compare your rent with other local properties.

19. Menuism

http://www.menuism.com/

A place to rate restaurants and read food reviews.

20. Campfire

http://campfirenow.com/

An instant messaging tool designed for project specific groups.

22. Podomatic

http://www.podomatic.com/featured

A place to access a wealth of podcasts as well as event listings for many cities worldwide.

22. 43 Things

http://www.43things.com/

A straightforward site for setting personal goals and viewing the goals of others.

23. Big Cartel

http://bigcartel.com/

A simple, but trendy e-commerce platform.

24. DoodleKit

http://doodlekit.com/home

An uncomplicated and accessible website builder.

25. feed.informer

http://feed.informer.com/

An app for adding news and feed content to your website.

26. Inkling Markets

http://home.inklingmarkets.com/

A highly original site with a unique take on question asking and answering.

27. Swivel

http://www.swivel.com/

A site for sharing data in charts, graphs and tables.

28. Highrise

http://highrisehq.com/

High-tech customer relationship management software.

29. Mypunchbowl

http://www.mypunchbowl.com/

A suite of party planning tools for creating invites, buying supplies and much more.

30. oh, don’t forget…

http://ohdontforget.com/

A great way to send bulk and scheduled SMS messages.

31. Spiceworks

http://www.spiceworks.com/

A free, but professional quality solution for all things IT, from network management to software reporting.

32. Urban Dictionary

http://www.urbandictionary.com/

An online dictionary for pretty much every slang term used in the English-speaking world.

33. White Pages

http://www.whitepages.com/

An online directory for business and personal contact details.

34. XING

http://www.xing.com/

A place to network and make business contacts.

35. Justin.TV

http://www.justin.tv/#r=ytWUZNE

A site where users can produce and share videos through their own “channels”.

36. Slideshare

http://www.slideshare.net/

A place to share PowerPoint presentations, Word documents and Adobe PDF portfolios.

37. Jango

http://www.jango.com/

A free internet radio station.

38. AboutUs

http://www.aboutus.org/

A comprehensive wiki for the world’s best websites.

39. Luminosity

http://www.lumosity.com/

A suite of online games for brain development.

40. Guitar Hero

http://hub.guitarhero.com/

Website of the hugely successful computer game.

41. Chow

http://www.chow.com/

A recipe repository complete with restaurant listings and videos.

42. Bleacher Report

http://bleacherreport.com/

A magazine covering all aspects of American sport.

43. Sortfolio

http://sortfolio.com/

A place to find the perfect web designer for your needs.

44. More

http://www.more.com/

A style magazine for women, with fashion and make-up tips.

45. Howcast

http://www.howcast.com/

A place to find instructional, how-to videos.

46. Miley World

http://www.mileyworld.com/community/home

The home of Miley Cyrus’s official fan club.

47. iLike

http://www.ilike.com/

A site that provides concert alerts, recommendations and playlists, based on your favorite music.

48. Yardbarker

http://www.yardbarker.com/

One of the best places to find sports news, rumors and videos.

49. Viewpoints

http://www.viewpoints.com/

Find reviews on absolutely everything.

50. Tupalo

http://tupalo.com/

A place to find contact details and reviews of local restaurants, cafes, salons and shops.

And that’s really just the tip of the iceberg. With the latest version(Rails 3) imminent it’s clear that it shows now sign of slowing down just yet; no doubt we can expect to see even more exciting and sophisticated websites and applications added to this list in the future.

Photo by @gablaxian

Speak the Web came to a close last night in Manchester’s NoHo bar, with a five strong band of the Setfire crew there to take part. The event were definitely a refreshing change to some of the bigger, more expensive events that Speak the Web is partly a reaction to. Four speakers covered an impressively broad range of stuff – mobile, seo, html5 apis and Css3. The informal nature of the event lent itself to questions from the crowd and a definite lack of the them and us factor sometimes present at conferences. Oh and did I mention it was in a bar?

My favourite quote of the night was probably Andy Clarke’s gentle ribbing of the Brighton and London focus of many web dev conferences, with him pointing out they are not “the center of the f**king universe”. Hopefully with the success of Speak the Web and other events like Barcamp, we might be getting somewhere to shifting that focus.

I was a bit gutted to have to leave right after the event, being a bit over tired and generally a bit of a wuss these days. Nevertheless it was great to be there and I’m pretty sure that this isn’t the last we’ve seen of Speak the Web.

A Clear Offering

We wanted to make it really clear what we do, straight off the bat. We’re a software development house, and we specialise in Ruby on Rails projects, done in an agile way. What’s more, we’ve invested a lot of time in the past year or so getting really good at automated testing. We think this really marks us out from other companies in our space, so we wanted to say it loud and proud.

A Human Face

We’re proud of our people and they are the most important part of what we do. Sure, we do Rails – but that’s only because we happen to think it’s the best tool for the job. What we’re really selling is our expertise and experience – and this all comes from our great team. So, we thought it was only fair to take a couple of snaps of them and our swanky offices for your perusal.

A Portfolio

Probably the biggest omission from our site was a portfolio page detailing the projects we’ve been working on recently, and the work we did. We’re not a quick-and-dirty type of place – we take on projects for the long term and work with our clients to achieve business goals. We hope our portfolio reflects this and gives a better idea of the work we do.

As with all projects, we wanted to be sure that our changes represented a real return on investment, so we kept ourselves to just a few hours to do these changes. It’s been great to see a few new leads come through as a consequence of just a small amount of work.

We hope you like the improvements – there are plenty more to come. Let us know what you think!

The introduction, which culminated in beatboxing with freestyle rapping and an impromptu name-tag swapping session, set the scene nicely for the rest of the weekend.

The sessions board, Saturday morning

Following the usual rules of Barcamp, everyone who attended was expected to hold a session on any topic they wanted, leading to a schedule including Google Wave, Numeracy, making a good curry, CloneZilla, usability aids for pensioners, Balloons App, the influence that fixed cost contracts have on risk, and loads of other things.

Good Curry!

The clear highlight for me was the impromtu session in the main auditorium where us geeks were taught how to flirt by Nicole Mathison – Sam volunteered to be a subject for the demonstration, proving to us all what a charmer he is!

Of course, Sam and I both gave sessions of our own. I ran a talk entitled Implementing Agile, where we discussed practical ways to implement Scrum and Kanban in place of existing processes. Sam gave an introduction to Compass.

The Contact Theatre was an excellent choice of venue and it was great to see some of their staff getting stuck in with sessions – even volunteering for Mike Nolan’s ‘Slate My Website’.

All in all, it was a great event, full of useful and unusual ideas as well as some real surprises; all the things that make a Barcamp great. Although there is potential for chaos when running a Barcamp, the fact the event smoothly is a great credit to the team of organisers, Andrew Disley, Tim Dobson, Ian Forrester and their many helpers. See you at the next one!

But knowing and understanding the constraints you face is an important part of being a designer, right? And analytics gives us a useful window onto some of them.

This is where analytics can help. Specifically, a relatively new feature of Analytics called ‘Advanced Segmentation’. A vexing question facing many web designers is “when can I dump that bag of sh** ie6?”. Well, using advanced segmentation, you can work that out fairly easily. Sadly, the answer for many of us is likely to be more nuanced that just dump it or lump it.

I’m assuming here you have some basic understanding of analytics. Don’t worry, that’s all I have too. If you want to learn exactly how to make an advanced segment, you should checkout Google’s help articles on the topic.

And now, the graphs

All these stats were taken from our main ecommerce site cartridgesave. It’s a pretty busy site, so it gives us some useful data to work with.

For my purposes, I created a segment that tracks any browser with the name Internet Explorer and a version number that starts with ‘6.’ This should give us the ability to track that browser version through any Analytics report. Once you’ve created a few of these segments for ie7-8, Firefox 3 and so on, you can then generate a report like this:

Internet explorer usage on cartridgesave.co.uk

Here is the same again, but swapping Firefox 3 for IE8.

The same graph as before, but showing Firefox3 usage instead of IE8

This information won’t necessarily solve the browser support debate, but it will hopefully lead to a more intelligent decision than before.

The various reports and discussions around HTML5 in the past year have been a source of much confusion. In order to do my bit to help clear that up, I thought I’d offer a broad overview of what it is, and what it represents for the web.

Should I care and why?

Yes. But why? Well, there are a few ways to answer that, which I’ve tried to elaborate for you below.

Process

One of the biggest differences between HTML5 and previous markup specifications, indeed between HTML5 and any other web standard, is the process that is being used to put it together. Generally web specifications are created by the W3C using working groups who draft specifications in a closed process that has left some people dissatisfied.

In a break with this convention, HTML5 has been developed externally to the W3C by a group called the WHATWG. This group developed as a response to dissatisfaction with the W3C’s direction with XHTML and “…apparent disregard for the needs of real world authors.”

Although still driven in the main by browser vendors, WHATWG does use a much more open process, developing the spec for HTML5 through a mailing list that anyone can participate in. This has lead to a process that is faster and better supported by the web development community as a whole. So much so that HTML5 has now been formally adopted by the W3C to the detriment of XHTML2, their chosen successor for existing markup standards.

The other key aspect of the process is that HTML5 is being implemented incrementally by browser vendors. So although the projected completion date for the specification is 2022, there are aspects of HTML5 available right now and more will become available as time goes on.

Applications

The explicit focus of HTML5 is on applications. HTML’s origins as a document markup language are in stark contrast to the rapid developments in functionality and complexity present in many modern day web applications. HTML5 represents an attempt to go beyond documents and create a markup specification for structuring applications as opposed to documents.

We can see this in many of the new elements being created within HTML5, such as section, nav, aside. These are based on common conventions that are currently implemented by using class and id attributes on HTML elements like div, ol, code which all pertain to elements of a written document. So where we might currently have

<div class="article">
  <div class="section">
    <h2>This is a section of a larger document</h2>
    <p>Here is some text in this particular section</p>
  </div>
</div>

in html5, we would structure it something like the following;

<article>
  <section>
    <h2>This is a section of a larger document</h2>
    <p>Here is some text in this particular section</p>
  </section>
</article>

Perhaps more significant are the number of new APIs being specified, which will allow greater access to browser functions for web developers, as well as extending browser functionality to allow web applications to take on more of the advantages of desktop apps.

Best known is canvas, a 2d drawing api, which is already implemented in recent versions of Firefox, Safari, Chrome and Opera. However, just as significant are APIs that will allow offline web apps, drag and drop, video and audio controls, cross document messaging and text editing. Again, like the new elements, these are things that currently exist in web apps, but mainly through cumbersome and insecure javascript implementations that often are highly non-standard.*

Openness

HTML5 is open in two ways; firstly its open in terms of how it’s details are discussed and written. However it’s open in much broader sense; no one person owns HTML5, or indeed CSS3, or Javascript. This is important as we consider how the web is progressing today. Basically, if you wish to make a complex web application, you have a few choices; web standards technologies, Silverlight, Flash, Java Applets. Ok, that last one was a joke, but you get the picture. But really these choices are just two; open web standards that are not the property of a single company, or proprietary technology which is owned by one company. I realise there are good arguments on either side of that particular debate, which I don’t have time to elaborate here, but my personal choice is for standards, mainly as I feel more confident that more of my target audience will be able to access them.

So, there are a few reasons why you should pay attention to HTML5. To be honest, before I took the time to investigate it for myself, I wasn’t convinced, but I’m glad I did. HTML5 is not perfect, but that’s the point. It’s the first web standard that admits of its own imperfection, makes room for change and addresses the realities of modern web development, which overall seems like a good thing to me.

I’m not going to go over installing Ruby, MySQL (you need version 5.0), Apache etc as there are a million and one tutorials out there. I will mention however that you can save yourself some time by simply connecting to your development server (remember, you will need to open up your SQL server for remote access). I’m also not going to go over setting up selenium profiles as I’m assuming you’ve already got your tests running under a *nix environment.

Now once you’ve got your applications installed and checked out a copy of your code you need to make sure you have the right gems – exactly the same set as you needed on your development server, although I would also recommend win32console as it will give you the text colouring on your test output (and also randomly remove all of the letter As. No, really!).

Now comes the fun part. There are a series of hacks you need to do to Ruby and its gems to get them working under Windows:

• Install MySQL 5.0 if you haven’t already and copy libmySQL.dll from the MySQL bin folder to the Ruby bin folder, overwriting the default version.
• Change any reference to IP ‘0.0.0.0′ to ‘127.0.0.1′ in the webrat gem. This is needed because Windows will not view ‘0.0.0.0′ as localhost.
• Add ’start’ before the ‘mongrel_rails’ command in the ’start_command’ function in ‘\selenium\application_servers\rails.rb’. This will cause the mongrel server to be run in a new console window which is needed because the mongrel *nix detach flag does not work in a Windows console.
• Add ‘-interactive -forcedBrowserMode iexplore’ to the start command in ‘\lib\selenium\remote_control\remote_control.rb’.
• Increase your timeouts
  • Add ‘config.selenium_browser_startup_timeout = 50′ to your selenium profile.
  • Timeouts also defined in ‘\selenium\selenium_rc_server.rb
• Make sure you have your browser set correctly in your selenium profile with the correct path. Something along the lines of:
  • config.selenium_browser_key = ‘*iexplore C:\Program files\Internet Explorer\ie.exe’

Then run your tests and you should find your tests running quite happily.

Over the last couple of years, we’ve got heavily into agile methodologies – in particular, Scrum and Kanban. Here are three of our task boards, from three of our current main projects.

This first board has evolved from a Kanban board introduced by Andy P. It features the Icebox, Todo, On Hold, In Progress (limited to 2 stories at a time) and a Review column. Done tickets are stuck to a nearby wall – with competitions as to who can get them the highest with a running jump!

This rather messy Scrum board is a work in progress, and utilises the three windows between one of our offices and the games room. It features a full product backlog, a sprint backlog, In Progress and Done (‘Done Done’!). Team members like to place the postits below individual members/pair names so we’ve added this on.

Our last board is a modest but effective Kanban approach for a small team. One thing that’s interesting with this project is that initially the team didn’t have a daily standup/scrum – but after using the board for a couple of weeks, they felt one would help them keep each other updated so started one.

We’ve really felt the benefit of agile working, and the ‘informative office environment’ is a big part of it. I personally have a lot of love for tools like Pivotal Tracker, having previously used it on a big project – but there’s definitely something to be said for the tangible Post-It note plus Sharpie formula.

Just a quick one to say thanks to everyone who came to NWRUG last night! A good time was had by all, and thanks to @will_j for organising, and to @leehambley for being my fellow speaker. It was great to see you all and share a beer or two.

See you at the September event; it promises to be a good one!

Update: Lee’s presentation is available at slideshare. As my presentation was more of a live coding demo (I’m braver than him!), we’ll keep mine as a “you had to be there” thing!

Setfire will be sponsoring and providing the talks for the North West Ruby User Group (NWRUG) meet on the 20th of August, 2009. The theme of the evening is Capistrano, a technology we use internally to deploy production sites. We also actively support its development. We’ll start with a newbie guide to getting an existing site deploying with cap, and move on to some more advanced recipes.

We’ll then move on to the much more important business of geeky chat and pizza, on us of course, and then, if experience is anything to go by, we’ll be off to a bar!

Interested? Read more and sign up. See you on the 20th.