Design dilemma.

Please excuse the current iteration of studio moh while I rest on the design.

Logo work for my friend Jeremy’s new wine club. He’s a bear.

The original inspiration for the logo was based on those Indian Petroglyphs where the animal has an arrow (it’s life meter) going from the mouth to the stomach:

Turns out they’re called Fetishes. Imagine my delight when I googled Bear Fetish for reference material.

The bear, unfortunately, is a humped animal. The shape is perfect for a fetish arrow, but the wine bottle didn’t work as I had imagined it.

Instead, the wine bottle becomes the innards of the bear, the lip of the bottle his subtle smile, and the remainder of the wine drooling from his mouth.

Finally, a lightbox that doesn’t require Javascript! And now it support IE5+!

The core of Multi-state CSS is the :target pseudo selector. When a user clicks a page-anchor the :target pseudo selector is activated, revealing the lightbox element.

IE5+ doesn’t support the :target pseudo selector, but it does support CSS expressions. With this in mind, we can write a carefully crafted expression that mimicks :target.

Here’s the code:

div.lb {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
text-align: center;
background: url('screen.png');
}
div.lb:target {
display: block;
}
 
/** IE doesn't support :target, so we use CSS expressions **/
div.lb {
display: expression((document.location.toString().split('#').slice(1) == this.id)?'block':'none');
}

Click here to preview the CSS LightBox

I am quite impressed with the speed of Chrome…I really want to see where this beta goes. There are some bugs that I would like to see addressed, features I’d like to see added.

I would love to see Firefox adapt these Javascript enhancements. The speed of AJAX-style calls is absolutely amazing. Practically instant.

I’m so glad that Aza Rask is thinking about the new interface elements that Google introduced. There are so many beautiful ideas that Google’s new browser has provided interface designers–I’m very interested to see what happens next.

$('stage movie button').addChild(child);

jQuery has spoiled me with easy DOM traversal. Instead, we have to do this:

stage.getChildAt(3).getChildAt(12).addChild(child);

Edit: It looks like someone has ported the $-style traversing to AS3. Finally!

What options does a non-English speaking user have when visiting an English-only website?
My server logs tell me they use Babelfish.

The problem with Babelfish (or any net-translator) is that it breaks the website. It pushes it through a Find-and-Replace dictionary of terms that completely changes your site. It also tends to ignore cookies, and really butchers your Javascript because of cross-domain issues.

What can web developers do?
What can you do if you don’t have the funds to hire an extensive localization team?

Why not use Javascript to cycle through all the elements on a page that need to be translated (menu items, headlines, form labels, etc), and push them through to a web service (like, Yahoo! Pipes) to translate it for you! Use JSONP to get the results back and replace the text of the elements dynamically as they’re loaded/translated.

$('h2, form p, form label, legend').each(function() {
var item = $(this);
var translate = encodeURI($(this).text());
$.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=NsgXF0pZ3RG4DUvBjtzu1g&_render=json&translateStr=' + translate + '&_callback=?', function(data) {
item.text(data.value.items[0].translation);
});
});

I actually made a more optimized version that took an array of items to speed up translation/load time, but Yahoo! Pipes was down when I tried to save it, so it wouldn’t let me. (I would also like to have it talk to a Flash file to dynamically save/cache translations as they’re made).

Machine translation isn’t perfect, but it’s better than making your users go to Babelfish just to figure out how to login.

(If you didn’t take a print class in high school, a widow is a word that ends on the next line like
this.

This is a print master’s nightmare and a typographical no-no.)

Their solution uses regular expressions, which is nice, but not the most efficient way to split strings, and a bit of a memory hog on older systems.

Why not use CSS property white-space: nowrap;?

$('h2').each(function() {
var h2Contents = $(this).html().split(" ");
h2Contents[h2Contents.length-2] = '<span style="white-space: nowrap; color: red;">' + h2Contents[h2Contents.length-2];
h2Contents[h2Contents.length-1] = h2Contents[h2Contents.length-1] + '</span>';
$(this).html(h2Contents.join(' '));
});

This snippit of jQuery wraps the last two words of every H2 tag with a span tag that has an inline style that prevents line-breaks. The result? No more widows without the performance hit of Regex.

Unsatisfied with the current state of LightBoxing, I developed a pure, organic, CSS-powered LightBox. Absolutely zero javascript. All of this under 1kb.

Click here to preview the CSS LightBox

The core of Multi-state CSS is the :target pseudo class. When a user clicks a page-anchor the :target pseudo class is activated, revealing the lightbox element. Here’s the code:

div.lb {
display: none;
}
div.lb:target {
display: block !important;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
background: url('screen.png');
position: fixed;
padding: 2em;
}

This is my ill-fated business card for Jaguar Design…the company that I’m leaving next week for a better-paid position in San Francisco.

Jaguar is a really small company, so my ability to wear many different hats was indispensable. One day I would be their print master, then I was their web master…so we decided my utility should be expressed on my business card.

Three check boxes for my most frequent titles, and a blank line for anything else that might come up.

It’s a Flash Embedded device for $180.

Touch screen, accelerometer, microphone, speakers, light sensor, wifi, leather panels…mmm…

Anything I make in Flash I can put on this baby as a fun new toy. Like an alarm clock that streams music from my web server, or a FAP browser that I’m pretty sure only I would use.