meyerweb.com

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

A Decade Apart

It was ten years ago today that Jeffrey, Jason and I stood up in front of a little over a hundred people in an oversized classroom space in the upper back corner of The Franklin Institute in Philadelphia, PA, and kicked off the very first An Event Apart.

Just the three of us, talking throughout the single day of the event, trading off talks until lunch and then throughout the afternoon.  The slides, most of them running on S5, were projected onto a pull-down Da-Lite screen, and we tapped the screen with our hands to draw attention to bits of design (or code).  In the audience, there was an attendee who’d flown in from Tokyo, just to be there.  Another from London.  We were staggered to think anyone had come more than half an hour’s drive.

It was as lo-fi as it gets without paper megaphones, and we made a whole slew of rookie organizer mistakes—but we got the essentials right, the same essentials we’ve kept alive all these ten years: present in-depth, practical, higher-level content to an audience of savvy web folks, and treat them right.  As we’ve grown over the years from one day to two to three, and from three speakers to twelve (and sometimes eighteen), we’ve kept one central goal in mind: to create a conference we’d gladly pay to attend, every time.  And while I’m admittedly biased, I believe we’ve pretty much succeeded at that goal.

Ten years, which is a lifetime ago and then some, and still rolling strong.  We’re calling it A Decade Apart, because why wouldn’t we?  To celebrate, we’ll be doing some fun stuff at all our events in 2016, special giveaways on top of the usual giveaways, the return of some audience favorites…but I don’t want to give away too much just yet.  Suffice to say, we’re planning on making this our best year ever, and everything’s shaping up to deliver on those plans.

If you’ve been to a past Event Apart, thank you—and if you have a memory to share, I’d really love to hear about it in the comments.  And whether you’ve been or not, I hope to see you in 2016!

In Gratitude

By most measures, I’ve had a pretty damn successful career.  I’m not at “I can retire today” money and nobody’s erecting statues with my visage on them, but only the first of those holds any interest for me, and I’m not expecting it any time soon.  (At current rates of saving and investment return, I should reach that state… right around the traditional age of retirement, actually.)

Of course, I’ve written a bunch of books that earned me some royalties, but books are not a way to become wealthy, unless you’re crazy lucky.  Yes, you have to put in the work to write the book, but in the end, whether your book makes you coffee money or high-end-chrome coffee machine money is down to forces entirely outside your control.  Certainly outside mine.  When I wrote my first CSS book, nobody expected CSS to be more than a slowly dying niche technology.  When I wrote the second, CSS had been declared dead twice over.  When I wrote the third and fourth, it was just starting to revive.

I invested tons of effort and time into understanding CSS, and then to explaining it.  Because I was lucky enough to put that work toward a technology that turned out to be not just successful, but deeply important to the web, the work paid off.  But think of the people who put that same kind of time and effort into understanding and explaining DSSSL.  “Into what, now?” you say.  Exactly.

Similarly, when Jeffrey and I set out to create An Event Apart, there was no assurance that there was a viable market there.  Nearly all the old web conferences had died, and those few that remained were focused on audience very much unlike the one we had in mind.  Luckily for us, the audience existed.  We worked really hard—still work really hard—to find and speak to that audience with the topics and speakers we present, but it would all have come to nothing if not for the sheer luck of having an audience for the kind of show we wanted to create.

For most of my adult life, I’ve been keenly aware of the incredible amount of luck that goes into success, and the awareness only grows as the years pass by.  Just putting in a lot of hard work isn’t enough.  You also have to have the sheer good fortune to have that hard work pay off.  You can sink everything you have, money and soul, into building a place in life, only to have it all sabotaged and swept away by random chance.  You can invest very bit of your life and fortune into an outcome that blind fate renders impossible.

So yes, I worked hard to understand the web, and to explain the web, and to write books and talks, and to create a conference series, and everything else I’ve done over the years—but I was supremely lucky to have that work come to something.  An incredible combination of time and place and interest and birth and a million million other things made that possible.

More to the point, the existence of people interested in what I have to say made that possible.  So I thank you, one and all, for all that and still more.  Thank you for rewarding and redeeming the work I’ve done.  Thank you for being of like mind.  Thank you for your support.  Thank you for listening.  Thank you.

