Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Archive: 'Web' Category

CSS:TDG Update

It’s time for a semi-periodic update on CSS: The Definitive Guide, 4th Edition!  The basic news is that things are proceeding, albeit slowly.  Eight chapters are even now available as ebooks or, in most cases, print-on-demand titles.  Behold:

  • CSS and Documents, which covers the raw basics of how CSS is associated with HTML, including some of the more obscure ways of strapping external styles to the document as well as media query syntax.  It’s free to download in any of the various formats O’Reilly offers.
  • Selectors, Specificity, and the Cascade, which combines two chapters to cover all of the various Level 3 selector patterns as well as the inner details of how specificity, inheritance, and cascade.
  • Values, Units and Colors, which covers all the various ways you can label numbers as well as use strings.  It also takes advantage of the new cheapness of color printing to use a bunch of nice color-value figures that aren’t forced to be all in grayscale.
  • CSS Fonts, which dives into the gory details of @font-face and how it can deeply affect the use of font-related properties, both those we use widely as well as many that are quickly gaining browser support.
  • CSS Text, which covers all the text styles that aren’t concerned with setting the font face—stuff like indenting, decoration, drop shadows, white-space handling, and so on.
  • Basic Visual Formatting in CSS, which covers how block, inline, inline-block, and other boxes are constructed, including the surprisingly-complicated topic of how lines of text are constructed.  Very fundamental stuff, but of course fundamentals are called that for a reason.
  • Transforms in CSS, which is currently FREE in ebook format, covers the transform property and its closely related properties.  2D, 3D, it’s all here.
  • Colors, Backgrounds, and Gradients, which covers those three topics in FULL GLORIOUS COLOR, fittingly enough.  Curious about the new background sizing options?  Ever wondered exactly how linear and radial gradients are constructed?  This book will tell you all that, and more.

Here’s what I have planned to write next:

  • Padding, Borders, Outlines, and Margins — including the surprisingly tricky border-image
  • Positioning – basically an update, with new and unexpected twists that have been revealed over the years (case in point)
  • Grid Layout – though this is coming faster than many of us realize, I may put this one off for a little bit while we see how browser implementations go, and find out what changes happen as a result

My co-author, Estelle, has these three chapters/short books currently in process:

  • Transitions
  • Animations
  • Flexbox

Beyond those 14 chapters, we have eight more on the roster, covering topics like floating, multicolumn layout, shapes, and more.  CSS is big now, y’all.

So that’s where we are right now.  Our hope is to have the whole thing written by the middle of 2016, at which point some interesting questions will have to be answered.  While most of the book is fine in grayscale, there are some chapters (like Colors, Backgrounds, and Gradients) that really beenfit from being in color.  Printing a 22-chapter book in color would make it punishingly expensive, even with today’s drastically lower cost of color printing.  So what to do?

Not to mention, printing a 22-chapter book is its own level of difficulty.  Even if we assume an average of 40 pages a chapter—an unreasonabnly low figure, but let’s go with it—that’s still a nine hundred page book, once you add front and back matter.  The binding requirements alone gets us into the realm of punishingly expensive, even without color.

Of course, ebook readers don’t have to care about any of that, but some people (like me) really do prefer paper.  So there will be some interesting discussions.  Print in two volumes?  Sell the individual chapter books in a giant boxed set, Chronicles of Narnia style?  We’ll see!

Content Blocking Primer

Content blockers have arrived, as I’m sure you’re aware by now.  They’re more commonly referred to as ad blockers, but they’re much more than that, really.  In fact, they’re a time machine.

Consider: a user who runs a content blocker can prevent the loading of Javascript, CSS, cookies, and web fonts.  (They can block more than that, but those asset types seem to be the main targets thus far.)  A person loading an article or other page from a web site gets the content, and that’s it, assuming the publisher hasn’t put some sort of “go away” server-side script in place.

Sound familiar?  It should.  We’ve been here before.  It’s 1995 all over again.

And, just as in 1995, publishers are faced with a landscape where they’re not sure how to make money, or even if they can make money.

