Code :

Web Hackery

Though I'm deep in iOS-land these days, I spent many years in the web world. Hacking around in CSS and JavaScript is still pretty fun.

  1. Pure CSS Icons

    Sunday, August 10, 2014

    This is something I was toying around with recently. It all started with some new button designs that leveraged a clever combination of pseudo-elements and the CSS border-triangle trick. I started thinking, "What else can we use this for?" The result is pretty cool, if not actually terribly useful (images are much more practical, and real HTML5 techniques are much less brittle on supported browsers), but I'd though I'd share this:

    Below is an image of what these look like on supported browsers. Right now, I've only tested them on Firefox and Webkit.

    Pure-CSS Icons

  2. Pure CSS Glossy Button

    Sunday, August 10, 2014

    I like to challenge myself when I'm working on web presentation.

    Last year, at work, the Creative department designed a new style of button to replace our old implementation. It was a fairly graphical button style, and I immediately began wondering if there was a way to avoid images and slicing. The typical solution to this problem is a sliding doors approach.

    Glossy Button image

  3. TextGauge jQuery Plugin

    Sunday, August 10, 2014

    We've all been there. Fill in enough forms online, and you'll eventually hit the textarea that has a character limit. We've seen all the usual treatments: "The Keystroke Countdown," "The Arbitrary Letter Target," and the worst UX sin of all: "The Hard-Limit Hammer."

    When I was faced with solving this particular problem recently, I decided that there had to be a better solution. There are two major problems to solve with a length limited input field:

    1. How to indicate what the limit actually is
    2. How to show the user how far into (or over) the limit they are

    I believe that my textGauge plugin solves these problems.