Archive for ‘code’ category

Regarding HTML5

It was a hot Summer Sunday afternoon. I’d just stepped off the Acela Express from Boston to New York City, and I was confused as ever about HTML5. I thought I was alone. Impossible in mid-town Manhatt– no, alone in being confused about the next chapter of markup specifications. I figured something was wrong with me. Was I not reading up enough about HTML5? Well no, wait, I’d been doing a fair amount of reading up about HTML5, yet there was still this partial confusion about a number of aspects of the proposed spec.

Thankfully, a few friends old and new got together at Happy Cog headquarters to walk through the spec, noting along the way the areas that seemed problematic, confusing or otherwise unsettling.

Personally, I came away from that day less confused, but more importantly feeling more positive about HTML5 in general. Along with this newfound positiveness, came some clarity in specific portions of the spec that seemed troublesome. The rest of the group (I can take zero credit for its publication) crafted a “guide to HTML5 hiccups” in the hopes that the powers that be would listen and healthy debate might begin on these specifics.
A few of those items that stood out for me were:

  • Offering an HTML5 syntax option when validating. This has nothing to do with HTML5 itself, but it’s important for the validator to simply and easily add an option for checking syntax that would help to foster good coding habits, avoid head-scratching rendering issues, etc. That’s why I choose to code XHTML today — it’s a personal preference that helps me maintain, optimize and troubleshoot code, and I’ll continue with that convention no matter the doctype.
  • HTML5 introduces a lot of new elements. All at once. Some of which seem unnecessary (e.g. article, hgroup).
  • While at first I was cringing at the idea of redefining the semantics of certain elements, it does start to make sense. Instead of introducing even more elements, HTML5 reuses and redefines. For example, the small element would now “represent side comments such as small print”, rather than a presentation instruction for font size.
  • The concept of “sectioning content” I didn’t quite get at first from the high level overviews I’d been reading, but seen in practice, it’s quite excellent (e.g. where the section dictates scope of the heading elements it contains).
  • That said, folks will use header and footer for exactly the areas that they’re now assigning IDs with those terms, while in HTML5 they can mean different things (header and footer of a section, for which there could be many on a page).
    I still have an enormous amount to learn about HTML5, am still concerned about certain aspects of it, but overall optimistic about the future of markup.

Handcrafted Haiku Winners Announced

Well, we loved them all, and agonized over choosing two winners to receive a ticket to next month’s Handcrafted CSS workshop. But decide we did!

Winner #1 is @wilto, waxing poetic about a place we’ve all been, surely:

IE6 lives on.
Box model—and heart—broken.
position: fetal;

And Winner #2 is @squaregirl , who in three perfectly penned lines reminds us of the importance of validation during development:

Curly braces sound cute.
Until you leave one out. Oops!
I fracked my stylesheet.

Congrats to the winners! And thanks again to the fine folks at Campaign Monitor for sending them to the workshop. Which, by the way, is only a little over two weeks away. Spaces are being filled up, so grab a ticket and join us in Salem, won’t you?

Handcrafted CSS: The Workshop

Now that we’ve announced the book, we can also announce another exciting thing: Handcrafted CSS: A Day of Markup & Style will be a unique, one-day workshop presented by Ethan Marcotte and myself on September 14, 2009 at the Hawthorne Hotel here in Salem, Massachusetts.

You’ll get a copy of the book (the Video Edition, including the DVD), and we’ll present the content live, throughout four takeway-packed sessions, followed by Q&A. Breakfast, lunch and two snack breaks are also provided. And we’ll cap off the day with an after party at an awesome location to be determined.

The Hawthorne Hotel is located in downtown Salem, just 16 miles north of Boston. It’s also just a 10-minute walk from the MBTA Commuter Rail station which connects Salem to Boston in about 25 minutes.

This will be a unique opportunity to buy a book, then have the authors work through it live, with a chance to ask questions along the way. It’s sure to be a fun day — and we’re pretty damned excited about it.

Early-bird and student tickets are now available at a discounted price of $399 per person. Act quick! There’s limited seating for 100 fine people like you.

Oh, and interested in sponsoring the event? We’d love to hear from you.

How I Might Deal with IE6

Eight years ago (almost to the day), Jeffrey Zeldman wrote, To Hell With Bad Browsers, signaling the dawning of “The CSS Age”. Explaining how the use of @import for referencing stylesheets is ignored by Netscape 4, was an important step in shedding away the problems related to supporting an ancient browser. Eight. Years.

Completely ignoring a browser in terms of CSS is a wonderfully freeing thing. It certainly can’t be done on every site. The important thing to remember is that it’s a site’s statistics that should determine what level of support you decide to offer.

Later, IE5/Mac became a problem. I began giving it the same “talk to the hand” treatment that NN4 was receiving by using the backslash comment hack years ago:

/* import stylesheets and hide from ie/mac \*/
@import url("screen.css");
/* end import and hide */