Content blockers are a two-decade reset button.  We’re right back where we were, twenty years ago.  Except this: we already know a bunch of stuff that doesn’t work.

I don’t mean that ads don’t work.  Ads can work.  We’ve seen small, independent ad networks like The Deck do pretty okay.  They didn’t make anyone a billionaire, but they provided a good audience to advertisers via a low-impact mechanism, and some earnings for those who ran the ads and the network.

The ads that are at risk now are the ones delivered via bloated, badly managed, security-risk mechanisms.  In other words: what’s at risk here is terrible web development.

Granted, the development of these ads was so terrible that it made the entire mobile web ecosystem appear far more broken that it actually is, and prompted multiple attempts to rein it in.  Now we have content blockers, which are basically the nuclear option: if you aren’t going to even attempt to respect your customers, they’re happy to torch your entire infrastructure.

Ethical?  Moral?  Rational?  Hell if I know or care.  Content blockers became the top paid apps within hours of iOS9’s release, and remain so.  The market is speaking incredibly loudly.  It’s almost impossible not to hear it.  The roar is so loud, in fact, it’s difficult to make out what people are actually saying.

I have my interpretation of their shouting, but I’m going to keep it to myself.  The observation I really want to make is this: the entire industry is being given a do-over here.  Not the ad industry; the web industry.

Remember, this isn’t just about ads.  Ads are emblematic of the root problem, but they’re not the actual root problem.  If ads were the sole concern of content blockers, then the blockers (mostly) wouldn’t bother to block web fonts.  It’s possible to use web fonts smartly and efficiently, but most sites don’t, so web fonts are a major culprit in slow mobile load times.  The same is true for Javascript, whether it’s served by an ad network, an analytics engine, or some other source.  So they’re both targeted by blockers—not for enabling ads, but for disabling the web.

Content blockers strip the web back to what it was 20 years ago.  All the same challenges and questions are back, full force.  How do we make sites better, smarter, and cooler?  How do we make money by publishing online?

There are reputations and probably fortunes to be made by learning from our many mistakes and finding new, smarter ways to move forward.  I would advocate that people start with the core principles of the web standards movement, particularly progressive enhancement, but those are starting points, a foundation—just as they always were.

It’s not often that an entire industry gets an almost literal do-over.  We have two decades of hindsight to work with now, as we try to figure out how to (re)build a web where users don’t feel like they need content blockers just to be online.  This is an incredibly rare and exciting juncture.  Let’s not waste it.


Facebook is emotionally smarter than we give it credit for, though perhaps not as algorithmically smart as it could be.

I’ve been pondering this for a few weeks now, and Zeynep Tufekci’s “Facebook and the Tyranny of the ‘Like’ in a Difficult World” prodded me to consolidate my thoughts.

(Note: This is not about what Tufekci writes about, exactly, and is not meant as a rebuttal to her argument.  I agree with her that post-ranking algorithms need to be smarter.  I also believe there are design solutions needed to compensate for the unthinking nature of those algorithms, but that’s a topic for another time.)

Tufekci’s piece perfectly describes the asymmetrical nature of Facebook’s “engagement” mechanisms, commented on for years: there is no negative mirror for the “Like” button.  As she says:

Of course he cannot like it. Nobody can. How could anyone like such an awful video?

What happens then to the video? Not much. It will mostly get ignored, because my social network has no way to signal to the algorithm that this is something they care about.

What I’ve been thinking of late is that the people in her network can comment as a way to signal their interest, caring, engagement, whatever you want to call it.  When “Like” doesn’t fit, comments are all that’s left, and I think that’s appropriate.

In a situation like Tufekci describes, or any post that deals with the difficult side of life, comments are exactly what’s called for.  Imagine if there were a “Dislike” button.  How many would just click it without commenting?  Before you answer that question, consider: how many click “Like” without commenting?  How many more would use “Dislike” as a way to avoid dealing with the situation at hand?

