Page Content
Alchemy of technologies
Welcome to the part of my site where I shall test any new HTML, CSS or JavaScript idea or method. If you find things start breaking on this page, do not be alarmed... I'm obviously just testing something :) Either that or someone hasn't updated their browser...!
HTML5 Drag & Drop Image Handling
2011-04-02 01:23:01
Something that I came across a while ago now - but never got round to using - is the ability for the top 3 browsers (FF,Safari & Chrome) to trap drop events on the browser window. This combined with the dataTransfer event property and the FileReader object allows us to perform a number of operations directly on the file that has been dropped.
Using these features I've been experimenting with a image-based password system, rather unimaginatively called ImagePass ✩
JS1k - Canvas Fun in under 1k
2011-07-17 12:11:45
I still haven't got round to entering JS1k yet, I keep randomly coming across the site and thinking i should give it a go, and then I totally forget about it and miss the competition.
Anyway, after having quite a stressful time of things recently, I decided to do something a little fun for a change... so here it is. It's not quite optimized or fully finished yet (comes in at 1022 bytes) and it is my first attempt so be kind ;) The WASD keys are your friends here (I did use arrows originally, but it seems that Opera has problems handling using "special keys" simultaneously!). If I can squeeze some more code in by compacting the rest I'll try getting the clouds to move and make it so the player can't jump in mid air.
setTimeout & .apply() tests
Below you should see some coloured squares - if you hover (and wait for the title text to appear) you'll see a description of what was tested and any error that was tripped. The green squares mean the setTimeout fired with it's this object set - the red means it failed / caused an exception. If you test different browsers you'll see that MacBook OSX {FF4/FF5, Safari5, Chrome(12.0.742.100)}, Dell Lattitude WinXP {FF3} all agree whereas MacBook OSX {Opera 10.10} allows the basic var types but nothing complex, and Dell Lattitude WinXP {IE8} doesn't even support the apply() method on native functions.
Firemoth & Zap
These two are just me playing around with radial and linear gradients in FireFox. Firemoths are the nice radial gradients floating around the black block and Zap you may notice every few seconds flying across the screen :)