We don't know which browser, which version of that browser, or what kind of computer a user visiting our website is using. That's why we have web standards we follow which give us the ability to code one website that can work everywhere. We use normalized templates (e.g. HTML5 Boilerplate) to give our projects a consistent and healthy starting point. We use JavaScript libraries (e.g. jQuery) to make things easier for us an alleviate cross browser issues.
We don't know the capabilities of the browser the user is visiting our website with. So we feature test and polyfill where we can. That way we can build the fantastic experience we want to and deliver perfectly acceptable experiences to all browsers.
We don't know what the size of browser window is of a user viewing our website. So we should design our sites to be fluid and utilize media queries to optimize the site for any screen size (responsive web design).
We don't know what the internet connection speed is of a user viewing our website. So we try and load as few resources as possible. We make those resources as small and compressed as we can. We serve those resources through servers optimized just for that and geographically closer to our users (e.g. NetDNA). That way our website loads as fast as possible.
We don't know the mindset of a user viewing our website. So we conduct user research (e.g. Silverback) and try to find out. We try and accommodate different ones. We use our experience (and sometimes gut instinct as users ourselves) to make the right decisions. We design for humans.
We don't know the physical location of a user viewing our website. So if our site needs it or could be better by knowing it, we can ask for it. Either literally or through HTML5.
We don't know what languages a visitor to our site understands. So if we have the resources to do it, we use translation services (e.g. Smartling) to offer our website in a user's native tongue. If we are trying to be as professional as we can, we also probably try and be sensitive to culture differences worldwide.
We don't know how "computer savvy" a user is visiting our site. So we try and make it very obvious how to use our site and not make too many assumptions. We use common design patterns to accommodate "affordances". We sweat the details in our design, copy, and overall "user experience".
We don't know what disabilities a user visiting our site might have. So we try and craft our sites with accessibility in mind.
 
We know very little about a visitor to our website. We actually know less and less every day, as the demographics of internet users widens (younger and older, no longer a nerd thing, more areas geographically, etc.) So as we march forward toward the next 6 billion people using the web, let's embrace the unknown by accommodating for it.
What We Don’t Know is a post from CSS-Tricks

Since v9 of this site, I've been using SublimeVideo for the video player in the screencasts area. SublimeVideo is similar to projects like VideoJS and MediaElement.js in that it's a polyfill for HTML5 video. That is, you use regular ol' clean HTML5 <video> markup and it takes care of making sure that video can be seen on as many browser/platform/versions as possible.
How does SublimeVideo differ from those other projects?
They host the resources, not you. That means some bandwidth savings, but more importantly, means that you're always getting the latest and greatest version which is important in this fast-changing browser landscape.It's the nicest design of all of them. Subjective, I suppose.It's not free. While the others are.I quite like the idea of paying for services that make our lives as front end developers easier, so I hopped on board (I pay for the service on the Star plan).
Do note that SublimeVideo is for video that you host yourself somewhere. They don't host video for you. If you want hosted video and a player that similarly works everywhere without worrying about bandwidth, you should probably just use YouTube, Vimeo or Blip.tv.
Using SublimeVideo regularly, you simply load their JavaScript in the <head>:
<script src="http://cdn.sublimevideo.net/js/YOURTOKEN.js"></script>Then use HTML5 video like this:
<video class="sublime" width="640" height="360" poster="video-poster.jpg" preload="none">
<source src="http://yoursite.com/video.mp4" />
<source src="http://yoursite.com/video.webm" />
</video>This works great, but the resulting video player is of a static width and height. In a fluid width / responsive site like I have here media of fixed dimensions don't play well. I'd much rather the video shrink and grow with the column that it's inside of as needed.
I've tackled the idea of fluid width video a number of times around here. Ultimately I helped with FitVids.js, a jQuery plugin for easily making videos from all the most popular sources work in fluid width designs. Unfortunately FitVids.js doesn't work with SublimeVideo. For lack of a better explanation, they are just different beasts and making them work together would be more trouble than it's worth.
Good news though, after a bit of pleading (I'm sure they had lots of requests for this) they released a new bit of API specifically for resizing. So making the video fluid width is as easy as watching for the window.resize event, and when that fires, calculate the new width and height and use the sublimevideo.resize function to change it.
This is the full code I use. There is a few extra bonus bits in there explained via code comments. Note this uses a bit of jQuery. Also note the "sublime" class on the <video> element is removed.
<video id="the-video" width="570" height="320" poster="poster.jpg" controls preload="none">
...
</video>

<script>
(function() {

// Prevents some flickering
$('#the-video').css("visibility", "hidden");

// Fluid column video is inside of
var fluidParent = $(".main-column"),
newWidth, newHeight;

// Gets called when video needs resizing
function resizeVideo() {
newWidth = fluidParent.width();
// 1.78125 == Aspect Ratio of my videos
sublimevideo.resize('the-video', newWidth, newWidth/1.78125);
};

$(window).resize(function() {
resizeVideo();
});

// When the resources are ready,
// load up the video and size it correctly
sublimevideo.ready(function() {
sublimevideo.prepare('the-video');
resizeVideo();
});

}());
</script>If you'd like to see it in action you can see it on single video pages.
Making SublimeVideo Fluid Width is a post from CSS-Tricks

If there's one thing I love most about what I do it's building out the challenges that a designer throws my way. There's almost always a way to reproduce a design in code, and I love figuring out how to get as close to the original design as possible with CSS.
Recently, our creative director here at Sparkbox, Drew, gave me a design to build out for an e-commerce site. There was an element in the site that was sort of a starburst shape that had the price of the product inside. Being that it included a dynamic price, the thing had to grow and adjust appropriately, so I set out to build this thing with CSS.
Dissecting the Design
So here we go. We've got a rather pointy circle with the product price inside. (Also notice the subtle inner border Drew's got going on here. We'll talk about that a little later.) I took this design and made this:

I know it's not exactly the same - it has a few less "points" - which I technically could have achieved with a little more markup, but I decided a little less markup and fewer points was worth it. Let's walk through what's going on here.
Visualizing What’s Going on HereThink of this starburst as a series of rotated boxes. The way I wrapped my head around what's going on here is with a few post-its. Check it:

So I've got three elements here, each rotated 30 degrees. (In the finished design I'll actually have six elements, you'll see...)
The Markup<div class="price-container">
<div class="price">
<span class="label">Buy</span>
<span class="number">$15.00</span>
<span class="label">Now</span>
</div>
</div>I have <div class="price-container"> that, you guessed it, contains the price starburst. I'll use this for the background of the starburst. The <div class="price"> is the container for the text inside (the price info.) That's it for the markup. From here, I'll be styling pseudo classes to create the multiple points. Also, I mentioned earlier that there were a few less points in the CSS version of this starburst. This markup doesn't really have anything unnecessary in it.
Stylin’ It UpNow on to the fun part. Let me overview what I'm going to do, then I'll show you the styles needed to achieve it. I'm going to style .price-container, .price, and the :before and :after pseudo elements for each. Essentially, I've got six elements to work with. I created this background image to apply to each of the elements and I will rotate 15 degrees each:

If you look back at the post its picture above, notice how I drew on the inner border with pencil. Disassembling the post its model gave me one piece that looks like this.
So here are the styles of each element (the comments should help you understand what's going on here. I also have some notes below.)
.price-container,
.price-container:before,
.price-container:after,
.price-container .price,
.price-container .price:before,
.price-container .price:after {
height: 8.5em;
width: 8.5em;
background: #760B1F url(price-bg.png) top left no-repeat;
background-size: 8.5em;
}

.price-container:before,
.price-container:after,
.price-container .price:before,
.price-container .price:after {
content: "";
position: absolute;
}

.price-container {
margin: 100px auto; /* Centering for demo */
position: relative; /* Context */
top: 2.5em;
left: 2.5em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.price-container:before {
top: 0;
left: 0;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}

.price-container:after {
top: 0;
left: 0;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}

.price-container .price {
padding: .5em 0em;
height: 7.5em; /* height minus padding */
position: absolute;
bottom: 0;
right: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1; /* important so the text shows up */
}

.price-container .price:before {
top: 0;
left: 0;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

.price-container .price:after {
top: 0;
left: 0;
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}A few things I'll point out about the styles:
Notice the order of the rotation angles: This order is important because there is going to be text inside the inner-most element. Therefore, the last element (the one the text going in, in this case .price) has to be straight. Notice that .price-container is rotated -45 degrees and .price is rotated 45 degrees - back to 0.The height and width: The height and width has to be set since we are dealing with background images here. I've set it in ems to adjust appropriately when the text size increases.There's a padding top and bottom on .price-container .price. That's why the height is a little different than all the others.Everything is positioned absolutely inside the first container. .price-container has left: 2.5em and top: 2.5em just to move the whole thing a little. When everything is rotated, the corners go of the page and out of the container a little.z-index: There's a z-index defined for .price-container .price. This is so the price information inside this div is visible.Now all that's left is styling the text.
.price-container .price span {
position: relative;
z-index: 100;
display: block;
text-align: center;
color: #FE3D5C;
font: 1.8em/1.4em Sans-Serif;
text-transform: uppercase;
}

.price-container .price span.number {
font-weight: bold;
font-size: 2.5em;
line-height: .9em;
color: #fff;
}Doing It Image-FreeNow, I have some extra stuff in here because the design called for this very subtle inner border. If you don't like or need the inner border, just remove the bit about background image and background size and design will hold up fine.
Browser SupportThis works as-is in IE 9+, Firefox 4.0+, Safari 4.1+ and Chrome 3.0+. IE 8 and below do not support background-size, and Chrome 1.0, Firefox 3.6 and Safari 3.0 will require some vendor prefixes. IE8 does support pseudo elements, however doesn’t support transform.
The fallback would be a colored square. Very likely not a huge problem.
There You Have ItIt's a price star thing. Flexible enough to grow when you increase your font size. Made with some CSS.
View Demo   Download Files
This was a guest post by Ryan Buttrey of Sparkbox. Thanks for sharing your process Ryan! I too get a kick out of figuring out clever and efficient ways to solve bits of design.Building a Starburst with CSS is a post from CSS-Tricks

I find it's a common desire with "tab" design patterns that there is a way to link to specific tabs. As in, you could give someone a URL and that URL would lead them to that page with the specific desired tab active and displaying the correct content.

If each tab is a completely different URL, it's easy. In the HTML that is served, the appropriate class name is applied to the tab to make it look active, and the appropriate content below is served.

Wufoo uses a tab design pattern inside the app. Each tab is a entirely different page and URL.

If these tabs are "same page" tabs that hide/show different panels of content instantly (or via Ajax), it's a bit harder. A common (and I'd argue semantic) approach to this has been with hash links, e.g.:

http://example.com/#tab-three

Tabs like these are likely "same page" tabs that don't have unique URL's to themselves

With CSS3's :target pseudo class selector, there are ways to make functional tabbed areas with CSS alone (no JavaScript). However, if pure CSS tabs are the goal, this is better.

As much as I've experimented with CSS techniques, I think functional tabbed areas are best accommodated by JavaScript. This is functionality territory, and if we adhere to the traditional model of separation of concerns, it should be handled by JavaScript.

Hash links have a few other problems:

When the page loads with a hash link or the hash links changes, the browser will scroll down so that the element with the ID of that hash is at the top of the page. There is a good chance this is not desirable. The latter is easy to fight with preventDefault(). The former is nearly impossible to deal with cleanly.
Changing the hash tag of a page adds an entry to the browser history, so pressing the back button will go back through previous hashes. There is also a good chance this is not desirable.

Let's solve both problems while accommodating the desire to have a way to link to a specific tab. This is what we are going to do:

Not use hash links but use URL parameters instead (no jump downs).
Use the ultra-hip history.replaceState() so we can change the URL without affecting the back button.

Our URL's will be like:

http://example.com/?tab=tab-three
Rather than re-write JavaScript based tabs from scratch, let's use my existing Organic Tabs demo. We need to adjust very little of the plugin to make this work. We'll add a param parameter so people can choose whatever they want there.

$.organicTabs.defaultOptions = {
"speed": 300,
"param": "tab"
};
Then in the part with all the tab-changing functionality, we'll add this one line:

// Change window location to add URL params
if (window.history && history.pushState) {
// NOTE: doesn't take into account existing params
history.replaceState("", "", "?" + base.options.param + "=" + listID);
}
The tricky part is that we need to pull in the URL parameter when the page loads and do JavaScript stuff with it. That means we'll need to use a server-side language, and intermingle some of it with our JavaScript. Here I'll use PHP:

Update: We can access the query string entirely through JavaScript, and parse out the parts easily. So instead of the PHP that used to be here (not ideal for many reasons) we'll do this instead:

var queryString = {};
window.location.href.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
function($0, $1, $2, $3) { queryString[$1] = $3; }
);

if (queryString[base.options.param]) {

var tab = $("a[href='#" + queryString[base.options.param] + "']");

tab
.closest(".nav")
.find("a")
.removeClass("current")
.end()
.next(".list-wrap")
.find("ul")
.hide();
tab.addClass("current");
$("#" + queryString[base.options.param]).show();

};
This code grabs that URL param and make sure the current tab is highlighted and the correct content is shown.

Functional demo:

View Demo   Download Files

Video:

Incomplete-ish
Browser support for history.replaceState (and all the history management stuff) is far from ubiquitous. I'm using a basic feature test here, but not implementing any fallback. The important part, the tab functionality, still works fine. You might wanna do more.

I'm also not taking into account existing URL parameters. If your page is already using them and you also want to use this (e.g. ?foo=bar&tab=tab-one) this would get a bit more complicated. You'd probably snag the entire URL param string and pass it into the plugin. Then parse it apart and re-insert the existing params when you use replaceState().

Better Linkable Tabs is a post from CSS-Tricks

Christian Heilmann had an interesting CSS predicament the other day. The idea was to make header tags rotated 90-degrees and align along the left of a blog of content rather than at the top.
So, like this. Easy, right?Should be pretty easy right? Just absolutely position the header in the upper left (so it doesn't take up any vertical space) and then rotate it from it's upper left corner 90 degrees with CSS transforms. Yeah... that's cool, but here's the problem: a lot more browsers support absolute positioning than support transforms. That's problematic, because in the case of those browsers, the headers will now be sitting on and obfuscating content.
Bad! How I Would Do It: Feature DetectionI think the best way to handle this is to do feature detection with Modernizr. Make a quick custom build that tests for transforms, load it up at the top of the page, and then only apply the absolute positioning and transforms (and other tweaks) when you are in a browser that can deal with it.
And so...The complete CSS:
aside {
position: relative;
}

aside h3 {
background: #369;
color: #fff;
padding: 5px 10px;
margin: 0 0 10px 0;
}

/* Class name via Modernizr */
.csstransforms aside {
border-left: 34px solid #369;

/* Make a little room */
padding-left: 10px;
}
.csstransforms aside h3 {

/* Abs positioning makes it not take up vert space */
position: absolute;
top: 0;
left: 0;

/* Border is the new background */
background: none;

/* Rotate from top left corner (not default) */
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}View Demo   Download Files
The weakness left in this technique is that if the header is longer than the space available, it doesn't push down the aside's height to compensate. There really just isn't a way to do that with just CSS (you can't set the height of something to match the width of something, basically). For the record, you could use JavaScript to do it.
Can we do it without Modernizr?Christian et al. didn't want to use Modernizr (for reasons I can't possibly comprehend ;). Lennart Schoors, in the comments of his post, came up with this technique, where the paragraph elements themselves were also transformed (moved). By default, there is a bunch of empty space at the top of the aside, and the transform moves them back up to fill that space. Without transforms, the gap is still there, making room for the absolutely positioned header. Pretty smart!
The one shortcoming I can see is that it targets paragraph elements specifically. In a real environment you might not be able to count on that, so you are either writing a selector to cover all possible elements to move, or using an non-semantic wrapper. Also, this is subject to the same weakness as I described about header length above.
Improvements welcome!
Sideways Headers is a post from CSS-Tricks

Just for kicks I wanted to see if I could make a row of images animate across a page and repeat indefinitely. Turns out it's really not that hard. The way I did it was to make one big long graphic where the first part and the last part are visually identical.

Then you animate the left position of that image until it appears it's completed one full cycle (but really is just moved far enough to look identical), then it quickly warps back to the original position and starts over.
We just need an outer wrapper to be relative positioned and hide the overflow, then an inside container in which to animate (which is the image).
<div class="slideshow">
<div class="images">
A slideshow of images in here (whatever you want to say for screen readers)
</div>
</div>.slideshow {
position: relative;
overflow: hidden;
}
.images {
background: url(slideshow.jpg);
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: slideshow 10s linear infinite;
-moz-animation: slideshow 10s linear infinite;
}
@-webkit-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
@moz-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}View Demo
Let's squeeze some better performance out of this thing, cowboy.The above code should work fine, but it might be a little choppy depending on the browser/platform/version/resources available. We can get better performance (at least in WebKit / Mobile WebKit) by telling the browser we are going to be using 3D transforms (even though we aren't) and then using translateX instead of left.
NOTE: This trick specifically increases the performance (that you normally wouldn't get) out of 2D transforms and opacity changes. If we weren't changing over to using translateX, we wouldn't see any benefit.
.images {
...

/* Hey browser, use your GPU */
-webkit-transform: translate3d(0, 0, 0);
}

@-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-200%);
}
}
@-moz-keyframes moveSlideshow {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-200%);
}
}I'm not a huge fan of the fact that we essentially need to trick the browser into better performance, but as CSS folks I guess we're used to that kind of thing. I think the original way we wrote it is fine and the browser should recognize when it can be more performant and do that.
Adding FanciesWith my slideshow, I wanted to do two additional cool effects beyond just scrolling the images by. When you rolled over the slideshow it would:
Speed upChange from black & white to colorTo speed it up, you might just think, we'll just reduce the duration on hover! And thus:
.slideshow:hover .images {
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
} But this is going to be jerky! By changing the animation duration you create a new timeline of what properties should be at what values and when. It figures out those new values and jumps to where they should be immediately. It does not just "speed up" from it's exact current position. I'm afraid I don't know a really solid way around this.
Instead, we'll just adjust the concept of "speeding up". If we set two slideshows on top of each other, each one running at different speeds, then hide/show the top-most faster-running on on hover, we can get a pretty decent "speeding up" effect. We'll use transitions to make the transition smoother.
<div class="slideshow">
<div class="images-1">
A slideshow of images in here (whatever you want to say for screen readers)
</div>
<div class="images-2">
</div>
</div>.slideshow > div {
...

-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
-webkit-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;

/* Slow */
-webkit-animation: moveSlideshow 60s linear infinite;
-moz-animation: moveSlideshow 60s linear infinite;

...
}

