I know this much. Lists like this really help me. I’m typically an out-of-the-loop sort of fella, so by the time I find cool stuff, it’s years later than the crowd. So, maybe, just maybe this will help you stay in the loop:

• The Importance of Icon Metaphors

  I’m already a huge fan of Louie Mantia’s work, but I found this blog article particularly interesting. Learn how it’s not only important for your icons to look good, but speak in a language your user knows.

• LG Streaming Blu-ray Player Ohhh my awesome!

  Blu-ray with no discs? Wha!?!? Unlimited Blu-ray quality movies from Netflix? Wha?!?! Hello, dream-machine.

• URL Shortening Widget & Website For all you social-medians

  URL-shortening for all you Twitter and micro-blogging addicts.

• jQuery Time Pickr

  An incredibly intuitive and clever form time picker jQuery plugin.

• CSS3 Transitions/Animations by John Resig

  A word on CSS3 Transitions/Animations from the JavaScript genius, John Resig.

• Wall Swaps Clever business schwag

  Check this site out, not only for the cool marketing schwag, but a really clever implementation of a corkboard.

• CSS Zen Garden – Under the Sea Hott CSS Zen Garden submission

  This has to be one of the most beautiful CSS Zen Garden submissions I’ve ever seen.

• Make em Proud Runner-up CSS Zen Garden submission

  If under the sea is one of the most hot CSS Zen Garden submissions, this is the runner-up

• @-moz-document

  Style different pages on your domain with @-moz-document. CSS is gonna get sweet if this works cross-browswer.

• FancyBox OSX Content Zooming

  OSX-like zooming for your website for not only images, but iFrame and video content too!

• Google Voice/Video Chat

  Google adds what we’ve all been waiting for. Just click on the new “Video & more” menu in a Gmail chat window and select “Start video chat” or “Start voice chat.”

• Pixelmator Flippin’ beautiful and vibrant!

  I noticed this site a while back and ran across it a few days ago. What a beautiful site, full of vibrance and killer icons.

• Checkout App Clean site

  Another site I’ve ran across many times. This site also has some great icons and is extremely clean and smooth. Obviously it’s an OSX application. Gorgeous.

• TapTapTap Innovative iPhone design

  I love this site. There’s something about a concept taken to it fullness – in this case, a sushi table. From the chopsticks and tuna to the wasabi and soy sauce to the cutting board, this site rocks. One page, simple, with sweet javascript transitions. Add to that the fact that they are making some of the sweetest iPhone apps out there. In the words of @ridlo, this is the swisstastic hotness.

• Interview with Jonathan Snook The Snook

  Cool interview with the man, Snook himself. Learn about how the masta does it.

• G-Speak Operating System Minority Report is real!

  Thought that OS that Tom Cruise used in Minority Report was impossible and amazing? Check it out for realz.

Nerd Glasses

I <3 Nerds. I can sense a nerd like Gandalf sensing the ring...and "Nerdification" - I'm adding that to my list of words to use once every 2 minutes.

Cappuccino

Hmmm, nerds, coffee…is there more to life? I love the scripted “Cappucino”.

MailChimp

Jon Hicks: He rocketh vectors hard. Mental Note: If Jon Hicks designs one more monkey, I’m recommending him for leading actor in the new “Gorillas in the mist”

Espresso

More coffee? Maybe I need to get on a program. I almost want to drink the foam. Wait – there it is. yes. I DO want to drink the foam.

For years I used a PC to accomplish tons of tasks from CD and DVD burning to thesis writings to programming a 3D Landscape generator. Currently, I use Mac Pro by day for web design/development and a Macbook Pro by night for web design, illustration, coding and blogging. In my previous job, I used a PC for design and coding and I managed FreeBSD (which I loved) servers for our local College.

I’ve seen many aspects of the computing world and I hate the biased reviews from all ends. It seems to me that once someone becomes a fanatic, follower, or “brand loyal”, all balance of opinion is lost. They seem to defend their turf no matter what the cost. What I want are some realists, some people that are willing to voice a balanced opinion on a feature of any hardware setup or OS feature that are truly innovative, truly helpful, no matter what brand name is slapped on it’s case. I’m looking for a few good men and women to tell me what you love about a Mac, PC or both.