This article was originally published at The Pastry Box Project on 2 December 2015.

Local Ipsum

Throughout 2015, a few people who’ve seen me present “Designing for Crisis” at An Event Apart have noticed that, on the slides where I have filler text, it’s a localized variant.  In Washington, DC, for example, one section started out:

Andrew ellicott lobortis decima thomas jefferson vulputate dynamicus fiant kingman park sollemnes ford’s theater. Vero videntur modo claritatem possim quis quod est noma howard university consequat diam. Blandit ut claram north michigan park seacula judiciary square william jefferson clinton hawthorne millard fillmore iis…

This was a product of some simple PHP I’d originally written to generate Cleveland-themed filler text a year or so back, which you can find at localipsum.meyerweb.com, and which I’d expanded upon to let me generate text for my presentations at AEA.  The name comes from the original idea I had, which was to provide a list of cities/regions/whatever, so that users could pick one and generate some filler text.  That never quite came together.  I had a semi-working version once, but the UI was horrible and the file management was worse and I got discouraged and rolled back to what you see now.

I kept telling myself that I’d get back to it, do the city-selection thing right, polish it nicely, and then finally release the source.  I’ve told myself that all year, as I manually swapped in city information to generate the filler text for each of my talks.  Now I’ve finally admitted to myself that it isn’t going to happen, so: here’s the source.  I chose a pretty permissive license—BSD-ISC, if I recall correctly—so feel free to make use of it for your own filler text.  I’ll be happy to accept pull requests with improvements, but not package-management or complete MVC restructuring.  Sorry.

I know, it’s a goofy little thing and the code is probably pants, but I kinda like it and figure maybe someone out there will too.  If nothing else, we can look for a few laughs in the output and maybe—just maybe—learn a little something about ourselves along the way.

(P.S. Speaking of “Designing for Crisis”, look for a post about that, and more specifically video of it, in the next few weeks.)

Rebecca’s Boardwalk

Yesterday was the inaugural Rebecca’s Boardwalk, a fundraiser in support of Rebecca’s Gift.  About two hundred people joined us for soft pretzels, snow cones, bounce houses, carnival games, face painting, and temporary tattoos.  I saw former co-workers and even a high school classmate there.

Between the ticket sales (both admission and activity) and the money raised in the raffles and the silent auction, Rebecca’s Gift raised enough money to send another family on a healing trip.  None of that would have been possible without a huge community of helpers and volunteers, so many that I could never thank them all.  There are a few I’d like to specially note, however.

First, my wife Kat and our friend Karla, who are the co-founders of Rebecca’s Gift and the people who really put the whole Boardwalk event together.  With help, of course, tons of help—but they were the driving forces.  People often think that Rebecca’s Gift is something I put together, but I didn’t.  It’s all them.  The non-profit wouldn’t exist, and the event wouldn’t have happened, without their drive.

Second, David Leslie Johnson, who contributed signed scripts from The Walking Dead, a signed making-of book from Red Riding Hood, and a signed poster from The Conjuring to the silent auction.  If you’re a horror fan, you might recognize David as the screenwriter of Orphan, as well as his involvement in the upcoming re-reboot of A Nightmare on Elm Street and the sequel to The Conjuring.  He’s also one of my best friends, as he has been since late elementary school.

Third, Tattly, which donated a lot of boardwalk-themed temporary tattoos.  For example, this Ferris Wheel design, and this very appropriately-themed set.  If you’ve never seen Tattly’s tattoos, they’re really something.  Vibrant, detailed, and most of all fun.  If you’re looking for temporary tattoos, check them out first.

Fourth, Anshe Chesed Fairmount Temple, for providing us with the right space for the event, for giving us the support (and storage space!) we needed to pull the whole thing off, and for trusting us with both their facilities and their schedule.

And fifth, again, everyone who donated items and sponsored booths and bought tickets and came to have a good time, just down the hall from the preschool classes where Rebecca wowed everyone with her sparkly dresses and impish grin.  It was an afternoon worthy of her name and her spirit.  Thank you all.


(If you’d like to support the mission of Rebecca’s Gift, please feel free to use the Donations page.  And thank you.)

I’m Probably Wrong

If there’s one thing that’s made it possible for me to learn as much as I have, and create as much as I have, it’s that my default attitude about things, especially technical things, is that I’m probably wrong about them.

