One of the first articles I wrote on this blog back in May 2010 was about how useful sprites are and how to use them with CSS. It’s can be an absolute headache to implement simple spriting with CSS. Thankfully drawing sprites is implemented natively within the canvas api.
Getting ready
Before I go in to specifics of drawing on a canvas all of these examples expect a 2D context to be available. I won’t repeat this for each example so here is a quick example of how to get it.
I needed a way of applying velocity and drag to a new UI I am putting together, much like the one I built in to jQuery.kinetic.
So I have pulled it out in to a simple reusable object.
// create an instance
var v = new Velocitr();
// set starting point
v.move(30, true);
// move
v.move(50);
// get velocity
assert(v.velocity).equals(20);
// apply drag
v.drag = 0.9 // => default
v.decelerate()
assert(v.velocity).equals(18);
Chaining
var v = new Velocitr();
v.move(30, true)
.move(60)
.decelerate();
assert(v.velocity).equals(27);
Tests
It comes with a suite of tests which are written with the help of QUnit and Pavlov and can be found in the test/ folder.
I released jQuery.kinetic, a while ago. It’s a simple jQuery plugin which adds smooth scrolling and decelleration to containers.
I built a series of manual test pages to make sure that subsequent releases didn’t break the functionality but with recent requests for updates I decided to investigate writing some automated tests to catch potential issues quicker.
The issue with writing automated tests for this plugin is the fact that it’s functionality is based on mouse and touch drag movements.
If you want to open the result of a form submission in to a new window you can without having to go via the server. This is how you would do it using Javascript.
Ordinarily when submitted this will send the current page to the action location of the form. However there are times when you might want to post the form in to a new window are an iframe within the page (say inside a dialog).
I’ve been wanting to try my hand at doing some game development for a while and I finally managed to make a start.
I decided to make a simple driving game using HTML5. I began doing a bit of a search for tutorials which build a simple top view racing game but didn’t stumble upon any for HTML5. I did find a flash tutorial which I have used as a starting point.
Have you ever come across the term “Catastrophic Backtracking” in relation to regular expressions? Well I came face-to-face with it’s fury the other day while researching a bug in an old CMS module which I was trying my best to fix.
It started out with an outrageous claim from a QA tester that he could crash Chrome by typing in a large number of characters in to a text box. I tested it out and to my surprise the problem was worse than he realised and it all stemmed from a particular regular expression being used to validate an email address. It looked like this:
I am working on a rewrite of markdown writer, my playground for working with backbone.js and HTML5 offline capabilities. There are a few new features which I am building in to what is currently a very basic app.
One of them is enabling you to log in using Github and save your offline articles to a Gist. To do this I have had to connect with Github using OAuth2.
We had this elephant in the closet issue while working on a project about a year ago. We were serving the website using a regular http connection but switching to a secure https connection. The login and registration process worked beautifully as we began the build supporting the organic non-javascript journey.
dem dialogs
We hit the issue as we began to build the dialogs. We quickly realised that the user would need to log in using a secure page on a dialog from within a non-secure parent page. These two pages would also need to communicate to make the user experience smooth and clear. We researched various ways of talking cross domains but found the browsers we needed to support weren’t consistent enough.
I have just had an issue where form validation will pass for the following postcode:
ec1r 5ar <script>alert("hi")</script>
The only reason being the fact that there is a valid post code at the beginning. I was using a very slightly adapted regular expression found on the Wikipedia Postcodes article which was:
So getting my regex hat on. I had the issue that it cannot allow anything after the validated postcode, but also I expect that it would similarly allow junk before the valid postcode. The whole thing is wrapped in matching brackets so all I needed to do was add the begins with (^) and ends with ($) simbols to fix the test with the following regex:
Bandwagons come and go, when looking back there are so many which fall in to the category “forget/can’t believe I jumped on” but with the rise of require js and other module loaders using the commonjsAsynchronous Module Definition I think this is one bandwagon everyone should be considering seriously.
In my position at the digital agency I work for, I’ve been considering the ever widening landscape of client expectations from new forms of UX on devices, locations and interactions within social circles. More and more is being requested and without modularising these features in to well tested silos the time needed to satisfy clients hunger could potentially sky rocket.
Dave Taylor - Software Engineer
