Posts from 2012

Jen Simmons and I are very pleased to announce that our first guest on The Web Behind will be none other than John Allsopp.

Hailing from Sydney, Australia, John by himself has seen and done more on the web than most web teams put together.  First encountering the web in the early 1990s, he built one of the very first CSS tools, Style Master, and a number of other web development tools; published a wealth of information like support charts and free courses; wrote the deeply insightful and far-seeing article “A Dao of Web Design”; influenced the course of the Web Standards Project; and founded a successful international conference series that continues to this day.

We’re incredibly excited to have John as our inaugural guest, and hope you’ll join us for the live recording this Thursday, September 20th at 6pm Eastern/3pm Pacific.  That’s also Friday, September 21st at 8am Sydney time, and 2200 UTC if you want to calculate your own local offsets.  The time zone dance is the reason we’re recording the first show at that particular time.  Moving forward, the plan is to record on Wednesdays, usually mid-afternoon (US Eastern) but sometimes in the morning — again, depending on the time zones of our guests.

Be able to say you were there when it all started:  please join us for the live recording, and subscribe to get the finished podcasts as they’re released.  We already have some great guests lined up for subsequent shows — more on that as we firm up dates and times — and some interesting plans for the future.  We really hope you’ll be there with us!

• John Allsopp to Inaugurate ‘The Web Behind’ was published on Tuesday, September 18th, 2012.
• It was assigned to the History, Projects, The Web Behind, and Web categories.
• There has been one reply.

Whenever I meet a new person and we get to talking about our personal lives, one of the things that seems to surprise people the most, besides the fact that I live in Cleveland and not in New York City or San Francisco, is that I have a Bachelor’s of Art in History.  The closest I came to Computer Science was a minor concentration in Artifical Intelligence, and in all honesty it was more of a philosophical study.

To me, history is vital.  As a species, we’ve made a plethora of mistakes and done myriad things right, and the record (and outcomes) of those successes and failures can tell us a great deal about how we got to where we are as well as where we might go.  (Also, from a narrative standpoint, history is the greatest and most authentic story we’ve ever told — even the parts that are untrue.)  The combination of that interest and my ongoing passion for the web is what led me to join the W3C’s recently formed Web History Community Group, where efforts to preserve (digital) historical artifacts are slowly coalescing.

But even more importantly, it’s what has led me to establish a new web history podcast in association with Jen Simmons of The Web Ahead.  The goal of this podcast, which is a subset of The Web Ahead, is to interview people who made the web today possible.  The guests will be authors, programmers, designers, vendors, toolmakers, hobbyists, academics: some whose names you’ll instantly recognize, and others who you’ve never heard of even though they helped shape everything we do.  We want to bring you their stories, get their insights and perspectives, and find out what they’ve been doing of late.  The Mac community has folklore.org; I hope that this podcast will help start to build an similar archive for the web.  You can hear us talk about it a bit on The Web Ahead #34, where we announce our first guest as well as the date and time for our first show!  (Semi-spoiler: it’s next week.)

Jen and I have took to calling this project The Web Behind in our emails, and the name stuck.  It really is a subset of The Web Ahead, so if you’re already subscribed to The Web Ahead, then episodes of The Web Behind will come to you automatically!  If not, and you’re interested, then please subscribe!  We already have some great guests lined up, and will announce the first few very soon.

I haven’t been this excited about a new project in quite some time, so I very much hope you’ll join Jen and me (and be patient as I relearn my radio chops) for a look back that will help to illuminate both our present and our future.

• The Web Behind was published on Tuesday, September 11th, 2012.
• It was assigned to the Culture, History, Projects, The Web Behind, and Web categories.
• There have been eight replies.

It’s a little bit hard to comprehend just how incredible a year we’ve had at An Event Apart.  Our colleagues in the audience as well as on stage have been consistently sharp, engaging, and all-around amazing, and I don’t think Jeffrey and I could thank everyone enough even if we were given three lifetimes to tackle the project.  With all seven shows this year selling out (some months in advance), we’ve taken the next step and have scheduled eight shows next year, a figure that occasionally causes me to go a little short of breath at the sheer wonder of it all.  I think back on the hundred-odd people who filled the room at our very first event, tucked away in the upper back corner of Philadelphia’s Franklin Institute back in 2005, and can scarcely believe how far we’ve come.