When I first took up CSS and it didn’t do what I expected from reading the spec, I started creating simple, focused tests of each property and its values, to figure out what I was getting wrong.  Because I wanted to be sure, I built tests for all the properties, even the ones I was confident about understanding—and, in places, found out my confidence was misplaced.  Eventually, those tests became the CSS1 Test Suite.  Since I had discovered that, in a lot of cases, the browsers were actually wrong, I decided to document CSS support in browsers.  That became the CSS Mastergrid (long since gone).  On the strength of that resource, I started writing articles to explain how things worked, or didn’t, which led to writing my first book.  And so on.

But it all started because I assumed I was wrong about how CSS should work, not that the browsers were fundamentally broken.  Simple test cases seemed like the best way to find out.  One thing led to another.  In a lot of ways, you could say that my career was made possible by me assuming I was wrong, and setting out to determine exactly how wrong I was.

It’s not that I want to be wrong; in fact, I dislike being wrong.  But I dislike continuing to be wrong much more, so I try to find out how I’m wrong, in hopes of becoming less wrong.  It’s not even “strong opinions, weakly held”—it’s more “strong suspicion of error, strongly pursued”.  In public, when necessary.  (This is where it helps to be willing to look like a dork, or even a fool, as Kitt wrote about yesterday.)

When asking for help, this is the approach I take.  When I post to mailing lists or forums, it usually comes out as, “Here’s what I think is so, but results don’t match that understanding.  What am I missing?  Please help me get it right.”

How am I wrong?  Because I’m probably wrong.

This article was originally published at The Pastry Box Project on 2 November 2015.

Essential Tool: Firefox’s screenshot Command

Everyone has their own idiosyncratic collection of tools they can’t work without, and I’ve recently been using one of mine as I produce figures for CSS: The Definitve Guide, Fourth Edition (CSS:TDG4e).  It’s Firefox’s command-line screenshot utility.

To get access to screenshot, you first have to hit ⇧F2 for the Developer Toolbar, not ⌥⌘K for the Web Console.  (I know, two command lines—who thought that was a good idea?  Moving on.)  Once you’re in the Developer Toolbar, you can type s and then hit Tab to autocomplete screenshot.  Then type a filename for your screenshot, if you want to define it, either with or without the file extension; otherwise you’ll get whatever naming convention your computer uses for screen captures.  For example, mine does something like Screen Shot 2015-10-22 at 10.05.51.png by default.  If you hit [return] (or equivalent) at this point, it’ll save the screenshot to your Downloads folder (or equivalent).  Done!

Except, don’t do that yet, because what really makes screenshot great is its options; in my case, they’re what elevate screenshot from useful to essential, and what set it apart from any screen-capture addon I’ve ever seen.

The option I use a lot, particularly when grabbing images of web sites for my talks, is --fullpage.  That option captures absolutely everything on the page, even the parts you can’t see in the browser window.  See, by default, when you use screenshot, it only shows you the portion of the page visible in the browser window.  In many cases, that’s all you want or need, but for the times you want it all, --fullpage is there for you.  Any time you see me do a long scroll of a web page in a talk, like I did right at the ten-minute mark of my talk at Fluent 2015, it was thanks to --fullpage.

If you want the browser --chrome to show around your screenshot, though, you can’t capture the --fullpage.  Firefox will just ignore the -fullpage option if you invoke --chrome, and give you the visible portion of the page surrounded by your browser chrome, including all your addon icons and unread tabs.  Which makes some sense, I admit, but part of me wishes someone had gone to the effort of adding code to redraw the chrome all the way around a --fullpage capture if you asked for it.

Now, for the purposes of CSS:TDG4e’s figures, there are two screenshot options that I cannot live without.

A screen capture of Facebook’s “Trending” panel.
I captured this using screenshot fb-trend --selector '#u_0_l'.  That saved exactly what you see to fb-trend.png.

The first is --selector, which lets you supply a CSS selector to an element—at which point, Firefox will capture just that element and its descendants.  The only, and quite understandable, limitation is that the selector you supply must match a single element.  For me, that’s usually just --selector 'body', since every figure I create is a single page, and there’s nothing in the body except what I want to include in the figure.  So instead of trying to drag-select a region of the screen with ⇧⌘4, or (worse) trying to precisely size the browser window to show just the body element and not one pixel more, I can enter something like screenshot fig047 --selector 'body' and get precisely what I need.

