Using ternary to choose between two methods in javascript

I found this little gem while looking at the jQuery source. I'd forgotten that you can reference properties/methods using obj["str"]. Pretty cool tip for getting your code smaller. Plus I like ternaries.

Before:

if($(this).hasClass("myClass")){
 $(this).hide();
}else{
 $(this).show();
}

After:

$(this)[$(this).hasClass("myClass")?"hide":"show"]();

This is doubly useful if you got a big chain in jQuery and don't want to break it for the if statement.

Edit(2009-3-1): As of jQuery 1.3 there's is now an optional parameter for toggle(), toggleClass(), slideToggle(), fadeToggle(). It's a bool that sets the toggle state. So now the previous statement can be written like this as well:

$(this).toggle(!$(this).hasClass("myclass"));

Markdown Ubiquity Command

I wrote this post in Markdown and converted it to html before posting using my new Markdown-to-HTML Ubiquity Command.

Much thanks to John Fraser's Showdown.js. All the hard work he'd already done I just connected it to Ubiquity.

I've very pleased that my first Ubiquity Command is so useful. I hope someone else thinks so too.

Now if only I could save the markdown rather than the html when posting. Someday I'll leave blogger...someday.

background-position-x & background-position-y

I sent the following to the w3c CSS Group:

The background-position-x and background-position-y properties have been in Internet Explorer for a long time now. However they haven't made it into the CSS spec, despite their usefulness. While you can say that the regular background-position property is suitable, without being able to specify the x and y positions separately usage can get excessively verbose when using sprites.

Take the following example:

#tabs li a{background: url(tabs_sprite.png);}

li#slide_2 a{background-position: -122px 0;}
li#slide_3 a{background-position: -244px 0;}
li#slide_4 a{background-position: -366px 0;}
li#slide_1.current a{background-position: 0 -41px;}
li#slide_2.current a{background-position: -122px -41px;}
li#slide_3.current a{background-position: -244px -41px;}
li#slide_4.current a{background-position: -366px -41px;}
li#slide_1 a:hover{background-position: 0 -82px;}

li#slide_2 a:hover{background-position: -122px -82px;}
li#slide_3 a:hover{background-position: -244px -82px;}
li#slide_4 a:hover{background-position: -366px -82px;}

Could be simplified to:

#tabs li a{background: url(tabs_sprite.png);}

li#slide_2 a{background-position-x: -122px;}
li#slide_3 a{background-position-x: -244px;}
li#slide_4 a{background-position-x: -366px;}
#tabs li.current a{background-position-y: -41px;}

#tabs li a:hover{background-position-y: -82px;}

I feel that one of the big goals for CSS3 would be to ease the use of sprites as they can improve performance of pages by a lot. Being able to load up all the UI images into a single file would decrease download time significantly and re-skinning a site would be as simple as changing a single reference and modifying a single image file.

I was actually surprised to learn it's not in the CSS3 spec as it eases spriting by quite a bit.

Browser Implementation This should be trivial since the property pretty straight-forward and two browsers already support it: IE5+ & Safari 1.2+ http://www.aptana.com/reference/html/api/CSS.field.background-position-y.html

Using target site's favicon to distinguish external links

I was thinking about how to distinguish internal from external links and I came up with this:(jQuery)

$("a[rel='external']").each(function(){
  $("<img src='http://"
    + this.hostname+"/favicon.ico' class='icon' />")
    .prependTo(this);
});

7 Deadly Sins of Website Design

1. Gluttony - Bloated Stylesheets and Markup
2. Lust - Overuse of “cool” javascript or CSS effects.
3. Envy - Copying Apple or other high-profile websites
4. Wrath - Defying standard web conventions for no practical reasons. Such as not using tables for tabular data.
5. Sloth - Making a bunch of special cases in your Design or Code rather than redesigning.
6. Greed - Selling out with deplorable advertising tactics like pop-ups, In-text Advertising, and animations.
7. Pride - Keeping a design well past its expiration or making design elements unquestionable.

The 7 Plagues of the CSS Amateur

(Draft)

1. Div-itis
2. Class-itis
3. Over-specificity
4. Redundant Properties and/or Selectors
5. CSS Frameworks/Reset Stylesheets
6. Poor accessibility
7. Poor semantics

Designing your portfolio is hard

How do you summarize your skills and talents into a website?

I am a website designer. Most my work is coming up with solutions to problems. So, Why is it so hard to come up with a solution to the portfolio problem? I want my portfolio to show my skills as a user experience engineer. Well that's kind of hard to do since there aren't many interaction elements in a portfolio. I could make a really cool photo viewer, I suppose, but that's mostly a solved problem. I don't really want to add 2.0 elements to it. And while I'd like to use a better blog platform, I have to admit that blogger is easy to keep. I could just make a theme for blogger I guess...

I was thinking of taking a look at my design process and trying to distill it down. Use graphics of paper-prototypes, whiteboard drawings, sketches, and photos. I think I'll also have a lab which will feature some of my experiments.

I need a new portfolio. I did the old one in college, its embarrassing, but it comes up pretty high on when my name is Google'd, so I need to get a fix in there.