The concept of a “CSS Reset” is embarrassingly new to me–I only read about them a month or two ago.  Of course, 90% of what a reset does, I have done manually for years, but I stupidly never thought of separating the styles out that way.  When I read about resets, I was initially turned off because many of them seem way too aggressive.  (Upon searching for validation, I indeed found that it I wasn’t the only to dismiss resets as a bad thing.)

I’m a stubborn person, but fortunately I seem to be capable of talking myself out of stubborn positions.  A week or two back, I decided to try out the use of a reset, to see (A) if I liked the setup, and (B) if it seriously borked any of my recent work.  Looking around, I didn’t find any that did exactly what I wanted a reset to do.  The closest was a reset unofficially credited to Shaun Inman, although it appears to be itself modification of the popular YUI reset.  It was as good a place as any to start, so I began to flesh out my own personal reset script.  Here’s what I came up with:


/* "Voodoo Child" CSS Reset by Thom Stricklin. Based on W3C defaults, YUI and work by Shaun Inman. */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,th,td,embed,object {
padding: 0; margin: 0; outline: 0; }
table { border-collapse: collapse; border-spacing: 0; font-size: 1em; }
fieldset, img, abbr { border: 0; }
address, caption, cite, code, dfn, th, var { font-weight: normal; font-style: normal; }
caption, th { text-align: left; }
h1 { font-size: 2.0em; }
h2 { font-size: 1.50em; }
h3 { font-size: 1.17em; }
h4, h5, h6 { font-size: 1.0em; }
h1, h2, h3, h4, strong, b { font-weight: bolder; }
h5 { font-weight: bold; }
h6 { font-weight: normal; }
q:before, q:after { content: ''; }
a, ins { text-decoration: none; }
sub { vertical-align: bottom; font-size: 0.67em; }
sup { vertical-align: top; font-size: 0.67em; }

/* Slight Return. These settings are more likely to change from project-to-project. */
h1,p,blockquote { margin-top: 0em; margin-bottom: 0.5em; }
h2,h3,h4,h5,h6 { margin-top: 1em; margin-bottom: 0.5em; }
ul, ol, blockquote, dd { margin-left: 5ex; }
.block-list li { list-style: none; }
.inline-list li { list-style: none; display: inline; }

A few things my reset does differently:

• This is a reset…  and then some.  The new rules I set are too modest to consider a CSS framework by any means, but they do go beyond a standard reset.  For those who would prefer just the reset, just take out everything after the “Slight Return”. (Yes, I am a dork.)
• I do not set all headers to 1em.  Rather, I went with a mix of the W3C “default” values and a little common sense: It’s pointless for H5 and H6 to be smaller than 1em so, instead, I decrease their font-weights.
• I treat H1 differently than other headers.  The train of thought is that H1′s will most likely appear at the top of the page, and so will not require a top-margin value.  H2′s and beyond will appear in the middle of page content and will probably look better with some extra separation.
• I do not reset the default list styles.  Lists-as-layout are very popular now and rightfully so, but they’re still great for normal lists–like this one–too.  I do provide “block-list” and “inline-list” class declarations for quickly & easily achieving headless lists.  I’m not sure how useful they are, though…  I’ve already encountered a case of a list that will be displayed as block for screens, but inline for iPhone/mobile.
• I fiddle with the display of sup/sub tags.  This behavior is out there in other reset scripts, but unfortunately I did not save my source for this partiicular solution…  Sorry!

I hope this reset script might be of some use to others.  More importantly, I hope this might help to open some minds about reset scripts.  They really are just a set of tools we each can choose to use…  or not use.  But we can forge our own tools.  We can write our own resets to our liking, so why not?

I personally oppose making our browsing experience dependent upon “workspaces” or categories…  It would take too much work for everyday browsing, it’s presumptuous to expect it would actually match most people’s browsing patterns, and it’s only adding another layer of organization to the browser, as tabs (or whatever tabs become) are still in there somewhere.  Workspaces could be useful for advanced users, but let’s not build our browser around them.

