No Mod Required

I used to use AddThis for social bookmarking here on the blog. And by “used to” I mean up until two days ago :-). Over the past couple of days I’ve been working on setting up my own version to use here and throughout the rest of the site. I launched it yesterday.

If you’re on the single version of this post (as opposed to a category index or the blog home page) you should see it in all its simple glory below in the post info box.

Why bother since AddThis does what it’s supposed to do and is dead easy to implement? Well, while the number isn’t really important (only the underlying performance issues it uncovers really matter) it was pointed out recently that I (used to) get a 61 YSlow score for my blog pages (thanks Ben!) One of the contributing factors to that was the use of the AddThis widget which added another domain lookup and several extra HTTP requests for uncompressed files with no expires headers. I looked at all that overhead and inefficiency, looked at the functional complexity (or lack thereof) of the piece and decided I would just roll my own. Beyond the fact that it was just a fun little thing to do, doing my own saved 16 HTTP requests (including 13 Images,) removed a domain lookup and required a total of 0 (zero) extra files to implement. How? I obviously used my existing JS and CSS files and (most importantly) added the icons to my sprite. Those already come along with the page so it’s just an extra 1-2K of image and script on top of my existing site infrastructure.

I didn’t do anything particularly fancy (there’s always time for that later :)), but if you’re curious here’s the basics of the implementation.

Here’s the WordPress code, where we use the_permalink() and the_title() to build out the links:

<div class="shareThis">
Share This :  <a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" class="delicious" title="save to delicious">Del.icio.us</a>
<a href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" class="digg-this"  title="digg this!"> Digg</a> 
<a href="http://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" class="reddit"  title="submit to reddit">Reddit</a> 
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink();  ?>&title=<?php the_title(); ?>" class="stumble"  title="stumble this!">Stumble It</a> 
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();  ?>&t=<?php the_title(); ?>" class="facebook"  title="share on facebook">Facebook</a>
</div>

I chose those five because they were (a) amongst the most popular choices I saw in my AddThis stats and (b), with the exception of Facebook, they have all produced serious traffic spikes here. Facebook has never actually driven a lot of traffic for me, but it was a regular option in AddThis so I included it here.

As for the markup- as you can see, it’s pretty stripped down. All I use are some anchors and a div to hold them. I then use a couple of common (for me) CSS techniques to get that stripped down markup styled up correctly. Here’s the CSS:

.shareThis {
font-size:85%;
font-weight:bold;
color:#666;
background: url(http://media.drunkenfist.com/img/sprite2.png) -315px 0 no-repeat;
/*set position to relative in order to ‘catch’ child nodes at this level*/
position:relative;
padding:2px;
border:1px solid #ccc;
width:175px;
height:15px;
margin:auto;
margin-top:5px;
}
#moviespg  .shareThis,
#grafpg .shareThis,
#comicspg .shareThis,
#artpg  .shareThis{
/*there’s a slightly different context for this widget on the rest of the site*/
font-size:75%;
}
.shareThis a {
/*I love absolutely positioned anchors with display:block*/
/*I use them all the time*/
position:absolute;
width:15px;
height:15px;
/*hide the text*/
/*I might switch this to opacity if the outlines bug me*/
text-indent:-9999px;
top: 2px;
}
/*position the individual anchors on top of their icons*/
/*this is like a new style ‘image map’*/
.shareThis a.digg-this {
left:92px;
}
.shareThis a.delicious {
left:110px;
}
.shareThis a.facebook {
left:165px;
}
.shareThis a.reddit {
left:129px;
}
.shareThis a.stumble {
left:147px;
}
.shareThis a:hover {
/*hide the default hover since it obscures the icon*/
background:transparent url() !important;
/*safari didn’t like the above, so I threw a little opacity in there*/
opacity:0;
}

I’ll break out two of my favorite techniques in play.

Position:relative with no offset and absolutely positioned child nodes

