New Year, New Workflow

This month I’m spending time experimenting with a new web design workflow. I’ve been stuck in a comfortable Photoshop-design rut for over a decade, and I think I’m ready to branch out!

Thanks to a 10 minute interaction with Jessica Hische, I spent a while trying out InDesign and was pleasantly surprised. This week I’m giving Bohemian Coding’s Sketch, thanks to a super simple feature walkthrough they posted on Medium.

Only about a half-hour into using Sketch, and I think this might be the beginning of a beautiful relationship. It’s a big transition leaving the Adobe world, so there are a few things I still need to get used to. Followup post coming soon. 

Simon is Back!

I finally had time to mobile optimize my top rated HTML5 “Simon Says” game. I’ve been dying to see what it would be like on my iPhone or iPad with some of the more serious issues ironed out. I think it’s a keeper.

Give it a shot and let me know what you think!

image

Javascript: PHP UCwords() Equivalent

Here’s a simple and useful Javascript string prototype extension for you.

Add support in Javascript for the equivalent of PHP’s ucwords() function:

String.prototype.ucwords = function() {
	var words = this.split(' '),
		i = 0,
		l = words.length;
	for( ; i < l; i++) {
		words[i] = words[i].charAt(0).toUpperCase() + 
			   words[i].slice(1);
	}
	return(words.join(' '));
}

Now typing something like

'every word begins with an uppercase letter'.ucwords()

returns

'Every Word Begins With An Uppercase Letter'

Software’s Real Goal

Just came across this quote in an article by the Silicon Florist. It’s a fantastic summary of what I want to accomplish at the end of the day, putting it in words far more salient than I could ever hope:

Software’s real goal should not be to simply process transactions in a system where users are nothing more than data operators who click required buttons to make things happen. Rather, software should work to augment human capabilities, helping us to overcome weaknesses and emphasize our strengths.

Read this. Memorize it. Live it.

Pinterest Inspired Rectangle Packing

This was a fun layout problem I worked on for ColRD. The goal was to reverse engineer the Pinterest-style grid layout, with the added bonus of allowing items to span multiple columns. The result isn’t true rectangle packing in a strict computer-science sense (it still leaves gaping holes in the layout from time to time), but the results so far are more than usable.

You can check out my demo here, with added CSS3 transition juiciness. Try resizing your browser to watch how the layout folds in itself:

image

I submitted my first icons to The Noun Project. If you aren&#8217;t familiar with The Noun Project, I suggest you check it out. One of my favorite resources for pictograms, and I&#8217;m happy to begin giving back to the community.

I submitted my first icons to The Noun Project. If you aren’t familiar with The Noun Project, I suggest you check it out. One of my favorite resources for pictograms, and I’m happy to begin giving back to the community.

54 unique playing cards from 54 top artists

If you haven’t seen the work done on the “Creative Cards,” I suggest you head over there now. It’s shaping up to be a collaboration of epic proportions. Of particular favorite of mine is the “King Of Clubs,” by the ever capable James White. Swoon.

Responsive Web Design: Missing the Point

Great and quick read on the “Whys” and “Why Nots” of responsive web design.

FTA: “Your visitors don’t give a shit if your site is responsive. They don’t care if it’s a separate mobile site. They don’t care if it’s just a plain ol’ desktop site. They do give a shit if they can’t get done what they need to get done. They do give a shit when your site takes 20 seconds to load. They do care when interactions are awkward and broken.”

HTML5 Simon Says Game

Another one of my music & color experiments. The simple premise of “simon says” is always a winner to me. This app will play a simple melody, and you try to play it back. I get up to around 10 or 11 notes before losing track. How far can you make it?

image

I used Mudcube’s fantastic Javascript Midi API, and some simple javascript magic to make this happen. I would love to develop this into a more robust gaming experience someday.

Anyways, try my simon-says simulator, and let me know what you think!

Digital Lite-Brite (with sound!)

I’m beginning to think of fun projects to build for my new daughter. She’s still a long way of from being able to control an iPad, or especially a mouse, but I just couldn’t wait to get started.

Without further ado, I present to you v1 of my digital Lite-Brite (cleverly renamed to “Brite Lite” for trademark purposes. Please don’t sue me).

In addition to “pinning” basic colors to the board, I took the opportunity incorporate Mudcu.be’s briliant Midi.js midi bridge, for basic music-making capabilities.

Overall this was a really fun little diversion. I hope to post more music and color experiments in the future! Click the image to try it out (will take a moment to load). Only tested in firefox and chrome.

image