There seems to be a strange belief amongst some developers that just because admin systems aren’t shown to users, they don’t have to spend any time on them. The result is control panels that are ugly to look at and a nightmare to use, because they’ve just been done in the simplest way possible. Honestly, I think this is complete and utter nonsense! If you’re building something that people, whoever they are, have to interact with and you’re not considering the user experience, you’re doing it wrong!

Taking some time to think about how people will be using your admin system and planning accordingly will save everyone a lot of headaches down the line;

• You’ll be less likely to have users bugging you about needing the admin to do something else, or to do something easier, which means more time to work on new things, rather than re-doing existing work.
• Because the flow of the admin system is clearer and more intuitive, there’s less chance of users making mistakes and doing the wrong thing with it, meaning you won’t have to spend time fixing their mistakes.
• Information will be presented to the end user much clearer, so you won’t have to spend as much time explaining to them how it all works.

For me there are other benefits to making the admin systems a lot nicer; in web development we spend a lot of our time having to make sure things are cross browser compatible, which can often mean not exploring the latest technologies or ideas, or making things as slick and funky as we’d like, because some browsers don’t support the features we’d need. With admin systems we can often have a bit more say in what browsers people should be using, so we can restrict them to modern, up to date browsers, giving us the opportunity to try out some cool stuff that’s going to make things much more interesting for both them and us.

Another thing often overlooked is the usefulness of colour. Colour coding information and buttons can give a much quicker visual clue than any label, allowing an end user to gain a broad overview of the information being displayed, just with a glance. This can also help with making the system more intuitive; green buttons for positive actions, red buttons for negative etc.

So next time you’re building a backend for a site you’re working on, or just any form of control panel. Stop and think about the end user. If possible ask them about how they would ideally want it to work, treat it like you would the design and developement of the front end and get user feedback throughout the process. Do all this (and act upon it) and you’ll end up with much happier end users, even if the end user is you.

After 2 months of wrestling with the App Store review process, I am proud to announce the release of my first iOS app, Coderwall. The app accesses Coderwall.com’s API and pulls down all your profile information and your list of achievements etc, and displays it in a native format, giving you access to your, and your friends’, information on the go.

At the moment the app is a very basic read only affair as Coderwall’s API is read only, but I know they have plans to expand on the API, particularly to enable access to some of the new features they are adding to the main site, and as they do I’ll be updating the app to take advantage of those.

The app is free to download for both iPhone and iPad, and also the source is available on GitHub for anyone wanting to take a look and use it to help them get started in app development. The app was very much a learning exercise for me, which is why I’ve made it free to download and open sourced it, in the hope that the lessons I’ve learned will benefit someone else.

Also if you have any issues, or feature requests, you can use GitHub to tell me about them, or even submit a pull request for them.

There will be a Windows Phone version released, hopefully, in the next few months, will post more about that when it is released, and once I’ve got that out of the way I’m going to be looking at adding more functionality to both apps, so watch this space!

I’d like to say a big thanks to the guys at Coderwall, particularly Matt, who have been really helpful and supportive of me while I’ve been building this app, particularly in making extra information available to me via the API and in offering to add more functionality so we can make the app even better. Thanks very much guys, hope you like it!

Coderwall-iOS | On The App Store

I’ve been holding off on posting for a few months as I’ve had a couple of pretty cool projects that I wanted to get released so I could write about them. Unfortunately they’re currently hitting a few snags so that’s going to have to wait. I do however have something else that I cooked up based on an idea for something at work that I would like to share. So without further ado, may I introduce guggenheim.js.

Guggenheim.js is a framework agnostic plugin for your website that will create an animatable gallery. It currently supports animated filtering and reordering of the galler items, as well as the pre-requisite pagination. It makes use of absolute positioning and hiding the overflow to position each item in the right row and column so that they remain in the correct order but still inside the same container. This enables me to animate the items to their new position when filtering or re-ordering, giving a really cool looking effect.

The animation is using the same code I used on tipBox, but with improvements and fixes that I will eventually port back across. It will use CSS3 animations where available but fallback to Javascript when necessary. The javascript animation is using a modified embedded version of emile with Kangax’s fixes to make it play nicely with opacity in IE8. This gives it a nice, lightweight engine for handling the animation.

I am intending to add functionality to auto generate pagination links, including numbered pagination, but for now you can easily add your own prev and next buttons and call the exposed methods of the guggenheim object.

Check out the Source Code and Examples over on GitHub for more information:

Source Code | Examples

So assuming anybody out there actually reads this blog more than once, you may have noticed a few things lately. Firstly that I’ve not posted in far too long, and secondly that there have been some changes around here. Well, it’s not just the blog, hence the extended break from posts. As the title of this post suggests 2012 is a year of new beginnings for me. I’ve started a new job, more on that later, and decided to move my blog away from wordpress and give it a bit of an overhaul.

