Posts in the Tech Category

Reset 2.0b2: Paring Down

Published 13 years, 10 months past

A few changes for beta 2 of the updated reset, presented here:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b2 | 201101
   NOTE: THIS IS A BETA VERSION (see previous line)
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

First, the small changes: adding embed, output, and ruby to the first rule.  I went back and forth on these quite a bit, which is why they weren’t in the first cut.  However, none of them seem to be replaced so they’re in.  Others, such as command, are replaced and so stay out for the same reason that form inputs are left out.  (img is a special case.)

The HTML5 element I’m still stuck on is datalist, which seems sort of replaced but then again maybe not.  I’m really close to including it on the same grounds that I include canvas, but it’s hard to know if that’s a good idea.  If anyone with deep experience with datalist could explain what element it’s most like, and whether it’s really replaced or what, please do so.

Now the big changes: I removed the outline declaration from the first rule, which was option #2 in “Looking For Focus“.  I’d largely decided that was the best solution before I posted, but I didn’t want to say so for fear of skewing the responses either way.  It was interesting to see how that option initially didn’t come up very much, and then suddenly a bunch of people stumped for it.  Anyway, that course of action seems to make the most sense to me; for the reasons why, the comments of those who supported it pretty much sum up my thoughts.  With that declaration out, there’s no need to do anything special for :focus in subsequent rules.

Following on that, the other change is that I’ve dropped the :focus rule entirely, and also the ins and del rules.  Why?  Because all three of them are attempting, in some fashion, to impose a presentation above the baseline that the reset attempts to establish.  I basically left text-decoration alone in this reset; reset and del were the exceptions.  I can’t justify those exceptions any longer.

The rule for ins was actually interesting: it was, in spirit, exactly the same as the :focus rule.  Here’s a comparison:

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}

Both strip off a common visual styling and remind authors to define something visible.  Of course, pretty much nobody ever complained about the ins rule, but they’re conceptually the same and so if one goes, both should go.  And if I’m not keeping the ins rule, I can’t see any reason at all to keep the del rule.

So that’s where we are in beta 2.  I’ll be interested to know what you think.


Looking For Focus

Published 13 years, 10 months past

In the reset revision draft I posted Monday, I got tripped up by some last-minute changes and I’m going to think out loud (so to speak, as it were) about possible solutions.

The problem is that the presence of a in the first rule means that focus outlines on hyperlinks are removed.  Thus in commenting out the :focus rule I restored default focus styles to form elements, but not hyperlinks.  This wasn’t a problem up until roughly a day before I published, but last-minute tinkering brought it back.  I’d say that’ll teach me not to tinker, but I hate to lie.

I’ve come up with the following solutions.  Consider them as mutually exclusive.

  • Remove a from the first rule.  This would exempt it from being reset at all.  On the one hand, this means that focus defaults are restored.  On the other hand, by exempting an (incredibly pervasive) element from the list, it does violate the spirit of element agnosticism I try to follow.  On the gripping hand, that first rule doesn’t do much to reset links as it is: their text-decoration and color properties are not altered.  Back in 2007 the color would have been thanks to a color: inherit declaration, but that was dropped at the time and I don’t think it’s likely to return.  Even if it does, the question of exempting a would remain and possibly even deepen.

  • Remove outline: 0 from the first rule.  The only things I can think of that get outlines are focused form elements, which the reset doesn’t touch; and focused hyperlinks, which I’m trying to avoid touching in the first place.  That’s not very forward-looking, though.  Outlines could start showing up in future browsers or on future elements.

  • Define explicit a:focus styles, as the HTML5 Doctor reset does.  This overcomes the problem of focus-stripping, but imposes a specific focus appearance.  That violates the entire spirit of the reset.  Of course, it’s not as though there’s much variance in how browsers present link focusing, and it’s pretty easy to write a rule that would be mistaken for browser defaults by just about anyone.