.images-1 {
/* Fast */
-webkit-animation: moveSlideshow 20s linear infinite;
-moz-animation: moveSlideshow 20s linear infinite;
}

.slideshow:hover .images-2 {
opacity: 0;
}For the black and white thing, what we'll just make the top-most slideshow black and white and the lower/faster slideshow color. To save an HTTP Request, we'll make both of them the same image, and just shift the background position.
Just one big image .images-1 {
/* Sprite */
background-position: 0 200px;

...
}So that should do it!
View Demo   Download Files
OriginThis idea came the Wufoo Hearts Tech Events page we recently did, where I wanted to show off images from several of the events we've been at recently. And, admittedly, I just wanted to play with this idea.
Infinite All-CSS Scrolling Slideshow is a post from CSS-Tricks

I quite enjoyed this poll because the results were so neck and neck. It was only in the last week or so that a clear winner has emerged.

Like all polls ever run in the history of this website, there is lots of things to consider and the poll was probably too simple for it's own good. Nonetheless, I consider just getting people thinking about this issue a success. At the very surface: 20k is smaller but the CDN is faster and more likely to be cached.
There is a bunch more too it though...
The CDN is probably a different domain, so even if a user does need to load the file it doesn't count against the maximum concurrent connections for a single domain.Loading the JS is one thing, but executing the JS is another. Executing 200k of JS will always be slower than 20k.Da_n reminds us they aren't mutually exclusive. You could attempt to load from the CDN and fall back to local.Evert reminds us that some IP address/ranges can be blocked in some countries, so the more different ones we pull from the higher the chances that some resources will be block and lead to problems loading the page.In the case of the Google CDN (the most popular for this sort of thing), the only way the caching is in place is if you link to a very specific version of a library, like 1.8.14. If you link any less specifically (e.g. 1.8 will give you the latest version that is 1.8.something) it's not cached (or not cached very long).CDN saves bandwidth, and those costs can be significant (e.g. The 100k image sprite on the current design of this site used 50+ GB of bandwidth in the last 30 days. That's one file.).Locally, you have the option to merge the 20k into other JS files and load a single resource instead of many.Paul Irish says we should A/B test for speed and pick the fastest.Mobile is a very serious consideration. Mobile browsers have far less room for cache and (sometimes) have less bandwidth.Kent Davidson reminds us that if we are super worried about privacy, the CDN may be out, as it gives referrer strings to the CDN for each person requesting the file.Hosting that small custom file on your own CDN has big advantages. It may not have any chance of being cached coming in, but has the other advantages.There was another good point brought up in the comments by Jayphen:
Posts like this make me worry about the kind of misinformation spread by these kinds of polls…
If the majority of other developers do the wrong thing, that doesn’t make it right.
Just because "local" won this poll, doesn't make it the right answer all the time (see considerations above).
New poll soonish. If you have an idea for a poll on CSS-Tricks, leave it as a comment below. I'd like to refill the reserves of poll ideas.

Advertise here with BSA
Poll Results: Large file on major CDN or small file local is a post from CSS-Tricks

localStorage is a new JavaScript API in HTML5 that allows us to save data in key/value pairs in a user's browser. It's a little bit like cookies except:
Cookies expire and get cleared a lot, localStorage is forever (until explicitly cleared).localStorage isn't sent along in HTTP Requests, you have to ask for it.You can store way more data in localStorage than you can in cookies.The API for localStorage is wicked simple and easy.If you need to get more up to speed, I did a video screencast on localStorage recently. This is how it works:
/* Set some data */
localStorage.setItem("key", "value");

/* Get some data */
localStorage.getItem("key");No libraries needed, that's just JavaScript. If you want you can use Modernizr to test for it with Modernizr.localstorage first.
OK great that's all the geeky bits, let's see some places on the web that could be, should be, or are using it. Hopefully this will spark some ideas for your own websites.
IS using localStorage Snapbird (a powerful Twitter search tool) remembers the last person's stream you searched. It figures, chances are, the next time you come back you'll be searching that same person and this will save you a second. If not, you can just delete it and replace it. I find it useful as I'm typically trying to find old tweets of my own.
The Webbie Madness event this year had a large March Madness style voting grid where people were encouraged to come pick winners in multiple rounds. The first round had 32 people in 16 battles. The peoples names were disguised. It took a while to figure out who was who and decide who to vote for, and it wasn't something I was able to do in one "sitting". I suggested they save the votes as people did them to localStorage, that way you could come back any time and finish. Like total badasses, they did it!
JSBin (By Remy Sharp, who did Snapbird also, go figure) allows you to save your starter HTML/JavaScript template so the next time you come back to use it, you can use that same template.
SHOULD be using localStorage Typekit has a Type Tester tool when viewing a particular font. You can type your own text into the box to see what it will look like in that font. Unfortunately when you go to another font, that custom text you entered is gone. This would be a great case for localStorage. When the value in that area changes, save it to localStorage, and load that value in when the page loads. I think that would be a great timesaver, as I think jumping around to see that text in multiple fonts is a pretty common use case.
CSS Lint has a grid of checkboxes for what features you do/don't want to CSS Lint to look for when you test your CSS. It would be really nice if this used localStorage to remember what checkbox configuration you used, so if you reload the page or come back later, it's the same. So if you don't like the "Don't use IDs" checkbox, you can turn if off forever =).
Pretty much any website with a login form could use localStorage to keep the username saved. So when a user comes back, it's one less step for them to log in.
Zeldman.com has links in the footer which allow you to toggle the colors used on the site between two versions. It saves this as a cookie which is great, but is subject to the frailty of cookies. Any site like this with alternate styling choices (e.g. font-size toggle) could save that information in localStorage and have it persist better.
MORThis is the tip of the iceberg. I'm sure people with more developer-oriented minds can think of bigger and better ideas for this. Saving your place in a game? Caching assets? What else you got?
Way more info from Mark Pilgrim.

Advertise here with BSA
Examples of Sites where localStorage should or is being used is a post from CSS-Tricks

