Posts from April 2011

I thought it was unreasonably fun when Tim Bray did his Letter Sweep a while back, so I finally decided to fire up Camino and add my distinctiveness to his own.

• [A]n Event Apart.  Not surprising, I co-founded it.

• [B]ruce Lawson’s personal site.  I’ve been there most recently thanks to his “HTML5 gurus on Twitter” post.  I still feel like a little bit of a poser for being listed, but I appreciate the regard.  Bruce is good folks.

• [C]NN.  I think half the reason I go any more is to see what manner of goofiness they have in their featured boxes.

• [D]aring Fireball: BBColors.  I went there so I could back up my current color scheme and try out rcarmo’s port of Solarized Light, which I’m using now in modified form (I hated the default selected-text highlight).

• [E]conomist.com: Democracy in America.  I have fun there, as time permits; there’s a surprisingly strong commenter community that keeps drawing me back.  I truly wish the Clausewitz blog had been a contender here, but it seems to be having a lot of trouble getting started.  I suppose it’s suffering the friction of warblogging.

• [F]avstar.fm.  I like to see who’s favorited and retweeted my stuff for the obvious ego reasons, but more importantly because people who like my CSS and other technical stuff are often people I might like to follow.  Similar interests, and all that.  The very close runner-up in this category is obviously [F]lickr, and it would probably take top billing some days.

• [G]oogle.  Of course.

• [H]iderefer.  I hacked WordPress (via a plugin) so links on my Dashboard are routed through Hiderefer.  This avoids giving away the location of my WordPress install to malicious sites that manage to get comments into the approval queue.  In doing this Letter Sweep, I discovered that I need to update the plugin to use Nullrefer instead, so I just did.

• [I]MDB.  I don’t get to watch a lot of movies these days, nor do I actually think I would do so even if the opportunity arose, but somehow I still love them.

• [J]oe Wein’s blog.  Specifically, the post “Domain registration scam in China“, which I was reading after getting some suspicious e-mail.  The post confirmed my suspicions.  Thanks, Joe!

• [K]ottke.org.  The only guess the browser had for K was the post “Unicode, all of it“.

• [l]ists.css-discuss-org.  Not surprising, I co-founded it.

• [M]eyerweb.  Not surprising, I administrate it.

• [N]etflix.  I’ve been working my way through “Avatar: The Last Airbender” to see if it would be appropriate for the young’uns.

• [O]pera.  Specifically the fantastic “Opera version history“, which I wish every browser vendor emulated in detail.

• [P]enny Arcade.  Yo when I hit it I hit L-shift-O to the quote and then dollar…

• [Q]uora.  Another one-entry guess list, this time for the question “Given our current technology and with the proper training, would it be possible for someone to become Batman?“.  I think that’s one of three times I’ve ever been on Quora, whose popularity I still find a little mystifying.  But then I remember and was a fan of alt.destroy.the.earth, so who am I to judge what’s interesting?

• [R]etreats 4 Geeks.  Thanks to which I just recently had a ridiculously good time hanging out with twelve awesome people in the mountains above Gatlinburg, TN.  Runner-up: the fabulous [R]atfist.

• [S]kynet.  That’s my version of localhost, which means clicking the link will do you no good at all unless you did the same thing.  (Skynet is also the SSID of my home wifi cloud, which makes a bit more sense.)

• [T]witter.  Of course.

• [U]S Bank.  My bank.

• [v]isualguidanceltd.blogspot.com‘s post “CSS Married Porn AND had a Baby! OR Eric Meyer: ‘Dirty Thought-CSS’ Diary!“.  Yeah, I don’t know either.

• [W]orld Wide Web Consortium (W3C).  Of course.

• [X] had literally not a single guess.  No, I don’t follow XKCD; I figure the really good ones will get tweeted and copied to hell and gone anyway, so I just rely on the collective to pre-filter for me.  Apparently I haven’t been there recently.  Make of that what you will.

