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.

Guidelines for keeping pages clean with in ASP.Net

This is aimed at those who edit websites but are not primarily front-end developers.

Visual Studio Guidelines

• Don't Use the Design Editor
• If you are just displaying a piece of data use <asp:literal> rather than label or other constructs
• Use agnostic ids for containers. #td_books is going to look pretty stupid when it's applied to a >ul>
• Learn How to use <asp:repeater>
• If you set a label to a form element set the associatedControlId. This will keep them associated semantically and will force the label to render as <label> rather than <span>

HTML Guidelines

• Don't use Tables unless you are displaying tabular data
• If you can click on it make it a link
• If you can't click on it it's not a link

CSS Guidelines

• Terminology (brief)
• Get familiar with and use the site's default stylesheets. Check the site's default stylesheets for applicable rules before declaring your own
• Class names and ids
  • Unique rules use id, instance rules use class.
  • Should describe the data not the presentation Bad: "sideNav", "topNav", "blue", "bold", "orangeBox" (Yeah, I'm guilty of this) Good: "subNav", "help", "disabled", "itemList"
  • I've stuck to camel-case-drop-first, for my naming conventions.
  • You can set multiple classes on the same element but IE6 doesn't like attaching rules where they are combined for the selector. e.g.: .help.disabled{/*IE6 says "what?"*/}
  • Rather than applying a class to a bunch of elements that are siblings, like in a list, add an id to the parent and reference the children using descendant selectors.
• Good CSS Requires a good understanding of the semantics of HTML.
• If you are uncomfortable with CSS ask someone who is.

Start Using HTML 5 Now! (Sorta)

So you can't start using <section> and <header> yet. But that doesn't mean you can't start thinking like that.

What the HTML specs are really about is standards, and standards are just agreed upon practices. So if more people start using classes this way in preperation for html5 than we'll be halfway there.

Use HTML5 Semantics for HTML4

Look at the spec and if make sure you're using your tags like HTML5 suggests. Particularly b, i, em, strong, address, blockquote, dl, small.

HTML5 Elements

• <section><header><footer> -> <div class="section"><div class="header"><div class="footer"> Arguably use <h1><h2><h3> instead of div
• <nav> -> <div class="nav">
• <article> -> <div class="article">
• <aside> -> <div class="aside">
• <dialog> -> <dl class="dialog">
• <mark> -> <span class="mark">
• <date/><time/><datetime/> -> Use Microformats datetime-design-pattern <abbr class="datetime data-1998-03-12T08:30:00-05:00">12 March 1998 from 8:30am EST</abbr>
• <progress/> -> <span class="progress"><span class="value">0</span>/<span class="max">10</span></span>
• <meter/> -> Similar to <progress/>. can also add <span class="min"/> and <span class="optimum"/>
• <var/> -> <i class="var">n</i>.
• <samp/> -> <kbd class="samp">sample text</kbd>
• <figure><legend> -> <div class="figure"><em class="legend">

Validate against HTML5

If you want to feel a little better about this choice you can validate against HTML5.

Microformats

While this doesn't really have much to do with HTML5, it is another way you can standardize your practices. There's lots of services that look for microformats so there's no reason not to learn and use them. They'll likely only get more important as time goes on.

Further Reading and References

• http://www.w3.org/html/wg/html5/
• http://meiert.com/en/blog/20080708/you-can-use-html-5/
• http://microformats.org/
• http://html5.validator.nu/