If you’re inclined to join us in 2013, and I really hope you are, here are the cities and dates:

• Atlanta – February 18-20
• Seattle – April 1-3
• San Diego – May 20-22
• Boston – June 24-26
• Washington, DC – August 5-7
• Chicago – August 26-28
• Austin – September 30-October 2
• San Francisco – December 9-11

Back to San Diego — hooray!  I looove to visit San Diego.

As was the case this year, all eight of 2013’s shows will feature a mix of new and familiar speakers presenting all-new talks shedding light on old problems and new ideas.  Thus not every show’s lineup is yet complete:  while we already have some speakers confirmed and announced for every event, we’re leaving the later shows in the year open so we can add fresh speakers and timely content.

Since all eight shows went on sale last month we’ve already had a bunch of people register, so you should definitely get those approval processes moving now if you want to avoid being shut out.  We had lengthy waiting lists at every 2012 show, and there were very few cancellations.  It never feels good to turn people away, but the venues’ capacities are what they are!

Being a part of An event Apart has been an amazing experience for me and for so many people, and our overriding goal is to make 2013 even better.  I hope you’ll join us!

• An Event Apart 2013 was published on Monday, September 10th, 2012.
• It was assigned to the An Event Apart and Projects categories.
• There have been two replies.

On Tuesday — and I fully acknowledge the fact that it’s taken me until now to blog this is emblematic — A List Apart published the results of the fifth annual A List Apart Survey for People Who Make Websites.  This includes anonymized data sets for the bulk of the survey, as well as standalone data sets for postcodes and a few of the answer sets for questions that allowed “Other” as an option.  (Note that these last were shuffled-then-sorted, and were not filtered for potentially objectionable content.  They are what they are.)

If you really want the TL;DR version, the results are largely the same as they’ve been in the past.  The gender ratio, for example, is still in the vicinity of 5-to-1 male-to-female, with half a percent answering Other (a new option in the 2011 survey).  Most respondents are in the age range 19-44 and live in the United States.  And so on.  That might sound like I’m bored by the results, but their very consistency even as the number of respondents has dropped over five years fascinates me.

It did take quite a while to publish the results.  I feel personally very bad about the delay, because I run the numbers and it just took me a long time to get them run.  Partly, I admit, I put it off because some of the numbers in previous years were a royal pain to generate, thanks in part to the way the data is formatted and in part because of the fine slicing that was done.  This was finally addressed through various means, and now the report is done.  I can’t thank Sara Wachter-Boettcher enough for her keen editing eye and firm strategic oversight, not to mention writing all the commentary text to accompany the charts.  If not for her, the report might still not be done.  And of course without the unwavering support and dedication of Jeffrey Zeldman, the survey might not have existed at all.

So we’ve done this five times, and the results are consistent.  What now?  There is much to discuss, and the answers aren’t yet clear; but I do know that this project brings me more professional pride than almost anything I’ve ever done.  It tells us a lot about ourselves — and in a profession that is often characterized by single-person “web teams” and distributed offices, one which may never have a certification process or other form of registry, that’s something valuable.  Thank you for helping us see ourselves a little bit more clearly.

• Results From The Survey, 2011 was published on Thursday, September 6th, 2012.
• It was assigned to the Projects and Web categories.
• There have been five replies.

I’ve been a fan of “The Cicada Principle” since it was first published.  After wandering through a CSS gradients gallery or two back in April, it occurred to me that it ought to be simple to merge the two things.  So I did: thus was born “Cicadients”.  It took me until now to actually blog about it because, well, you know, things were, hey, what’s that weird thing over there?

What?