• [Y]ouTube.  Because where else am I going to find Bert and Ernie singing old-school M.O.P.?

• [Z]azzle.  Specifically the page for the “CSS IS AWESOME” mug, which I was considering buying because it’s not often you find an unalloyed song of praise to a CSS capability that no other Web technology has yet managed to duplicate.  But then I remembered I don’t really drink mug-based liquids, so I passed.  (And the T-shirts don’t make the content nearly big enough, so I passed again.)

So what’s your browser guess for you?

• Letter Sweep was published on Thursday, April 21st, 2011.
• It was assigned to the Links category.
• There have been five replies.

Yesterday, Brandy Fortune asked me on Twitter if there are “any major sites written in HTML 5 now“.  I decided to throw the question to my Twitter gang, and was of course immediately deluged in answers.  Also a small helping of standards politics, which  wasn’t really what I was after but probably should have known was inevitable.  Le sigh.

Anyway, here’s a sampling of the sites most frequently mentioned and how they’re using HTML5, listed in no particular order.

Using new-to-HTML5 markup (and DOCTYPE)

• MailChimp
• slashdot
• Obama for America
• About
• Unilever
• Myspace
• Sencha
• Nike Better World
• Apple
• The Killers
• The GLobe and Mail
• YouTube – Basically only the video element, and that only if you’ve enrolled in the HTML5 trial.

Using HTML5 DOCTYPE but no apparent new-to-HTML5 markup

• Google
• USA.gov
• Digg
• Yahoo – I’m told that Yahoo! Mail uses HTML5 features but I’m not a user so I can’t verify that.
• Flickr
• Netflix

And then there’s Facebook.  Rumor has it they’re using HTML5 features like the History API while still bearing an XHTML DOCTYPE.  I was also told they use video but all the videos I saw were Flash-based.  It’s possible that more is going on — who knows, maybe Farmville is all HTML5 now — but I was only willing to put up with the user experience for so long.

Some notes:

• I didn’t run a spider script to verify which HTML5 elements, if any, were being used on a site.  Instead I surfed around using a user stylesheet that highlights HTML5 elements and looked for dashed red outlines.  If they were there, the site got “uses HTML5 markup”.  If I didn’t see any, then “no apparent HTML5 markup”.  This may mean I miscategorized a site or two, in which case sorry.  Even if not, these lists won’t stay current for more than a couple of weeks, so regard this as a single snapshot in time, not the whole movie.
• In my limited and purely anecdotal peerings, far and away the most commonly-used HTML5 element was section.  nav appeared to run a distant second.
• Any site that uses font replacement is using HTML5: canvas.  I didn’t list such sites, so bear that in mind.  (Sorry, Beano.)  I just hope such sites change their DOCTYPEs to match.
• I did not list any site that lacked a DOCTYPE.  I don’t care if the HTML5 DOCTYPE is optional, that doesn’t mean any DOCTYPE-less page is using HTML5.  Or, if it does, my next step is to write a MeyerHTML DTD with an optional DOCTYPE and then charge you all $1 per site for using invalid markup in violation of the terms of the DTD’s license.  And then I’m buying an island.  Oahu seems nice.

Comments are switched off for once partly because I don’t really want another faceful of politics right now, and partly because attempts to post links to other HTML5 sites will end up in the spam trap and frustrate posters.  Feel free to go nuts on your own sites, of course.

• My Own Private HTML5 Survey was published on Thursday, April 14th, 2011.
• It was assigned to the (X)HTML and HTML5 categories.
• There have been two replies.

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.

• Seeing the matrix() was published on Tuesday, April 12th, 2011.
• It was assigned to the CSS, Projects, and Tools categories.
• There have been thirteen replies.

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!

• CSS Pocket Reference: The Cutting Room was published on Wednesday, April 6th, 2011.
• It was assigned to the Books and CSS categories.
• There have been fourteen replies.