Spring has sprung, which means I’m out taking photos of graffiti on the streets of Boston (and whatever other cities I might find myself in the course of a give year)
Check out the latest and greatest:, starting withthis, the last flick in my photostream. Starting at the end? I’m crazy like that.
Anyway, here are some highlights:
For a long time, I used something like <div style="clear:both"></div> or its class equivalent to clear floated content in layouts. I knew, at some level, there were better solutions, but as these things go- I had deadlines to meet, had a working solution and there was never any inducement to look for a new one. Sure, there was a little extra markup, but it was so limited I could live with it.
Then in a comment on another post here ArkRep gift wrapped a better solution- one I vaguely knew about but had never explored. It looked a little something like this:
.clr {
clear:both;
}
.clr:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clr {display: inline-block;}
Liking it, since it swapped the useless markup hack thingie for a single class, I took a modified version of his code and moved it into our baseline screen.css at work. I then passed along the addition to the rest of the team. One of them (hi Ryan*), started to do some research into the code above and as an adjunct of that research came across a solution to the problem that was so simple and so clean that it really annoyed me that I didn’t know about it until last week. You can read about the solution in depth at the Sitepoint Blogs (3 years old!)
The simple and clean solution? Use overflow:auto on the containing div and it will, er, contain. Look at this simplified version:
Here’s the relevant CSS:
#container #content {
overflow:auto;
border:1px solid gray;
}
#container #copy {
width:140px;
border:.1em solid #CFCFCF;
float:left;
border:1px solid green;
}
#container #sidebar {
width:140px;
overflow:auto;
float:right;
blorder:1px solid pink;
}
#container #content #sidebar #sidebar-0{
float:left;
border:1px solid orange;
}
#container #content #sidebar #sidebar-1{
float:right;
border:1px solid purple;
}
#container #content #sidebar #sidebar-0,
#container #content #sidebar #sidebar-1 {
width: 65px;
}
#container #footer {
border:1px solid black;
}
I wish there was more to write about, but it’s really that simple. The biggest concern is that your math must work or else you’ll get scrollbars. With other versions of clearing floats, you were allowed to be a little looser with the calculations- if your sidebar actually leaked (overflowed) into the gutter beyond the edge of your container it didn’t actually matter since it would display correctly. With overflow:auto you don’t have that luxury. Of course, who wants to be sloppy? 
*link? Where should I link?
I recently did CSS/HTML and WordPress theming for Tom’s My Card. My Work. blog. Normally, I would get all that excited about a WordPress theme, since I’ve done several, but this one had a lot going for it from a CSS perspective. I’m actually really excited about it.
What’s so special about this one, you ask?
Well, for starters, there’s only one style sheet (1!) and in that one style sheet there’s a total of 0 (zero) rules included for a specific browser. It’s true. Actually, as the last step before I published it out to his server I deleted the lines in my template to pull in an IE6 or IE7 sheet. They were empty Across everything else? It just works. No hacks. No weird code. No nothing. Just one style sheet that works in pretty much every major (and minor) browser. I mean it, too- I tested the home page* in Browsercam and it only really fails on browsers that I don’t care about at all- IE5.2 on the Mac, Netscape 4.78, IE5.0 and IE5.5, etc.
I have seen the future**, and it is one style sheet with no hacks.
Hallelujah.
In fact, when coupled with another technique I used for the first time in this layout (using overflow:auto to clear floats) and the fact that it’s fully em-based and scales like a dream, this layout is probably the cleanest I’ve ever done- at least in terms of CSS.
Some time soon I’m going to clean the markup up further to get it in line with the level of the CSS in terms of cleanliness (I didn’t fully craft every line in the theme, using some default markup in places,) re-skin it and publish it out as a theme for folks to download. That’ll be pretty sweet.
Beyond that, which is going to take a little while so I’ve got to do something to tide you all over, I’m going to detail some of the techniques at play in the layout later on this weekend, starting with a head-slapping, *doh* filled post about the magical powers granted by my newfound knowledge of overflow:auto.
overflow:auto!
*Bugs will shake out in both the home page and other pages. I know this.
**Frighteningly it fails in IE8 beta, but then again it is a beta (fingers crossed)
I cleaned out my inbox at work.
Now if I could just purge my mind of some of the times behind some of the messages I deleted I’d be a happier person (and I’m pretty happy to start with )
Just in case you were wondering why things have been slower around here than usual, I’ve been incredibly busy over the past week. I’ve had plenty of day job to go around, plus two freelance web jobs (hi Devin) and one freelance writing gig all come to pass within the past seven days.
More on all of the above as time permits.
The good news is I’ve got just the one freelance gig to go (hi Tom) and then it’s back to business as usual- at least blog wise. I’ve got another Wordpress theme to go through in short order. At least that won’t be stacked on top of three other things.
Thankfully, because after this glowing review where Frank Bruni names it #1 in his list “Coast to Coast, Restaurants That Count“, a survey of the ten best new restaurants in America, I’m betting they’ll become just that much harder to come by.
“The quality of the ingredients, the warmth of the service and the coziness of the setting — a dark, weathered, brick-walled room that was built as a firehouse a century ago and rejects clichéd sushi-bar sleekness — will convince you of that.
“And you’ll walk out the restaurant’s inconspicuous front door, off a cobblestone alley in an oddly somnolent neighborhood near the main train station, wondering whether you should keep this little secret or shout it out loud.”
I was already excited, just based on word of mouth, but that review pushed my anticipation up a notch.
Sweet.
Their site:
I don’t know how many of these are “breakthroughs,” but if you really are getting an A (and even if you’re not), you might want to take a look at the following enhancements to squeeze the most out of your site’s performance:
Looking at the list, many are already very familiar to me, but there are definitely a couple I’m interested in learning more about- more than a full bullet points in the above slideshare. Hopefully the teaser of “more detail coming soon” in the YDN blog post will come to pass sooner rather than later.
And no, I don’t yet score an A, but I do get a 96 for the components I fully control, so I’m more than happy to look to other suggestions (like the ones below that I don’t already practice) to get this place running a little quicker.
1. Flush the buffer early [server]
2. Use GET for AJAX requests [server]
3. Post-load components [content]
4. Preload components [content]
5. Reduce the number of DOM elements [content]
6. Split components across domains [content]
7. Minimize the number of iframes [content]
8. No 404s [content]
9. Reduce cookie size [cookie]
10. Use cookie-free domains for components [cookie]
11. Minimize DOM access [javascript]
12. Develop smart event handlers [javascript]
13. Choose over @import [css]
14. Avoid filters [css]
15. Optimize images [images]
16. Optimize CSS sprites [images]
17. Don’t scale images in HTML [images]
18. Make favicon.ico small and cacheable [images]
19. Keep components under 25K [mobile]
20. Pack components into a multipart document [mobile]
More at the YDN blog:
Yes.
Great xkcd:
If I had more time today I’d grab a photo of Feynman and do a Photoshopped version :). No such luck today though- I’m a weekend behind on freelance work and am still knee deep in day job.
In 2007, Skinner successfully launched its Fine Wines department. Our retail partner in this venture is Lower Falls Wine Company, a third generation wine seller located just west of Boston. Skinner is the only major auction house in New England to offer fine wines at auction and our wine auctions draw both seasoned and new collectors eager to learn more about excellent vintages.
I’ve got some low-end bids in on some wine at the auction. Nothing extravagant, just a few bottles I’d love to win for bargain prices. All ready to drink, which is good since my birthday is coming up and every year I need to drown my sorrows a little more thoroughly. I just do it in better style now
In the post announcing that Yahoo! search results now has natural language support, the YDN blog offers up two audio samples that illustrate a screen reader reading mixed language text with and without the lang attribute. As you can plainly hear, the lang="fr" attribute makes a great difference in the performance of the screen reader when handling mixed language text.
As they point out, the attribute also allows search engines to more easily parse stop words, so there’s an SEO benefit as well.
The lesson here? Polyglots unite! In using the lang attribute.
(Now I run off to add it myself to all the French,Italian, etc. phrases I’ve got littered around the site.)
