Rss feed

You are currently browsing the archives for the Development category.

Archive for the ‘Development’ Category

Image-switcher snippet

Since my plan today was to start working on creating the portfolio/past work section of this site, I decided to start by creating a few simple snippets that I thought would likely come in handy.

The first of these being a simple image switcher. The idea behind the snippet was pretty much to just be able to put some images inside a div with a particular class and have the snippet do all the work. A little bit of dojo later and the below is the result.

A baby skunk!An otterA Bunny RabbitUpside down SealA Kitten sleeping next to a big dog

(images “borrowed” from the interweb)

To use the snippet all you need to add Dojo to the page, then import the jsnippet CSS and JavaScript files. After that just add a div to the page with the class “jsnipImageSwitcher”. The above Image switcher for instance is actually just the following HTML wirtten in to the page.

<div class="jsnipImageSwitcher" style="width: 400px;">
    <img src="/demo/img/skunk.jpg" alt="A baby skunk!" />
    <img src="/demo/img/otter.jpg" alt="An otter" />
    <img src="/demo/img/bunny.jpg" alt="A Bunny Rabbit" />
    <img src="/demo/img/seal.jpg" alt="Upside down Seal" />
    <img src="/demo/img/kittendog.jpg" alt="A Kitten sleeping next to a big dog" />

The snippet will work out the amount of images dynamically so there are no limits to how many can be used within it. The only limitation to the above being that the default styles may not leave room to fit the dots. As you may have noticed the snippet also pulls it’s caption from the images alt attribute, which has the added bonus of improving the images ability to be found by search.

If for any reason JavaScript is not enabled in a user’s browser the images will display normally without any side-effects as a result of being part of the snippet. The snippet is tested in Firefox, Chrome and IE9.

If your interested in knowing how the snippet works, keep reading after the jump for a full explanation.


Recent Stuff

Since I couldn’t think of anything in particular to Blog about, I thought I may as well quickly try and summarise all the random bits and bobs I’ve been working on and hacking at over the past few months.

A Javascript Game

JavaScript Game Screen Shot

JavaScript Game

Prior to starting this little project the closest thing I’d ever created to an actual game was a text based World of Zull mod as part of my Degree’s java module. Despite this I had always wanted to try my hand at creating  a simple game and thought now was as good a time as any to have a go. Since I knew so little about creating games I opted to try and do it in a language I was relatively comfortable in, JavaScript. The added advantage of this also being that anyone with a modern web browser would be able to play it without the worry of having to install anything extra. Since my main aim with this project was to learn exactly how to create games myself, the whole thing is built in pure self coded JS, without the aid of any pre-existing game building frameworks.

The game itself is more or less an asteroids style space shooter, except with a infinite-ish game-play area (something that proved far more challenging than i had originally envisioned due to the need to unload and reload star fields in order to prevent browsers slowing to a halt.) To simplify the code i created a basic javascript inheritance mechanism and a number of distinct objects to manage the different elements of the game, star fields, your ship, enemy ship’s the HUD etc. The majority of the GUI consists of DOM elements absolutly positioned relative to a central div, with the ships drawn with the HTML 5 canvas API.

Over all the most challenging aspects of the whole endeavour proved to be coming up with a relatively accurate collision detection mechanism that wouldn’t bring browsers to a crawl.

The game can be played online from my (still in development) website‘s holding page – although my latest collision detection algorithm has yet to be added to the live version.

An Updated version of the Magic Framework

Screenshot of Magic Layout

Magic V2

The new version of magic was written partially in response to working on a reasonably large CakePHP project and wanting to get a better understanding of  how MVC pattern PHP frameworks really work. Additionally it provides me with a nice starting point for small projects in which I want to use the MVC design pattern, yet want to avoid the overhead associated with many of the larger PHP frameworks (Since they are often significant overkill for a lot of  smaller projects).

The new version is a ground up rewrite including;

  • Ultra Light MVC framework, with a router and fully PHP enabled Views.
  • Database managed via PEAR
  • A set of base modules to provide all the functionality needed for a basic user system.
  • New default theme
  • Basic templating support

Since the new version of magic was originally developed as an independent side project it’s currently still within my own local SVN repository rather than the google code project. Once I get it to a usable state I will overwrite my now defunct Google code copy with the new one.

DIY Uber Desktop

Picture of DIY desktop stack

Uber Case

Since space is hard to come by in student accommodation, I spent a weekend on a DIY project to try and make better use of mine. Using a load of scrap wood, screws and a small tub of black paint a few friends (Ryan and Amy) and I set about constructing a custom container for my working desktop, gaming desktop and server pc (Which both runs my Minecraft server and streams my media around the house). In addition is also provides me with an extra shelf and somewhere to fit the switch, wireless router and external hard-drives.







Magic is brewing.

Magic Wand

Its Magic

I apologise for the title, I’ve been making cringe worthy “magic” based jokes and references all day, I just cant help myself.  In opposition to the mountain of work that seemed to lay ahead of me yesterday when I’d first decided to make the move to the Active records interaction style, today’s work load seems a damn sight lighter. Not only has the move been completed but I’ve also made great progress with a number of other core elements.

Better still the project has started gathering momentum with a total of 4 new people working on the project with me. In addition to Jayson the first person to contribute to the project,( drafting a number of templates for the Magic “Community site engine”‘s demo’s) , a second designer Source has also stepped in and created a fantastic looking logo. On the programming end, the project has also gained two more developers, Dan a good friend from uni whom has great deal of talent and experience in web design and Ryan a budding PHP programmer.

A downside of the sudden interest though is the requirement for me to actually start putting together some proper documentation, roadmap’s and plans for the project. It turned out working from the ideas in my head is a lot harder for the people who are not me :p . Its an interesting experience trying to manage the project though, as despite the fact a number of the courses on my degree programme try to drum the importance of project management in to everything, none of the situations its ever provided have ever really demonstrate a real need for it (other than seemingly wasting time that is). This project on the other hand does need it, I’m spending almost as much time talking with people about the project than I am coding it. But, I suppose it just goes to show, there’s no substitute for the real world.

One step forward two steps back

The development time frame on magic just took a hit today, not by a bug or oversight, but instead by a good idea. One of my MSN contacts (Iszak) was talking to me about how the magic framework worked, during this conversation he said something I initially though was a bit strange, that my User class was pointless. This threw me a little as the User class is central to the frameworks design and plays a big roll in almost every interaction with the system.

His point become much clearer after I read the first line of the example he gave me.

class User extends Database {

Throughout my development although User Object  had been central to the design, it had always used the Usersystem class as a middle man when interacting with the database. This meant all loading and saving users could only be done by a few relatively complex functions within the heart of the Usersystem class. The solution of creating a user as an extension of the database class had simply never occurred to me. The solution provided a much more elegant way of interacting with the database, even more flexibility with the User objects set-up and most of all for the User Class to be the sole controller of all things user.

The big downside of this is a lot of the code I’ve written is now pointless or wrong and that a great deal of rewriting and restructuring is going to be needed. Not to mention the entire way guests are handled and users are added needs to be totally rethought. In the long run though, i do think this will be worth the setback. Unfortunately in the short term, this means a lot of extra work for me. Still more unfortune than that is a HCI exam i have tommrow, and a slight need to do at least some revison for it, which all adds up to there going to be a good few days before Magic’s back where it was just an hour ago. On the bright side though, when the next version does come, not only will its internals be more sorted out, but the demo’s will be far less unsighly thanks to the kind contribution of a defualt layout by Jason Wendell.