In the process of writing this out, I think I’ve mostly settled on which choice I prefer, but I’d like to hear what you think.  Which option strikes you as best, and why?


Reset Revisited

Published 13 years, 10 months past

It was close to four years ago now that I first floated (ha!), publicly refined, and then published at its own home what’s become known as the “Eric Meyer Reset”.  At the time, I expected it would be of interest to a small portion of the standards community, provoke some thought among fellow craftspeople, and get used occasionally when it seemed handy.  Instead, it’s ended up almost everywhere.

(This occasionally backfires on me when people use it in the CSS of e-mail campaigns, it’s exposed by older mail clients, and people then mail me to demand that I unsubscribe them from the mailing list.  But that’s not the worst backfire — I’ll get to that in just a minute.)

Four years is long enough for a revisit, I’d say.  I spent a little time working on and thinking about it over the holidays.  Here’s where I ended up.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

Some of you may be thinking: “Hey, it’s the HTML5 Doctor reset!”  Actually, no, though I did use their work as a check on my own.  I felt like that one went a bit far, to be honest.  What I have above is simply the reset I had before with the following changes:

  • Removed font from the selector of the first rule.  It’s been long enough now, I think.  We can let that one go.
  • Removed background: transparent from the declaration block of the first rule.  I don’t think it really served any purpose in the long run, given the way browsers style by default and the CSS-defined default for background-color (which background encompasses, of course).  Its removal will also stop causing table-appearance glitches in old versions of IE, if that’s of interest.
  • Added font: inherit to the declaration block of the first rule.  There are still older versions of IE that don’t understand inherit, but support is now widespread enough that I feel this can go in.  I left font-size: 100% as a sop to older browsers, and override it with the next declaration in those browsers that understand.
  • Added HTML5 elements to the selector of the first rule.  While this is probably unnecessary right now, those elements being about as styled as a common div, it’s in the spirit of the thing to list them.
  • A separate rule to make blocks of those HTML5 elements that generally default to blocks.  This is more backward-looking, as the comment suggests, and it’s a prime excision candidate for anyone adapting these styles to their own use.  However, if you’ve ever known the pain of HTML5 markup shattering layouts in, say, older versions of Firefox, this rule has a place.
  • Removed the “cellspacing” comment near the end.  It used to be the case that lots of browsers needed the support, but that’s a lot less true today.
  • And then the big one, trying to correct the biggest backfire of the whole enterprise: I commented out and subtly altered the commentary on the :focus rule without removing it entirely.

On that last point, defining an invisible focus was the biggest blunder of the original reset.  In hindsight, it’s really a obvious unforced error, but when I published the reset I literally had no conception that it would be just copied (or, worse, hotlinked) blindly in a thousand sites and frameworks.  As the new advocacy site outlinenone.com points out, I did say right in the style sheet that one should define a focus style.  I put in a value of 0 in the same spirit I zeroed out paragraph margins and set the body element’s line-height to 1: by taking everything to a “plain baseline”, the thoughtful craftsperson would be reminded to define the focus style that made most sense for their site’s design.

Instead, focus outlines were obliterated wholesale as lots and lots of people, not all of them craftsmen, just copied the reset and built on top of it without thinking about it.  I can’t find it in my heart to fault them: most construction workers don’t think about how beams and rivets or even riveters are made.  They just bolt ’em together and make a building.

Perhaps some of the pain would have been eased if I had said in the comment, as I do now, “remember to define visible focus styles”.  But I doubt it.

So in this revision, I’ve altered the rule and commentary to raise its visibility, but more importantly I’ve commented out the whole rule.  This time, copiers and hotlinkers won’t destroy focusing.  Some may still uncomment it and change the value back to 0, of course, but that could happen anyway.  With luck, this change will help educate.

As was the case in 2007, comments and suggestions are most welcome, and may well result in changes that make it into the final version.  Also, my thanks to the HTML5 Doctor crew for publishing their variant, which I used as a sanity check; and Michael Tuck, whose research into the history of resets got me looking back and interested in moving things forward.

