My user interface experience includes e-commerce, JavaScript, Bootstrap, HTML5, <canvas>, CSS, WordPress, and PHP. I have worked with JSON feeds and AJAX to develop interactive charts and graphs such as those listed here.

  • Responsive Design

    I have made several responsive and mobile-friendly websites. A responsive website will look good on any device. Resize the sites below in your browser, or visit them on your phone or tablet. features gradients, transitions, mixins, and other advanced features of Sass and CSS. I use Bootstrap for a responsive grid system. features a gaggle of cute animations and YouTube videos. It uses CSS, Sass, WordPress, and Bootstrap.

  • Fonts and PostScript

    Handmade fonts
    This is my collection of handmade fonts. The PostScript Type 3 fonts are in plain text format which can be turned into a graphic via GhostScript (Windows/Linux) or Preview (Macintosh).

    How to generate WebKit fonts
    This article explains the process of generating a WebKit font which can be displayed on your web pages.

  • Photography

    Rear sync flash photography
    This is my explanation of how remote strobe photography works.

  • Apache Rewrite Rules

    Making nicer URLs programmatically
    This is my explanation of how to turn ugly, auto-generated URLs into pretty ones using the magic of Apache's mod_rewrite module.

  • AJAX and JSON

    Random language generator
    This example generates random sentences using JavaScript and JSON libraries. It retrieves JSON data using an AJAX call without requiring full page reload.

    Google Maps
    Google's map API allows zooming, coordinates, tooltips, and other features. I set the viewable map area to the San Francisco Bay Area and assigned tooltips on some local landmarks. Drag any part of the map into view just as you would on

  • Sorting and filtering

    Interactive art portfolio
    The jQuery Isotope plugin allows for sorting, filtering, and masonry layouts.

    Interactive monster sorter
    Another demo of the jQuery Isotope plugin. Sort and filter these cartoons by color or other characteristic.

  • HTML5 and <canvas>

    Cute monster maker
    This is a demonstration of HTML5 and <canvas> in which users can create new characters in an HTML5 animation dynamically. Written in JavaScript, HTML5, and CSS.

    EaselJS is a JavaScript library for working with the HTML5 <canvas> element. This demo illustrates change in velocity, speed, scale, opacity, and x/y coordinates on each animation.

  • JavaScript InfoVis Toolkit

    The JavaScript InfoVis Toolkit (JIT) uses JavaScript and the HTML5 <canvas> element to produce interactive data visualizations, graphs and charts.

  • Highcharts.js charts and graphs

    Highcharts.js uses JavaScript and Scalable Vector Graphics (SVG) to produce a wide range of elegant charting and graphing features.

  • Menus

    Pure CSS dropdown menu
    This is a demo of a menu using only CSS selectors to create a horizontal drop-down menu four levels deep. It can go deeper; I recommend three levels or fewer for best user experience.

    Horizontal dropdown menu
    This is a demo of a horizontal drop-down menu off a logo. It can go deeper, but again I recommend three or fewer levels for best user experience.

  • Wireframes

    Balsamiq mockups

    This is an example of a mockup created in Balsamiq. Balsamiq is a rapid prototyping tool that allows user experience designers to communicate ideas fast without getting lost in the details.