meyerweb.com

Over the weekend, Aaron Gustafson and I created a tool for anyone who wants to resolve a series of CSS transforms into a matrix() value representing the same end state. Behold: The Matrix Resolutions. (You knew that was coming, right?) It should work fine in various browsers, though due to the gratuitous use of keyframe animations on the html element’s multiple background images it looks best in WebKit browsers.

The way it works is you input a series of transform functions, such as translateX(22px) rotate(33deg) scale(1.13). The end-state and its matrix() equivalent should update whenever you hit the space bar or the return key, or else explicitly elect to take the red pill. If you want to wipe out what you’ve input and go back to a state of blissful ignorance, take the blue pill.

There is one thing to note: the matrix() value you get from the tool is equivalent to the end-state placement of all the transforms you input. That value most likely does not create an equivalent animation, particularly if you do any rotation. For example, animating translateX(75px) rotate(1590deg) translateY(-75px) will not appear the same as animating matrix(-0.866025, 0.5, -0.5, -0.866025, 112.5, 64.9519). The two values will get the element to the same destination, but via very different paths. If you’re just transforming, not animating, then that’s irrelevant. If you are, then you may want to stick to the transforms.

This tool grew out of the first Retreats 4 Geeks (which was AWESOME) just outside of Gatlinburg, TN. After some side conversations betwen me and Aaron during the CSS training program, we hacked this together in a few hours on Saturday night. Hey, who knows how to party? Aaron of course wrote the JavaScript. Early on we came up with the punny name, and of course once we did that the visual design was pretty well chosen for us. A free TTF webfont (for the page title), a few background images, and a whole bunch of RGBa colors later we had arrived. Creating the visual appearance was a lot of fun, I have to say. CSS geeks, please feel free to view source and enjoy. No need to say “whoa”—it’s actually not that complicated.

So anyway, there you go. If you want to see the matrix(), remember: we can only show you the door. You’re the one that has to walk through it.

I just shipped off the last of my drafts for CSS Pocket Reference, 4th Edition to my editor. In the process of writing the entries, I set up an ad-hoc test suite and made determinations about what to document and what to cut. That’s what you do with a book, particularly a book that’s meant to fit into a pocket. My general guide was to cut anything that isn’t supported in any rendering engine, though in a few cases I decided to cut properties that were supported by a lone browser but had no apparent prospects of being supported by anyone else, ever.

For fun, and also to give fans of this or that property a chance to petition for re-inclusion, here are the properties and modules I cut. Think of it as the blooper reel, which can be taken more than one way. I’ve organized them by module because it’s easier that way.

• The backface-visibility property from the 3D Transforms module. This is one I’m already reconsidering, but I haven’t found any indication that anyone besides Webkit will be picking it up in the near future. Still, I did document the rest of the 3D Transforms module so I may add this back in during the tech review stage.
• rotation and rotation-point from the CSS3 Box module. These have been effectively replaced by the 2D Transforms module, but the Box module hasn’t been updated since that happened.
• Everything in the Flexible Box Layout module. There are, as of now, just too many sections bearing notes, warnings, questions, and general feelings of instability and future change for me to feel comfortable including the properties from this module. I’m probably going to catch some flak for that.
• grid-columns and grid-rows from the Grid Positioning Module Level 3, which effectively means means excluding the entire module. Some day maybe I’ll write a separate pocket reference just for the various CSS layout systems.
• font-stretch. Its continued exclusion saddens me, because I am exactly the sort of sheep-stealing lowlife who would programmatically stretch and compress font faces and like it, but so far as I can tell nobody’s supporting the property. Alas.
• Basically, the entirety of the Generated Content for Paged Media module.
• The Behavioral Extensions module, which means the binding property as well as the :bound-element pseudo-class.
• All the properties in CSS Marquee module. I’d love to see someone make a compelling case for re-instating them.
• The following properties from CSS Text Level 3: hanging-punctuation, punctuation-trim, text-align-last, text-emphasis-position, text-emphasis-style, text-emphasis, text-justify, text-outline, text-wrap, white-space-collapsing, and word-break.
• The following properties from the Basic User Interface module, dated 2004: appearance, icon, nav-down, nav-left, nav-right, nav-up, and nav-index.
• The Hyperlink Presentation module, dated 2004.
• The Presentation Levels module, dated 2003.
• move-to and crop from the CSS3 Generated and Replaced Content module, dated 2003.
• The Line module, dated 2002 and bearing my name for no reason I can recall. The one property listed there which I kept is vertical-align, and I just used the CSS2.1 definition.