Now, in 2009, IE6 has become the source of our frustrations — and for certain sites, giving it an unstyled, naked view is exactly what I want to do. Alpha-channel PNGs, min-width, max-width, rendering bugs galore — there are plenty of sites I’ve designed and maintain where the IE6 stats are low enough to drop the axe and move on. Now is the time!

So what’s the easiest solution? I was chatting with Ethan about using conditional comments to hide styles from IE6 only, and after a bit of Googling, we found Simon Clayson’s article, where he cleverly does the following:


<!--[if !IE]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="screen.css" />
<!--<![endif]-->

<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="screen.css" />
<![endif]-->

This hides all styles (assuming they’re all contained within screen.css) from all versions of IE, but then re-applies them for IE versions 7 and greater. Lucky visitors that are using IE6 or lower will get an unstyled view of the site, just like the lucky visitors using NN4 have been getting for close to a decade.

Simon’s method also serves up a bare-bones CSS file specifically for IE6, but I think that’s being too polite :) Another real-world example of this method in practice, is The Rissington Podcast, which cleverly serves an IE6 stylesheet complete with Comic Sans.

What’s nice about this approach is that you’re not having IE6 import all your styles, having to worry about overriding them later. You could serve IE6 with a minimal stylesheet starting completely from scratch. Or none at all.

Is it a bit hacky? Sure. But in certain situations, not having the burden to worry about IE6 seems well worth it.

Have a better solution? Let us know in the comments.

Update: Commenter Daniel James might’ve simplified things down to a single conditional comment, like so:


<!--[if gte IE 7]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="screen.css" />
<!--<![endif]-->

I’ve tested in Mac: Safari, FF3, Opera and PC: IE6, IE7, IE8beta, FF2. More testing required, but this looks very promising.

Hack’d

I spent yesterday cleaning up some awful link spam that littered several of the domains I own. Some crafty fellow had stuffed hidden links to illegal MP3 sites in the footer of as many index files as they could find. I thought it’d be a good idea to document it in case anyone else runs into the same dilemma. Plus, hey, an excuse to write a multi-paragraph entry. Go me.

I’m not exactly sure _how_ the account was compromised, and I’d hate to point fingers without knowing. Could’ve been either of the two popular blogging software applications that are installed. Or it could’ve been a hack to the server in general. After some digging and some Googling, it turned out someone else had the exact same problem. A hidden directory was including a PHP file that was in turn including a .txt file filled with SEO spam and inserting it by IP address to most of my domains. I quickly deleted these files, but the links were still there.

The baffling part was that when opening any of the compromised files, the links weren’t in the source. Grepp’ing for the spam had it showing up in multiple files, but opening the file to edit showed nothing, leaving me to believe that the links were being dynamically inserted somehow. It took a helpful tech support agent to show me I’d fallen for one of the oldest tricks in the book: the huge block of spam links was just _indented_ a ridiculous amount. I hadn’t noticed the horizontal scrollbar at the bottom of the text editor, and sure enough scrolling over approximately 10,367 pixels to the right, there the spam was.

So after cleaning up 20 or so index files, changing passwords and updating software, all seems well again. If you run into link spam, and the usual fixes don’t help, check your logs for suspicious .txt includes, and beware of the “massive indent”.

Gridlasticness

After a brief period of unstyledness, we’re back with a realign and overhaul of simplebits.com. Aesthetically, it’s not much of a departure from the previous design—but under the hood is new markup, new stylesheets and a strict grid layout based on ems. After moving into new physical digs last month (more on this later), it only seemed appropriate to spruce up the virtual ones as well.

As usual, the overhaul started innocently enough, with a little tinkering here and there that snowballed into tearing the old CSS out, while the site embarrassingly stood naked for a week. But the challenge of creating a em-based grid was too tantalizing (the second time I’ve used that word in as many days).

A few notes when trying to create a grid layout using ems:

  • Using the 62.5% method for sizing text has the advantage of setting gutters, borders, etc. at values of ten (e.g. 1em = 10px).
  • Remember to avoid specifying widths and font-size on the same element (or at least be consistent about it).
  • Realize that when adjusting text size in Safari, the grid will only stay perfect on a random bump. Firefox seems to stay intact at all times. I assume this is due to a rounding discrepancy.
  • Understand that when building an already-wide layout, it’ll get really wide, really fast. That’s OK. Wide is the new drop shadow.
  • Have plenty of coffee at hand.

A large motivation for this tinkering had to do with the Notebook entry styling. I’ve tweaked the MovableType templates to enable posting of quotes and photos as well as long entries and QuickBits (links). A “tumblelog” as the kids would call it. That doesn’t mean there’ll be 100 posts a day—but it does mean (I hope) more posting in general.

Now if you’ll excuse me, there are several dusty corners to clean up around here.

Way #24

For the second year in-a-row, Drew McLellan has put together another excellent 24 Ways — an advent calendar of helpful web articles written by fine folks from all over the web.