That might seem like a lot to type every time, but the thing is, I don’t have to: not only does the Web Toolbar have full tab-autocomplete, the Toolbar also offers up-arrow history.  So once I’ve tab-completed the command to capture my first figure, I just use the up arrow to bring the command back and change the file name.  Quick, simple, efficient.

The second essential option for me is --dpr, which defines a device pixel ratio.  Let’s say I want to capture something at four times the usual resolution.  --dpr 4 makes it happen.  Since all my figures are meant to go to print as well as ebooks, I can capture at print-worthy resolutions without having to use ⌘+ to blow up the content, or fiddle with using CSS to make everything bigger.  Also if I want to go the other way and capture a deliberately pixellated version of a page, I can use something like --dpr 0.33.

I have used this occasionally to size down an image online: I “View Image” to get it in its own window, then use screenshot with a fractional DPR value to shrink it.  Yes, this is a rare use case, even for me, but hey—the option exists!  I haven’t used the DPR option for my talks, but given the growing use of HD 16:9 projectors—something we’ve been using at An Event Apart for a while now, actually—I’m starting to lean toward using --dpr 2 to get sharper images.

(Aside: it turns out this option is only present in very recent versions of Firefox, such as Developer Edition 43 and the current Nightlies.  So if you need DPR, grab a Nightly and go crazy!)

A closeup of text on a test page.
A snippet of an image I captured using --dpr 5.  On-screen, the page was at 100% zoom, 16-pixel (browser default) text sizing.  The resulting capture was 4000×2403 pixels.

And that’s not all!  You can set a --delay in seconds, to make sure a popup menu or other bit of interaction is visible before the capture happens.  If you want to take your captured image straight into another program before saving it, there’s --clipboard.  And there’s an option to upload straight to --imgur, though I confess I haven’t figured out how that one works.  I suspect you have to be logged into imgur first.  If anyone knows, please leave a comment so the rest of us know how to use it!

The one thing that irks me a little bit about screenshot is that the file name must come before the options.  When I’m producing a bunch of figures in a row, having to drag-select just the file name for replacement is a touch tedious; I wish I could put the file name at the end of the command, so I could quickly drag-select it with a rightward wrist-flick.  But all things considered, this is a pretty minor gripe.  Well, shut my mouth and paint me red—it turns out you can put the filename after the options.  Either that wasn’t possible at some point and I never retested the assertion, or it was always possible and I just messed up.  Either way, this irk is irksome no more!

The other thing I wish screenshot could do is let me define a precise width or height in pixels—or, since I’m dreaming, a value using any valid CSS length unit—and scale the result to that measure.  This isn’t really useful for the CSS:TDG4e figures, but it could come in pretty handy for creating talk slides.  No, I have no idea how that would interact with the DPR option, but I’d certainly be willing to find out.

So that’s one of my “unusual but essential” tools.  What’s yours?

A More Compassionate Facebook

It’s been a busy couple of weeks for Facebook, in terms of compassionate design decisions.

First they announced that they aren’t adding a Dislike button, but they are adding a set of six emoji reactions to the “Like” button, so you can indicate a wider range of emotion.  Some people immediately linked this to Slack, as if emoji reactions hadn’t been a thing on social media for the last couple of years.  I happened to see Sally Herships asking “what are your thoughts?” about it on Twitter (heh), and oh, I had thoughts.  I ended up sharing some of those thoughts by phone, and one of them was part of a segment on American Public Media’s Marketplace.

It’s funny, in a way, that my thought on marketing and advertisers was what made it into the piece, because I think that was literally my whole thought about that side of things.  Most of the rest of my conversation with Sally was about how Facebook could use these reactions as a way to avoid insensitive design choices.  As an example, a status update that gets lots of interaction in the frowny-face or sad-face realm could be avoided when it comes to things like Year in Review.  I said something to the effect of:

People are sharing everything about their lives, positive and negative, billions of us every day.  That isn’t going to stop, so it’s great to see Facebook making changes to meet us where we are, or at least meet us partway.