I do, however, like the general trend towards moving things into the sidebar.  As I commented on Mozilla designer Aza Raskin’s blog, there are many reasons to consider this a good move.  In fact, I say let’s take things to the next step and move the entire browser UI into the sidebar.  I spent an evening in Fireworks layout out such a design, and here’s what I came up with:

I probably went just a bit too extreme on how compact I made the sidebar (which of course, ought to be resizable anyway) but I wanted to drive home the point: done right, this exodus to the sidebar can improve simplicity, usability, and aesthetics.  The sidebar is the new awesome bar.  I’ll break things down by component:

• Address Bar/Awesome Bar: Firefox (and Chrome, too) have gone a long way to making the address bar more useful, and ubiquity will take us even further down that road.  But there’s still one big problem: it’s a real-estate hog.  Most of the time, if I ever even type in an address these days (more likely I’m following a link or a book mark), I just type, press enter, and forget about it.  Why is it constantly hovering over my window?   When it doesn’t have focus, it should condense down and slide into the sidebar.  Give my web page the full height of the screen to work with.  When you click into the space–boom–it slides back out for you.  It might also be a good idea to provide a delete button on-hover (a la OS X/iPhone search fields).
• Back, Forward, Reload/Stop, and Home: The only four buttons we need.  Even in the current Firefox incarnation, these would easily fit into the sidebar, so why not?
• Apps: Not sure where this idea originated, but it was on Aza Raskin’s mock-up, and I think it’s a great idea.  I hope these are not just “supertabs” in that they stick to the top, but that they provide additional functionality: Available in all windows, always open in the background, personalize the name in sidebar, etc.  I think the option to “maintain a separate cookie/session” for an app would be a neat idea too, as we could then maintain a “Personal Gmail” app and a “Work Gmail” app running without interference, and without the need for an addon.  I also think that Mozilla, Google, and Apple should work together on some sort of web application notification system (some extension of the dom or the navigator object).  As we think of web sites more and more as applications, we need to have the level of interactivity that we’d have with desktop apps, and flashing a message in the title attribute just doesn’t cut it any more. We should have both numeric notifications (i.e. 9 new messages, as pictured above) and Growl-style textual notifications.
• Tabs: Not much to this, except I do think it’s important to give users a “show all tabs” button.  Let’s not be so concerned about doing things “the Firefox way” (differently) that we fail to acknowledge a good user interface element when it comes around.
• Bookmarks, Feeds (Not Pictured), History, Addons: What’s great about this sidebar approach is that it really unifies the interface.  All of these components can look the same and function in the same or similar manner.  It also leaves it so that browser components are competing with each other for real-estate, not with the page content.  I envision most of these components (except bookmarks) being collapsed by default, and expanding on-click accordion-style.  They can either take up as much space as they need, or take over the whole sidebar, collapsing the other components.  But once you click away from the sidebar, they collapse again.
• Themes/Styles: I know absolutely nothing about the current means of theming Firefox, but make this sidebar CSS-driven and I could create an entirely new theme from scratch in about five minutes.  In fact, we could build customization into the browser (think similarly to Twitter’s interface) and let users set their own colors, backgrounds, etc.

A word of caution: let’s not throw out the baby in favor of trendy new bathwater.  In my experience, most Firefox users do not use 20 tabs at once.  They do not keep certain pages open, app-style, at all times.  They’re perfectly happy with the current user interface, and if we completely abandon it, they will balk and move to Safari or Chrome or even IE8 for a more familiar experience.  (See: Winamp.  How many of us switched to iTunes when the ridiculous Winamp 3 UI came out?)  So we need to think out a way to make this new UI work both ways, and probably give users the option when they upgrade: UI elements at top (Firefox 3) or on the side (Firefox 4).

That said, if the next version of Firefox resembles this in any way, I will be eagerly awaiting the 4.0 beta.

