UX LAB
The UX Lab is a collection of HTML, JavaScript and CSS3 experiments designed to show off what modern web browsers are capable of. It may not always have a user experience focus, but it is definitely aimed at blurring the lines between web and native environments.
-
ThreeJS Fun
Because a flat, boring web is a thing of the past. An experiment with building something simple with the amazing plugin ThreeJS.
-
OS-Dependent Modal & Close Buttons
The placement of close buttons and modal action buttons generally ignore the user's operating system and enforce whatever the developer feels should be the standard. It's presumptuous and confusing.
-
Flipboard-style Notifications
Simple, non-stacking, non-chaining notifications inspired by Flipboard and other iOS applications.
-
CSS Filters - Blurred Modal Background
Native inputs styled with CSS3 goodness. Are they even remotely feasible yet? The answer is no. Read the blog post to understand why they're still so far away.
-
CSS3 Input Styling
Native inputs styled with CSS3 goodness. Are they even remotely feasible yet? The answer is no. Read the blog post to understand why they're still so far away.
-
bootstrap.footnotes.js
Bootstrap-based footnotes inspired by the way Instapaper handles footnotes and endnotes.
-
HTML iOS Notifications
Replica iOS Notifications using CSS3 3D transforms. Won't work in all browsers. Available as it's own GitHub repository.
-
3D Accordion - CSS3 Animation
A nifty example that exposes what can and can't be done with 3D transforms in CSS3 animation.
-
jQuery-UI.toggleSwitch()
Yet another toggle switch, but built upon jQuery UI. It therefore respects your default theme styling and requires the smallest CSS & JS additions.
-
Idle jGrowl Rerouting
Paul Irish wrote a pretty chill script for detecting when users become inactive. Here's an example of the good user experience stuff you can do with it; queuing up jGrowl notifications if a user isn't paying attention.
-
Credit Cards
Everyone should be able to have nice credit card forms. This snippet auto-detects the credit card type (Amex/VISA/Mastercard) depending upon the number you enter. No more silly drop downs or radio buttons.
-
Google Analytics Highcharts
This experiment stems from a Hacker News argument about Google's reluctance to ditch Flash for their analytics interface. There really is no reason to stick with Flash, and it's just hurting their device accessibility.
-
Duck Hunt
Something I made for fun about 6 months ago to play with CSS3 perspectives. I never really uploaded it anywhere nor showed many people.