These reaction emoji almost certainly aren’t the last word on this, but they’re a credible initial attempt.  In more than one sense, they’re a first step into a larger world.


Next, Facebook introduced filtering for its On This Day (OTD) feature.  This is another step in the evolution of On This Day, one that’s very welcome.  Facebook had already been revising its language to be more humane, shifting from simple “Relive this memory” to nuanced language expressing care and openness.

The original and more recent copy at the top of an On This Day memory.

With its new OTD preferences, Facebook now lets you define ranges of dates you’d like to be blacklisted, in effect, as well as people you don’t want to see memories about.  I’d commented on the lack of this, back when OTD launched:

…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.

So far as I can tell, you still can’t opt out entirely; even if you turn off all notifications, you can still get memories inserted into your timeline.  For me, I see about one a month, more or less.  But here’s the interesting thing: they’re almost never my memories.  In what I still regard as a major gamble by Facebook, On This Day will show you posts, pictures, and videos posted by someone else, but on which you were tagged.  I presume (though I have no simple way to test) that adding a person in the OTD filtering preferences will prevent you from seeing memories in which they’re tagged as well as memories they posted.

If so, that’s a really smart step, as I can only imagine how a spiteful ex might abuse OTD.  It still leaves open the possibility of old posts that you don’t remember being tagged on suddenly appearing.  In many cases, that will be a delightful moment, but in many others, the exact opposite of that.  This is why I regard Facebook’s decision to show you posts from other people a gamble.  Even if they show unwanted memories to just 1% of their user base—a ridiculously low percentage—that’s literally 10 million people a day.

Still: wrinkles or no, flaws or no, the presence of filtering preferences is a major enhancement to On This Day.  I could block out all of June 2014, if I so chose.  There might be years where I blocked it, and others where I removed the block.  The important thing is that I’m being given that capability, in an environment that’s already designed to show me memories and acknowledge that it’s easy to get that wrong.  The user experience for adding filters is still clunky, but much like the reaction emoji, I view this as a credible first try, not the final word.

All this has made for some interesting Slack discussions between me and Sara, as we literally just finished the manuscript for our forthcoming, still-not-quite-titled-but-we’re-really-close-honest book on compassion in design.  Which has references to things like On This Day, so we’re already revising a book that hasn’t even been published yet.  And when will it be published?  We’re pulling for early next year, which sounds like a long way away until you remember that 2015 is getting close to done.

Kudos to Facebook, both for its efforts to be kinder in what they do and for its willingness to try.  Not many businesses, let alone social-media titans, have had the courage to think about what can go wrong in this realm, let alone actually acknowledge missteps and work to do better.  Well done.

Rebecca’s Boardwalk

One month from today is the first-ever Rebecca’s Boardwalk, a fundraiser in support of Rebecca’s Gift.  It’s a family-friendly afternoon of carnival games with actual prizes to be won, a facepaint and temporary tattoo booth (many thanks to Tattly for their generous support!), indoor mini-golf and bounce houses, boardwalk food, and a pretty great silent auction.  We’ll have everything from gift-card grab bags to artisanal meat parties to signed shooting scripts from The Walking Dead up for bid!

All of the proceeds will go to fund the mission of Rebecca’s Gift, which is to provide healing family vacations after the death of a child.  The organization has already raised enough to assist at least two families in 2016.  We’d very much appreciate your support in helping us lend a helping hand to more families in desperate need of time to reconnect, rebuild, and relax.  It’s one of the very few organizations we know of that supports families after a child’s death, as opposed to before.  This is something I touched on in a piece I wrote for Natural Papa back in September, in conjunction with St. Baldrick’s.  It’s something Kat and our friend Karla are determined to do something about, and I’m honored to support their efforts.

I very much hope you can join us for Rebecca’s Boardwalk, or if not, support the event via a sponsorship.  Rebecca loved travel and boardwalks in particular, and we can’t think of a better way to celebrate her life while striving to help others heal as best we can.


(Side note for the web folks in the audience: the Rebecca’s Gift site in general, and the event page in particular, makes use of flexbox for simple layout.  Just in case you were looking for a public deployment example.)

August 2016
SMTWTFS
July  
 123456
78910111213
14151617181920
21222324252627
28293031  

Archives

Feeds

Extras