After all that, I imagine you’re going to laugh uproariously when I tell what I did include: paged and aural properties. I know—I’m kind of poleaxed by my own double standard on that score. I included them for historical reasons (they’ve long been included) and also because they’re potentially very useful to a more accessible future. Besides, if we run out of pages, they’re in their own section and so very easy to cut.

I’m pretty sure I listed everything that I explicitly dropped, so if you spot something that I absolutely have to reinstate, here’s your chance to let me know!

I recently became re-acquainted with a ghost, and it looked very, very familiar. In the spring of 1995, just over a year into my first Web gig and still just over a year away from first encountering CSS, I wrote the following:

Writing to the Norm

No, not the fat guy on “Cheers.” Actually, it’s a fundamental issue every Web author needs to know about and appreciate.

Web browsers are written by different people. Each person has their own idea about how Web documents should look. Therefore, any given Web document will be displayed differently by different browsers. In fact, it will be displayed differently by different copies of the same browser, if the two copies have different preferences set.

Therefore, you need to keep this principle foremost in your mind at all times: you cannot guarantee that your document will appear to other people exactly as it does to you. In other words, don’t fall into the trap of obsessively re-writing a document just to get it to “fit on one screen,” or so a line of text is exactly “one screen wide.” This is as pointless as trying to take a picture that will always be one foot wide, no matter how big the projection screen. Changes in font, font size, window size, and so on will all invalidate your attempts.

On the other hand, you want to write documents which look acceptable to most people. How? Well, it’s almost an art form in itself, but my recommendation is that you assume that most people will set their browser to display text in a common font such as Times at a point size of somewhere between 10 and 15 points. While you shouldn’t spend your time trying to precisely engineer page arrangement, you also shouldn’t waste time worrying about how pages will look for someone whose display is set to 27-point Garamond.

That’s from “Chapter 1: Terms and Concepts” of Introduction to HTML, my first publication of note and the first of three tutorials dedicated to teaching HTML in a friendly, interactive manner. The tutorials were taken down a couple of years ago by their host organization, which made me a bit sad even though I understood why they didn’t want to maintain the pages (and deal with the support e-mail) any longer.

However, thanks to a colleague’s help and generosity I recently came into possession of copies of all three. I’m still pondering what to do about it. To put them back on the web would require a bit more work than just tossing them onto a server, and to make the quizzes fully functional would take yet more work, and after all this time some of the material is obsolete or even potentially misleading. Not to mention the page is laid out using a table (woo 1995!). On the other hand, they’d make an interesting historical document of sorts, a way to let you young whippersnappers know what it was like in the old days.

Reading through them, now sixteen years later, has been an interesting little trip down memory lane. What strikes me most, besides the fact that my younger self was a better writer than my current self, is how remarkably stable the Web’s fluidity has been over its lifetime. Yes, the absence of assuredly-repeatable layout is a core design principle, but it’s also the kind of thing that tends to get engineered away, particularly when designers and the public both get involved. Its persistence hints that it’s something valuable and even necessary. If I had to nominate one thing about the Web for the title of “Most Under-appreciated”, I think this would be it.

Kat and I are now triply parents. Earlier today we welcomed Joshua David Meyer into our home and our hearts. We’ve had this name ready ever since we started out to build a family almost a decade ago. We chose Joshua to honor Kat’s late aunt Judy, an incredibly strong and brave woman who faced adversity with a smile. The middle name, David, honors Kat’s grandmother Dot and is also the name of one of my best and oldest friends. Carolyn and Rebecca are both incredibly excited to have a baby brother and are helping take care of him (and us) as much as they can. I’ll obviously be a bit distracted during the settling-in phase of having a newborn in the house, but with any luck I’ll manage to get a few things out the door during naps.

Earlier today, I updated the CSS Tools: Reset CSS page to list the final version of Reset v2.0, as well as updated the reset.css file in that directory to be v2.0. (I wonder how many hotlinkers that will surprise.) In other words, it’s been shipped. Any subsequent changes will trigger version number changes.

There is one small change I made between 2.0b2 and 2.0 final, which is the replacement of the “THIS IS BETA” warning text with an explicit lack of license. The reset CSS has been in the public domain ever since I first published it, and the Reset CSS page explicitly said it was, but the file itself never said one way or the other. Now it does.

Thanks to everyone who contributed their thoughts and perspectives on the new reset. Here’s to progress!

It’s well past time for me to spend a few minutes reflecting on An Event Apart in 2010. In two words: absocrazifreakiperfluously staggerblasticating. [I totally stole those. —Ed.] From the first show to the last, 2010 was an incredible year for An Event Apart, easily our best yet on every front. Jeffrey and I stand in humbled awe of the amazing speakers and wonderful attendees who joined us this year. I’ve said before that AEA attendees are “as much colleagues as anything else” and that continues to be so. While I love our speakers, I love the attendees even more. What I look forward to most at every show is time spent talking with my fellow craftspeople in the hallway, at lunch, and at the social events.