It's pretty amazing what you can do with the pseudo elements :before and :after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here's a whole bunch of those amazing things. A roundup, if you will1.
Give you multiple background canvases
Because you can absolutely position pseudo elements relative to their parent element, you can think of them as two extra layers to play with for every element. Nicolas Gallagher shows us lots of applications of this, including multiple borders, simulating CSS3 multiple backgrounds, and equal height columns.
Expand the number of shapes you can make with a single element
All of the shapes above any many more can be created with a single element, which makes them actually practical. As opposed to those "make a coffee cup with pure CSS!" things which use 1,700 divs, which are neat but not practical.
Here's an example of a six-pointed star:
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}Show URL's of links in printed web pages
@media print {
a[href]:after {
content: " (" attr(href) ") ";
}
}Clear floats
Rather than insert extra non-semantic markup to clear the float on container elements, we can use a pseudo element to do that for us. Commonly known as the "clearfix", and more semantically titled with the class name "group".
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
} Simulate float: center;
The float property doesn't actually have a value of center, despite how much we might want it. Float does have left and right though, and by using placeholder pseudo elements we can carve out an area between two columns and place an image there, we can simulate the effect.
Label blocks of code with the language it is in
In the current design of this very site, the blocks of code are labeled with what language of code they are with a pseudo element.
<pre rel="CSS"></pre>pre:after {
content: attr(rel);
position: absolute;
top: 22px;
right: 12px;
}Create an entire icon set
Nicolas Gallagher again taking the shapes idea to another level by creating a massive set of icons created with no images, only pseudo elements on (at most) two elements each.
Use available space more efficiently
What CSS giveth, CSS can taketh away. What I mean is that pseudo element content can be applied or removed conditionally via media queries. Perhaps you apply an icon when space is limited, and replace that with a more descriptive word when there is more room.
Apply typographic flourishes
If your pseudo elements are text, they inherit the same typographic styles as their parent element. But while you are setting their content, you can style them as well. Like, say, use a different font and a different color to make your headers stand out with a flourish.
h2 {
text-align: center;
}
h2:before, h2:after {
font-family: "Some cool font with glyphs", serif;
content: "\00d7"; /* Some fancy character */
color: #c83f3f;
}
h2:before {
margin-right: 10px;
}
h2:after {
margin-left: 10px;
}Create full browser width bars
When you need elements whose background stretches full width but whose content does not, you are often stuck with non-semantic internal wrapping elements or repetitive and cluttery spacing declarations. Or you can simulate the effect by limiting the content width with one element and making the header bar reach out to the edges with pseudo elements.
Create a body border
Using a regular border on the left and right, and fixed position pseudo element bars on the top and bottom, we can get a "body border" effect without any dedicated markup at all.
body:before, body:after {
content: "";
position: fixed;
background: #900;
left: 0;
right: 0;
height: 10px;
}
body:before {
top: 0;
}
body:after {
bottom: 0;
}
body {
border-left: 10px solid #900;
border-right: 10px solid #900;
}Make a gleaming button
If you make a pseudo element block that has a transparent to white to transparent gradient on it, position it outside of the button (which hides it with hidden overflow), and transition-move it across the button on hover, you can make a button which seems to catch a bit of light as you mouse over it. You'll have to try it in Firefox 4 or 5 for now, as that's the only browser that allows transitions on pseudo elements.
Original by Anton Trollbäck; Pseudoelementized by Nicolas Gallagher; Another version by me.
Fade out a page when a particular link is rolled over
If you don't set relative positioning on an element, absolutely positioned pseudo elements will be positioned relative to the next parent that does. If nothing else does, it will be relative to the root element. You can use that to make a full-browser-window element, stack it underneath the main element, and reveal it on hover making a "page fade out" effect on a link.
Style a header like a three dimensional ribbon
Everybody loves ribbons! Check out this snippet for the HTML and CSS for this one. It makes use of negative z-index a bit, which in some cases requires an additional wrapping element to prevent losing the element underneath a parent with an opaque background.
Style the numbers in ordered lists
Have you ever tried to style the numbers in an ordered list? You end up doing dumb stuff like wrapping the insides in spans, styling the list items, then removing that styling with the span. Or using background images in crazy ways. Or removing the list styling and putting in your own numbers. All those ways suck. Much better to utilize pseudo elements as counters.
Make data tables responsive
Large data tables are awful to browse on small screens. Either they are zoomed in and require both vertical and horizontal scrolling, or they are zoomed out and too small to read. We can combine CSS media queries with pseudo elements to make the data table responsive and reformat it to a more readable view when on small screens.
Create styled tooltips
Using an HTML5 data attribute, then pulling that attribute in and styling it as a pseudo element, we can create completely custom tooltips through CSS.
1 Normally roundups are kinda looked down upon around here, in favor of creating more original content. But I feel like this one is beneficial in showing off and hopefully garnering more enthusiasm for the awesomeness that is pseudo elements.

Advertise here with BSA
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do is a post from CSS-Tricks

This article was originally written on September 2, 2010 and is now being updated to be mo' better. It now handles YouTube videos of different aspect ratios, the new iframe embed method, and with more efficient scripts.
The code that YouTube gives you to embed a video is now a very simple iframe. Here's an example:
<iframe width="1280" height="750" src="http://www.youtube.com/embed/fXm9EwzSjO4?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>iFrames, including the example YouTube code above, contain external content which cannot really be measured from the parent page. The width and height settings are necessary to define the size of the iframe, as the content inside will not help shape it (like an image would). But setting a static width and height on an element poses a problem for any type of fluid/flexible design. If the parent area shrinks in width to be narrower than the video, the video will break out, not shrink to fit.
Web Designer Wall recently published an article on how to deal with fluid width video. The idea originally came from Thierry Koblentz who wrote about it on his site and A List Apart.
I love the ideas presented there. They are pure CSS (yay), clever, and do their job super well. But the solution they have for YouTube videos has two inherit shortcomings:
The aspect ratio for the videos is pre-defined. The clever padding-bottom: 56.25% thing makes for an aspect ratio of 16:9 which is great for some videos but certainly not all.You have to use additional markup. Each video needs to be wrapped in another HTML element. I wouldn't call it non-semantic since it may make sense to use a <figure> or something but it's certainly more work.If you don't care about either of those things, by all means use that, it's a much cleaner solution. If that does matter, we're going to need to employ some JavaScript.
Doing it with jQueryThe cool part about this JavaScript solution is that you just copy-and-paste YouTube embed code onto your page and don't think about it. Whatever aspect ratio you want to set it to is fine. And no extra markup.
The basics are:
Figure out and save the aspect ratio for all videos on the page.When the window is resized, figure out the new width of the content area and resize all videos to match that width with their original aspect ratio.Here's the full script with comments:
// By Chris Coyier & tweaked by Mathias Bynens

$(function() {

// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),

// The element that is fluid width
$fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

$(this)
.data('aspectRatio', this.height / this.width)

// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');

});

// When the window is resized
// (You'll probably want to debounce this)
$(window).resize(function() {

var newWidth = $fluidEl.width();

// Resize all videos according to their own aspect ratio
$allVideos.each(function() {

var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));

});

// Kick off one resize to fix all videos on page load
}).resize();

});To use this on your own site the only thing you'd need to change is the line $fluidEl = $("body");. You'd change the selector ("body"), to whatever element on your page is the fluid width parent of the content. Perhaps that's "#main-content" or something, if the element was <section id="main-content"></section>.
A quick word on window.resize: Anytime you see functions running on the window resize event, you should have some alarm bells go off in your head. Browsers fire that particular event with different frequency. WebKit can fire it eleventybillion times during a quick little resizing, so if you do much heavy computational stuff you can see some adverse page performance. Here's a plugin from Paul Irish on "debouncing" resize to deal with that problem, which I heavily recommend.
View Demo   Download Files
I'm going to leave the "old version" inside the download too (before this article was updated) as it handles the "old" types of YouTube embeds (object/embed elements).

Advertise here with BSA

In looking over my last month's credit card charges, I saw one I didn't immediately recognize:

Well, it's a URL: WP-FEE.COM, so I checked it out. It's a redirect to a WordPress.com URL of a page that explains what this charge could have been:

Oh yeah, of course, my VaultPress subscription.
Now this isn't a new idea. We do it at Wufoo as well.

And we got the idea from 37 signals.

In googling around for others that do this, I found a good one from SlideRoom:

Via PayPalIf you accept payments via PayPal, and you have an account that is dedicated to one business, you should consider putting in a URL as your "Credit Card Statement Name" so that people have an immediate resource for checking into that charge.
I have PayPal Pro, so as of this writing, to get to that preference, it's My Account > Profile > Payment receiving preferences (Under Security and risk settings). Toward the bottom of those settings:

Now I didn't tell it to, but my phone number also appears on credit card statements next to that name. I'd recommend using something like Grasshopper to have a phone number you can use on your PayPal account with a prerecorded message that explains essentially the same thing the URL would explain.
I'm sure other payment gateways or merchants or providers or whatever you call them have similar ways to change what appears on people's credit card statements.
Do thisNow you might think, yeah sure, for big fancy companies with thousands of users being charged every month, this is good, but I'm just a small guy, it's not worth the effort. Not true. When selling Digging Into WordPress we accepted online payment that were just one-off payments and on a much smaller scale than these other services. Yet, at peak sales, I would sometimes get one phone call a day asking what this charge was on their card. Certainly not how any of us want to be spending time.
Advertise here with BSA

You've seen this before:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>This is a way you can load a JavaScript library like jQuery directly from Google's CDN (Content Delivery Network). You can get quick copy/paste access to these from ScriptSrc.net.
See in that above URL how it is pointing to 1.4.4 specifically? That little part of the URL can be tweaked. Perhaps you've seen it used that way before.
/1.4.4/Loads this very specific version of jQuery which will never change./1.4/Today, this will load 1.4.4. If and when jQuery goes 1.4.5, this URL will now point to that. If and when jQuery goes to 1.5, it will link to the last release of 1.4./1/Today, this will load 1.4.4. If and when jQuery goes 1.5, this URL will now now point to that. If and when jQuery goes 2.0, it will link to the last release of jQuery 1.x.As far as I know there is no super reliable way to link to the "absolute latest" build of jQuery (e.g. that would still work if jQuery went 2.0 and include nightly builds). Let's figure out which one we should use.

A Little Reminder Why We Do This At All The reasons for doing this are best put by Dave Ward:
Decreased Latency - file is server from a literally-geographically-closer server.Increased Parallelism - browsers limit how many resources can be downloaded simultaneously from a single domain, some as low as two. Since this is google.com not yoursite.com, it doesn't count toward that limit.Better Caching - There is a pretty decent chance that your visitors already have a copy of this file in their browsers cache which is the fastest possible way to load it.To which I would add:
Saves Bandwidth - The minified version of jQuery 1.4.4 is 82k. So if you had 1,000,000 pageviews with no local caching, that's 78 GB of data transfer which is not insignificant.Caching Headers#1 and #2 above are going to help no matter what, but caching needs a little bit more discussion. It turns out which naming convention you use is highly important to the caching aspect. Paul Irish has some basic research on this. I re-did that research and the results are below. Turns out, only linking to a direct exact version has proper caching headers.
/1.4.4/One Yearpublic, max-age=31536000screenshot/1.4/One Hour, strictlypublic, must-revalidate, proxy-revalidate, max-age=3600screenshot/1/One Hour, strictlypublic, must-revalidate, proxy-revalidate, max-age=3600screenshotOne hour in this context is kinda useless. It does kind of make sense though. If 1.4.5 came out, anyone who is using a /1.4/ link and had a one-year expires header would still get 1.4.4 and that's no good.
Latency, Parallelism, and Bandwidth are still significant things, but pale in comparison to caching. So if caching is super important to you, linking to a direct version is your only option.
Which to Choose/1.4.4/Will never change, so will never break code. Best caching. Clearest to understand./1.4/Possible but unlikely to break code with future updates (sub point releases more bug-fixy than API-changy). Fairly useless level of caching./1/More likely to break code with future updates (point release might change things). Fairly useless level of caching.I would say your best bet is to use the direct version links in almost all scenarios. The point-only links are pretty useless. The version-only links I could see being useful for personal demos where you kind of want your own demo to break so you know how to fix it.
Combining ScriptsIf you are able to squish JavaScript files down into one file and serve them like that (like perhaps this or this) you may be better off doing that, even if they are coming from your own server or CDN. One request is almost always better than multiple.
Not Just jQueryThis same naming convention / structure is used for all the JavaScript libraries on Google's CDN. I tested MooTools and all the exact same stuff applies.
Other CDN'sThere are other CDN's that host jQuery as well: Microsoft and jQuery.com itself. Neither of these have the same kind of naming convention so this doesn't really matter. However, do note that a direct link on Microsoft's CDN does the nice one-year cache.
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>jQuery.com's version doesn't seem to send any caching information in the header at all.
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

Good news today for everyone interested in learning more about WordPress! I have a new training course available on Lynda.com: WordPress 3.0: Creating and Editing Custom Themes.

