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.

  Read the Blog Post See the Demo

  WebGL ThreeJS JavaScript 3D Animation
• 
  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.

  Read the Blog Post See the Demo

  User Experience Bootstrap
• 
  Flipboard-style Notifications

  Simple, non-stacking, non-chaining notifications inspired by Flipboard and other iOS applications.

  Read the Blog Post See the Demo

  CSS3 Webkit Bootstrap
• 
  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.

  Read the Blog Post See the Demo

  CSS3 Webkit Bootstrap
• 
  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.

  Read the Blog Post See the Demo

  CSS3 CSS
• 
  bootstrap.footnotes.js

  Bootstrap-based footnotes inspired by the way Instapaper handles footnotes and endnotes.

  Read the Blog Post See the Demo

  Bootstrap JavaScript jQuery
• 
  HTML iOS Notifications

  Replica iOS Notifications using CSS3 3D transforms. Won't work in all browsers. Available as it's own GitHub repository.

  Read the Blog Post See the Demo

  iOS CSS3 Animation 3D
• 
  3D Accordion - CSS3 Animation

  A nifty example that exposes what can and can't be done with 3D transforms in CSS3 animation.

  Read the Blog Post See the Demo

  CSS3 Animation 3D
• 
  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.

  Read the Blog Post See the Demo

  JavaScript jQuery jQuery UI
• 
  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.

  Read the Blog Post See the Demo

  UX JavaScript jQuery
• 
  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.

  Read the Blog Post See the Demo

  UX JavaScript
• 
  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.

  Read the Blog Post See the Demo

  Highcharts SVG Charting Google
• 
  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.

  Read the Blog Post See the Demo

  CSS3 JavaScript Game Dev