So Parallels fell off my radar, until a few days ago, when I was trying to find a way to run GuildWars on my Mac.  Turns out, Parallels runs DirectX 9 and VirtualBox doesn’t.  So, I downloaded the trial of Parallels, and it’s pretty cool.  Unfortunately, no, it didn’t meet my needs for a gaming machine, although it’s possible it would do the job on a newer model Mac.  (Aside from some weird texture issues, the only concern was framerate.)  But I have switched my web testing over to Parallels, and I don’t think I’ll be looking back.

Clockwise from Top Left: Firefox (Host), Chrome (Guest 1), IE6 (Guest 2), IE7 (Guest 1)

Parallels has gone far beyond window integration (which is itself much-improved) to nearly true application integration.  I can set favorite Windows apps such as Internet Explorer (using the term “favorite” quite loosely) and they get saved to my dock.  Later on, I can click on an icon to launch and/or focus the app, just as I can do with a native Mac app.  I know I’m late to the game on this feature, but it’s such a relief for it to be automatic in Parallels…  I spent hours trying to write an AppleScript to do the same thing in VirtualBox–the closest I got was to restore the virtual machine to a particular state and launch it.

My current setup is a bit laggy–I have installed IE6 into its own virtual machine, and running both VMs side by side is lag city.  I am considering testing the old “Multiple IEs” hack to see if it will run in XP Service Pack 3 and, if so, I will just keep all of my Windows browsers in one basket.  (Otherwise…  IE6 on Windows 98?)

But under normal circumstances, it’s a cool experience.  Ther XP windows–what with their drop shadows, their playing nice with Exposé, the lack of a taskbar–look so comfortable on my Mac desktop it’s a bit eerie…  In fact, I tried the “silver” XP theme and, it was so incognito that I had to turn it back to the default blue in order to maintain sanity.

So, Parallels is how I get my Windows now.

“Oh no, does this mean Firefox isn’t secure?”
“I think so…  There were six critical vulnerabilities in this release!”
“Did you know that more vulnerabilities were reported for Firefox last year than for any other browser?  Firefox had four times more vulnerabilities than Internet Explorer?”
“ROFL that’s why I just use IE.”

I really do hear this conversation every time, and unfortunately it’s an apples-to-oranges scenario.

Myth:

Because Firefox has so many vulnerabilities and bugfixes, it must not be as secure as people think.

Fact:

Firefox has so many publicly disclosed vulnerabilities because it is the most popular open-source browser.  This means thousands of people can look at the program code and see where there are vulnerabilities.  Compare this to IE, where only Microsoft programmers have access to the raw code.  If they discover a vulnerability, they don’t have to report it or even patch it until it becomes an active threat.  I’m guessing, in most cases, they don’t patch any but the most serious vulnerabilities, because it’s a waste of man-hours to attempt to perfect an old version of the browser.  (Most of their resources are probably focused on Internet Explorer 8 at this point.)

So of course Internet Explorer will have fewer disclosed vulnerabilities…  However, I’m willing to bet that a very high percentage of these vulnerabilities are actually exploited by hackers.  As for Firefox, the public bug tracker might be loaded with reported vulnerabilities, but I can count on a single hand the number of times these have translated to an actual, real-world exploit on the loose.

And more bugfixes is a good thing–it means Firefox is being patched and made secure more quickly than IE and other browsers.

If you still need convincing, try this:

• Ask 10 Firefox users and 10 Internet Explorer users how frequently they have been infected by a virus or spyware in the past year.
• Ask 10 Firefox advocates, who have forced their families and friends to switch to Firefox, if their family’s computer woes have increased or decreased since the change.

I have switched my entire family over, and the only one who’s had problems is my Aunt, whose kids were smart enough to create an administrator account for themselves and undo the security I put in place, but not, apparently, smart enough to forego Internet Explorer.  I’ve run Firefox for the past five years at work, and the only time I’ve gotten a virus is the five minutes I loaned my laptop to someone else, after which they handed it back with…  sigh…  Internet Explorer up and running.  Do the math.