Please comment below and let me know what you love about your favorite computer and why. Possibly tell me what that feature, say 2-finger scroll, etc. is worth to you (how much money would you pay extra to have that feature). Also, let me know your favorites, say Dell XPS, MacBook Pro 17 inch, Windows XP on a MacBook, whatever. Be specific.

Lately, in projects I have been using a modified CSS snippet I found out on the interwebs to automagically replace PNG images with their AlphaImageLoader equivalent in IE6. Check this out here and I’ll explain and give an example:

The CSS/Code

* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}Update: This code changed to remove the behavior at runtime based on @Thierry’s suggestion.

For you purists out there, this is extremely hacky, so you may want to skip this whole entry entirely.

Update: : CSS Conditional comments for IE are a perfect way of hiding this hacky code from the good browsers. Here is a way to bring in the CSS for only IE 6 and below:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="png_fix.css" />
<![endif]-->

Ok, there won’t be much in the way of explanation here, but let me explain what this little bad-boy does.

The Selectors

* html img,
* html .png

The selector portion of the CSS rule targets which XHTML tags/classes this rule will be applied to. At first glance, it looks like all img tags as well as all tags with a class of "png". You’ll notice the (star) html in front of both of these. Wait, there is no “anytag” preceding the html tag, so this won’t get applied! True. For all non-crappy (that is a pro term by the way) browsers, this rule won’t get applied. However, since IE6 is a pile, it thinks that there is a tag before the html tag, so it will apply this rule. Great! Now IE6 is the only browser that will use this rule.

The Rest of the Code Jargon

Honestly, the rest you really don’t want to mess with much, but it suffices to say that this expression does a few things:

• If the tag is an IMG tag, the expression checks to see if it is a .PNG image. If so, it applies a CSS AlphaImageLoader filter to the IMG tag to load the PNG file as a background image. It then points the src attribute of the image to a transparent gif so that the image isn’t overlaying it’s own background. Voila! Note: This only works well for images not resized by the browser. Also, you’ll need a transparent gif 1px by 1px image on your server.
• If the tag is not an IMG tag, then this expression takes the CSS given background image and shoves it into a background AlphaImageLoader filter. It then removes the real CSS background-image rule so that the background and the filter are not conflicting.

Pretty cool! Please note that this CSS expression is pretty generic. If you have some crazy CSS-ing to do, you might want to stick with using your own methods or apply the AlphaImageLoader filter manually.

Also, if you are a standards-compliant junkie and this brushes you wrong, remember that this is intended to help with the crud of browsers. Sometimes we have to break our own rules to do the job.

A Demo!

Let’s see a demo! See the goodness below:

My Image Tag:

My Generic Tag

My Link Tag

Update: Links will need an additional rule of cursor: pointer; to restore the cursor. I’ll have to change that in the script to do that automatically

Besides a slew (actually only about 3) of blog entries I have planned for you…here is a teaser of what is to come.

So, we either code according to the transitional spec now and change later or code in strict now and find a solution. I prefer the latter. So, at SitePoint they discussed and created a solution. Great. Basically, the rel attribute is the new standard and SitePoint created a JavaScript solution to make all links with the attribute of rel set to “external” open in an external or new window.

This short blurb only addresses modifying and using the prototype JavaScript foundation to rewrite the code. I rewrote the code and Voila! Here she be:

The Code

if (typeof $$ != "function" ) return;
$$('a[rel=external]').each(
function( lnk ){
lnk.setAttribute( "target", "_blank" );
}
);
Feel free to rip me off and take this code! P.S. I’m using Prototype 1.5.0_rc0

First, a quick preview for the over-caffeinated and impatient (try clicking on a rating):

