thebeebs | December 2010
Learn the art of website security

Pirates love daises - a HTML5 game

by thebeebs 18. December 2010 10:07

Pirates love daisesPirates love daises is a game developed by Grant Skinner written using HTML5 and JavaScript. And it available to play here

Now I must have been off sick when they covered this in school, but apparently pirates love daises? Who knew. In this game it's your job to recruit a crew of pirates to protect your stash of daises from being stolen. Grant talks about the reason they chose daises and the games development over at the companies blog.

It’s really fast in IE9

We’ve been getting up on stage and talking about IE9 performance a great deal recently. Pirates love daises shows that IE9 isn’t just fast on test suites, it’s also fast on real world sites. The game works in IE9 Beta, Firefox 3.6, Safari 5 and Chrome 6 and higher. Giorgio Sardo  tested the game in all the latest browsers and the table below shows the performance on his machine:



Firefox 3.6

Firefox 4b7

Chrome 8

Chrome 10

Safari 5.0.2

Opera 11

Full Game Excellent Very Bad (crash) Bad Good Terrible NA
Simplified Game Excellent Terrible (crash) Very Bad Good Terrible (good/bug?)
CPU (%) 13 49 NA 44 48 45 40
Memory (MB) 100 144 NA 175 143 180 240


Start developing With Canvas

If you’ve not looked into developing using the HTML5 canvas element, take a look at a basic tutorial I wrote earlier this month. If you interested in developing your own HTML5 games then you can also use the Easel JS Library that the team created to make future game development easier, it can be found here:

Game Overview

Tags: ,

2 must have WP7 applications for Christmas

by thebeebs 6. December 2010 10:05

I thought I'd quickly share with you a couple of the applications that I've installed my phone over the last weeks both are perfect companions for the festive period.

Santa Quest

Price: £1.99


Santa quest is a manic Miner style platform game by IronSun Studios. Whenever IronSun release a game I install it as I know its going to be well tested, wonderfully deigned and extremely addictive. This game is no let down, it has beautiful graphics, great gameplay and tons of levels.

From a developers point of view

Santa Quest is built using XNA, and has all the standard elements you’d expect to see in a platform game, Parallax scrolling,  a physics engine to handle the jumps, audio, sound effects and a really interesting on-screen Controller. It’s not terribly complex to build something like this yourself, but it does take a great deal of expertise to deliver something as well polished and responsive as Santa Quest. If you want to have a go at building a game like this then why not check out this sample project

Cocktail Flow

Price: £2.49


I’ve made about 3 cocktails using recipes from this application and they have all been good. The best feature is that you tell it what spirits, mixers and alcohol you have and it tells you what cocktails you can make. It also has a sweet little feature that tells you what other items you should buy to make more cocktails. It’s really handy, if like me, your trying to stock up your drinks cabinet before Christmas but don’t really know what to buy.

From a developers point of view

This application is built using Silverlight. If you want to know how to build applications like this then head on over to Gergely Orosz ‘s blog (The creator of cocktail flow) for the lowdown.


My Design Process

by thebeebs 6. December 2010 01:00

Over the weekend I have been redeveloping the skin for my website. It’s not quite finished (I'm on step 4) but for those that are interested I thought I’d share my workflow with you. At work I very rarely design a website from start to finish, more often than not we hire an agency to either deliver the whole site or at least a Photoshop file that I’ll then slice.

When I'm doing something for myself, however, I don’t have the luxury of a talented designer. I often compare it to home cooking, it’s satisfying doing it yourself but the results are rarely as good as a restaurant can deliver.


Step 1  -Sketch some ideas:

I like to sketch out key ideas. I sometimes sketch the whole site, sometimes i just sketch a key element. On the new site the only thing I sketched was the top bar, I tried lots of variations. Sketching is good because it’s easy to change and iterate. My sketches don’t look good, many of the designers I work with produces sketches that look incredible, despite this, the process of getting an idea out of your head onto paper is valuable in itself, I don’t care what it looks like.



Step 2- Produce an image using a 960 template:

This week was the first time I used Expression Design 4 to produce a high fidelity image of the website, usually I'd have used Adobe Fireworks. I love fireworks for this kind of design and I've been using it since it was made by macromedia. In terms of speed, I’m much faster in Fireworks than anything else. I used Expression as I currently don’t have a fireworks licence and expression was free as part of my MSDN subscription.

After a few hours of playing around and learning I figured out how to do most things that I do in fireworks.

As a base I use grid960 templates, you can get them for all major design packages including fireworks and expression design.



Step 3 – Convert Image to CSS using 960

Once I have the image of the site I will then recreate it by hand in Visual Studio. I’ve played around with fireworks exports, but I prefer knowing exactly how the CSS and HTML are put together. I use the 960 grid system as a base. I have previously used, notepad and Dreamweaver. I use Visual Studio exclusively now because it’s CSS and JavaScript intellisense and Debugging are better than anything else I've used before.


Step 4 – Fixing cross browser issues.

I develop my website so that it looks good in my default browser (currently IE9 beta) I will then use Expression Web SuperPreview 4 to compare how it looks in Firefox, Safari, IE6, IE7, and IE8. In general I’m looking to make it look exactly the same in everything but IE6. With IE6 I'm happy once it looks readable, I don’t however worry to much about it looking perfect.




Step 5 – JQuery and progressive enhancement.

Next step is to add in any rollovers, animations and interactions using jQuery, I test the features and capabilities of the browser before adding anything . This means that users that browse my site using a good browser get better features.. Once that's working in my default browser I will check check manually  against all other browsers.


Step 6 – Testing using Selenium

if I have some JavaScript doing anything a little complicated like form validation, I will write a test in selenium to ensure that its working well in various states and with different parameters. This also give me a chance create a test harness that I can use in the future to do regression testing.


Step 7 – Integrate

I’m then left to integrate the finished skin into my website, whether it be Wordpress, Umbraco or BlogEngine.Net (or, shock horror, one of my own creations)