This is the most comprehensive training I have ever created, so if you are looking for a serious course to get you going with designing for WordPress, this is it. It is a 4.5 hour course that goes from the initial project idea and deciding upon WordPress, to designing from a blank Photoshop canvas, to HTML and CSS, to turning all that into a fully fleshed out WordPress theme (including blog, static pages, and a store using a variety of CMS concepts), to extending that theme through plugins and JavaScript.
There are a number of videos from the course that you can watch for free, but the complete course with all the juicy stuff is only available to Lynda.com subscribers. Lynda.com subscriptions start at $25/month and that gets you access to literally every one of their crazy enormous library of training videos. So if you are sorta-kinda interested in this, do note you get access to loads of other learnin’ and you can cancel at any time. For $37.50/month, you get access to all the course files for all those courses too (which this course has). Discounts if you sign up for a year.
Go forth, and get your CMS on.

Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their own background, it becomes very important to the visual integrity of the design.
If a design is NON-fluid width, this task becomes considerably easier. The best technique to use is Dan Cederholm’s Faux Columns where the columns are wrapped in a container element (which you probably already have anyway) and that container has an image background applied to it which repeats vertically and simulates the look of equal heigh columns, even if the elements themselves haven’t actually grown.
When fluid width and multiple columns comes into play, this task becomes more difficult. We can no longer use a static image to simulate the look of multiple columns. All hope is not lost though. Below we will investigate a number of different techniques for accomplishing fluid width equal height columns.
View Demo   Download Files
Doug Neiner MethodDoug came up with this on the fly a few month ago during a little nerd chat we had. The idea is to use CSS3 gradients to create the columns. Gradients?! Indeed. We normally think of gradients as a color morphing into another color over distance. However the way we declare gradients with CSS is by declaring “color-stops” which are specific locations where the color will be exactly as specified at that point. The trick is to use overlapping color stops. That way you can get one color to stop and another to begin with no visible “gradient”.
Check out how you can get a five-column background, by declaring one color stop at the 0% and 100% mark, and doubles at the 20%/40%/60%/80% marks.
.five-columns {

background-image: -moz-linear-gradient(
left,

#eee,
#eee 20%,
#ccc 20%,
#ccc 40%,
#eee 40%,
#eee 60%,
#ccc 60%,
#ccc 80%,
#eee 80%,
#eee 100%
);

background-image: -webkit-gradient(
linear,
left top,
right top,

color-stop(0, #eee),
color-stop(20%, #eee),
color-stop(20%, #ccc),
color-stop(40%, #ccc),
color-stop(40%, #eee),
color-stop(60%, #eee),
color-stop(60%, #ccc),
color-stop(80%, #ccc),
color-stop(80%, #eee),
color-stop(100%, #eee)
);

}Because we are using percentages for these color stops, this simulated five-column background-image will stretch and shrink just as you expect them to in a fluid width design. This CSS would be applied to to individual columns, but to a wrapper of all the columns. You can think of it as a modern day extension of Faux Columns. The markup itself would then just be a series of columns inside that wrapper.
<div class="five-columns group">

<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>

</div>Notice the “group” class which is just the clearfix class so that the parent wrapper retains its height despite containing only floated children (it would normally collapse).
I think this is a rather clever take on the idea. Do note that that only modern Gecko and WebKit browsers support CSS3 gradients so you’re Opera and IE visitors will not see the column backgrounds. However, the column structure should remain intact just fine even down to IE 6.
This method allows for source order independence by using negative and positive left margins where necessary to jockey columns into position. See the demo for an example of the Doug Neiner method including putting the first column source order wise into the middle.
Nicolas Gallagher MethodNicolas Gallagher published a gem of an article about using CSS2 pseudo elements to achieve a number of effects that are otherwise difficult to pull off or that require additional HTML clutter.
The idea is to set the parent wrapper with relative positioning. This sets the context for absolute positioning within. Then we make each of three columns one-third the width of the parent and position them relatively within, pushing them over with relative positioning as needed. This also allows for source order independence.
Two of the visible background coloration columns are generated by absolutely positioned block-level pseudo elements (:before and :after) which are again one-third of the width, but 100% of the height of the parent. They are able to sit below the visible text content of the column by having a negative z-index value. The third “column” is actually just the background color of the wrapper showing through. Since the height of the wrapper will be the height of the tallest column, this works.
.pseudo-three-col {
position: relative;
background: #eee;
z-index: 1;
width: 100%;
}
.pseudo-three-col .col {
position: relative;
width: 27%;
padding: 3%;
float: left;
}
.pseudo-three-col .col:nth-child(1) { left: 33%; }
.pseudo-three-col .col:nth-child(2) { left: -33.3%; }
.pseudo-three-col .col:nth-child(3) { left: 0; }
.pseudo-three-col:before, .pseudo-three-col:after {
content: " ";
position: absolute;
z-index: -1;
top: 0;
left: 33.4%;
width: 33.4%;
height: 100%;
background: #ccc;
}
.pseudo-three-col:after {
left: 66.667%;
background: #eee;
}Using TablesI bet some of you are starting to think like this by this time. Hey, I don’t blame you. Sometimes a tried and true method that gets the job done is the way to go. One way to sure-fire accomplish the idea of fluid width equal height columns is a dang ol’ row of table cells. Just in case you forgot how that looks, it’s like this:
<table id="actual-table">
<tr>
<td>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</td>
<td>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</td>
<td>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</td>
<td>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</td>
<td>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</td>
</tr>
</table>Give each table cell a percentage width that totals up to 100% and you’ll be set. Even if you then apply padding to the cells, the table will jockey itself correctly.
#actual-table { border-collapse: collapse; }
#actual-table td {
width: 20%;
padding: 10px;
vertical-align: top;
}
#actual-table td:nth-child(even) {
background: #ccc;
}
#actual-table td:nth-child(odd) {
background: #eee;
}Now let’s say that table markup gives you the heebie-jeebies. You can actually use plain ol’ div markup if you want but still force it to behave like a table. In that case we’d do something like this:
<div id="css-table">
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
</div>And then use CSS tables:
#css-table {
display: table;
}
#css-table .col {
display: table-cell;
width: 25%;
padding: 10px;
}
#css-table .col:nth-child(even) {
background: #ccc;
}
#css-table .col:nth-child(odd) {
background: #eee;
}Besides using comfortable markup, we actually save some markup because we can go right from the table to the table cells. No element needs to simulate a table-row.
So are CSS tables the answer to our dreams? They are kinda cool, but they aren’t supported in IE 7 so if you are interested in going this route I’d recommend just using actual table markup instead. There is really no significant advantages to using CSS tables.
Both of these methods most significant disadvantage is source-order dependance. There is really no way to have the first column in the source order appear anywhere else than the first column.
One True Layout MethodOne of the most classic layouts of all time is the one true layout. In one of the demos, equal height columns is tackled. It’s a rather clever technique[…]

Last week I asked people to participate in a group design project on a specific design pattern: a list with functions. The premise was:
The design pattern we are going to tackle is a list with functions. Think of a list of five names. The primary function of this list is to click the names. The secondary function of the list is that the list needs to be manageable. There needs to be some kind of functionality to edit and delete each list item.
The response was amazing. Tons of you submitted ideas. I only have the one prize, so I will be picking a winner at the end, but I also want to cover all the interesting ideas.
Not every single submitted idea is shown below. There were a number of solutions which I felt failed the original intent. If clicking the name is what was required to get to a point where you could edit/delete, that’s an unsuccessful attempt. Edit/delete are secondary functions, not to overtake the primary function.

Hover FunctionalityI quoted a Zeldman tweet in the opening article that said that functionality that only reveals itself on hover fails. He was referring to mobile devices, which don’t have mouse cursors but instead rely on touch. Those mobile devices don’t have hover states, so if the functionality is hover-only, users will not be able to access that functionality. It’s hard to guarantee an interface is desktop-only with devices like the iPad being nearly fully web capable. That’s not so say “never use hover”, but it is to say that there should be some kind of fallback that doesn’t require hover for mobile.
Example by Sean. The fact that one function has a label and the other doesn’t is a bit strange, as well as the placement.
Example by cancel bubble. This also has rudimentary mobile browser detection which changes the functionality to be omnipresent.
Example by kil. While I don’t think the styling is successful, it brings up the point of intentionally separating by proximity the functionality of edit and delete.
Example by Austin Knight.
Example by Pete.
Edit ModeI’m thinking having a toggle for turning the list into “Edit Mode” is the most successful base for this design pattern. No repeated icons, no reliance on hover, no instructions required.
Example by Jay Salvat. At it’s most basic.
Similar example from Red.
Example by Jonathan. iPhone style.
Example by Baylor Rae
Example by RSBomber.
Kirk Strobeck created a PDF describing an interface which is essentially a list with three different modes.
Mass Edit ModeMass Edit Mode differs from Edit Mode in that when the Edit Mode is enabled, all list items immediately become editable. This may be useful in specialized situations, but I would think in most situations this would feel uncomfortable for a user (putting items they are satisfied with into an editing mode when they are trying to edit something else feels unsettling).
Example by Justin.
Example by Red.
Example by Josh Brown.
Example by Raymond Torres.
Drag FunctionalityDragging is doable on either the web or mobile, although the technology to get it done is quite different.
Example by Bart. Drag left to edit, right to delete.
Example by Greg.
Miles Harrison created a Flickr set which shows how you might turn drag functionality on its head by dragging functionality onto the list items rather than dragging the list items to functionality.
Single-Click Functionality Example by Alexandre Kilian. Variation on the starter idea that I provided, just uses a click to reveal the functionalities rather than hover.
Example by r3dsc0rpi0n. Click right on the list item for the primary function, click outside of it, but within its box, to edit.
Example by Damien. Kind of a combination between click and omnipresent. Slidedown from the top when edit is clicked revealing area to make edit.
Example by Hayden K.
Double-Click FunctionalityI think that the inherit problem with exposing functionality on double-click is that it’s rarely used on the web and so requires instructions on how to use it. Something this simple should require instructions or any learning curve (however short) for a user.
Example by Jason. Edit in a modal popup.
Example by Justin Lee. Justin brings up the point of saving/aborting. The intuitive keys are Return and Escape, but the absence of any proof those work is a bit unsettling.
Example by Jay Salvat
Example by Jay Salvat. Double click slides in a pane for editing.
Example by Jay Salvat.
Omnipresent FunctionalityIf done perfectly, omnipresent functionality should be able to work here. I specifically mentioned how a slew of repeated icons can be visually overwhelming and should generally be avoided. So “perfectly” means good placement and keeping the clutter down.
Example by Boba. Icons are placed out of the way and faded until hovered. I removed the default image borders for the screenshot.
Example by Dave Blencowe. I think this is an example of omnipresent functionality getting visually overwhelming.
Example by Marcelo. This isn’t exactly what I think of as “omnipresent”, but putting this here for lack of better classification. The checkbox is interesting, but too invasive to the primary functionality.
Example by Kevin Sweeney.
Example by Cory. Cory’s simple idea was to make omnipresent for mobile, and use hover for desktop with essentially the same design.
Example by Graham Ramsey.
Other Example by Bram Cordie. Clicking certain positions opens a “dial” from which you can choose other functionality. The dial is pretty cool and I could see it being nice in touchscreen environments, so long as it’s use was natural and required no instruction.
Example by Stephen Gerstacker. Click-and-hold to get the functionality to show up. It works, but it’s definitely not discoverable and would require instruction.
WinnerI’m going to give the crown to Jay Salvat. Jay created a variety of polished examples including the first submitted example of Edit Mode, which is what I consider the most successful pattern. Congrats Jay!

You already know that Envato runs marketplace sites like ThemeForest, GraphicRiver, and CodeCanyon that help designers and developers get a jumpstart on projects through buying themes, graphics, and code to help out. You also already know that Envato runs tutorial blogs like Nettuts+, Phototuts+, and Psdtuts+ which also help designers and developers through teaching.
In a brilliant-in-its-simplicity move, Envato has combined these two worlds into the Tuts+ Marketplace. Now their premium tutorials are available à la carte. I think it’s a great move for them and for us! Now you can buy cool finished products that you like, but also get the detailed tutorial on how it was made.

This was not a paid review, but I do earn money from the fact that we are now selling Digging Into WordPress directly from there now. Everything is the same buying it from there as it is directly from digwp.com. Same price, same files, same free-updates-for-life.

There are all kinds of reasons IPs get banned. A forums manager might ban an IP because the user at it is spamming. An admin of an email server might also ban IPs for spamming. A web service might ban an IP for using an API in an unapproved way.
On this site, we used to ban IP’s in the forums all the time (the new forums have been much better in spam prevention). I also sometimes ban IPs from inside WordPress. There is a setting to “blacklist” IP’s in the admin area on the Settings > Discussion page. There are few in there from spammers, and a variety of people I thought just shouldn’t come ’round here no more. In looking at this list now, some of these IP’s have been in here for years. Is that acceptable?
At the time of blockage, and IP address might belong to Danny Doucher, but after sometime, the IP address might be reassigned and now belong to Susie Supercool. I certainly wouldn’t want to punish Susie for Danny’s crimes.
So, how long should we ban IP’s for? Wikipedia, who certainly needs to deal with IP blocking on a regular basis, has a few choice words:
Most IP addresses should not be blocked more than a few hours, since the malicious user will probably move on by the time the block expires.
IP addresses should almost never be indefinitely blocked. Many IP addresses are dynamically assigned and change frequently from one person to the next, and even static IP addresses are periodically re-assigned or have different users. In cases of long-term vandalism from an IP address, consider blocks over a period of months or years instead. Long-term blocks should never be used for isolated incidents, regardless of the nature of their policy violation.
I can get on board with that. IP blocks should only last a limited time, since all IPs eventually change. Most blocks should be short, but if you experience long-term bad activity, make the ban longer. In the case of this site and WordPress, the Discussion Settings also offer a Moderation list, so you don’t actually have straight blacklist IP’s at all if you don’t want, and even if you do, you can move them from the blacklist to the moderation list after a while and be fine.
Anyone else have any theories or research to share?

When we first released the book Digging Into WordPress, we thought of some reasons why people might not want to buy it. A big reason is because tech books can go out of date quickly, especially when the subject is a fast-developing technology like WordPress. So, we fixed that. When you buy this book, you get PDF updates to it for life.
Today is just such an event. WordPress 3.0 has been out for a while now, and so it’s time for our second major update. This is the biggest one yet. We’ve combed through the entire book updating anything that was out of date or stale. We’ve also added a new Chapter 12, which is specific to the 3.0 update. The book is also sportin a brand new front and back cover!

If you already own our book in any form, this is old news, because we’ve already sent out an update email containing your new download. If you didn’t get it (spam filters happen), email sales@digwp.com with your original receipt and we’ll make sure you get it.
If you are considering it, but want to know more, you should check out the PDF sample of the book.
Regarding print version of the book, yes, they are coming back! It’s going to take us about a month to have them ready. If you’d rather not wait, you can buy the PDF now, and when the print version is ready forward us your receipt. We’ll send you a coupon code for exactly what you paid for the PDF to use in purchasing the print version. I’m sorry I spoke to soon on this issue. We are NOT offering any discounts on the printed version.

One of the new types of inputs in HTML5 is search.
<input type=search name=s>It does absolutely nothing in most browsers. It just behaves like a text input. This isn’t a problem. The spec doesn’t require it to do anything special. WebKit browsers do treat it a bit differently though, primarily with styling.
A search input in WebKit by default has an inset border, rounded corners, and strict typographic control.

The Styling LimitationsWebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit “no matter what”, as in, you can’t even fight against it with !important rules.
input[type=search] {
padding: 30px; /* Overridden by padding: 1px; */
font-family: Georgia; /* Overridden by font: -webkit-small-control; */
border: 5px solid black; /* Overridden by border: 2px inset; */
background: red; /* Overridden by background-color: white; */
line-height: 3; /* Irrelevant, I guess */
}In other words, be extremely cautious about using any of those CSS properties on a search input unless you are OK with the search input looking very different in other browsers.
Allowed stylingThe following CSS works as expected. The last three, in my opinion, should probably locked in like the properties above as styling those properties almost always looks worse than if you didn’t.
input[type=search] {
color: red;
text-align: right;
cursor: pointer;
display: block;
width: 100%;
letter-spacing: 4px;
text-shadow: 0 0 2px black;
word-spacing: 20px;
}Busted stylingBe careful not to use text-indent on search inputs. The results are quite weird an inconsistent. Here is one example:
Sometimes the text is below like this. Sometimes it’s not visible at all. It appears to be related to elements around it as well as how much indent it has (low values sometimes work fine).
Show Previous SearchesThis isn’t documented anywhere that I know of nor is it in the spec, but you if you add a results parameter on the input, WebKit will apply a little magnifying glass with a dropdown arrow showing previous results. (Thanks to Mike Taylor)
<input type=search results=5 name=s> The integer value you give the results attribute is how many recent searches will appear in this dropdown, if there are that many.
I really like the little magnifying glass. It drive home the searchyness of the field, but I’m calling the functionality itself rather janky. On a page reload recent searches clears, so that dropdown will almost always say “No recent searches”, unless you have implemented some kind of Ajax search (and even that I haven’t really tested).
Size RestrictionsThere are only three different “sizes” that WebKit search inputs can be, and it is determined by the font-size you declare on them.
Resulting SizeCSS font-sizeSmall<= 10pxMedium11px – 15pxLarge>= 16px Small, Medium, and Large. That’s all you get!
This small, medium, and large business can be extremely frustrating, as even setting identical font values, at the minimum for a “bump”, you’ll see font size difference across browsers.
Identical font sizings not idential.
Notice the (x) on the right hand side of the search inputs on the WebKit side. That is an additional feature of these search inputs in WebKit. If the input has any value (not a placeholder, a real value) the (x) will be present which is a functional UI control for clearing the input.
Speaking of placeholder text, search inputs are a great candiate for that.
<input type=search results=5 placeholder=Search... name=s>And in case light gray isn’t your cup of tea, you can style the placeholder text:
::-webkit-input-placeholder {
color: orangered;
}View Demo

This is a guest post by Jacob Gillespie who started an interesting thread on Forrst about this topic. I invited him to post it here, to which is graciously accepted.Over the past several years, I have taken an interest in usability and web design. One of the areas that seems to be often overlooked when it comes to design of a site is the design of the URIs on that site. Modern CMS systems allow for varying degrees of URI customization, but the defaults are often not as usable as they could be, and URIs are often placed last in the design process.
Clean URIs are one component of a clean website, and it is an important one. The majority of end-user access to the Internet involves a URI, and whether or not the user actually enters the URI, they are working with one nonetheless.
First, I would like to talk about the guiding principles behind URI design, then talk about the practical implementation of the principles.

Note: Originally, I wrote this article draft using the term “URL,” but since “URL” has been mostly deprecated by “URI,” I’ve updated to use the term URI. More information from W3C.
PrinciplesFirst, let’s take a look at some of the general principles of URI design.
A URI must represent an object, uniquely and permanentlyOne of the most fundamental philosophies behind a URI is that it represents a data object on the Internet. The URI must be unique so that it is a one-to-one match – one URI per one data object.
While this is always the goal, there are times at which it is very difficult or impossible to accomplish. Canonical URL tags were invented to help reduce the amount of duplicate content seen by a search engine. While not a final solution, canonical URLs are strongly recommended as large search engines like Google are now paying attention to them. For more information about canonical URLs, check out this article by SEOmoz.
URIs should also be permanent (i.e. choose the URI once and leave it at that). This speaks to good URI design before a site is launched, with the URIs being carefully planned. There will come a time when you do want to make improvements to your choices or otherwise must change URI structure. When this becomes a necessity, be sure to set up HTTP 301 moved permanently redirects on your server. This tells browsers and search engines the new location of the content and will also preserve any PageRank that the old URI has accumulated.
Be as human-friendly as possibleThis is the most fundamental driving factor behind URI design (or it should be). URIs should be designed with the end user in mind. Search Engine Optimization (SEO) and ease of development should come second.
One way to keep a URI user-friendly is to keep it short and to the point. This means using as few characters as possible while still maintaining usability. So, /about is better than /about-acme-corp-page. While striving to be as short as possible, it should not sacrifice that user-friendliness by using URIs like /13d2 as this holds no meaning for the end users.
Conversely, using a shortlink whenever sharing a URI is encouraged. This is great for tweeting links on Twitter, or otherwise sharing on social sites like Facebook or Google Buzz. It is great if you can control your own URI shortener for SEO reasons, although a site like Bit.ly is good too. I personally use PrettyLink Pro (a WordPress plugin) to create my short URIs. An alternative is the Short URL plugin.
WordPress provides a button to get a shortlink to a post based on WordPress’ own /?p=XXX format which is likely to be shorter than your chosen permalink structure. The advantage being that will work as long as your site is around. The disadvantage is the shortness of the link is dependent on the length of your domain name.
The URI should not rely on information that is not important to the content or the user. A common example of this is using the database ID as the URI, as in /products/23. The end user does not care that the product is database record number 23, so a URI like /products/ballpoint-pen is much better. It can be tempting to resort to such poor URI structure as it is often easier on the backend to query the database with an ID rather than have to do a lookup on an alias to find the object.
One good test to see if a URI is a user-friendly URI is the “speech-friendly” test. You should be able to mention a URI in a conversation with a friend, and it should make sense. For example:
My bio’s at domain dot com slash jim
instead of
My bio’s at domain dot com slash page slash g g 2 3
ConsistencyURIs across a site must be consistent in format. Once you pick your URI structure, be consistent and follow it! Having good URI structure for part of the site means that you still have poor structure overall. In order for a user to trust that URIs work a certain way on a site, the format must be consistent. If you must switch structure (maybe you’re updating a poorly-designed site), use 301 redirects as previously mentioned.
“Hackable” URIsRelated to consistency, URIs should be structured so that they are intelligibly “hackable” or changeable. For example, if /events/2010/01 shows a monthly calendar with events from January 2010, then:
/events/2009/01 should show an events calendar for January 2009/events/2010 should show events for the entire year of 2010/events/2010/01/21 should show the events for January 21st, 2010KeywordsThe URI should be composed of keywords that are important to the content of the page. So, if the URI is for a blog post that has a long title, only the words important to the content of the page should be in the URI. For example, if the blog post is “My Trip to Best Buy for Memory Cards,” then the URI might be /posts/2010/07/02/trip-best-buy-memory-cards or something similar.
As a side benefit, using important keywords in the URI will improve SEO. My personal SEO philosophy is that, rather that optimize for search engines, optimize for good content. Search engines have made it their goal to find the best content on the web, so doing everything possible to create an easy-to-use site with great content and opportunities for further information (links) will, in my opinion, yield the best long-term results for search engine visibility.
Technical DetailsWe have covered some of the guiding principles behind URI design. Now, let’s look at some technical implementations of those guidelines.
No evidence of the underlying technologyThe URI should not have .html, .htm, .aspx (a big annoyance), or anything else attached to it that is only designed to show the underlying technology. No end user cares that your site was written in ASP.NET (.aspx), ColdFusion (.cfm), or uses Server Side Includes (.shtml) – or at least most end users don’t. The extra info is just extra typing and extra room for error and frustration.
The one exception to this rule is appending a URI with a postfix like .atom, .rss, or .json to request that the certain format be returned. Alternatively, the format could be requested with the Accept HTTP header.
No WWWThe www. should be dropped from the website URI, as it is unnecessary typing and violates the rules of being as human-friendly as possible and not including unnecessary information in the URI.
Many users, however, will still type in the www. prefix, so www.domain.com should 301 redirect to domain.com. The same goes for 301 redirecting www.subdomain.domain.com to subdomain.domain.com.
FormatURIs should be in the format:
domain.com/[key information]/[name]/?[modifiers]
Key information is information that is not the object identifier (like the post title), but is still key to the object being accessed. This may include:
the type of thing (i.e. posts)the overall parent category (i.e. technology)key data members (i.e. the date posted)Modifiers modify the view, not the data model being represented, and thus they are part of the query string and not the URI itself.
The amount of “key information” should be kept to a minimum, as URIs should not be overly nested. Each item placed in the key information section must really be key to addressing the page.
In the end, the URI should represent a descending hierarchy. For example
domaintypecategorytitleExample: http://domain.com/posts/servers/nginx-ubuntu-10.04. In the case of items with dates, the format should follow the descending hierarchy:
yearmonthdayExample: http://domain.com/news/tech/2007/11/05/google-announces-android.
Google News has some interesting requirements for webpages that want to be listed in the Google News results – Google requires at least a 3-digit unique number. Due to the fact that they will ignore numbers that look like years, a 5 or more digit number is preferred. Also recommended is a Google News sitemap. This is one of those cases where if you absolutely must target Google News, you must conform to this inferior URI structure. But, if you must, make sure that you are consistent and that it is still hackable (for example, use the format yyyymmdd like 20100701).
All lowercaseAll characters must be lowercase. Attempting to describe a URI to someone when mixed case is involved is next to impossible.
If someone types the URI in mixed-case, they should be 301 redirected to the lowercase page. That sounds really nice, but in practice, I’m not exactly sure if that is possible… using a CMS that rewrites all requests to a single file would be the easiest way to accomplish it as the script could issue the 301 to lowercase, but I’m not sure if there’s an easier way (.htaccess rules or something).
Actions appended to the URIActions may be appended to the URI, like show, delete, edit, etc. Non-destructive actions (those that do not change the object) should be requested with a HTTP GET, while destructive actions should be POSTed to the URI. Run a Google search for REST URI Design for more information.
URI identifiers should be made URI friendlyA URI might contain th[…]

The internet has the potential to put a global audience at your fingertips, but there’s far more to reaching across cultural divides than simply putting your website out there and waiting for people to visit it. There are issues to do with language, design and SEO that all need to be addressed before your website becomes truly accessible ‘world-wide’. Thankfully, though, there are a number of simple tricks you can apply that will make it all a less daunting process.

Translate your contentThis is perhaps the most obvious but also the most important tip. English is arguably the most commonly used language internationally, but it still serves as a native tongue for only about 20% of the world’s population. Clearly, an English-only website will be inaccessible to a huge percentage of your potential online audience of 1.8 billion people.
There are various ways to translate your content and the method you choose may reflect budget and time constraints. The easiest way is to add a translation widget such as Google Translate or Babelfish to your site, allowing visitors to translate text to the language of their choice. Remember that any text embedded in Flash files won’t be translated – which is (yet another) a good argument against using too much Flash.
If you’re confident in using inline functions, you can build inline translation code into the site using Ajax, in connection with geolocation, to facilitate a smooth immersive translation process that directs the visitor to the correct language version, as determined by where their ISP is hosted.
If you do use machine translation, try to make your original content as simple and direct as possible and avoid specific cultural references, as these will invariably not translate well.
If budget allows, having your copy professionally translated is the optimum choice. Using a native speaker from the target market will ensure that meaning and nuances will carry over to your translated site and any linguistic or cultural mistakes can be avoided.
Use horizontal navigation barsNot all languages read from left to right like English. Scripts such as Arabic and Hebrew read from right to left. While CSS makes it easy to flip a vertical navigation bar (which would normally be located on the left-hand side for a left-to-right language) and script direction from one side to the other, using a horizontal bar located across the top of the page will add a sense of continuity and cohesive design to localized versions of your site.
Use Unicode UTF-8Unicode UTF-8 is the ideal character encoding tool. Compatible with over 90 different written languages or scripts, it’s also supported by all the major browsers. Even if you see no need for a localized site in Arabic or Simplified Chinese right now, using UTF-8 will give you the flexibility to create one in the future and it also incorporates all the additional characters from extended Latin alphabets (such as the German Ä, Ö, Ü and ß).
Bear in mind that some scripts and languages will take up more space than others to convey the same information and this may affect your page design.
Use appropriate coloursThe use of colours can enhance a site’s visual appeal and help convey a theme or emotion, but some colours have different connotations in different cultures. White, for example, can signify marriage in the west but is associated with death and mourning in much of the east.
Tailor your design to the marketSome cultures (such as Japan and China) can be defined as ‘high context’ cultures. These cultures have a tendency to draw information from context and situation. ‘Low context’ cultures (including Germany, Scandinavia and North America) tend to look for explicitly worded and expressed information. In terms of website design, this means that sites with a more visual and immersive feel may be better received in high context cultures and sites with concise, clear layouts and text will appeal more to low context cultures. As an example, take a look at Nokia’s clearly structured and information-heavy German site, with prices and products listed on the front page, and compare it to the more visually oriented Chinese version.
Nokia’s Chinese site
Nokia’s German site
Localize your SEOThere’s little point having a beautifully designed series of websites which are accessible to a range of different cultures if nobody can find them. SEO keywords can vary tremendously from location to location so don’t just translate your keywords directly. A little research may reveal that colloquialisms, alternative terms or even misspellings are more commonly used in your new target market. Research keywords not only on the local versions of search giants like Google but also on any major local competitors such as Baidu (the leading search engine in China).
About the authorChristian Arno is the founder and Managing Director of global translations company Lingo24. Launched in 2001, Lingo24 employs some 4,000 professional freelance translators covering a hundred different language combinations. Follow Christian on Twitter: @Lingo24.
Note from the editorChristian has written for a number of other blogs on this same subject, so if are very interested in this, check out his other articles:
Design for the World: Cross Cultural Web DesignTips and Thoughts on Cross-Cultural Global Web DesignBuilding A Cross-Cultural Web Design For A Wider Audience

Google Maps has a JavaScript API now in it’s third version. I remember playing with some version of the API back in v2 and thought it was kinda cool but a bit obtuse. For one thing, v3 no longer requires applying for an API key which is nice.
I’m sure it’s partly me getting better at JavaScript, but I found the API quite well done and easy to work with. For one thing, it’s fully evented. That means you can attach event listeners to different thing, like the map itself or things inside the map. A simple example would be if a marker is clicked, you can change the zoom level of the map, change information shown elsewhere on the page, or really anything else you might want to do with JavaScript.
Not only is it evented for dealing with things inside the map, but the objects you used to create the map and stuff inside it are full of methods for controlling them. This makes it easy to control the map with events that happen elsewhere on your page.
I decided to play with it a little and try to build something.

View Demo Download Files

I used jQuery to help out, but that’s definitely not required.
I created a list of locations in an unordered list. Each list item had HTML5 data attributes containing the latitude and longitude of it. It also contained a title and long and short descriptions.
<li data-geo-lat="41.9786" data-geo-long="-87.9047">
<h3>O'Hare Airport</h3>
<p>Flights n' stuff</p>
<p class="longdesc"><strong>About:</strong> O'Hare International Airport has been voted the "Best Airport in North America" for 10 years by two separate sources: Readers of the U.S. Edition of Business Traveler Magazine (1998-2003) and Global Traveler Magazine (2004-2007). Travel and Leisure magazine's 2009 "America's Favorite Cities" ranked Chicago's Airport System (O'Hare and Midway) the second-worst for delays, New York City's airport system (JFK, Newark Liberty, and LaGuardia) being the first.</p>
</li>When one of these list items is hovered over, I apply a “hover” class to deal with styling, “pan” the map to the new coordinates, and fill out the right area with more information.
It’s all fairly straight forward and further commented to clarify. Adding/editing points is as simple as changing coordinates and text right in the HTML part.
IdeaThe idea came from this website which I found in a tweet by ilovetypography.

Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example:
$("a").click(function() {
$("body").append($(this).attr("href"));
return false;
}That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}So what’s the difference?

The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or “bubbling up”) the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well. So let’s say you have a box inside a box. Both boxes have click events on them. Click on the inner box, a click will trigger on the outer box too, unless you prevent propagation. Like this:
This demo.So in other words:
function() {
return false;
}

// IS EQUAL TO

function(e) {
e.preventDefault();
e.stopPropagation();
}It’s all probably a lot more complicated than this and articles like this probably explain it all a lot better.

I am not a big proponent of ad blockers. Besides than the fact that this site has ads on it, I generally just don’t mind it. I am a big proponent of you doing whatever you want to on your computer to control what is displayed to you on your screen. If you want to use user stylesheets, ad blockers, flash blockers, or whatever else, more power to you. Here are some CSS projects intended for blockin’ stuff.

Floppy Moose userContent.cssThis is some pretty old stuff here, but hey, CSS doesn’t move that fast. The idea is that some browsers allow you to add additional default CSS to all pages (Firefox and Safari). This is some CSS that will block a bunch of links, iframes, and miscellaneous elements based mostly on their src or href attribute, and some on class/ID.
To use it in Firefox, you put it in a special place:
To use it in Safari, it’s a preference:

Opera supports UserCSS as well, there are instructions here.
The best I could find for Google Chrome was the Advanced Page Injector extension, which should do the trick for applying your own CSS (or JS) or all viewed pages.
View CSS
Gozer.org Ad Blocking CSSThis is similar in spirit to the Floppy Moose CSS, but looks as if it’s been updated more recently and is far more ambitious with the domains it covers and types of elements it looks for. Usage would be the same as above.
View CSS
Steven Frank’s shutup.cssThe idea here is to block the comment section on blogs. Sites like YouTube and Digg are notorious for having soul-crushingly bad comments, so perhaps for the thin-skinned amongst us, you’ll have an easier time getting through the day if you just don’t see them. The CSS has some specific ID’s/classnames it hides for specific sites, but also some very generic ones like #comments and .comments, which would block the comments area on most WordPress sites.
Installation again would be just like the screenshots above.
View CSS
Using MultipleYou’ll need to copy these CSS files locally to use them. That’s good anyway, as it means you can tweak things to your own preferences. It also means you could just copy one into the other to use both at the same time.
Flash BlockingIf it’s specifically flash that you want to prevent from seeing (or at least loading) there are browser extensions/add-ons you can use for that:
Firefox: FlashblockSafari: ClickToFlashOpera 10: Enter opera:config#UserPrefs|EnableOnDemandPluginIE 8: Tools > Manage add-ons > Flash player add-on > More information > Remove all sites (then when visiting a site with flash, you’ll get a notification where you can opt-in on a per-site basis)If you have any other ideas or favorite techniques for using the userContent.css idea, let’s have um!

I ran into the feature table design from Shopify over on Pattern Tap and I was like DAMN SHOPIFY, that is one sexy table. I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool stuff you find on the web is definitely an excise I recommend (a few days after, I read this – couldn’t agree more). As these exercises typically do, it lead me down some interesting paths.
Here’s my knockoff:

View Demo   Download Files

The MarkupHere is the abreiveated HTML:
<table id="feature-table">
<colgroup class="basic"></colgroup>
<colgroup class="plus"></colgroup>
<colgroup class="premium" id="featured"></colgroup>
<colgroup class="pro"></colgroup>
<thead>
<tr>
<th id="header-basic"><span>$15 Basic</span> <a class="button" href="#">Sign Up</a></th>
<th id="header-plus"><span>$35 Plus</span><a class="button" href="#">Sign Up</a></th>
<th id="header-premium"><span>$99 Premium</span><a class="button" href="#">Sign Up</a></th>
<th id="header-pro"><span>$150 Pro</span><a class="button" href="#">Sign Up</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>50 pages</td>
<td>75 pages</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<!-- More rows here -->
</tbody>
</table>Pretty clean. The only thing that isn’t perfectly clean is the <span> in the header. There is all that fancy gradient fancy font stuff going on. Theoretically, it could be done with a boatload of CSS3, but you know, sometimes an image is just fine dang nabbit, especially when it’s perfectly accessible CSS image replacement.
Of note is the <colgroup> element which I feel is underutilized. Colgroups allow you to target an entire column of table cells and apply styling, even though those table cells aren’t actually descendants of the <colgroup>. Kind of a weird concept, but it works, and it’s easier than applying a class name to every single table cell signifying what column it’s in.
If you need some quick markup, I have some you can copy and paste on HTML-Ipsum.
The CSSEach header cell (<th>) has an ID. We’ll set a static height on those and set background images for them. Vertically aligning to the bottom with a bit of bottom padding allows us to place the link button evenly. The span in those headers is kicked off the page via absolute positioning (i.e. accessible hiding).
#feature-table th { height: 120px; padding-bottom: 14px; vertical-align: bottom; }
#header-basic { background: url(../images/header-15.png) no-repeat; }
#header-plus { background: url(../images/header-35.png) no-repeat; }
#header-premium { background: url(../images/header-99.png) no-repeat; }
#header-pro { background: url(../images/header-150.png) no-repeat; }
#feature-table th span { position: absolute; top: -9999px; left: -9999px; }
Speaking of those buttons. I just used the CSS Button Maker to quickly design a button I thought looked nice and fit with the color scheme, and copy and pasted the CSS into this demo.
To color the cells, I set a fallback hex code color and then an HSLa color value. These class names are targeting the colgroup elements.
.basic { background-color: #d5e4bc; background-color: hsla(85, 30%, 80%, 1); }
.plus { background-color: #c1dcb7; background-color: hsla(110, 30%, 80%, 1); }
.premium { background-color: #bad6c8; background-color: hsla(150, 30%, 80%, 1); }
.pro { background-color: #bbd3dc; background-color: hsla(190, 30%, 80%, 1); }
The final product is zebra striped and has that “featured column” thing going on. but we can approach that with JavaScript…
The JavaScriptjQuery, obviously. We can apply the “odd” class to odd table rows, as well as a “final-row” class with jQuery super easily:
$("tr:odd").addClass("odd"); // Zebra action
$("tr:last").addClass("final-row"); // For extra padding The final row has extra padding
To handle the “featured” column, and keep things semantic, we just apply an ID to the colgroup:
<colgroup class="premium" id="featured"></colgroup>Now the JavaScript needs to figure out which number column that is.
// Figure out which column # is featured.
var featuredCol;
$("colgroup").each(function(i) {
if (this.id == "featured") featuredCol = i+1;
});Now we’re going to loop through all the table cells and figure out if the cell is in the column right before the featured column (if it is, apply a “leftOfFeatured” class) or in the column right after the featured column (if it is, apply a “rightOfFeatured” class).
While we are at it, we might as well apply class names to all table cells indicating their column. Colgroups were supposed to eliminate that need, but it turns out they have a fairly significant weakness. You can’t do something like:
.basic .odd {
/*
.basic is the colgroup, .odd is the row
the row really isn't a descendant of the colgroup
in other words, this doen't work
*/
}This design calls for different color alterations depending on the column. So while we are running that loop, we’ll just apply class names to the table cells and use those class names to do our bidding.
// Apply classes to each table cell indicating column
// Also applies classes if cell is right or left of featured column

var numCols = $("colgroup").length;

$("td, th").each(function(i) {
$(this).addClass("table-col-" + ((i % numCols) + 1));
if (((i%numCols)+1) == (featuredCol-1)) $(this).addClass("leftOfFeatured");
if (((i%numCols)+1) == (featuredCol+1)) $(this).addClass("rightOfFeatured");
});The variable i in this function is the index. It basically tells us what iteration of the loop we are on. So the 50th table cell it finds, the index will be 49 (index is zero-indexed). So if we take the index modulus the number of columns (determined by testing the length of the jQuery set) and add one, we’ll have what number column the cell is in. Example: 4 columns, 10th cell found. 9 % 4 = 1, plus 1 is 2, so the 10th cell is in the 2nd column. And thus, that cell gets the class “table-col-2″.
With the row .odd classes and the new table-col-x classes, we can now truly zebra stripe as the design demands:
.odd .table-col-1 { background-color: #edf3e2; background-color: hsla(85, 30%, 94%, 1); }
.odd .table-col-2 { background-color: #edf3e2; background-color: hsla(110, 30%, 94%, 1); }
.odd .table-col-3 { background-color: #edf3e2; background-color: hsla(150, 30%, 94%, 1); }
.odd .table-col-4 { background-color: #e2ecf0; background-color: hsla(190, 30%, 94%, 1); } Zebra action complete.
Notice it’s hex code fallbacks and HSLa again. The fun of using HSLa here was that the values are exactly the same except for the third value (the “lightness”). We increase that value 14% and that is the noticeable difference in tone.
The “leftOfFeatured” and “rightOfFeatured” classes apply a background image, just an alpha-transparent PNG shadow aligned and repeating to the left or right respectively.
.leftOfFeatured { background-image: url(../images/shadow-left.png); background-repeat: repeat-y; background-position: right center; }
.rightOfFeatured { background-image: url(../images/shadow-right.png); background-repeat: repeat-y; background-position: left center; }ConclusionSo that’s it folks. It was fun for me to try and recreate something I thought was awesome, but just in a “this is how I would do it” kinda way rather than peaking at any of their code. I highly recommend this kind of exercise, if your schedule allows.
View Demo   Download Files

I love me some Google Reader. I got all my feeds up in there and it’s like having the longest most interesting newspaper ever. It brings me great pleasure to know that when people build all these RSS reading applications, they are essentially just different user interfaces for Google Reader. That way we can play with lots of different ones but still maintain a unified home for our feeds.
The web interface for Google Reader is pretty good. They have mobile web versions as well that also aren’t bad. But there is one little thing that kills me about the web version of Google Reader. Let’s say you come down to an article you want to read…
Step 1: Keypress: J-J-J-J, Oh cool, this article looks interesting, I think I’ll read it. Step 2: Oh crap, where did the article go all the sudden? OH YEAH IT WAS PUSHED DOWN OUT OF SITE BECAUSE AN IN AN ARTICLE I ALREADY SKIPPED HAS NOW LOADED ABOVE IT.Yeah, there are ways around it. I could switch to collapsed view. But it’s the principal of the thing. I specifically skipped the article above and gave a new article focus. Focus should not be ripped away from me for any reason at that point. It happened to me so many times I just had to give up on the web Google Reader.
On the iPhone I use dedicated apps for RSS reading (I like both Byline and Reeder). I figure why not use a dedicated app on the desktop too. I have a friend who swears by NetNewsWire, so I’ve been using that. It’s pretty great. It has a really simple and easy interface. Not much to get in your way, but just about everything that you need. My favorite part is how it has a built in web browser, so switching over to read the article on the site is really quick and painless. It uses WebKit internally to do that.
NetNewsWire also supports themes. Here is one that ships with it:
C’mon, really?The themes that come with the app aren’t particularly impressive. For one thing, they are literally all fluid width. One of my biggest gripes about fluid width on digital screens is how typically the only thing that happens when a screen is adjusted in the line length of text changes. Ironic, in that in my opinion the only thing that shouldn’t change in a fluid width layout is line length.
If you open up the applications package, you can drill down and find where the themes are kept. They are files with the .nnwstyle extension. If you then show the package contents of those, you can see the how they are built. They are literally just HTML and CSS files. Awesome.
Right click > Show Package ContentsFixedSo I set about trying to build my own theme. I probably went through 5 different ideas and I’m still not entirely satisfied with this, but I’m just gonna stop fiddling with it for a while and let it sink in. I’m also going to share it here in case anybody else is a NetNewsWire user and wants to try it, or have a base to play with their own.
I’m calling it “Fixed” because:
It’s fixed width.It has a fixed header.It fixes a bunch of stuff I found annoying about feeds.It looks like this:

Hey, it ain’t much, but that’s kind of the point. The idea is to get out of the way and just make articles as readable and cruft-free as possible.
FeaturesTitle is big and fixed so you can’t forget what you are reading and are always close to a link to it’s real URL on the web.Source and other meta information are fixed above the title for similar reasons.jQuery is loaded into the theme, which is utilized a number of ways.Line length is fixed at a comfortable length.Images are forced to be block level and spaced out (some sites leave images inline with text and it causes weird layout issues over RSS)Widows in post titles are prevented by inserting a non-breaking space between the last two words like this.
Embedded videos (or any embedded content from any source) is forced to be the same width as the line length.iframes are removed. Google ads in feeds come across in iframes, so those are gone. I can’t think of any real legitimate use for an iframe being in RSS.Tweetmeme/ReTweet buttons are removed.Any images that are really small (under 30px in both height and width) or specifically related to FeedBurner are removed. This removed a lot of junk from the end of a lot of feeds, including seeing a zillion “sharing” buttons or FeedBurner cruft.Download Files
I think you can just double-click it from the desktop, and assuming you have NetNewsWire installed it will install it as a theme.
Only gripe about NetNewsWire: it says “flagged” instead of “starred”, can’t we just use “starred” and keep it consistent? But worse, you can’t “share” things, which I like to do. It does have Delicious and Instapaper support though, which rocks.

I admittedly don’t think about this idea very often… how efficient is the CSS that we write, in terms of how quickly the browser can render it?
This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices. Google is also always on a crusade to make the web faster. They also have an article about it.
Let’s cover some of the big ideas they present, and then discuss the practicalities of it all.

Right to LeftOne of the important things to understand about how browsers read your CSS selectors, is that they read them from right to left. That means that in the selector ul > li a[title="home"] the first thing thing interpreted is a[title="home"]. This first part is also referred to as the “key selector” in that ultimately, it is the element being selected.
ID’s are the most efficient, Universal are the leastThere are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are.
#main-navigation { } /* ID (Fastest) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (Slowest) */
#content [title='home'] /* Universal */When we combine this right-to-left idea, and the key selector idea, we can see that this selector isn’t very efficient:
#main-nav > li { } /* Slower than it might seem */Even though that feels weirdly counter-intuitive… Since ID’s are so efficient we would think the browser could just find that ID quickly and then find the li children quickly. But in reality, the relatively slow li tag selector is run first.
Don’t tag-qualifyNever do this:
ul#main-navigation { }ID’s are unique, so they don’t need a tag name to go along with it. Doing so makes the selector less efficient.
Don’t do it with class names either, if you can avoid it. Classes aren’t unique, so theoretically you could have a class name do something that could be useful on multiple different elements. And if you wanted to have that styling be different depending on the element, you might need to tag-qualify (e.g. li.first), but that’s pretty rare, so in general, don’t.
Descendant selectors are the worstDavid Hyatt:
The descendant selector is the most expensive selector in CSS. It is dreadfully expensive — especially if the selector is in the Tag or Universal Category.
In other words, a selector like this is an efficiency disaster:
html body ul li a { }A selector that fails is more efficient than that same selector matchingI’m not sure if there is much we can learn from this, because if you have a bunch of selectors in your CSS that don’t match anything, that’s, uhm, pretty weird. But it’s interesting to note, that in the right-to-left interpretation of a selector, as soon as it fails a match, it stops trying, and thus expends less energy than if it needed to keep interpreting.
Consider why you are writing the selectorConsider this:
#main-navigation li a { font-family: Georgia, Serif; }Font-family cascades, so you may not need a selector that is that specific to begin with (if all you are doing is changing the font). This may be just as effective, and far more efficient:
#main-navigation { font-family: Georgia, Serif; }CSS3 and EfficiencyKind of sad news from David Hyatt:
The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance.
The whole comment is worth reading.
CSS3 selectors (e.g. :nth-child) are incredibly awesome in helping us target the elements we want while keeping our markup clean and semantic. But the fact is these fancy selectors are more browser resource intensive to use.
So what’s the deal, should we actually not use them? Let’s think about practicalities a bit…
PracticalitiesThat Mozilla article I linked to at the top? Literally 10 years old. Fact: computers were way slower 10 years ago. I have a feeling this stuff was more important back then. Ten years ago I was about to turn 21 and I don’t think I even knew what CSS was, so I’m not going to get all old school on you… but I have a feeling we don’t talk about this rendering efficiency stuff very much is because it’s not that big of a problem anymore.
This is how I’m feeling about it: the best practices we covered above make sense no matter what. You might as well follow them, because they don’t limit your abilities with CSS anyway. But you don’t have to be all dogmatic about it. If you happen to be in the position where you need to eek out every last drop of performance out of a site and you have never considered this stuff before, it may be worth revisiting your stylesheets to see where you can do better. If you aren’t seeing much rendering slowness in your site, then don’t worry about it, just be aware for the future.
Super-speed, Zero-practicalitySo we know that ID’s are the most efficient selectors. If you wanted to make the most efficiently rendering page possible, you would literally give every single element on the page a unique ID, then apply styling with single ID selectors. That would be super fast, and also super ridiculous. It would probably be extremely non-semantic and extremely difficult to maintain. You don’t see this approach even on hardcore performance based sites. I think the lesson here is not to sacrifice semantics or maintainability for efficient CSS.
 
Thanks to Jason Beaudoin for emailing me about the idea. If anyone knows more about this stuff, or if you have additional tips that you use in this same vein, let’s hear it!
Just as a quick note, I’d also like to mention that since CSS style selectors are also used in many JavaScript libraries, these same concepts also apply. ID selectors are going to be the fastest while complicated qualified descendant selectors and such will be slower.

Google announced their new Font API yesterday, including a font directory and preview tool. They teamed up with TypeKit, to build and open source the WebFont Loader.
I quite like how they have done it. You just hotlink the CSS right from Google and then reference the font names in the CSS. It’s really easy — view source on this demo.
Why do this? Isn’t this just @font-face? Yep it is just @font-face, which you can do yourself without Google’s help. But there are advantages:
Bandwidth savings (weight is on Google)Caching speed (same font used on multiple sites, browser cache kicks in)Speed in general (Google’s CDN is faster than your site)
Loading the extra CSS file is an extra HTTP Request though, but you could hotlink the font file instead. You may also want to download the font and create your own SVG version, because the Google stylesheets aren’t serving that up, and hence no support for iPhone/iPad.
So what is this WebFont Loader then? It’s a bit of JavaScript which handles the loading of fonts. It’s use is totally optional, but offers some advantages. For example, Firefox will display a font further down the font stack until an @font-face font is loaded, and then flip to the @font-face font when it is ready, causing reflow and general weirdness. It’s called FOUT (Flash of unstyled text). The WebFont Loader can help fight this — see Paul’s article on it.
Raph Levien is a type designer, and creator of the Inconsolata font. Raph also works on the Google Font API team. I caught up with him to ask him a few questions about all this…
*Chris: Google does a lot of cool stuff for people building websites, including some seriously bandwidth intensive things. For example, we can hotlink to JavaScript libraries hosted on Google’s CDN. The last thing I want to do is look a gift horse in the mouth, but I know it makes people wonder sometimes, what is in this for Google? Guaranteed this is going to make web fonts faster, so is it as simple as a faster web is good for Google? Or is there going to be analytic data captured that is useful to Google?Raph: It’s all about making the web faster and richer for everybody. We’re not collecting any personal information for web font requests, and only aggregating the logs at a coarse level so we can keep track of performance and overall popularity of fonts.
One of the great things about this service, just like the AJAX libraries (such as our WebFont Loader), is that many different sites can link the fonts, and they’ll all share the browser cache – it’ll only trigger a network download for the first one.
*Chris: Should the worst happen, and the font API were to have a bit of downtime, what happens to sites using these fonts? Will the browser follow the font stack down and pick a fallback, or does something else happen?Raph: Yes, it’ll use fallback fonts. It’s just CSS, so the designer gets full control over the font stack, and if you want more fine-grained control, you can use the WebFont Loader library as well – for example, you can trigger JavaScript code to make CSS changes when the font fails to load. We’re also going to be collaborating with all major browser vendors to improve the web font experience for users.
*Chris: It is pretty interesting to see a collaboration between your team and TypeKit. How that that come about?Raph: TypeKit has been been blazing the trail to make web fonts available to a wide audience. We’ve known the team for a while (Jeff Veen used to work at Google, in fact), so it was natural to talk to them about what we’re doing. We think our collection of open source fonts is pretty good, but for a broader range of professionally designed fonts, we want to make it easy for people to upgrade. We’ve also been working with other major font vendors, including Ascender.
*Chris: A lot of free / open source fonts serve their creators as an advertisement for a more robust set of fonts that isn’t free. Do you see that as a hurdle for the Google Font Directory, in that could become a repository of intentionally limited fonts? Or will that kind of thing be curated out?Raph: We’ve been getting a great response so far. People have all kinds of reasons for contributing open source fonts, and one is definitely to create more visibility and traffic for selling proprietary fonts. A lot of people just love creating fonts. Whatever the reasons, I’m confident we’ll see a nice, steady stream of high quality fonts. But there’ll always be more choice of top-quality fonts from professional foundries.
 
Thanks to Raph for the quick interview! Let me know what ya’ll think of this. I’m thinking it’s a pretty big win for web fonts, although I think (and hope, really) that all the best fonts will remain on paid services like TypeKit. Web fonts still have a way to come. Clearly there are still some problems on Windows, and if it’s not one thing, it’s another.

This article is an update to this old article, which had an ugly demo and a variety of techniques in it no longer probably considered good practices. This new demo is much cleaner, up to date, and fuller featured. Because the old article was a bit of a different scope, I’ll leave it alone, just refer to this one.Let’s say you wanted to make a website where clicking buttons in the nav would dynamically load some content. Kind of like the organic tabs thing, only the content is loaded dynamically. Say something like this:

View Demo   Download Files

The HTML: It all works without JavaScriptThere is no excuse for the navigation of a website to be completely broken without JavaScript enabled. So the best approach here is just to create these pages and the navigation as plain ol’ semantic HTML. You know, like it’s 2001.
The navigation links to the files that contain that content, and are fully formed functional pages on their own.
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>
CSSThis isn’t really a tutorial about CSS, but if you want to peak at it, go for it. Shout out to Mike Rundle who shared the CSS for those buttons the other day on Twitter as I was working on this and I stole it.
jQuery JavaScriptThe JavaScript is the fun part here! This is the plan in plain English:
When a navigation button is clicked…Change the hash tag of the URLWhen the hash tag in the URL changes…Fade out the old contentLoad and fade in the new contentUpdate the current navigation highlightingSo why bother with the “hash tag” changing stuff? Several reasons:
By using the hashchange event plugin by Ben Alman, we can enable the browsers back/forward button. Super modern browsers support the hashchange event by themselves, this plugin enables support for it for older browsers.We can look for the hash when the page loads and load the appropriate page (i.e. “deep linking”)PrereqWe’ll be using the jQuery library, the onhashchange plugin, and then loading our own script last.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>Code Dump$(function() {

var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;

$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});

$(window).bind('hashchange', function(){

newHash = window.location.hash.substring(1);

if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};

});

$(window).trigger('hashchange');

});Not much to it really. It’s only 41 lines with some blanks in there for readability. This even includes adjusting the height of the whole wrapper to adjust for the new content.
View Demo   Download Files

I know ya’ll were just thinking to yourselves: man, I hope Chris posts some super nerdy article today with some nearly-useless technique that if I talked about in public would clinch the fact that I’m not getting laid anytime soon. Don’t worry, I got your back! Check out the CSS Secret Message Generator.

Using it is (I hope) fairly straightforward. You click some letters, then those are the letters which secretly reveal themselves when the text is selected.
There are a few interesting things worth touching on, so we’ll do that in this article.

The Big IdeaThe empowering concept here is the fact that you can change the text selection color (and background-color) in modern browsers. WebKit and Chrome use ::selection { } and Mozilla uses ::-moz-selection { }.
In our example we wrap every single letter of a big block of text in a <span>. Then we have a little UI system for marking individual letters. All that does is toggle a specific class name on those spans. Non-marked spans have a color and background-color of white, which means they effectively disappear when selected. The marked spans change color. So when the whole block is highlighted, the secretly marked letters reveal themselves.
For the record, there is really not reason it’s laid out in a grid, other than it’s just kinda easier to click the letters and it looks more secret-message-y.
jQueryLike about everything fancy we do around here, it uses jQuery. I’m not gonna do a code-dump. If you want to see the the whole thing, it’s only 85 lines fully commented.
I’ve done a couple of other grid-clicky things in the past and one thing I’ve always wanted to figure out (but never could) was a click-and-drag way to toggle cells. A way finally dawned on me…
I bound a “mousedown” event to the grid itself. When that fires, set some data to indicate that the mouse is currently down. Conversely, on “mouseup”, set that data to indicate the mouse is now up. Useless by itself, but then we can attach a “mouseenter” event to all the cells. If the mouse is “down” when that hover event happens, do the same toggling that would happen with a click. At the moment this only works for turning on cells (not mass-erasing), but it could probably be tweaked to do that too.
$("#grid")
// clicking on a cell toggles the selected state in the grid and the demo
.delegate("span", "click", function() {
// get the first class only (the position), otherwise would fail when it has that plus "selected"
attrTest = $(this).attr("class").split(" ")[0];
$(this).toggleClass("selected");
$("#secret-message ." + attrTest).toggleClass("selected");
})
// if the mouse is currently pressed, set some data so we can check for that
.bind("mousedown", function() {
$(this).data("mouseIsDown", true)
})
// when the mouse comes back up, change data to say so
.bind("mouseup", function() {
$(this).data("mouseIsDown", false)
})
// allows the "drawing by dragging"...
.delegate("span", "mouseenter", function() {
// which is only allowed while the mouse is pressed down
if ($("#grid").data("mouseIsDown")) {
attrTest = $(this).attr("class");
$(this).addClass("selected");
$("#secret-message ." + attrTest).toggleClass("selected");
}
});WebKit doesn’t allow “none” backgrounds for text selection?For the grid, because of the click-and-drag ability, I wanted to turn off highlighting in that area entirely (it’s just annoying while you are trying to “draw”). I set the text selection color the standard way, for both rendering engines. Firefox respects it, Opera respects it, but neither of the big WebKit browsers will.
#grid-area ::-moz-selection { background: none; } /* Works */
#grid-area ::selection { background: none; } /* Doesn't Work */This may be some kind of bad-usability-prevention thing on WebKit’s part, but it seems more like a bug to me. If I specifically write CSS to eliminate background coloring on text selection, that’s what I want.

Reader Joe Bob sent me a link to IxEdit to ask what I thought. I hadn’t heard of it, so I checked it out. They have a six minute video you can watch which explains it pretty well. In a nutshell, it’s a GUI editor for creating interactive stuff on websites. Click an element, tell it how you want it to behave. Think of it like CSS Edit for jQuery (it uses jQuery and jQuery UI to do it’s thing).
My thoughts: Wow, that’s extremely cool. But I’d probably never use it.

The fact that I’d never use it has nothing to do with the quality of the product. It has to do with the fact that it is beyond my Abstraction Point. If I’m going to write some page interactions, like a tabbed area or a click-this-slide-down, I’d rather write it myself in jQuery. But that’s kind of absurd isn’t it? jQuery in itself is an abstraction of JavaScript. When I write $(“#thingy”).slideDown(); there is lots of stuff going on that I barely understand. I’m far from “writing it from scratch”.
Taking it further, that code is ultimately served up from a web server. I certainly didn’t write that code. That web server runs on an operating system. The operating system runs on lower level code. There is a lot of steps between that circuit board and my slideDown animation. Everybody stops along the chain somewhere.
“That’s for newbies, not real developers.”
“I write my code from scratch!”
“I like to know what my code is doing.”
I think these are flawed statements. When we say or think these things, we are really saying “This is above my abstraction point.”
Your abstraction point is the level of abstraction you feel most comfortable in getting stuff done from day to day. It might be using design view in Dreamweaver and adding interactions with IxEdit. It might be writing in assembly language. Neither one is “better” than the other. It’s just where your current comfort level is, and more importantly, using the tools you need to to get the task done with reasonable speed.

Back in the summer of last year, I did a little roundup I called The “Light” CMS Trend. Ironically enough, one that wasn’t included was LightCMS. I’ve been checking it out (yes, this is a sponsored review) and it definitely fits the category, with some features that set it apart.

LightCMS is a Light CMSReally easy updates. That is the whole point of a “light” CMS. They don’t have as many features or as much extensibility as a “full” CMS (e.g. WordPress), but they do make the job of editing content on a site more intuitive, especially for less technology-inclined clients.
For example, to log in to your site, you append /login to the URL, and you’ll be presented with a login screen directly in the skin of your site.
Any client can appreciate that.Some of what LightCMS does is common to many CMSs. It is for managing content and building websites. It lets clients do this themselves (literally every single client I’ve had in the past many years has wanted this, whether they actually do it or not). There are users. There are templates. Some features of LightCMS are unique to it, which I’ll cover later.
EditingThe most important part, the editing of content, is a nice clean process. Content is kept on the page in modules. The modules can be drag ‘n dropped around (or manually moved) as well as of course editing and deleted.
Drag and drop modules Module menuI enjoy how clean and polished all of this is. There is a lot of detail in an app with this many features and options, and it easily could have been half-assed.
DifferentiationHostedA common approach to the “light CMS” thing is to either give the CMS access to your site via FTP credentials, or put files on your server which do the job of editing. Either way, it’s your server. That can be a good thing, I know a lot of times I like having things under my control a lot of times. However, none of them are free, so it’s an expense you have on top of what you already pay for hosting. LightCMS is fully hosted.
They have a bunch of plans (literally 6) from free to a premier $99/month plan. The plans vary in number of users who can access the account, number of pages you can control, and the storage.
Some of the pricing plansFully hosted means that, by default, your site lives at a subdomain on lightcms, for example: http://yourwebsite.publishpath.com/. That may work for you, but probably not. Not very professional and all. You can easily use your own domain name though, with a simple CNAME change.
Fully hosted also means no manual upgrading. Not to mention customer support.
FTPEven with the hosting, and the otherwise kind of clean/sanitized environment, you can get direct FTP access. Nice.
WidgetryAnother unique feature is how they give you functional bits you can add to pages as modules (I think they call them “elements”) just like your own custom ones. For example, a blog element, calendar element, a robust form builders, photo gallery, donations buttons, etc.
ResellingThey have kind of a white label option, where you can have your clients pay for the service, and you earn money from that. They charge $19/month, and you can set the price at whatever you want (you earn whatever on top of 19 you charge). Might be nice for some folks, but probably not something I would use. I prefer billing my own clients, so I’ll just pay for it and mark it up in my own invoices, but hey whatever works.
Your own designsIt should go without saying, but you can use your own designs with this. Basically you create a template with HTML files in a specific naming convention (Home.html, Inside.html, Admin.html, etc). Inside those templates you declare editable regions with “tokens” like this:
<$region$> <$/region$>Once you got it all together, you just zip it up and upload it and your new design will be available as a template.
Try itI think it’s a pretty decent little system. Go check out their Why LightCMS? page (and the tour) for a more thorough overview of what it does than what I presented.

Two things today.
First, have you guys heard of Threadsy? I hadn’t, but apparently they got 2nd place at TechCrunch 50, which is pretty great. It’s a web application that combines several of your online “input streams” (e.g. Email, Twitter, and Facebook). I think that’s actually all they do right now, which I find kind of awesome, because those are the only ones I use anyway.

I have 500 invites to give away for it. First come first serve as I understand it. Just click this to sign up.
I really quite like it. The Threadsy team has done a killer job in creating an interface to combine these things that is totally usable and nice. No small chore when trying to pack so much functionality into basically one screen. I’ve been using it off and on. I haven’t been able to 100% switch just because old habits are hard to break and I love my Gmail/Tweetie combo so much already.
Second, there are a ton of ways you can help out the bad situation in Haiti. I’m sure many of you have already. I’ve done a few different things and plan to do a few more. As designers, there is a really cool new one: The Haiti Poster Project.

You design and print 11″x17″ posters (yes, you have to print your own, that is part of your contribution). The posters are collected and sold. The goal is to raise $1,000,000 for Doctors Without Borders. I think this is a great idea, especially how it’s not a “contest” where you could do all the work and then be rejected and not even be sure you did any good. Everyone wins here.

Little freebie template for ya’ll today. It was actually Doug Neiner’s idea, I ran with it, then he helped me out at the end tighten some stuff up.

View Demo   Download Files

NoteIt’s PHP. So if you download it to check it out, throw it up on your web server to test it out (or somewhere you run PHP locally).
NavigationThe navigation is all AJAX’d up using the jQuery .load() functionality. I just think it’s kinda fun. It supports “deep linking”, so if you were to link to this page with a hash-tag of a page (e.g. /DocTemplate/#parameters.php) , it will see that and load that page up.
If you were to use this template to document some kind of JavaScript thingy, it should be noted that when content is loaded in this way the JavaScript on that page won’t be “active”.
If you don’t like or can’t use the AJAX navigation, simply remove the two JavaScript <script> links in the file common/doctype-and-head.php. It will fall back to simply reloading the page to go to those pages, with current navigation highlighting fully intact.
And…The index.php file has all the different text style stuff available. Not much, but just the typical hierarchy of header tags, code styling, emphasis/strong tags, links, callout class, etc.
There is a good bit of CSS3 stuff going on from rounded corners to drop shadows to :hover:after with generated content. It should degrade just fine though.
As with anything else on this site, feel free to use it for whatever you’d like, no attribution of any kind required.