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.
(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" />
</div>
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.
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
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 Thybag.co.uk‘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
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
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.
If your website, webapp or forum has a particularly large database, backing the database up or restoring it via PhpMyAdmin (or similar tools) can often cease to be an option. PhpMyAdmin for instance will generally struggle with files over 5MB, which isn’t all that helpful when your sites database is in the hundreds of megabytes, if not the gigabytes.
The solution, if shell access is available, is to switch to using shell commands instead. Once logged in to the server (via putty or the terminal of your a linux or OSX user) backing up the database is as simple as running
Seeing as this Blog has no readers, I’m not entirely sure who this post is aimed at. That said, for some reason I feel compelled to make this post anyway – in much the same way I imagine most people do when they create a new blog themselves. So here it is!
New design, check. Rambling and incoherency (kinda) first post, check. Motivation to actually use this Blog properly, check.
Now, just for the reason this blog may as well have some content. I was asked earlier today how best to select rows from a database where a particular number existed in a comma separated list inside one of the fields. The issue being that performing a straight
SELECT * FROM 'someTable'
WHERE 'someRow' LIKE '%7%'
would end up pulling in any records containing 77/27/73 along with the actual rows required (in which the number 7 itself actually existed). My off the top of my head solution was to include the comma’s in the query, which resulted in somthing along the lines of
SELECT * from 'someTable'
WHERE 'someRow' LIKE '%,7,%'
OR 'someRow' LIKE '7,%'
OR 'someRow' LIKE '%,7'
which would theoretically be able to get the 7 in any place while still excluding any numbers such as 27, 77 or 72.
If anyone knows of a more elegant solution to the problem it would be interesting to hear. Also any feedback/criticism on the new Blog layout would also be great.
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.
