Object-Oriented CSS Demo
I built this demo to accompany an article I wrote on modular, reusable CSS. It turned into a three-part series at Renaissance Nerd.
This demo requires IE8+, Safari, Chrome, or Firefox.
View Demo - View GitHub repository
HTML5 Project Template
This template mixes together my favorite parts of several projects to create a flexible starting point for any new design.
The foundation is Dan Cederholm’s default CSS template. Dan’s file organization, comment formatting, and clearfloat solution provide a solid base.
I layered in part of the HTML5 Reset along with some tweaks to make sure that certain HTML5 elements are treated as block-level elements across all browsers.
Finally, I mixed in some typography settings and gutters from the 960.gs project. All block-level elements—even the HTML5 block-level elements—are given a 20-pixel gutter by default.
The latest copy of Modernizr is included, and the default index file links to a Google-hosted copy of jQuery. The index file is a slightly modified version of the one included in the HTML5 Reset package.
Thanks to @simplebits, @meyerweb, @zeldman, @nathansmith, @html5reset, @modernizr, and @jquery.
Resume Analyzer Prototype
I’ll admit; this is a shameless bit of self-promotion wrapped in an application prototype. I built this to demonstrate two things.
The first is the use of cheats in prototyping, including screenshots of dialog boxes and jQuery timeouts to fake network activity. These things allow you to rapidly iterate on an interaction while keeping any potential audience fooled.
The second is a perfectly degradable method of altering default mailto link behavior to let users send messages from within the app rather than forcing them to switch to another app (e.g., a default mail client).
As of this writing (8/17/2010), this prototype is only compatible with Webkit-based browsers and Firefox. It makes use of several CSS3 tricks, including border radius and linear gradients. All of the animation is done with jQuery.
To use the prototype: Go here, and click the big button. This opens a fake dialog box to simulate the selection of a resume document. Click anywhere on the dialog box to dismiss it and kick off the analysis/animation. To see how email messages are handled, click the email address on the final screen. Feel free to click the Send button as well to see how feedback is provided to the user; no messages are actually sent.
LinkTwist
LinkTwist is a (very basic) Safari extension that allows you to create a pre-formatted link for a couple of different popular markup languages, including Markdown, BBCode, and Wiki markup.
The project is open source and hosted at GitHub. I wanted to explore what’s involved in building Safari extensions and figured anything I learned from the process might be helpful to others. Feel free to fork the project, modify it, learn from it.
Download LinkTwist - View GitHub repository
Twitter UI Prototype
I built this to go along with an article I wrote about customizable application UIs. Everything in this prototype is non-functional with the exception of the Edit This Page button in the sidebar. Go ahead; click it.
This demo uses HTML5 (for fun) and CSS3 (for fancy animations). I threw in a little jQuery for the drag-and-drop support.
NOTE: At the time of this writing (7/3/10), this prototype only works in a Webkit-based browser. If you are using Safari or Chrome, things will look great.
UX Templates
I don’t always like to work on a computer when I do UI work. Sometimes I like to print out these templates for the purposes of sketching.
Storyboards
I’ve created two different go-to storyboard templates. One is a 3-panel, and one is a 6-panel. Each provides room for a project name, the date, and information about each panel. I’ve provided both formats in PDF and OmniGraffle formats.
Or, you can download all of them in a convenient zip file.
Wireframes
Sometimes I create wireframes with OmniGraffle, and sometimes I sketch. I’ve created OmniGraffle templates that can be printed out and used for sketching as well. One template is horizontal and the other is vertical. These are designed for working with pages that have a maximum width of 960 pixels.
Each provides a grid based on the 960.gs CSS framework along with room for a project name and date.
- Horizontal Wireframe OmniGraffle
- Horizontal Wireframe PDF
- Vertical Wireframe OmniGraffle
- Vertical Wireframe PDF
Or, you can download all of them in a convenient zip file.
Fussy Code Bits
Here are some bits of code I’ve written that you might find useful.
Perfect Negative
This AppleScript will rejigger your iTunes equalizer in such a way that the output sounds a hundred times better than the default setting.
I can’t take total credit for this, but I saved it into a GitHub gist for posterity. I’ve posted information on how to use it here.
Quix Extension
This fussy code bit is my set of extensions for Quix, a Quicksilver-like utility for bookmarklets. It’s forked from Merlin Mann’s original Quix file.
Scripts for Airlock
These scripts go along with this article. Airlock is a preference pane that monitors your iPhone’s distance from your computer via Bluetooth. When the phone moves outside of a user-specified distance, Airlock automatically locks your computer.
With some custom scripts like the ones I’ve written, you can beef up the security a bit.