View the Labs
Vineyard
Vine Search Engine
See More
Description
TBA
Outcome
TBA
Pure CSS Toggle
CSS3 Experiment
See More
Description
TBA
Outcome
TBA
Shibui
HTML Boilerplate
See More
Description
TBA
Outcome
TBA
Craftyslide
jQuery Plugin
See More
Description
Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.
Outcome
The plugin gained a lot of attention due to its simplicity and small size. It has been featured on many websites and development blogs, leading to a large volume of downloads.
jQinstaPics
jQuery Plugin
See More
Description
jQInstaPics is a simple jQuery plugin that enables you to display the latest pics from your Instagram feed on your website or blog.
Similar plugins only allow images to be pulled in based on keywords, from a public feed. This is where jQInstaPics comes into play.
Outcome
The plugin is being used to showcase Instagram photos on various websites around the web.
Mario Canvas
HTML5 Canvas Demo
See More
Description
A quick and dirty HTML5 Canvas animation demo, showcasing Mario running (or sliding) back and forth across the screen. Could probably do with animating the legs as the sprite moves.
My original intention was to try and hook this up with the Gamepad API, but the wired controller I bought was incompatible with my Mac. I guess Gamepad support will have to wait.
Outcome
I had the chance to experiment with the Canvas drawImage method in conjunction with animation.
Canvas Particles
HTML5 Canvas Demo
See More
Description
A simple script to randomly generate and place particles which are animated from the center, outwards. The script makes use of dat.gui to dynamically manipulate values.
Outcome
I gained a further understanding of Canvas animation, as well as object-oriented JavaScript. Had the chance to experiment with dat.gui.
WebSockets
HTML5 WebSockets Demo
See More
Description
An experiment in HTML5 WebSockets, with the help of the Pusher API. The demo uses WebSockets to 'pair' a device and browser, thus allowing you to control an on-screen Canvas animation.
Outcome
Had the chance to dive head-first into development with WebSockets, as well as experimentation with the Pusher API.