When someone posts something difficult—about themselves, or someone they care about, or the state of the world—they are most likely seeking the support of their community.  They’re asking to be heard.  Comments fill that need.  In an era of Likes and Faves and Stars and Hearts, a comment (usually) shows at least some measure of thought and consideration.  It shows that the poster has been heard.

Many of those posts can be hard to respond to.  I know, because many of the Facebook posts my wife and I were making two years (and one year) ago right now were doubtless incredibly hard to read.  I remember many people leaving comments along the lines of, “I don’t know what to say, but I’m thinking of you all.”  And even that probably felt awkward and insufficient to those who left such comments.  Crisis and grief and fear in others can make us very uncomfortable.  Pushing past that discomfort to say a few words is a huge show of support.  It matters.

Adding “Dislike” would be a step backward, in terms of emotional intelligence.  It could too easily rob people who post about the difficult parts of life of something they clearly seek.

Undoing oncut/oncopy/onpaste Falsities

Inspired by Ryan Joy’s excellent and deservedly popular tweet, I wrote a small, not-terribly-smart Javascript function to undo cut/copy/paste blocking in HTML.

function fixCCP() {
   var elems = document.getElementsByTagName('*');
   var attrs = ['onpaste','oncopy','oncut'];
   for (i = 0; i < elems.length; i++) {
      for (j = 0; j < attrs.length; j++) {
         if (elems[i].getAttribute(attrs[j])) {
            .replace("return false","return true"));

Here it is as a bookmarklet, if you still roll that way (as I do): fixCCP.  Thanks to the Bookmarklet Maker at for helping me out with that!

If there are obvious improvements to be made to its functionality, let me know and I’ll throw it up on Github.

Warning Hashflags

Over the weekend, I published “Time and Emotion” on The Pastry Box, in which I pondered the way we’re creating the data that the data-miners of the future will use to (literally) thoughtlessly construct emotional minefields—if we don’t work to turn away from that outcome.

The way I introduced the topic was by noting the calendar coincidence of the Star Wars-themed tradition of “May the Fourth be with you” and the anniversary of the Kent State shootings in 1970, and how I observe the latter while most of the internet celebrates the former: by tweeting some song lyrics with a relevant hashtag, #maythe4th.  I did as I said I would…and Twitter blindly added a layer of commentary with a very simple little content filter.  On and in the official Twitter app, a little Stormtrooper helmet was inserted after the hashtag #maythe4th.

So let’s review: I tweeted in remembrance of a group of National Guardsmen firing into a crowd of college students, wounding nine and killing four.  After the date hashtag, there appeared a Stormtrooper icon.  To someone who came into it cold, that could easily read as a particularly tasteless joke-slash-attack, equating the Guardsmen with a Nazi paramilitary group by way of Star Wars reference.  While some might agree with that characterization, it was not my intent.  The meaning of what I wrote was altered by an unthinking algorithm.  It imposed on me a rhetorical position that I do not hold.

In a like vein, Thijs Reijgersberg pointed out that May 4th is Remembrance of the Dead Day in the Netherlands, an occasion to honor those who died in conflict since the outbreak of World War II.  He did so on Twitter, using the same hashtag I had, and again got a Stormtrooper helmet inserted into his tweet.  A Stormtrooper as part of a tweet about the Dutch remembrance of their war dead from World War II on.  That’s…troublesome.

Michael Wiik, following on our observations, took it all one step further by tweeting a number of historical events collected from Wikipedia.  I know several of my British chums would heartily agree with the 1979 tweet’s added layer of commentary, but there are others who might well feel enraged and disgusted.  That could include someone who tweets about the election in celebration, the way people sometimes do about their heroes.

But what about appending a Stormtrooper helment to an observance of the liberation of the Neuengamme concentration camp in 1945?  For that matter, suppose someone tweets May-4th birthday congratulations to a Holocaust survivor, or the child of a Holocaust survivor?  The descendant of a Holocaust victim?

You might think that this is all a bit much, because all you have to do is avoid using the hashtag, or Twitter altogether.  Those are solutions, but they’re not very useful solutions.  They require humans to alter their behavior to accommodate code, rather than expecting code to accommodate humans; and furthermore, they require that humans have foreknowledge.  I didn’t know the hashtag would get an emoji before I did it.  And, because it only shows up in some methods of accessing Twitter, there’s every chance I wouldn’t have known it was there, had I not used to post.  Can you imagine if someone sent a tweet out, found themselves attacked for tweeting in poor taste, and couldn’t even see what was upsetting people?

And, as it happens, even #may4th wasn’t safe from being hashflagged, as Twitter calls it, though that was different: it got a yellow droid’s top dome (I assume BB-8) rather than a Stormtrooper helmet.  The droid doesn’t have nearly the same historical baggage (yet), but it still risks making a user look like they’re being mocking or silly in a situation where the opposite was intended.  If they tagged a remembrance of the 2007 destruction of Greensburg, Kansas with #may4th, for example.

For me, it was a deeply surreal way to make the one of the points I’d been talking about in my Pastry Box article.  We’re designing processes that alter people’s intended meaning by altering content and thus adding unwanted context, code that throws pieces of data together without awareness of meaning and intent, code that will synthesize emotional environments effectively at random.  Emergent patterns are happening entirely outside our control, and we’re not even thinking about the ways we thoughtlessly cede that control.  We’re like toddlers throwing tinted drinking glasses on the floor to see the pretty sparkles, not thinking about how the resulting beauty might slice someone’s foot open.

We don’t need to stop writing code.  We do need to start thinking.

Heard and Received

A week ago today, I stood on a stage in San Francisco and told a couple thousand developers they were doing it wrong.  I mean, I got up there at O’Reilly’s Fluent, The Web Platfom conference, and gave a talk with a slide that literally said, “The Web is NOT a Platform”.  You can see it here, all fifteen minutes of it, in which I borrowed liberally from Jeremy Keith, added a splash of Mike Monteiro, and mixed it all together with things I’ve been saying and thinking for the past, oh, decade or more.

As it turned out, and a little bit to my surprise, a fair number of people completely agreed with what I had to say, judging by the reactions I got both online and in person.  Only a few people disagreed with me in person, which was fine; I actually hoped that there would be some pushback, since I’m not the smartest person in the world by any stretch.  The best part was, our disagreements were friendly, well-sourced, and collegial.  I love having conversations like that.  I don’t know that any of us changed our minds, but we were able to test our assumptions and viewpoints against each other.  In one case, I shook hands on a friendly, no-stakes bet over which of us would prove to be right, five or ten years down the line.

What made it really fun is that not twenty minutes after I stepped off the stage at the end of that talk, I stepped back on to accept a 2015 Web Platform Award alongside Sara Soueidan, Mark Nottingham, and Mikeal Rogers.  Those are some amazing people to stand with, and that it came from O’Reilly made it even more humbling.  In fact, Sara said it best: “This is my first time ever winning a web award, and I feel privileged to have won it from such a prestigious company.”  To which I would only add, and in such prestigious company.

I do want to note that what I said at the very end of my acceptance remarks was woefully insufficient.  What I should have said, and would have said if I hadn’t suddenly felt completely overwhelmed, is that the web has meant more to me, done more for me, and given more to me in the past two years than any one person could ever have any right to expect.  The web and what it makes possible, the ability to reach out and share and hear from you and stay in touch—that kept me sane, and may very well have kept me alive.

Thank you all.

The Pivotal Ways

Five years ago yesterday, the suave and debonair Ethan Marcotte debuted a talk titled “A Dao of Flexibility” at An Event Apart Seattle.  I still remember the feeling in the room.  Those of us who were there realized that it was a pivotal moment for the web, even before Ethan had left the stage.  It was the moment that responsive web design burst forth into the world.

The title, and content, of Ethan’s talk explicitly paid homage to the rugged and handsome John Allsopp’s “A Dao of Web Design”, published fifteen years ago today at A List Apart.  It’s hard to overstate how much wisdom and prescience is distilled into that deceptively short piece.  As I said in the testimonial I contributed to ALA’s remembrance:

John’s insights are as sharp and relevant as ever, especially when we realize the web’s inherent flexibility isn’t just about layout—that, in fact, layout flexibility is one of the web’s least important features. I try to reread “A Dao of Web Design” at least once a year. You should, too.

There’s not much more I can add, and honestly, anything I tried to add to these seminal works of brilliance would only cheapen them.  Go, read; go, watch.  Remember where we’ve come from, and use that foundation to chart where we’re going.

On This Day

Earlier today, Facebook announced a new feature called “On This Day”.  With On This Day, you see pictures, posts, and other events that occurred on a given day.  If you’re familiar with Timehop, it seems very much like a Facebook-only Timehop.  That will probably seem limited and broken to actual Timehop users, but for the vast majority of Facebook users, it will be a new and potentially very welcome feature.

As you can imagine, given what happened with Year in Review, I’m very interested by On This Day.  I haven’t interacted with the actual product yet, so I don’t know what kinds of opt-in or opt-out features will be present.  If any.  From the screenshots in the Facebook announcement, it looks like they’ve taken a much more neutral direction with the visual design.  There are calendar pages and abstract photos, with few of them expressing much in the way of emotional content.  An exception is seen at the top center of the banner image on the announcement, depicting what appears to be a woman in love, but that’s actually a decoration on the banner, instead of a UI component.  Whether those sorts of things will show up in the UI, I don’t know.

But this is what I wonder: is Facebook about to hurt a bunch of people?  From the announcement:

To see your On This Day page, you can click on the On This Day bookmark, search for “On This Day,” or visit You might also see a story in your News Feed.

Putting “a story in the News Feed” is exactly how Year in Review became a viral news story.  And it’s what distinguishes On This Day from Timehop or ThinkUp (which has “your most popular update” features).

If I install Timehop, for example, I know what I’m getting into.  I’m actively, consciously deciding to revisit events from past years by way of Timehop.  I can decide not to launch it at all on certain days, if I know what I see would be too painful.

On This Day, on the other hand, is part of an existing ecosystem.  Dropping On This Day into the Facebook news feed without consent is very much like having Timehop install itself onto your smartphone and then auto-launch, all without asking.  If this happened, we’d (rightly) take the responsible parties to task.  Patronizing dismissals that “you use a smartphone, you get what you deserve” would be relatively thin on the ground, whereas I’m sure there will be plenty of that directed toward any Facebook user upset by what an On This Day new feed entry shows them.  That was certainly the leading line of condescension around the Year in Review news feed post.

There isn’t much more to go on in the announcement, though I did notice:

…you can choose to subscribe to notifications so you’ll be alerted when you have memories to look back on. You can also edit and delete old posts, or decide to share your memories with friends.

Editing or deleting old posts is interesting, if a bit troubling to the historian in me, and the ability to sign up for notifications is a welcome sign of opt-in ethics, but what I notice here is what’s missing:  I don’t see any reference to an ability to opt out of On This Day, either for certain days or altogether.  It might be there and simply not referred to in the product announcement, but I wonder if this is something that Facebook users will simply have to get used to.

The timing of this has a personal resonance.  As I wrote about yesterday, we just passed the first anniversary of the day Kat and I were told about Rebecca’s second tumor.  For the next eleven weeks, both our posts and pictures from last year, wherever they’re housed, will form a chronicle of the last days of our daughter’s life.  How will we react to Facebook, how will we feel about our experience there, if On This Day constantly reminds us of those events?  Will this product increase our affinity with Facebook, or our antipathy?  Perhaps we might go to Facebook to catch up with friends and joke around with them a bit, as a form of mental respite.  Or, perhaps, we would have done that, but now will be unable to do so.  We’ll soon find out.

Lest anyone misunderstand, this isn’t just about Facebook.  It’s about every service or product that seeks to increase user affinity, and avoid user antipathy.  Facebook just happens to be providing some very obvious grounds on which to base these conversations.  Given their line of business and scale of operation, that’s probably to be expected.  I’ll be following this with great professional and personal interest.

November 2015