The key with this technique lies in the behavior of absolutely positioned elements and the way that relatively positioned elements behave when there are no position coordinates (top, left, right, bottom) supplied.

Absolutely positioned elements search for the first parent element with a position other than static to begin to calculate it’s positining. In the above example that’s the containing div. The thing is, the containing div, while set to position:relative, has no offset coordinates supplied to it, which means it behaves exactly as if it were the default, static positioning. In other words it’s still firmly in the normal flow of the document.

In the situation above the benefits of that might not be all that evident, but imagine this layout:

With the middle content div set to position:relative and the two sidebars set to position: absolute inside of it, that layout can be achieved with a minimum of fuss. The header, content and footer DIVs are just in the normal flow. They will expand and contract as needed and won’t need any special handling to grow as long as might be needed by the site content or any conditional messaging. The content DIV is set with enough internal padding set to accommodate the sidebars and the sidebars, as long as they don’t need to control the height of the document, can be placed with pixel perfection wherever they need to go. No need to mess with floated content or anything fussy like that. Just two nice and stable absolutely positioned elements mixed with a normal block item document flow that would have worked in 1999. That layout will produce very few surprises.

Of course, if the layout requires two or more of the columns to be able to control the height then this technique is invalid, but if it’s as simple as the one above, go nuts.

Another place I use that technique is with headers or mastheads. Headers often have three elements- a logo, a main menu and a utility menu. With that layout I will use a relatively positioned div for the container and then place three absolutely positioned items inside for the three elements: an image replaced header (h1, h2) for the logo, and two unordered lists for the two menus. The markup might look something like this:

<div id="header">
   <h1><a href="/" title="return to the home page">Our Company Name</a></h1>
   <ul id="main-menu">
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
   </ul>
   <ul id="utility-menu">
      <li>menu item</li>
      <li>menu item</li>
     <li>menu item</li>
   </ul>
</div> 

And would render something like this:

So straightforward and it allows me to move things around with perfect precision.

Modern “Image Maps”

This ties in with the above but focuses entirely on using anchors as absolutely positioned block level elements to create “hot spots” in much the same manner old school image maps do. In the High Performance Web Sites book, Steve Souders talks about talk about using image maps to reduce HTTP Requests. While from a performance perspective that’s a valid approach, image maps as a whole are out of favor and are rarely (if ever) a technique I’ll look to use.

The following is a somewhat more accessible, SEO friendly method of achieving the same result.

A note about the example above, before I point out one that’s a little more along the lines of my normal usage of this technique.

While I definitely like to use unordered lists as a container for menus and the like, there are plenty of situations where there’s really no need for a containing framework. While in this example you could make an argument that I should have a list around the links (it’s a list of links after all,) my first concern with this component was to create something really stripped down code-wise. I was trying to improve performance after all, so I went with the least code possible, sacrificing some potential semantic meaning in the process.

If I weren’t flexible about these things I’d have to quit my day job and go work for a standards body

Anyway, the following image and code sample will outline a really useful implementation of this technique.

Here’s some HTML:

<div class="messaging">
     <h2>The Toughest Challenges, The Most Interesting Ideas</h2>
     <a href="/register-now">register now</a>
</div>

Here’s some CSS:

#copy .messaging h2 {
text-indent: -9999px;
height: 211px;
width: 778px;
position:relative;
}

#copy .messaging a {
position: absolute;
display:block;
text-indent:-9999px;
left: 200px;
top:150px;
height:28px;
width:140px;
}

And this is what it all looks like:

As you can see with the red highlight, the absolutely positioned anchor perfectly fits on top of the hot spot, just like an old school image map; except in this case the meaning of the link is clearer in a text browser or to a search engine spider than it would be just using an image maps alt attribute.

Cool stuff.

To me at least…

I might actually turn this into a WordPress plugin, by the way. I’m like 25% of the way there already. Not that we actually need another one of these things of course. I’d do it just for the pure enjoyment of creating a nice solid piece of code that can be used around the internet. If I do, I’ll document the whole process here