Firstly, why the move? Well for one thing having done some work on setting up custom Wordpress sites for people recently I have massively fallen out of love with it. Don’t get me wrong, for the layperson who wants a basic blog it’s great. But for me it just wasn’t working out. There was also the fact that it was costing me for hosting and I wanted some cheap decent hosting. Enter Octopress, I’d seen some information on this a couple of times but never really properly looked at it, until now. For those that haven’t heard of it, Octopress is a blogging framework designed with hackers/coders in mind. It’s built on top of Jekyll the blog-aware static site generator that is used by GitHub pages. The way it works is that you create your posts in Markdown or HTML files, then run a Rake task which then builds static pages with your content on them. What this means is no database requirements, and technically no server side language required. This meant I had the choice of 2 (that I knew of) possible hosting options, GitHub Pages or Heroku. Both seemed like good options, both were free, had good levels of support and service, and would let me use custom domains. In the end I decided to go with Heroku as I’d been wanting to try them out for a while and it gives me a good scalability, so while it’s free for now, I can add more to it if I need to. So far this seems to be working out pretty well for me and I’ve since started hosting another project that I’m working on with them. As for Octopress, I’m really happy with that and would thoroughly recommend it to anyone needing a simple blogging solution.

As for the new job, well I’m now working at a games company called Eutechnyx in Gateshead. I’m one of the main Web Developers working on their new Online Racing MMO Auto Club Revolution. This has been a big change for me as it’s meant leaving behind PHP and MySQL and embracing Python and MongoDB. I’ve also had to get to grips with SVN which has been a considerably less enjoyable process. As for Python and Mongo I’m really enjoying them. Python is still a strange language to adapt to with it’s whitespace orientated style, thankfully the time I’ve spent using CoffeeScript lately has probably helped a great deal with that. I’ve also been using Mongo on a private project I’m working on with Ruby and Sinatra and finding that really snappy easy to work with once you understand the way embedding documents works.

So what does the future hold for me? Well I think that for now I’m leaving PHP and MySQL behind. I’m still going to be continuing in my Javascript development and looking to bring CoffeeScript into that as much as possible but my server side work is now going to be either Python or Ruby, both of which I’m having a lot of fun with at the moment. As for my choice of data storage? I think it’s safe to say MongoDB is here to stay on that front, although I will miss working out clever SQL queries.

So this month I’ve been playing with something new… again (I’m going through an experimental phase I guess). This month it was Ruby, or more specifically Ruby Gems. I’ve used Ruby a little in the Rakefiles I use for building my javascript projects but not really done any major work with it, until now.

I’ve been trying to find a nice simple solution for setting up my project skeletons quickly and easily. I’d thought of some sort of Git repository but then I’d end up with some faffy process involving multiple branches for different project types and having to clone a repository and then remove the git repository in the newly cloned folder and well, this didn’t sound quick or easy. Eventually I hit on the idea of a command line ruby gem that could use templates defining a directory structure to set up what I needed. A quick search turned up nothing that seemed to do the job, the closest thing was Mr Bones but that seemed to be entirely for Ruby projects and the template skeleton wasn’t easily customisable.  I was disappointed that it existed though as I wanted to name my gem bones but hey, how many things am I going to write that I can actually justify calling Skeletor?

So I started looking into what was involved in creating ruby gems. Initially I started of using Jeweler but this created a lot of stuff I didn’t really understand so I decided to strip everything back and just look at the structure of some gems I already used. My main source of reference was Sprockets but I also used Capistrano when trying to understand the command line aspect of the gem. These gave me a good source of reference for what was required in the various gem files.

For anyone who’s not created gemfiles before the basic folder structure is as follows:

• lib - contains 1 ruby file with the same name as the gem and a folder also named after the gem which contains all the code for the gem
• bin - optional folder that contains the command line executable files for the gem
• test - contains the unit test files
• a Gemfile that contains the dependencies for the gem
• a.gemspec file that contains the configuration details for building the gem
• the usual README and LICENSE files in your choice of format

I’m not going to go into the details of each of those files.  I’d say the best thing to do is to check out the source of some of the gems that you use and that will probably give you the best understanding of what’s required. I’m using Thor for the command line interface and Hike to locate the files in the 2 possible load paths.

Skeletor supports defining a directory structure with files and folders. You can also specify include files which will be copied into the directory, either from a local file or a remote url, and define build tasks to be run after the directory is set up.

The code for Skeletor is actually pretty simple. Ruby’s built in YAML.load function converts the template file into a Ruby Hash object which can then be looped through and there is a JSON gem that works in the same way. The most complicated part was the validation code as I needed to be able to specify custom data types that a node could match any one of.  The only gem I could find for YAML validation was Kwalify but that wasn’t flexible enough for what I needed so I had to write my own. I eventually managed to get a working validation class that worked for what I wanted and decided to extract it into it’s own gem so it could be used for other projects, and thus Grayskull was born.

Grayskull will validate JSON and YAML files against a given schema including matching against custom types. All the details for how to create the schema are at the GitHub page, as are the instructions on how to install and use it. The same goes for Skeletor. Grayskull is also using Thor for the command line as well as the aforementioned JSON gem for validation.

Check out the GitHub repositories for the source code and instructions.

Skeletor | Grayskull