It seems like a lot of people feel the same way, because every single one of our 2010 shows sold out in advance. We’re understandably proud of this, and also very, very grateful for your faith and trust in what we do, and hope to continue earning both into the future. (In honor of your support, AEA recently made a donation to Computers For Youth in support of the next generation.)

So in 2011, we’re building on what we learned in 2010. We’re going from five to six shows, including a long-delayed return to Atlanta (site of our sophmore effort), and each sporting an optional A Day Apart featuring in-depth coverage of topics like mobile web design, HTML5/CSS3, and content strategy. If you’re interested, check out our Events page for the show nearest, or of most interest, to you.

Again, our deepest thanks to all our attendees and supporters. We couldn’t do what we do without you, and we’re looking forward to the challenge of clearing the bar you’ve set for us!

Well, I done did it again: I wrote a book. This time, it’s Smashing CSS: Professional Techniques for Modern Layout, published by Wiley and Sons and available as of some time last week. (Just in time for the holiday gift-giving season! Buy one for everybody in the family! Don’t delay—act now!)

What’s different about this book as compared to others I’ve written is that this is a collection of short tips, tricks, and techniques for using CSS in everyday work. Many of them involve making changes and seeing the results, similar to my New Riders books, but where those books had chapter-long projects these are usually only a page or three in length. Well, okay, a few get up towards ten pages, but only on occasion.

Another difference is that Smashing CSS spans the spectrum from basic tools and browser features that can speed your development and debugging to some cutting-edge ideas and a taste of the latest CSS3 hotness. I really do hope there’s something in it for everyone, and with something like a hundred entries, I think my odds are pretty good.

I’m especially happy that it’s in full color, which allowed me to do lots of screenshots as well as color-hinting of the markup and CSS, and personally I think it looks awesome. I hope you’ll agree. Check out the official catalog page at Wiley or comparison-shop at ISBN.nu, and thanks!

Update 19 Nov 10: Kindle, ePub, and PDF versions of the book should be available within the next week. They’re all in the hands of Wiley’s ebook distributor, so now it’s up to the distributor to get the files into the hands of ebook sellers. On behalf of all you ebook fans, I hope it will happen soon! (Is “ebook” the way we write that now? I’m a little light on the lingo.)

Update 6 Dec 10: So far I’ve found the Kindle (mobi) and Nook (ePub) versions of the book. Finding a good (read: legal) PDF version is proving difficult, so if anyone’s seen it out there, let me know so I can link away!

I had planned to spend yesterday goofing off, as is my tradition for the day after I return from a conference and don’t have anything immediately pressing on my plate. Instead I watched and documented, as best I could, a case of memetic epidemiology happen in realtime.

The meme was the Cooks Source story, which I stumbled across relatively early in the day. I won’t recap the story here, as the original LiveJournal post by Monica Gaudio and Edward Champion’s very well-researched article do a much better job of that. The latter piece is particularly commendable if you’re new to the story, as it not only explains the genesis of the incident but also lays bare a number of other things that were discovered as the story went ballistic.

I’m not sure exactly where I first came across the story—probably a retweet of Adam Banks by a friend of mine—but at the time the meme was really just getting started. At that point there were quite a few people posting on the Cooks Source Facebook Wall to chastise the editor, and the rate of posting was accelerating. I threw in “my own tweet on the topic”: and kept watching the Wall to see if there would be a response, if the Facebook page would be deleted, or something else. At the same time, I was seeing more and more tweets and retweets of the story, and based on just what I could see, it seemed primed to go crazy. I was rewteeted by swissmiss, who has four times as many followers as me (and way more influential followers than me), and it was hitting the feeds of more and more people I follow.

When it showed up on John Scalzi’s tweet stream, I actually got a little dizzy. This was the moment where I felt like the scientist at the beginning of a viral-apocalypse movie, staring at a monitor showing the sites of reported infection in red. Then, in a burst of tense, ominous music, the dots show up in New York City and around JFK. Game over.

I got that feeling because I knew that not only is Mr. Scalzi followed by both Neil Gaiman (1.5 million followers) and Wil Wheaton (1.7 million followers), but he is respected and therefore paid attention to by both. Furthermore, both, as net-savvy content creators like Mr. Scalzi, are exquisitely sensitive to such stories. It was only a matter of time before one of them passed the story on to their followers. And sure enough, within minutes, Neil Gaiman did so.

At that point, it seemed only a matter of time before traditional media channels took interest, and though it took a little while, many did. It literally became an international news story.