To cap off this year’s set, I’ve contributed Gravity-Defying Page Corners, a simple little trick for adding dimension to a plain ol’ box. It also might the first (and after reading you’ll probably be thinking “hopefully last“) web tutorial written in verse. It’s corny for sure, but fun to write and hopefully read. Many thanks to Drew for wrapping up 48 presents to us all.

London(e)

About an hour into the flight to London from Boston, I spilled a full glass of cranberry juice in my lap. There are several reasons why this was unpleasant, and they all include the words “embarrassed”, “sticky” and “no, I didn’t just pee my pants”.

I’ve now returned from @media on Father’s Day. It was a great trip despite the soggy flight out, and it’s really good to be back home with the family.

Many thanks to Patrick for inviting me to speak. I think it went just fine, and I especially enjoyed the questions at the end of the talk. We watched England win the World Cup match the previous night, so I knew there’d at least be smiling faces in the audience. For those that attended the session, I’ve posted the presentation slides (20MB PDF). Warning: they won’t be of much use without the commentary.

It’s always fun meeting new faces for the first time at these conferences, and @media was no exception. It’s the genuine friendliness of the people in this community that never seems to wear out. Fun times are a given. Wish I had the time/energy to list them all here, but it’s late. I also wish I had taken more photos, but what I did take are now up on Flickr.

*Update:* I forgot to mention, I successfully spent the torn note at a hotel pub after the @media party. Either my taping job was superb, or it was dark enough to go unnoticeable. Whew.

Arkanoid Edition

Another year, another realignment. What started out as a long-term desire to take better advantage of the footer (putting content chunks that were previously in the sidebar down near the bottom) quickly turned into more of a CSS refresh. This version is dubbed “Arkanoid Edition” (coined by Ethan and will make sense to anyone that spent their afternoons at the arcade in the 80s).

There are too many dusty corners to clean up, and so there very well might be some areas that still need attention. But somehow this feels more comfortable right now. The colors are toned down a bit, columns feel a bit more readable, etc. Surely not everyone will be a fan, but such is the life of a web site. Change is good. But it can also be disorienting.

Boxy, but Nice

One of the struggles with the SimpleBits logo is that it’s not a logo at all. It’s an icon. And works terribly in print unless it’s enlarged properly. I’ve debated changing the logo, always settling on maintaining the brand, and instead embracing its pixellated charm. Hence the square, blocky treatments that will likely warm the hearts of 8-bit fans and yet turn away the warm-and-fuzzy brigade.

Fluidity

I’m no longer straddling the fixed/fluid fence! Previous versions of this site featured a little toggle up in the top right corner enabling you to switch between a fixed or fluid width by means of a little Javasript and an alternate stylesheet. How diplomatic. With this new design, I thought I’d try a centered, fluid layout, using left and right padding on the body using a percentage value. That coupled with a conservative max-width set at 900px makes for a wider-but-not-too-wide solution. If only max-width (and min-width) worked in IE (aside from the Javascript fixes that exist).

Hiding from IE/Mac

I’ve also decided to intentionally hide all CSS from IE/Mac this time around. It’s not that it would be impossible (or even that difficult) to get this particular design working. It’s just that, for this site, it’s time to move on and have one less set of hacks to worry about.

What’s great, is that it’s dead simple to hide CSS from IE/Mac using the commented backslash hack just before importing your styles. Here’s my main stylesheet, screen.css, which imports the master styles as well patches for IE/Win.

/* import stylesheets and hide from ie/mac \*/
@import url("master.css");
@import url("ie.css");
/* end import/hide */

IE/Mac won’t get any of it because of that backslash at the end of the opening comment. And this is certainly OK for SimpleBits. Your site’s statistics may vary.

Posterity

Archived for posterity, and a comparison for those arriving here today for the first time, is a screenshot of the previous design.

CSS Patches

The term “hack” implies that a legitimate solution to the problem exists. Yet, in order to save time, or perhaps due to lack of knowledge, a sloppy fix is applied to just get the job done. “Let’s hack at it, ’till it works”. But is this the case in terms of CSS hacks? Sure, we call them “hacks”, when in reality they’re really patches. Patches that fix known, documented problems in certain browsers.

I know it’s really just a term, but the problem is this: by using “hack” to describe often necessary code, a negative connotation can be attached, even if what we’re really doing is compensating for a browser’s shortcomings. When you hear someone say: “I avoid all hacks”, you’ve witnessed this negative connotation. Heck, we’d all love to avoid hacks — but we’re also realistic, living in the real world, and designing in 2005.

Now think about the term “patch”. It brings to mind, mending something that’s broken. It’s rip or tear is clearly visible — we know it’s broken, and we know what we need to do to make it look better. We’re not cutting corners, we’re applying a fix.

Perhaps from now on, I’ll refer to fixes for gems like the double float margin bug, or the three-pixel text jog as, well… patches.