As a recap, the Cicada Principle states that if you pick a few simple patterns that repeat at prime-number intervals, you can create complicated patterns that only repeat at intervals that are the product of the individual intervals.  For example, if you have patterns that repeat every 3, 5, and 7 pixels (respectively), the combination of the three will repeat every 3×5×7 pixels, which is to say every 105 pixels.  Bump up the intervals, and you get some truly staggering numbers.  For example, shift up to 7, 11, and 13 pixels and their combination repeat every 1,001 pixels; combining 11, 13, and 17 gets you 2,431; combining 13, 17, and 23 yields 5,083.

The examples presented in the original article use semi-opaque PNGs to achieve this effect.  All I did was replace their images with images of my own; to wit, CSS gradients.  (Yes, gradients are images, every bit as much as any PNG.  They’re just described differently.)  In doing so, I not only reduced server hits, but I also saved a fair number of bytes.  In the first case, I did so while achieving pixel-perfect fidelity to the original.  In the second case, I didn’t make it exactly the same as the original, but I got fairly close in 0.63KB (2.81KB with prefixes).  I could probably get closer to the original with a little more effort — a couple of my gradients are a little too smeary — but that will probably wait a while, if I ever get to it at all.  But, again, the final result is a kilobyte or two; the original example was 23KB plus extra server hits.

That was the real reason for my efforts, aside from the simple pleasure of doing it: to find out how much more efficient a gradient could be than a raster image in appropriate situations.  I had expected some savings with gradients, but I was frankly astounded by how much was saved.  You can do a lot more with gradients than sunset backgrounds and lickable button highlights.

Of course, gradients are not right for every situation: the third example in “The Cicada Principle”, for example, should only be done with gradients as an example of how not to do it.  Possibly also as a public declaration of deep masochistic tendencies.  Either way, you’d probably crash browsers, and that’s currently the job of radial gradients.

I’ll be very interested to see if people come up with their own cicadient examples.  If you do, let us know about them in the comments!

• Cicadients was published on Friday, June 22nd, 2012.
• It was assigned to the CSS and Projects categories.
• There have been ten replies.

Just a quick followup on HSL color visualizations and CSS: The Definitive Guide.

To take those two things in reverse, I got word from my editor that color is definitely an option for the book, though the exact form it will take is not 100% certain.  The options range from an insert of color plates to printing color on a per-page as-needed basis, and it’s hard right now to know what will make the most sense for the book and its price.  We’re hoping for the per-page approach, but it will depend on just how fast color prices plunge in the near(ish) future and what the book requires.  The glorious, glorious upshot is that I can abandon all thought of grayscale requirements and only concentrate on avoiding light yellows, which I guess print badly.

As for visualizations, I created another to go with the HSL-16 and HSL-147 visualizations I mentioned in an earlier post:

• Getting HSL from RGB  —  a look at how the arrangement and fading of the three primaries yields the complete hue wheel.  Its point is a little less obvious than the others, but (I hope) only by a little.  If you’ve ever wondered how RGB and the hue part of HSL relate to each other, this visualization should help answer the question.

I think I’m done with visualizing colors for now, but I think I said that before, so you never know.  I mean, you know, colors, man!  What do they mean?

• Visualizing Colors Again was published on Thursday, June 14th, 2012.
• It was assigned to the CSS and Projects categories.
• There have been seven replies.

I just recently came across one of those things that’s really obvious once you stop to think about it, and might be really obvious if you think about it from the right angle, but can trip you up if you come at it from a slightly different direction.

Consider the following two rules, which are equivalent:

li:not(.skip):nth-of-type(odd);
li:nth-of-type(odd):not(.skip);

First off, the order doesn’t matter.  The result is exactly the same no matter which way you write it, which is why I wrote the same thing twice.

Either way, the selector will select the odd-numbered li elements that share a common parent, but not those which have a class of skip.  What it does not do is select the odd-numbered li elements without a class of skip that share a common parent.

Did you catch the distinction?  Natural-language ambiguity (languaguity?) may obscure the precise meaning.  Here’s some example markup (adapted from a test file I set up):

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li class="skip">Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
</ul>

The list items selected by either of the previous selectors will be numbers 1 and 5.  Numbers 4 and 6 will never be selected, because they are not odd-numbered members of this set of li elements.  Remember, nth-of-type() refers to element types, as in li or p or h4.  It doesn’t refer to “this type of thing that I am trying to describe here in this whole selector”.