Throughout the day, I tracked the situation and tweeted about it as new developments happened. I almost couldn’t help myself; I was completely captivated by watching a meme unfold and spread in realtime. Eventually I hit on a crude measurement of the story’s reach, which I dubbed the Speed of Chastisement (SoC). This was measured by loading the Cooks Source Wall and then scrolling to the bottom of the page, down to the “Older posts” button. The time elapsed since the last of the Wall posts was the SoC. When I started looking at it, it was measurable in minutes, but as the day went on the interval dropped. At one point, it was as low as 34 seconds, and may well have dropped lower when I wasn’t looking.

I wish I could’ve automatically captured that number, say, every minute, because the timeline graph I could make with that data would be fascinating—especially if mapped against various developments, like Neil Gaiman’s retweet of John Scalzi or the time of various article publications.

One of the things I found most fascinating was how the outraged mob used Cooks Source’s own digital presence against it. I don’t actually mean all the Wall posts, which served as an emotional outlet but otherwise only indicated the story’s memetic velocity (the SoC I mentioned earlier). What people did was start new threads in the Discussions tab of Cooks Source’s own Facebook page to document the original sources of Cooks Source articles and to compile the contact information for all of the advertisers in Cooks Source. The speed at which the crowd operated was awesome in the older sense of that word as inspiring of awe, which is itself defined as power to inspire fear or reverence. As I told a friend, I was fascinated in the same way I’d be fascinated watching, from a distance, a predator hunting down its prey. Awe-struck. It was almost frightening to watch how fast people tracked down the various text and image sources, uncovering more and more evidence of bad behavior at full-bore, redlined Internet speed.

On a related point, I was very impressed by the quality of reporting in Edward Champion’s article about the story. Alone of all the articles I’ve seen (beyond the first couple of LJ posts), his laid out specific examples of repurposed content, and furthermore he had talked to people involved and gotten their perspective and to people at some of the sites and companies whose material had been re-used. Read the article, if you didn’t already follow one of the links. It is investigative journalism done far better than any reporter has yet done for any traditional, or even “new media”, news outlet.

I could write about all this for much longer, but I’m going to hold off. My day wasn’t all just observation and tweets, though. A few questions kept hovering in the back of my mind.

• What if the mob had been wrong?

  Imagine with me for a moment that a small crocheting magazine is accused of copyright violation by an author. The editor, knowing this to be false, sends a dismissive or even sarcastic letter (we’ve all done it). The author posts their side of the story and excerpts of the letter to their blog, people notice, and suddenly the Flash Mob of Righteousness is back in business.

  What then? Is it possible, once the rope is out and being tied into a noose, to put it away again?

• Did Cooks Source actually win?

  As I write this, about 24 hours after the story really blew up, the Cooks Source Facebook page has gone from 110 people who “Like This” to almost 3,400. Most of those are because in order to comment on the Wall, you have to Like the page, and a whole lot of people hit “Like”, commented, and then hit “Unlike”. Some of them are still listed because they’re still posting. Still, assume that by the time it’s all over, between people who want to keep harassing Cooks Source and people who just forgot to hit “Unlike”, they’ll have well over a thousand people listed. That’s a full order of magnitude jump in claimed like.

  Is that a measure of success? Will it, in fact, end up a net positive for Cooks Source as it tries to entice advertisers for future issues? Of course, that assumes the magazine survives the attention of lawyers from Disney, Paula Deen Enterprises, Martha Stewart Living Omnimedia, the Food Network, Sunset, National Public Radio, and so on and so on.

• What about Gene Simmons?

  A few weeks back, Gene Simmons (of KISS fame) said that anyone who illegally shares files should be “sued off the face of the earth” and that bands should be litigious about people copying their music. In response, his web site was cracked and a good deal of derision was directed his way.

  Interesting. In one case, a content creator who calls for vigorous defense of copyright is attacked for it. In another, a violator of copyright is attacked. How many of the people who Wall-bombed Cooks Source’s Facebook page were also cheering the anonymous crackers who harassed Gene Simmons? Why the disconnect?

  There are many reasons we could cite, and I think the most likely factor is that in both cases, the targets of attack were publicly arrogant and uncompromising about their positions. That, however, is absolutely no excuse. If you were outraged by Cooks Source, shouldn’t you cheer Gene Simmons’ stance? If you rolled your eyes Gene Simmons, shouldn’t you be on the side of Cooks Source?

  I imagine there are people who did one or the other of those things. But not many. The contrast says something about how we collectively view intellectual property, and it may not be something we want to face.

This isn’t the first time someone will set off an outrage swarm, and it won’t be the last. There is much to think about here, about both ourselves and the medium we inhabit.