jQuery Quick Filter A quick way to search and filter content.

jQuery Quick Filter

QuickFilter is a super simple jQuery plugin for quickly filtering content. Simply instantiate it on an element that has a value attribute, and pass in a selector that you want to filter. The demo includes a textbox that filters list items, but you aren't limited to this. You can filter paragraphs, divs, and more. Go ahead and try the demo!

Convertagram Convert dollars to Instagrams!

Convertagram

Convertagram is a little joke application to convert dollar amount to "Instagrams". It was made to parody the insane amount of money Facebook bought Instagram for ($1,000,000,000).

ERMAHGERD Text Translator Translate boring text into ERMAHGERD text.

ERMAHGERD Translator

I wrote this extension so anyone can convert normal text to ERMAHGERD text. Simply type "emg your sentence here", hit enter and your ERMAHGERD text will be on the clipboard. Credit to Justin Miller for his AngularJS ERMAHGERD translator.

Alfred CSS3 Helpers Quickly get vendor-prefixed versions of popular CSS3 properties via Alfred.

Alfred CSS3

Alfred CSS3 helpers are a set of scripts for making commonly used CSS3 properties a little quicker to write. Each command correlates to a CSS3 property, but copies all vendor-prefixed versions to your clipboard as well. The currently supported properties so far are:

*You must have the Alfred Powerpack installed to use these scripts.

Breeze Current temperature and conditions using geolocation.

This is a mobile optimized mini web app that shows you the current temperature and conditions using geolocation. If you prefer your temperatures in fahrenheit, simply swipe to the left and turn it on. Breeze uses local storage to store your preferred setting. The icons are from Adam Whitcroft's excellent Climacons set.

Simple Progress Bar A simple progress bar, drawn with CSS3 & animated with jQuery.

This is a very simple demo of a progress bar that can easily be adjusted to any percentage of completion. The demo uses a text field to grab the percentage, and animates it to that particular width.

Anything less than 6% you will not notice a difference in the bar's width. This is because it does not draw properly due to the shape and other attributes of the bar.

EMSegmentedControl A drop in replacement for standard input radio matrices

EMSegmentedControl is a simple Jquery plugin that allows you to use it as a drop-in replacement for standard HTML radio groups. Instead of clickable radio buttons, EMSegmentedControl uses the idea of selectable inline segments.

All drawing is done with CSS3 (no images used), so it's pretty easy to customize and adapt to your own design. Similar to EMSwitchBox, EMSegmentedControl hides your radio groups and controls their state, so you can use them and capture their value as you would normally.

EMSwitchBox A drop in replacement for standard input checkboxes

EMSwitchBox is a dead simple Jquery plugin that you can use as a drop-in replacement for your standard input checkboxes. It features a sleek design, custom on/off label support, and smooth animations right down to mobile.

Your form values are captured normally because each EMSwitchBox instance hides its corresponding checkbox, and controls its state. With a simple init line in your header you can continue using input checkboxes as you always would.

EMColourPicker A specialized colour picker for limited colour selection

EMColourPicker is a Jquery plugin to allow the user to select a colour from a predefined list. You can either use/tweak the default colours, or pass in custom colour names/hex values in the initialization line.

It is recommended you apply the colour picker to an existing input text field so the value is stored properly when you submit your form. EMColourPicker will automatically hide the text field when initialized.

HTML5 Matrix Code Rain An attempt at recreating the Matrix 'code rain' effect using the HTML5 Canvas

This is a demo using HTML5's canvas element to recreate the famous code rain animation from the movie The Matrix. It runs best in WebKit browsers, and runs pretty brutal in Firefox.

This was a late night experiment and the code is probably poorly written. I'm sure there's a better way to make the animation smoother and not slow down heavily when a lot of characters are on the screen.

Stratus App Competition Entry A fully CSS3 animated webpage I wrote for a competition

This is a webpage I coded for a competition hosted by Jeff Broderick - the designer of Stratus App. He provided a PSD file of the design, and we were to write the markup for it, making sure to include lots of fancy animations and interactions.

All animations are powered by CSS3 (not a line of Jquery used). There were a few challenges along the way, but I got there in the end. Oh, and did I mention I won the competition? I was pretty happy about that.