interaction for luddites

A quick plug for my podcast - I interview designers of all sorts of things to talk about their experiences. A great listen if you're into design, entrepreneurship, technology, or crowdsourcing platforms like kickstarter and indiegogo

2 Cups Bisquick (what, you thought I was making breakfast from scratch at 6am?)

1.5 Cup Lime or Raspberry Seltzer

2 eggs

1 generous tbsp vanilla extract

A productivity related desktop wallpaper. Inspired by the awesome stretch Checker Cab in Catch Me if you Can. I like that movie. Why not?

I've just spent several hours trying to debug a nasty issue I was having with some simple jQuery. Using SharePoint 2010's REST api and jQuery.

Setting properties using the .css() function in jQuery's API is actually pretty easy: $('#element').css('property','value');

Should do it.

Setting the background image property is a little different, but not terribly hard either - you simply need to remember to wrap your image path in the url() function, which is a CSS construct.

$('#element').css('background-image','url(my/path/value.png)');

There's quite a few articles online on this, so when my background images weren't loading, I played around with this syntax for quite some time trying to get it all to work.

Well, as it turns out, my problem was something else.

My Scenario: Using SharePoint 2010's REST Api for lists, I am pulling everything from an Image Library called "Front Page Images" hosted on my site. Then, using the .css() function, I want to set the background image of a div for each image in the library.

The big catch was that the image library's name had spaces in it! As it works out, something in the jQuery/javascript/CSS stack is pretty picky about spaces in urls. Poking around with the div's background image property in Firebug a bit showed me that replacing the spaces in the path with "%20" (the url escape character sequence for space) resulted in the image appearing!

The Solution in the end was to use JavaScript's native encodeURI() function on the image path before setting the css with jQuery. Like so:

var path=encodeURI('my/path/value.png'); $('#element').css('background-image','url(' + path + ')');

Put together another logo for my prototyping class. This wasn't necessarily required by the class, but we had a little extra manpower on the team, so I volunteered to give this a go.

Critiques are welcome!

Favor Mob: [Typeface is Corleone from DaFont]

Initial Design Concept

Framed for presentation

With color guide added for branding

A revised stab at it, with a gap between the running man logo and the text

Icon design for app launching

Well, not an Icon, I suppose. More like a logo. Really, this is more the seedling of a brand than anything else. I've got a good friend who is looking to start a business selling her beautiful hand-sewn goods on Etsy. She mentioned her intents to me recently, and caught me in one of my more creative moods. I threw together a quick logo mockup for her, which included some different ideas for logo designs, as well as colors for her brand.

Anyway, I thought some of you might enjoy seeing the whimsical creative process I went through. Here's some of my mockups.