Quite awhile back, I wrote and article entitled Creating a Star Rater using CSS. In fact, if the CSS for this article is a little confusing, you may want to visit my previous articles to get yourself acquainted. I wrote it to my best ability and I shared what I could with the growing CSS-loving community. It was pretty flippin’ cool if you ask me, but it needed more. So, out of that need was born CSS Star Rating Part Deux, a vast improvement to the first, but by no means perfection. Out of the many comments I received about the most recent version, there were still some lacking areas.

By now, people’s grasp as a whole has grown quite a bit I feel and I think that this time does not warrant a full-fledged tutorial (also, my lack of time doesn’t help either). However, there are some significant issues with my most current Star Rating tutorial and I have always wanted to take another go at it.

In my thoughts, here is what the CSS Star Rating, part Deux is missing:

• Cross-browser support: I received multiple emails and comments stating that it was pretty quirky in browsers like IE6 and even Firefox.
• Ajax & Back end code : This is a need, but I’m not gonna tackle it. Plenty of people have contributed to the creation of the ajax or back end code, including slim, jon, and an especially nice presentation and project over at masuga. Needless to say, these guys do a great job and I don’t need to replicate their work.
• Tables and other wierdness: I had tons of report that the rater didn’t work in table cells and only God knows how many other situations.
• Inline Ratings: People also wanted to place their ratings inline. The current rater didn’t allow for that at all. Also, my feeble attempts to coerce it to work were of no avail.
• Uber mini Ratings: People also wanted little mini raters. Well, guess what. Problems arose with those too :(
• Pseudo-State: I say pseudo, because using only CSS, I cannot create a rating system that will hold when you click it and when you refresh it. Back end scripts an databases are needed for that. Basically, it still would be nice when you click the 3rd star, for it to stay there for a little bit.
• Percentage-based widths: This wasn’t really a request, but It seemed if a person wanted to make a different sized rater, there was a lot of repeating of 20px. 40px, 60px….etc. There just was a lot of exact dimension redundancy.

Well, thats the list! No wonder I wasn’t really happy with the thing. I remember when I first created it, it was my baby. Now, I hate the previous version. Whatever. Ok, enough rant from me. Lets get you guys up into the nerdy stuff.

Ok, so for a refresher, here is the XHTML:

Basic Rater XHTML:

<ul class="star-rating">
<li class="current-rating" style="width:60%;">Currently 3/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>

Inline Rater XHTML:

<span class="inline-rating">
<ul class="star-rating small-star">
<li class="current-rating" style="width:30%;">Currently 1.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul></span>

Small Rater XHTML:

<ul class="star-rating small-star">
<li class="current-rating" style="width:50%">Currently 2.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>

No big shockers with the code. Basically new to the scene here is the fact that the inline rater is wrapped with a span and the small rater has an additional “small-star” class added. I’m sure you can imagine that you can call “small-star” any class you would like and adapt the CSS to your liking for the right size and image you would like.

Next, in true throw-it-in-your-face tutorial style, here is the CSS:

Basic Rater CSS

.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
background: url(star.gif) left -1000px repeat-x;
}
.star-rating{
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
}
.star-rating li{
display: inline;
}
.star-rating a,
.star-rating .current-rating{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
background-position: left bottom;
}
.star-rating a.one-star{
width:20%;
z-index:6;
}
.star-rating a.two-stars{
width:40%;
z-index:5;
}
.star-rating a.three-stars{
width:60%;
z-index:4;
}
.star-rating a.four-stars{
width:80%;
z-index:3;
}
.star-rating a.five-stars{
width:100%;
z-index:2;
}
.star-rating .current-rating{
z-index:1;
background-position: left center;
}

The real difference between this CSS and my previous Star Rating tutorials has to do with the addition of :active and :focus pseudo states to hold the rating when clicked, percent-based widths, and the elimination of the use of floats to accomplish the CSS. It is important to mention also the use of overflow:hidden to keep the rater from spilling out over its set width and height as well as the use of a set pixel height line-height. I found that Internet Explorer really had issues with the rater CSS when resizing text, so if I set it to an exact pixel height, issues were resolved.

Inline Rater CSS

.inline-rating{
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
vertical-align: middle;
}

