Credit Card Directive

A mobile friendly credit card input field based on Luke Wroblewski's UI. Creates a single continuous field for entering all data from a credit card. Keeps a mobile user in a single number input keyboard through the entire data entry.

Supports Visa, Master Card, Discover, and American Express icons, as well as a CVV icon.

Sample Code

<credit-card></credit-card>

Example

Growable Textarea Directive

The Growable Textarea Directive allows a textarea element to match the height of its content. This prevents the textarea from scrolling. The textarea is always the right size, allowing all text to be visible.

Sample Code

<textarea growable-textarea></textarea>

Example

Style Sheet Factory

Style Sheet Factory, is an AngularJS library that provides an easy way to manage CSS rules on the DOM. It can allow directives to provide their own self contained styles, as well as write event based CSS rules.

Sample Code

$scope.exampleColor = 'red';
var sheet = StyleSheetFactory.getStyleSheet();

StyleSheetFactory.addCSSRule(sheet, '.style-example',
    'background-color: '+$scope.exampleColor+';' +
    'color: white;' +
    'padding: 16px;'
,1);

Example

Popup Directive

The popup directive small container that allows you to position HTML content to an event on an element. For example, a tooltip that appears when an input gains focus, or something more complex like a time picker utility.

Sample Code

<button ng-click="myPopup.show($event)>Open Popup</button>

<popup api="myPopup">I am a popup</popup>

Example

I am a popup

Modal Directive

The modal directive is a fullscreen container that allows you to position HTML content over the top of your page. If you include an event that triggers the modal when showing, the modal will animate out from the origin of the event.

Sample Code

<button ng-click="myModal.show($event)>Open Modal</button>

<modal api="myModal">
    <h1>Hello World</h1>
    <p>I am a modal. Isn't that special?</p>
    <button ng-click="myModal.hide()">Close Modal</button>
</modal>

Example

I created my FlashLight app as a way of learning some basic Android development. With thousands of flashlight/torch apps on the market, I didn't want it to be just another of the same. Rather than focusing solely on producing the most amount of light, I decided to concentrate on "just enough" light.

There are tons of situations where you need just a little bit of light. Navigating a bedroom where others sleep, checking on a sleeping baby, reading something without ruining your night vision, etc. I wanted a tool that was more than just blinding light, and useful in these situations.

FlashLight controls brightness in two ways. One, by drawing a colored circle to the screen. And two, by changing the screen's brightness. Both of these are adjusted through one fluid gesture. Swipe up the screen for a larger circle and more light. Swipe down the screen for a smaller circle and less light

Color, is another important feature. While white light gives you the best range of brightness, red light helps you see at night. Blue-green, offers the best dark adaptation recovery. Also, photographers often paint with light in night photos. To address this, I added a color picker that spans the entire color gamut a screen can produce.

Lastly, in situations where the most amount of light is needed, the ability to turn on the camera flash was added. I didn't want to clutter the screen with more buttons. I settled on a double-tap gesture to toggle between screen light and camera flash.

The need for a flashlight app has been reduced with additions made to Android OS. Still, I find an almost daily need for FlashLight's screen light features.

After creating the FlashLight app, I wanted to make something heavily themed. One of the alarm sounds in Android at the time was a corny rooster crow. The sound birthed the idea of a rooster/farm themed timer app.

The theme is based off the quintessential american farm. A red wood barn, brown picket fence, chicken eggs, and (of course) the rooster. Chicken clucks and short crows are also incorporated.

A timer is a short term need. Long term needs are solved with alarms. So, I focused on providing the simplest interface for sub four hour timer needs. Things like taking a nap (1 hour), boiling an egg (10 minutes), or brewing coffee in a press pot (4 minutes).

To reduce buttons, I settled on: one hour, ten minutes, one minute, and ten seconds. Entering time required less cognitive load, and created a theme appropriate pecking gesture.

There's no undo/delete button. If a person enters a wrong time, their only option is to clear it, and start again. To eleviate mistakes, I added audial and haptic feedback to every button press. With four of five senses being used, I found I didn't miss often, and flow was retained.

Rooster's utility has largely been replaced with additions to the Android OS. But, it remains in my heart as a fun and helpful learning experience.

Mic List is a personal app, not yet released.

There are a lot of list/task apps available. Everynote, OneNote, Google Keep to name a few. All of these apps force you to tediously peck out items on the software keyboard. With Mic List, I focused on speed and simplicity of entering items.

Most list itemss I generate are short (less than 5 words per item). Things like: wash car, clean fridge, take out trash, etc. If it's a grocery list, they're even shorter: bananas, milk, bread. I wanted a way of creating these kinds of lists as fast as possible. I did that, with dictation.

Items are entered by pressing a mic button, and saying what you want to add. A pause in speech will add the item to your list, then imediately listen for your next item. Speech-to-text isn't perfect, and there are times it doesn't enter what you're saying correctly. That said, I found it was faster/easier to say the item again until I got it right. After, I could go back and quickly remove the incorrect entries.

While I use this app several times a week, and with great utility, I feel it's not yet ready for market. I'm continueing development until then.

I play a lot of boardgames with my friends, and often find things missing from the games. Whether it's a decent way to track score, or a better mechanic for choosing who goes first. GeeGee Gamekit was created to fill those gaps.

I built the app using straight HTML, JavaScript, and CSS. This allowed me to bring the app both to the web, and Android with a single code base. It also allowed me to experiment and learn the capabilities of WebView.

I made the app responsive, by hiding delete functions (in scoreboard and dice roller) behind a swipe gesture on smaller screens. Imagery also scales to screen size (in spinner and timer) to offer the best visibility.

After finishing development on my updated device, I tested my app on older versions of Android. I found that many of the modern (but widely supported) web styles and properties weren't available in WebView until Android 5.0. Unfortunately, I had to target my app for this tiny segment.

I'm still working on legacy support

About

Contact

Credit Card Directive

Sample Code

Example

Growable Textarea Directive

Sample Code

Example

Style Sheet Factory

Sample Code

Example

Popup Directive

Sample Code

Example

Modal Directive

Sample Code

Example