Facebook: They're all zombies.

This just in: Web 2.0 is dead, according to Robin Wauters of TechCrunch.  So all those articles you’re reading on Digg?  Zombies.  Your friends on Twitter?  Yep, zombies.  And the annoying 25 Things posts on Facebook?  Definitely zombies.  (Okay, that last one was not terribly surprising, as I’m sure someone just reanimated the corpse of an old Livejournal quiz.)

Really, these death pronouncements are just silly.  Paul isn’t dead.  Rock isn’t dead.  And Web 2.0 isn’t dead.  (Hip-hop may or may not be dead; it took five slugs to the chest and was last seen in critical condition.  Developing story.)

First of all, I always thought my little gig as webmaster/PHP programmer would seem quaint as compared to that of a professional blogger.  But apparently, all it takes to be a professional blogger is to traverse a few search results on Google Trends.  Awesome!  I think I’ll put in my two-weeks notice.

Web 2.0... Pirates... It's all connected! Quick, somebody call Al Gore!

Sorry, Ms. Wauters, I understand it’s an opinion piece and my intention is not to pick on you…  But if someone is going to announce the death of Web 2.0, I would like to read some actual opinions in that opinion piece.  Not just a collection of charts courtesy Google.

Well then, allow me to add my opinions.

Web 2.0 isn’t dead.  Let’s cool it with the zombie jokes for now, but Web 2.0 is something you can’t kill.  It’s never been fully formed.

Web 2.0 has always been a very nebulous concept.  Ask a roomful of developers what Web 2.0 is and you’ll get a roomful of different answers:  Some would say it’s social networking.  Some would say that it’s the “mashup” culture of endlessly interoperable APIs.  Some would say Web 2.0 was marked by the widespread adoption of AJAX, or the thin-client applications built on top of the technology.  Still others would probably try to convince you that it is all lickable interfaces, gradients, rounded corners, and 48-point fonts on the login screen.  There’s no single answer…  Web 2.0 is ALL of these things, and yet most of these concepts are too independent of each other to consider their fates entwined.

Black Square (1913) and Black Circle (1915) by Kasimir Malevich. Even the pioneer of geometric abstract art was taken in by rounded corners.

The best analogy is this: Web 2.0 is both a cultural and a philosophical movement… like existentialism or dadaism or punk rock.  More accurately, it is quite literally the Renaissance of Web culture, a resurgence of creativity and style (and of gimmicks) after the dark ages of the dot-com bust.  It isn’t dying, it’s ubiquitous.  People have stopped Googling for “Web 2.0″ because Web 2.0 is everywhere they turn…  It has simply become the culture of the Web.

Now, the phrase and the buzz about Web 2.0 might be dying, and that’s fine by me.  In my experience, the people who have latched on to the phrase “Web 2.0″ are not the innovators, but the bandwagoners…  The ones who started reading Ruby on Rails for Dummies, opted instead for the abridged CliffsNotes version, slapped a user registration form on their Hello World pages, and considered themselves cutting-edge.

Redundant?

I would understand if those people are disappointed right now…  While they were busy jumping in the air going, “Look at me!  I’m Web 2.0 guy!  Gimme some candy,” the rest of us have been trudging along building sites and apps that thousands, if not millions, of people use on a daily basis, no matter what version of the Web we’re running on.

We will, eventually, grow beyond Web 2.0, but I hope we don’t forget the lessons we’ve learned.  For me, the most important part of Web 2.0 has been the adoption of simple, intuitive user interfaces.  The simpler and more logically a website is laid out, the more use it will get.  And usability will never get old & die.

Sooner or later I should rant about 3.0, the so-called Semantic Web.  Maybe I’ll call that one, “Web 3.0: Stillbirth?”