I found that if I wrapped the Star Rater unordered list with a span with a class of “inline-rating” and used the CSS rules above, I could achieve an inline rater. My apologies for the non-standard CSS attributes, but achieving an inline-block behavior in CSS is not an easy task. Most importantly to me is that it works and works in quite a few browsers.

Smaller Rater CSS

.small-star{
width:50px;
height:10px;
}
.small-star,
.small-star a:hover,
.small-star a:active,
.small-star a:focus,
.small-star .current-rating{
background-image: url(star_small.gif);
line-height: 10px;
height: 10px;
}

I’ve tried to make adapting the rater much easier for all of you. As you can see in the CSS above, you will not have to change a ton. Just add a class to your unordered list; In this case I used “small-star.” Update the width and height to the desired values. Make sure to change your image and line-heights as well. This makes creating other variations of the rater much more simple. If you need to make a 3 star, 4 star …N star rating system, you are gonna have to get your hands a little more dirty…sorry :(.

I am much more happy with the performance and support of this version and I feel that it will help to resolve the shortcomings that the previous versions had.

While web developing can at time be mere assembly of modules, often it is developing processes and dealing with some complex logic. I am not attempting to say that we are genius C++ video game programmers, however, I think we deserve some credit. We are not lego-assembling, direction following idiots.

What are your thoughts?

This article is written partly inspired by Nathan Smith’s article from Sonspring. The idea with his article is that most browsers by default display form items with a different style than that of the document. This is because by default, form items do not inherit the CSS rules for font-weight, font-family and font-size.

So, to add to Nathan’s article, here is the CSS that I often use to consistently style form items:

input, textarea, select{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}

Making Tables Cooperate

Tables also have inheritance turned off in some browsers. You may notice that in some browsers, your tables’ text will be larger, clunkier and not so pretty. This is also due to inheritance. Many browsers give tables their own style.

I’ve seen many designers fix this issue by wrapping spans around their table data cell elements to achieve the font they need. Rest assured folks, CSS to the rescue, we can remedy the issue by making the table also inherit the font. Just as easy as form items, we can whip up the following CSS rules:

table{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}

These little tricks always save me…

I respect Apple for quite a few things. Design is one of them. I think that their site is very well layed out with a balance of images, text, video and interactivity. Some times I come across a page that I think looks great. But when I lift the hood, the insides are messed up. So, that…my friends is what pimp my apple.com is all about. I take a chunk of the site and redo it how I would want to do it.

Keep in mind that when I redo some crazy XHTML/CSS/Javascript, I am not making a statement about how my code should be put on their site. I understand that they have an audience and that their code needs to support as many browsers as possible, etc. My goal in this little excercise is to help show people what can be done with CSS, not neccessarily at this particular time. I would probably wait till more browsers were up to speed.

Ok, enough witless banter from me. Alright, because I’m an apple tool, I was checking out their webpage on the new iMacs’ graphics. I found this sweet little gem of a rollover image that showed all three models, like so:

Apple’s image thingy

And I like it. First thing, I turn off Javascript. It doesn’t work. Typical. So, quickly now I view source and get the code. Here is the code:

Apple’s XHTML

<dl id="features1">
<dt id="t1" class="hi">17-inch</dt>
<dd id="d1" class="hi"><img src="http://images.apple.com/imac/images/graphicscompareimac17.jpg" alt="17-inch iMac" width="290" height="270" border="0"></dd>
<dt id="t2">20-inch</dt>
<dd id="d2"><img src="http://images.apple.com/imac/images/graphicscompareimac20.jpg" alt="20-inch iMac" width="290" height="270" border="0"></dd>
<dt id="t3">24-inch</dt>
<dd id="d3"><img src="http://images.apple.com/imac/images/graphicscompareimac24.jpg" alt="24-inch iMac" width="290" height="270" border="0"></dd>
</dl>

Ok, honestly my first thought. Holy crap they used a definition list. That’s great! Semantic markup! Way to go apple! But, I’m not writing this to praise apple. I’m writing to use apple like they’ve used me. Quickly then I re-markup their markup to be more appealing and have much more betterness. Check it here:

My XHTML

<dl id="features-imac">
<div title="17 inch imac" class="show">
<dt>17-inch</dt>
<dd>
<img src="http://images.apple.com/imac/images/graphicscompareimac17.jpg" alt="17-inch iMac" width="290" height="270" />
</dd>
</div>
<div title="20 inch imac">
<dt>20-inch</dt>
<dd>
<img src="http://images.apple.com/imac/images/graphicscompareimac20.jpg" alt="20-inch iMac" width="290" height="270" />
</dd>
</div>
<div title="24 inch imac">
<dt>24-inch</dt>
<dd>
<img src="http://images.apple.com/imac/images/graphicscompareimac24.jpg" alt="24-inch iMac" width="290" height="270" />
</dd>
</div>
</dl>

Since this is a short article, let me give you the highlights of what I changed:

My Changes

• I indented the code in a way that was cooler aka readable
• I removed the superfluous ids on every tag
• I put some title attributes on the items
• I changed the main DL id to be more appropriate
• I added div’s you see to give structure to each definition list term and it’s definition. In a perfect world, I would use a DI, used exactly for that purpose, but some company’s browsers suck and don’t adhere to standards much. So, I decided to go with the oh-so-popular DIV.
• I added a class of “show” to the grouping of terms and definitions that needed focus from the start…the initial image to show.

After the code changes, I went all out writing some CSS to accomplish the behaviors (without Javascript). It worked like a gem, however, in one of the worst browsers ever, it failed…huh I wonder why? Well, like you guessed, Internet Explorer won’t support the :hover pseudo state on anything but the anchor tag. Now I could add some anchors and make it work or add links and link them to their specific model and that would fix that…maybe.

But I didn’t want to do that because this was more of an excercise for good browsers just to see what our future might hold. But alas, since I had to make it work in Internet Explorer 6, I wrote a little more CSS to do the trick. So, instead of using the CSS javascript :hover everything , I just wanted to use my own methods (which im sure others have done) and here’s the code:

The Simple CSS Hover Style for IE6

<!--[if IE 6]>
<style type="text/css" media="screen">
body *{
unicode-bidi: expression(
this.onmouseover = function(){this.className += ' hover';},
this.onmouseout = function(){this.className = this.className.replace('hover','');}
);
}
</style>
<![endif]-->

Basically, this behavior (only in IE6) applies a onmouseover and onmouseout function to all elements. All the function does is add a class of hover and remove a class of hover to any element when it is mouseover’d and mouseouted. So, like a good little CSS jockey, we know that now we can add additional rules to target element:hover for good browsers and element.hover for evil browsers. And that’s that!

So here’s the CSS (you’ll have to figure this out yourself)

<style type="text/css" media="screen">
dl#features-imac{
width:290px;
margin:10px;
position:relative;
float:left;
}
dl#features-imac div,
dl#features-imac dt,
dl#features-imac dd{
padding:0px;
margin:0px;
display:block;
}
dl#features-imac dd{
width:290px;
height:270px;
border-bottom:2px solid #ccc;
position:absolute;
left:0px;
top:0px;
float:left;
z-index:1;
}
dl#features-imac dt{
float:left;
position:relative;
width:32%;
height:3em;
line-height:3em;
z-index:3;
text-align:center;
padding-top:270px;
cursor:default;
background:url(up_arrow.gif) center 267px no-repeat;
color:#ccc;
}
html>body dl#features-imac dt{
background:url(up_arrow.gif) center 263px no-repeat;
}
dl#features-imac dt:hover, dl#features-imac dt.hover{
background:url(up_arrow_over.gif) center 267px no-repeat;
color:#333;
}
dl#features-imac div:hover dd, dl#features-imac div.hover dd{
z-index:2;
border-bottom:2px solid #333;
}
html>body dl#features-imac dt:hover{
background:url(up_arrow_over.gif) center 263px no-repeat;
color:#333;
}
dl#features-imac div.show dd{
z-index:2;
}
</style>


The final product

I have the complete file for view here. Take it, use it, enjoy it…but not too much. Let me know if you can make it better. Go ahead…view source…you know you want to.