Another way of stating this is that the negation pseudo-class does not act as a filter for the :nth-of-type() portion of the selector.  There is no “do this, then that” ordering of pseudo-classes.  They must both apply, considered independently of each other, for an element to be matched.  (This may remind you of the effects caused by the lack of element proximity, though the root causes are rather different.)

There is a (fairly solid-looking) proposal in CSS4 Selectors called :nth-match() that should allow authors to set up a condition where list items 4 and 6 get selected — for example, :nth-match(odd of li:not(.skip)), unless of course the syntax gets changed — but that’s for the future.  For now, if you need to select every other element of a matched set, you’ll need some scripting to help you out.

• Combining ‘nth-of-type()’ With Negation was published on Tuesday, June 12th, 2012.
• It was assigned to the CSS category.
• There have been five replies.

I’ve been working through and rewriting the chapters of CSS: The Definitive Guide for its fourth edition, and at present I’m nearing the end of chapter 4, “Values and Units”.  That means I just worked through the color values, which required a lot more of a rewrite than you might think.  After all, when the third edition came out, RGBa, HSL, and HSLa weren’t viable options, so they didn’t get coverage.  Expanding the color-values section to incorporate them posed two major challenges.

First, I couldn’t just drop them in as add-ons; the whole section had to be partially rearranged, and chunks of the text rewritten or replaced.  Okay, yes, I admit, that’s par for the new-edition course, and I’m not complaining so much as describing.  The far more troubling challenge: how to explain HSL in a grayscale book.

(I should note that I’m hoping to convince O’Reilly to make the move to color, even though that likely means reshooting damn near every figure in the text.  Even if full color for 600-700 pages is not economically viable, which has always been the problem in the past, then I’m hoping for at least a set of color plates.  We’ll see!  At present, though, I have to assume we’ll be committing grayscale to paper.)

Partly the challenge here is one of clear explanation and illustration, which is never easy even in the most ideal of environments; but the other part is that I’ve never really been comfortable with HSL.  I know it’s held to be far more intuitive than RGB, but I have 30 years of RGB experience and next to no HSL experience.  I can’t help but have that color my perception (ah HA ha).

In an effort to overcome my discomfort, I started messing around with the relationships between HSL and more familiar colors, starting with keyword sets.  I’ve spun two visualizations out of that effort:

• HTML4 Color Keywords in HSL — wherein I map the sixteen color keywords defined in HTML4 onto an HSL color wheel and grayscale bar.  What I really like about the end result is the clear evidence of careful color selection.  It’s a balanced set, at least mathematically, and seeing the relationships between the colors and thus how to present them helped me develop a fair amount of HSL intuition.

  This was also an excuse to attempt cleverness with CSS Transforms.  The results please me.

• SVG/CSS3 Color Keyword Distribution — mapping out how the full set of 147 SVG/CSS3 (neé X11) color keywords are distributed around the hue wheel.  Not very well, as it turns out.  I don’t know that this taught me very much about HSL itself, but I did get a firmer grip on the interplay between saturation, lightness, and luminance, all of which helped a great deal in the arrangement of the ‘spikes’.

  This one turned into an excuse to play with canvas drawing, after Mårten Björk responded to a Twitter request with a huge head start on the problem.  Originally, this was going to be another Transformapalooza, but I’m glad it went in this direction instead.

Thanks to these visualizations and (more importantly) the programming and thinking I did to create them, I’m now much more comfortable with HSL.  As a result, the “HSL and HSLa Colors” section of chapter 4 is a lot better than it would have been.  I even came up with what I think are some pretty good ways for illustrating HSL in a grayscale environment and ways to link it to the RGB model for the benefit of people like me.  The book will be a lot better for it when it finally comes out.  In the meantime, I hope you enjoy the visualizations!

• Visualizing Colors in HSL Space was published on Monday, June 4th, 2012.
• It was assigned to the CSS and Projects categories.
• There have been seven replies.