Addendum 3 Jan 11:  as the previous paragraph says, and the version number (2.0b1) heavily implies, this is not a final version.  It may well change, either due to errors on my part (one of which has already come to light) or changes of mind due to discussions in the comments.  You can take this version and use it if you want, but I don’t particularly recommend it because—again—changes are likely.

Translations


A Year Apart

Published 13 years, 11 months past

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!


Smashing CSS

Published 14 years, 1 week past
Smashing CSS cover

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!


Degree of Influence

Published 14 years, 2 weeks past

A brief followup to “A Question of Degree“:  I received the following message from the person who first asked the question:

I just spent the last hour or so reading through the comments and, let me tell you, I can’t express how much they helped me! It is now clearly obvious to me that finishing my CS degree is the way to go. A CS degree can make me a better web developer by teaching me about algorithm design and analysis, performance issues, and just how to think like an engineer. Also, since the web changes constantly, a degree will help me embrace those changes. It will always be there for me to fall back on if the web industry doesn’t work out for me.

Thank you to everyone who contributed to the discussion, either in the comments here or elsewhere on the net.  You made a positive difference in this world.  Take pride in that, for it is the most important thing any of us can do.


A Question of Degree

Published 14 years, 2 weeks past

I recently found myself asked for advice, which feels odd even at the best of times, and this was (it seemed to me) of a particularly serious nature.  I’m curious to know what you think is the proper answer.

A few days back, I got e-mail with the following questions:

…in your opinion, how useful is a computer science degree for a career in web development? I’m a second year CS major, and considering dropping out because I don’t see the value in it anymore. It’s just taking away my time from learning and doing what I love most–developing web apps. Will dropping out hurt me later on?

I chewed on it for a day or so and then ended up writing the following in response:

I wish I could give you a definitive answer, but the honest truth is that I’m conflicted.  I’m not the only one, either: a recent survey of 26,000+ web professionals indicated that just over half felt their education had some relevance to what they do (http://aneventapart.com/alasurvey2009/#roe).

To use myself as an example, I got my degree (in History, as it happens), but that was before there was such a thing as a career in web development.  The same is true for a lot of the people I think of as contemporary to me; that is, people about my age.  Almost none of them have CS degrees, and many don’t have degrees at all.  I got my job as webmaster of a respected research school because I worked there already and nobody else had ever heard of the web.  I doubt very much that, were I just now exiting school and entering the market, I could do anything like that.

On the other hand, I will say that in the computer field in general, and web in particular, very few people seem to care what degree you do or don’t have.  But here’s the rub: these days, it might be that having a CS degree is what gets you that first job or two.

On the other other hand, if you build some killer web apps, nobody will care about your schooling.  They’ll care about your portfolio.  I don’t know if that lies in front of you, of course.  Maybe it does.  Or maybe it’s a good idea to finish schooling so that you’ll be paper qualified for jobs that say “Requires CS degree or equivalent” if you need to seek them out.

So, to get back to your original question, “It is unless it isn’t” is about the best I can do.  As someone who values education very highly and knows a degree can be an asset in job-seeking, my instinct is to tell you to finish your degree.  As someone who has a lot of contact with successful people who didn’t do that, my intellect requires me to say it’s not critical.

A day past when I sent it, I still don’t feel any less torn.  (And in re-reading what I wrote, I can see my indecision in the writing: scattered, whipping from one side to the other.  Man, did that one ever need an editor!)  I don’t really need to know what people think of what I said, but I’m really curious to know what you would advise this young person.  Leave your thoughts in the comments, if you please, and I’ll make sure word of your input gets passed along to the student who wrote me.  Thanks!

Addendum 12 Nov 10: please see “Degree of Influence” to see how things turned out.


Memetic Epidemiology

Published 14 years, 3 weeks past

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.


Browse the Archive

Earlier Entries

Later Entries