Everything In Between

Clickjacking or, more formally, user interface redressing, is a class of security vulnerabilities similar to phishing scams. The technique uses web standards to trick unsuspecting victims into performing actions they were not intending to.

Clickjacking does not rely on bugs in any software. Instead, the technique is simply an abuse of the growing graphical capabilities that advanced web standards like CSS provide to web browsers. A good introduction to clickjacking is provided by Steve Gibson and Leo Laporte on their Security Now! podcast.

As far as I’m aware, only Firefox when combined with the NoScript add-on and Internet Explorer when combined with the GuardedID product provide any measure of protection against clickjacking attacks. To date no other browser can detect, alert, or otherwise help you to avoid or mitigate the risks of clickjacking attacks.

That said, there’s gotta be something users of other browsers can do. Well, it may not be as much as what NoScript can do, but there is something: use a user style sheet to help expose common clickjacking attack attempts.

clickjane.css helps detect clickjacking attacks for all browsers

Until browser manufacturers provide built-in protections against clickjacking attacks in their software (which is arguably the best place for such logic in the first place), I’ve started putting together a user style sheet I’m calling clickjane.css that attempts to instantly reveal common clickjacking attempts. Since it’s a CSS user style sheet, this approach should be cross-browser compatible so that users of any browser including Safari, Opera, and other browsers that don’t have other means of protecting against clickjacking attacks can use it.

I’ve only recently learned about this class of exploits and so I’m not supremely well-informed on the topic. As a result, the clickjane.css file is relatively sparse and currently only reveals what I’m sure is a small set of clickjacking attmpts. However, as I research the topic further and learn more about the actual underlying HTML and CSS that clickjacking uses, I’ll be updating the clickjane.css code to reveal those attempts as well.

Naturally, contributions and assistance in any form are most welcome! Learn more about clickjane.css as well as how to use it at the Clickjane CSS Github wiki.

Before and after clickjane.css

Here are two example screenshots of a benign clickjacking demo.

1. Before:
   

   Screenshot of Safari before clickjane.css is used to expose clickjacking attempts.

2. After:
   

   Screenshot of Safari after clickjane.css is used to expose clickjacking attempts.

Good habits you should get into to mitigate clickjacking risks

Here is a list of behaviors that you should make habitual while you browse the web. Engaging in these behaviors can dramatically reduce the likelihood that you will be victimized by a clickjacking attack.

• Explicitly log out of any service you have logged in to when you are done. That log-out button is there for a reason: use it!
• Avoid providing your browser with “Auto-Complete” information for critical sites, such as your bank.
• Make sure you are running Flash Player 10 or greater, which mitigates this vulnerability for Adobe Flash content.

More resources to learn about clickjacking

• Hackademix.net - More clickjacking links to the OWASP presentation, the white paper, and a blog post showing several CSS-based exploits.

It’s been too long since I joined the fun, if amazingly heated, debates over the direction that Web standards are moving in. Recently, given the “free” time to do so, I decided to dive head first into what is (sadly) an almost 14 year old debate. The result is this blog post, which is mostly a response to Bert Bos’s essay Why “variables” in CSS are harmful and Matt Wilcox’s opposing response to that essay, Why CSS needs to borrow from programming languages. Their articles are each worthy of a read, possibly before this one.

Here’s the summary of my argument.

Adding many “programmatic” features to the CSS language such as variables, macros, or flow control is a mistake. However, CSS’s failure to simply encode visual relationships (instead of merely typographic properties)—a severe deficiency in the core language itself—requires the addition of delegation features. With the additional capability to reference an arbitrary element’s computed value regardless of its hierarchical context, CSS will be more accessible to both amateur and professional web designers, more capable, and will more forcefully promote the semantic Web and its ideals.

In this corner: CSS variables are harmful

Bert does a great job of summarizing the conclusion of his argument himself. In his essay, Bert says:

Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant, but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS, these things must not be added.

As we all know, one of the wonderful things about CSS is that the core language itself is remarkably simple. (What’s not simple is the spectacular way browser manufacturers have destroyed everyone’s hope that implementing CSS-based designs in the real world will ever be easy, but that’s a whole different can of worms.) Fundamentally, CSS’s syntax can be explained with a mere three major components: property/value pairs, declaration blocks, and rule sets.

What this means is that CSS as a language is stupidly easy to learn. I think everyone would agree that it’s certainly easier to learn than, say, JavaScript or XSL. Now, that’s important because, without putting too fine a point on it, Bert mentions multiple times that CSS’s “intended audience” are the diverse and likely relatively technically ignorant content authors that are responsible for the overwhelming majority of web pages on the public Internet today.

He makes the very good point that The value of the semantic Web isn’t defined by how well structured the best documents are, but by how well structured the vast majority of documents are. In other words, CSS needs to remain instantly useable and reusable to these untrained, amateur web content publishers for the benefits of self-describing documents (i.e., the semantic Web) to see mass adoption.

To wit:

reusing other people’s style sheets is more difficult if those style sheets contain user-defined names. Class names are an example. Their names may suggest why the author created them (assuming they are in a language you understand), but typically you will have to look at the document to see where they occur and why. Symbolic constants make that problem worse.

And, later:

For many people, style sheets with constants will thus simply not be usable. It is too difficult to look in two places at once, the place where a value is used and the place where it is defined, if you don’t know why the rule is split in this way. Many people are confused by indirection anyway and adding an extra one, in addition to the element and class names, has the same effect as obfuscating the style sheet.

Whether or not you believe Bert Bos is underestimating the average web designer, it’s pretty clear that these are really good points. Nobody wants CSS to be obfuscated, hard to learn, or hard to reuse. That’d just be crazy talk.

In the other corner: CSS variables are a real-world requirement

The more features you add to an application, a programming language, or indeed any software, the more difficult it becomes to grok it. As the Python people would say, the larger a language gets the more difficult it is to hold all of it in your head. Nevertheless, adding “features” is sometimes the only way to add capabilities, and I don’t think anyone in their right mind would argue that, once written, software should never change. (That’d just be crazy talk, too.)

In his opposing arguments, Matt Wilcox recognizes this when he says, Yes, the syntax should be simple, but the capabilities of CSS should not. What he’s alluding to without verbalizing it is the balance between adding necessary capabilities without unnecessarily growing the “size of the language.”

However, Matt says that modern web design methodologies (e.g., separation of concerns between structure, presentation, and behavior) dictate that CSS needs more capabilities than it currently has:

CSS lacks capabilities to allow truly flexible design, requiring layer upon layer of ‘tricks’ to accomplish certain objectives, requiring content to be structured ‘just so’ to achieve a display objective, or in the case of some designs proving instead to be completely incapable.

[…]

CSS’s positioning is a cludge. It’s a cludge because you can only position relative to the last positioned parent container. Well, that limitation in itself dictates that all positioning relies upon how the content is structured. And that means the presentation and the content are not truly separable.

To align CSS’s capabilities with the requirements of real-world web design objectives, he says, CSS needs to be capable of describing relationships between semantically and structurally arbitrary but visually related elements.

Visual design is fundamentally about relationships between elements. For all of the artistic flourishes and creativity, it’s about relationships. ‘That yellow’ only grabs your attention because of its contrasting relationship with ‘that blue’. ‘This heading’ only works as a heading because of it’s exaggerated relationship to the size of the body text. […] CSS has no clue about relationships, period. And that’s why CSS as it stands right now, is not good enough. That’s why CSS without variables (true variables), without basic logic, without maths, can never be as flexible as we need it to be.

This is what web designers have been complaining about for (what feels like hundreds of) years. The fact that CSS has no capability to describe presentational relationships between elements in addition to directly describing an individual element’s presentational properties is a gaping hole that sorely degrades its ability to be a media-agnostic styling language. Every single web designer I’ve worked with has gasped at this omission, and though at first I didn’t understand why, the more I understood the principles behind graphic design the more I came to realize how fundamentally problematic this omission really is.

Adding delegation makes CSS easier for designers

As Matt eloquently stated, design is all about relationships. Good web designers create designs by constructing visual elements that have strong, often exacting relationships with other visual elements. There are many names and examples for this: visual language, visual hierarchy, the golden ratio, the grid, visual balance, the typographer’s scale, and so on.

What happens when the designer tries to define a relationship between elements? “How do I say that the whitespace between element A and element B should always be the same? How do I define element A’s height as half of element B’s?” These definitions, which are natural and necessary to the way designers work in both their mind and their mediums, are impossible to encode in CSS.

The closest you can get is declaring the same values to each element’s properties, not describing the relationship itself. This suffices only so long as these values are known ahead of time and are the same as one another, which severely limits the design possibilities we are capable of (without resorting to what Matt calls “tricks”). That’s why achieving simple visual effects are actually very complex and so, sadly, that’s where you’ll find the majority of indirection and obfuscation in CSS today. (I’m looking at you, faux columns.)

So who wins?

Both Bert Bos and Matt Wilcox have made some great points. Bert rightfully wishes to keep CSS lean and simple, even at the expense of some arguably beneficial styling power. Matt, on the other hand, argues that our needs as web designers have evolved faster than the technology to the point where CSS is too limited, fundamentally so.

The truth is, they’re both right. And they’re both wrong. Or rather, they are each taking a position that is too extreme. Bert’s absolutely correct when says that many of these proposed extensions are redundant and harmful, and yet Matt’s also correct that CSS lacks some fundamental capabilities that designers expect to be present.

Bert says that the CSS capabilities everyone’s asking for can be implemented using techniques that don’t rely on CSS whatsoever. These techniques, he says, make things like true CSS variables “redundant.”

There are examples of CSS with constants to satisfy all styles of programming, e.g.: David Walsh (in PHP), Tedd Sperling (in PHP), Digital Web Magazine (in PHP), Eco Consulting (in SSI), and Christian Heilmann (SSI and PHP).

Quite simply, he’s correct in stating that programmatic features need not be added to CSS proper to achieve desired results, but he’s incorrect in his apparent thinking that designers will be able to use these other tools to leverage CSS. Take, for instance, the probably more familiar (though not linked above) notion of using JavaScript to manipulate CSS values.

var x = document.getElementById('SideBar'); // get #SideBar element
var y = document.getElementById('MainColumn'); // get #MainColumn
var z = document.defaultView.getComputedStyle(y, '').getPropertyValue('height'); // get computed height of #MainColumn
x.style.height = ( parseInt(z) / 2 ) + 'px'; // set #SideBar's height 1/2 of #MainColumn's

This is an example of programmatic code that uses variables and expressions. It sets the element with the ID of SideBar to half the pixel height of the element with the ID of MainColumn. It does this by obtaining the MainColumn’s height (at the time this code runs) and saving it in a variable, then performs some trivial math to half the value and use the result as the pixel height of the SideBar.

Doing this is currently impossible with CSS alone, yet it’s something that clearly belongs with whatever other “presentational” code exists and not in “programmatic” scripts that would otherwise be charged with defining “functionality.” As Matt states, using JavaScript to “script” solutions to CSS’s shortcomings like this is not an acceptable answer.

CSS doesn’t have [basic logic or maths]. Nor is it the job of JavaScript to make up for this lack of abilities. JavaScript is about interaction behaviour, and what we are talking about here is pure display logic. Not interaction logic.

Moreover, the place designers expect to put code like this is, of course, into a CSS style sheet. The way designers expect to put code like this into CSS is by adding delegation features. Requiring designers to learn JavaScript (or any other programming language) to encode such design relationships is nothing short of ridiculous. In what world is that easier for untrained laymen to understand than CSS?

Adding delegation to CSS is worth the effort

One of Bert’s arguments against such additions to CSS is that implementations would become harder to create, and that we’ll (almost certainly) see more bugs.

extending CSS makes implementing more difficult and programs bigger, which leads to fewer implementations and more bugs. That has to be balanced against the usefulness of the extension.

Although I do agree with his statement that an extension’s usefulness has to be balanced against its potential costs, I think something so fundamental to design methodology as delegation greatly overcompensates for the cost of such implementation efforts. Moreover, if I understand Bert correctly and as he also discusses, the majority of implementations that would need to implement such delegation already have relatively complex internal structures to make the implementation effort somewhat easier:

There is no scoping [in proposals that only define global constants]. That means that an implementation needs a symbol table, but no stack. A stack would require a little bit more memory, but mostly it would make implementations more complex. (Although every programmer has, one hopes, learnt to program a symbol table with lexical scope during his training.) Constants in CSS are thus easier than, e.g., XML Namespaces, which are lexically scoped.

It is different for those CSS implementations that provide a CSS Object Model (an API for manipulating a style sheet in memory). Those implementations do need to keep track of scope in some way, because adding or removing a line of the style sheet can make a previously redundant definition become meaningful.

In order to use JavaScript to solve many of the shortcomings of CSS, as huge numbers of professional web developers do routinely, we use the very CSS Object Model whose prior implementation already exists for us to build upon.

CSS delegation doesn’t grow the size of the language

For the sake of argument, let’s simplify our requirement somewhat so that our somewhat contrived example of design intent is to create a relationship between the MainColumn and the SideBar elements such that they are of equal height. This is more informally known as “making columns.”

Here’s what a natural, hypothetical snippet of CSS would look like if the language supported delegation features such that it could encode visual relationships.

#SideBar { height: #MainColumn; }

This code theoretically says almost the exact same thing as the JavaScript shown earlier (save for the division, of course); it takes the computed value of the MainColumn element’s height property and applies that value to the SideBar element’s height property. In other words, “The SideBar’s (element B’s) height is always the same as the MainColumn’s (element A’s).” (Of course, this is a parse error in reality today.)

This extremely trivial example has some remarkably far-reaching implications, and yet there is really nothing radical about its syntax. Making this a reality significantly expands the capabilities of CSS without dramatically increasing the size of the language. This capability would not only beat the pants off “CSS tables,” it also potentially obsoletes the arguably misguided efforts of the CSS3 Advanced Layout and Grid Positioning modules, too.

We’ve long since abandoned table layouts because they force us to use presentational markup. That’s still what “CSS tables” force us to do, too. In other words, with display: table, the SideBar needs to be a child of the MainColumn element or, maybe worse and more likely, a child of a semantically meaningless wrapper element.

CSS positioning was introduced with the promise of freeing us from source-order-dependent styling, without which there is no hope of efficiently abstracting presentation away from structure. Moreover, abstracting presentation away from structure is the single most important prerequisite needed to improve document reusability and strengthen the semantic Web. Absolute positioning works, but limitations elsewhere in CSS mean its use is problematic for many designs, so in practice it doesn’t gain widespread adoption.

Here’s a theoretical solution to a two-column and a footer layout using CSS delegation with this semantic HTML:

<body>
    <div id="MainColumn">I'm the main column.</div>
    <div id="SideBar">I'm the right-hand sidebar.</div>
    <div id="Legalese">No one will read me.</div>
</body>

The CSS would look extremely familiar, possibly like this:

#MainColumn { margin: 0 25% 1em 0; float: left; }
#SideBar { width: 25%; min-height: #MainColumn; }

Using the same HTML, the same solution using the CSS3 Advanced Layout module would look something more like this, although to be frank I’m not certain I fully understand this syntax even after staring at it for months:

body {
    display: "a  b"
             ".  ." /1em
             "c  c"
             75% 25%
}
#MainColumn { position: a; }
#SideBar { position: b; }
#Legalese { position: c; }

Not only does there seem to me to be far more indirection in this method than there would be using CSS delegation, there is also an enormous increase to the size of the CSS language: a new (ASCII-art?!) value to the display property whose syntax is clunky at best. A similar story can be said of the CSS3 Grid Positioning module, which does lots more than just add a new (already complex) gr CSS unit.

The upshot is that the Advanced Layout and the Grid Positioning modules are doing some of the right things in many of the wrong ways. Both those modules add unnecessary complexity to CSS without giving designers a natural way to say what they mean. They do more to introduce obfuscation and indirection than simple delegation would, and they aren’t as broadly capable. Both of them try to solve a specific problem instead of dealing with fundamental deficiencies in the toolset designer’s have to work with.

Designers want relationships via delegation, not variables

Adding delegation such as that I’ve just shown is a natural, necessary addition to CSS because it is how designers create visual components—such as grids—in their designs. Variables (and constants, and macros, etc.), which simply reuse and modify pre-defined statements aren’t what designers care about. Adding them will bloat CSS without adding useful functionality.

“Okay,” you may be saying to yourself, “but delegation is itself a kind of variable, isn’t it?” Technically yes, however adding delegation resolves the core deficiency in the CSS language that designers need to use every day. Yes, it’s technically a form of variable, but that’s not how designers think of it. To say that one element’s visual properties is like another makes a variable only by creating a logical and visually appropriate mapping from the first element’s property to the second independent of markup, thereby avoiding indirection in the form of a variable name or other unfamiliar symbol.

Delegation like this doesn’t require the addition of anything other than what already exists in CSS. Class names and ID values are identifiers whose indirection people already have to deal with. Using them for delegation (to reference another element’s style) doesn’t increase the cognitive load any more than using them to reference HTML elements does. Though untested, the cognitive load might actually be even less since the CSS delegation’s references could be in the same (style sheet) file.

Moreover, delegation will increase the likelihood of document reusability by enabling style sheets to be more self-describing, more self-referential, in a similar way as good markup is. It satisfies a very fundamental need that designers have to define graphical relationships between elements. At the same time, it does so in a way that is natural to both their way of thinking and beneficial to the separation of concerns principle on which the “web stack” (the trifecta of HTML, CSS, and JavaScript) is based.

• Putzing around with some local HTML5 tests and feeding them into http://validator.w3.org. Don’t worry people, this is for fun AND profit. :) #
• Thankfully it’s still light & sunny out. I’m going to need the vitamins. Tonight’s plan: fight my growing headache, get dinner, do fun work. #
• I’m asked for a private interview to talk on the intersection of economics, youth & sex. I decline cuz I’d prefer to talk on that in public. #
• @misswired A thesis. Given lots of interviews on sex—frustrating that I want to answer publicly but interviewers only want to ask privately. in reply to misswired #
• @misswired Between @ConversioVirium, @KinkForAll, my sex blog, and another as-yet-unnamed project, I have enough sex projects, thank you. :) in reply to misswired #
• @maymaym Hey, self, don’t forget http://MaleSubmissionArt.com. So that’s 5 sex-related projects? Yeah, I think that’s enough at one time. :) in reply to maymaym #
• @nathanaelb HTCPCP makes me afraid one day I’ll need to write CSS to render the way milk swirls…swirl-rotation: 90deg; Will that work in IE? in reply to NathanaelB #
• @NathanaelB Well CSS is actually required to implement SVG, so I’m not sure that theory holds water. Or coffee, as the case may actually be. in reply to NathanaelB #

• @NathanaelB Cool to hear you’ll be @BarCamp on Sat! Say hello to me if you see me? Would love to chat with you re IxD and Web accessibility. #
• You know you’re doing too much at once when you mistype your own email address. It’s even worse when your email address is your own name. :\ #
• Twitpoll: If you’re just starting “learning to program” what resource(s) would you use? IMHO stuff like http://pine.fm/LearnToProgram =best. #
• Updating my @WordPress blogs to use newest release (v1.5) of @alexkingorg’s Twitter Tools plugin, which includes VERY important bugfixes. :D #
• @BloodyLaughter #twitterank = scam? It’s very bad that people feel okay putting their username & password in strange form fields! OAuth NOW! in reply to BloodyLaughter #
• Going to @STUB. Still would love to hear ppl’s opinions re ways to learn code—I’ve been getting that question lots lately. http://tr.im/11k2 #
• So @STUB was great. No answers to “How to keep up w/150+ tweeples?!” tho…. Mixing it up by following new folks, unfollowing others. (Sorry.) #
• @ryancross http://Twitterless.com = unfollow notifier? I re-follow people I’ve stopped following sometimes, like after meeting them tonight! in reply to ryancross #
• @Warlach I get that but I use @Twitter to keep up w/friends; don’t want to lose that! Ironically I’ve just added more ppl than I’ve removed! in reply to Warlach #
• @Warlach I’ve thought long & hard (wank wank wank) about splitting my online personas into different accounts. Chose not to, lotsa reasons…. in reply to Warlach #
• @Warlach I’m a ridiculously slow adopter; only ever used a few Twitter clients. I do appreciate suggestions and will try ‘em all eventually! in reply to Warlach #
• My dreams involved a tidal wave, 4 races of time travelling aliens, and a woman explaining an 18-wheeler “butt clutch.” I so don’t get me. #
• @jdub I couldn’t help but make the “Aww” noise. :) RT @jdub: “RT @piawaugh New blog post: Wesnoth addiction error http://tinyurl.com/6rcxdp” in reply to jdub #
• @BrazenCareerist Welcome back to @Twitter. By the by, do you have any advice re personal vs professional blogging? http://tinyurl.com/5rq9ck in reply to BrazenCareerist #
• @ryancross I LOVE “Sales Guy v Web Dude” I’d actually love it less if it weren’t so frustratingly real so often. http://thewebsiteisdown.com in reply to ryancross #
• @ryancross Influence—not control—is how everything from employee/employer relationships, software dev, social media & more SHOULD be viewed. in reply to ryancross #
• @ryancross I’m a middle school drop-out; my academia is very limited. ;) However, I do a lot of reading+thinking on sociology & ethnography. in reply to ryancross #
• @johnallsopp I see what you mean re http://tinyurl.com/632hat —Is there any precedent for arguing for NEW business models due to innovation? in reply to johnallsopp #
• I’m realizing I’m going to need thicker skins if I’ll continue writing for @SitePointDotCom. That’s a good thing; makes me a better blogger. #

• RT @halans: “BarCamp Sydney, alway free (as in speech), Movember 15, 2008! http://barcamp.org/BarCampSydney4 ” I’ll be there, my first. You? #
• RT @emilylewis: ” http://shouldiusetablesforlayout.com/ (from @codepo8)” Also, “View Source…” to read the easter eggs! Chuck Norris said so! #
• @suziam You seem to be participating in some AWESOME involving Hyrulian role play & chatting up ranch girls that I’m sad I’m missing out on. #
• @emilylewis One of the (many) ways I know I’M a total dork: I compliment people on their markup. Another: I read web sites via View Source…. #
• @JohnBaku I second that strongly. “Dating” sounds rigid & formal but “meeting someone” sounds organic & fun & open to all the possibilities. #
• Google introduces GMail Video & Voice chat. All you need is a plugin. http://tinyurl.com/6yr9jl It uses XMPP, RTP, and H.264! (via everyone) #
• @karlw3c New CSS validator in JavaScript? I commented on the blog: Perhaps show me oldest compatible CSS profile for each rule with Firebug? #
• @TimGasper Glad I helped. Good luck w/your preso. I still don’t know what you mean by “Web 3.0″ but then I again I still don’t grok Web 2.0. #
• @visafirst Thanks but it’s sorted now. New plan: quit current employer next month then travel+write on web dev for 3mo+move to SF+find work. #
• @karlw3c That’s a great idea, too. Let’s put the hypermedia back into hypertext document development tools! :D re: http://tinyurl.com/65o439 #
• @pennyhagen Cool! That’s @jdub & @piawaugh’s work. Also check out http://BeTheSignal.org & http://twit.tv/floss16 Look Jeff more pimpage! :D #
• @EssinEm Meeting people while in a primary relationship is also a fuck-ton of work. Looking for a third/more seems helluva lot more complex. #
• How do ppl who follow 150+ keep up with everything? I love the idea of following everyone but can no longer keep up w/folk I really want to. #
• @viviane212 Wish I could go to your sex blog preso at @conversiovirium this Mon. Where’s the @conversiovirium love in your tweet, though? :P #
• Some advice for how to write “magnetic headlines” http://tinyurl.com/5ttsny Lots to read but well worth it. (via @mattymcg) #
• @pennyhagen Connections are what it’s all about. “Social media” is a marketer’s equivalent of a techie’s “open source.” They’re both social. #
• Hi new followers. Since some folks keep forgetting this, remember that @maymay is a girl in Maine, not me. ;) Also, I am NSFW so enjoy that. #
• @rogerkondrat No; OSI/GNU/FSF et al have also propelled philosophical ideals well beyond tech audience. This is also part of “social media.” #
• @mattymcg The Mac OS X green window button is not a “maximize” but rather a “smart size.” That said, it does think it’s smarter than it is. #
• @lachlanhardy I’m your exact opposite: Last month my $350+ Rx glasses got run over by traffic (thrice!) yet I waited for the light to change #
• Last wknd @BloodyLaughter met a woman at a party who said she & I just haven’t found the queer kink scene yet. Tonight we test this theory. #
• So fucking sick of bar culture I could deafen more people than the bar music does. OTOH, cool bunch of dykes. Wish they weren’t at a bar. #
• Just moved the Oomph @microformats toolkit @WordPress plugin from my own server to the Plugin Directory. Sweeet! http://tinyurl.com/wp-oomph #
• @laughingrhoda Why edit things? I’ve said & posted stuff I no longer believe but I prefer integrity of showcasing my own evolution publicly. #

• @mrsexsmith How is it that poetic words sound so goddamn awful? “Pulchritude?” Sorry that doesn’t sound like it means “poetic beauty” to me. #
• @BloodyLaughter That’s a silly conversation; there are links between every career path & caffeine abuse. Just like most other addictions. ;) #
• @BloodyLaughter re caffeine pills: What’s to enjoy in that? re unifying your Internet personas: Everyone agrees, it’s the way of the future. #
• Easiest bit of Google hacking: combine the `inurl:` & `site:` operators to find a domain’s subdomains when `dig example.com axfr` fails you. #
• @suziam IMHO people still need to figure out a way to reconcile the distinctions and similarities of grid-based layout versus display:table. #
• @grantyoung My experiences at Aussie restaurants have been similar. $2 for ½ spoon of guacamole, $7 burger but with any sauce it’s +$4. WTF? #
• Fuckworth of holy fucking shit! I am SO looking forward to doing my own thing in 4wks…. (& whoring it for homepage of http://Cursebird.com.) #
• I’m drooling over new @RaphaelJS demo http://raphaeljs.com/australia.html I so, so have to start using SVG more seriously in day-to-day dev. #
• @TimGasper Where is your “Web 3.0 & Semantic Web” preso happening? Re resources, check out @davidseth’s @SitePointDotCom blog for semantics. #
• @joeschmitt You’re backwards. @Twitter is made for grammar jokes. Especially with a 140 character limits you’d better get ur grammars on! ;) #
• Thought of the day: I took to @Twitter like a fish to water. Why? Probably because reading my archives=decent way to monitor mood swings. :) #
• @karlw3c Right on! I second giving all programs with “so much coupling on display” big X ratings! :D http://soa.dzone.com/articles/rest-http #
• @SaraEileen Congrats re http://SaraEileen.com/blog I like your approach to projecting your online self naturally. Social media+branding FTW! #
• @jacobshare Do you have any advice re using social media tools other than @Twitter or advice for using it to find work that’s not a 9-5 gig? #
• Checking out Oomph, doing some @WordPress hacking and trying not to get distracted by the beautiful naked boys @BloodyLaughter’s looking at. #
• @troyorleans ‘Lubricious’ is my new favorite word of the year! It’s all Viva-La-Revolución-esque while still sounding sexy in its own right. #
• Coolest stupid web trick I learned today: Embed http://YouTube.com videos with `&start=30` appended to URL to start the video 30 seconds in. #
• @shellynoel Liked your post, “Social Media is Taking Over the World.” http://bit.ly/4uNe2G I want to move to SF this Spring…140 char advice? #
• RT @emilylewis: women in web 2.0(via @ryancarson) http://bit.ly/10DLq Contrasted w/stupid male geek culture(via @vdebolt) http://bit.ly/eZbP #
• @emilylewis You’re doing more good w/your @microformats series than I am w/my @WordPress plugin! Also we just retweeted each other & I LOLed #
• http://twitpic.com/l6p2 - Instant retweet replay! AKA you know you’re addicted to @Twitter when…. Also when you tweet at someone in the … #
• @maidchaste Been to SF for almost 2 wks+again for 4 days. Didn’t want to leave either time+kink & tech scene is there, ala #ArseElektronika. #
• @maidchaste I’ve spent years dreaming of living in San Francisco; can’t really understand why I’m not there yet. Tonight, tho, more dreams. #

I’ve just developed a completely idiotic (by which I mean brain-dead simple) plugin for WordPress that will add the Oomph Microformat Toolkit to all WordPress-generated pages. If you use a WordPress template that encodes your data with valid microformats anywhere on your page, this means when you install the plugin your users will see the Oomph microformat overlay and will be able to instantly export this encoded data.

This page is a live example, so if you’re using a JavaScript-enabled browser you should see a microformat icon on the top-left of the viewport that is pulling data from (at least) my “The bio” section in my sidebar. Go ahead, click it. I’ll wait.

Pretty nifty, isn’t it? Naturally, all of the credit for this functionality belongs to the Oomph team, not me. If you want to learn how to add microformats to your blog, I’d recommend Emily Lewis’s latest series of blog posts, Getting Semantic with Microformats. If you want to learn how to easily add the Oomph microformat overlay to your WordPress blog, read on.

The backstory

After Ask.com’s announcement that they are adding semantic search capabilities to their search engine, there’s little doubt in anyone’s mind that the semantic web is the future’s web. As far as I know, Google has yet to reveal similar initiatives but they are clearly in the know as well. Mark Birbeck, one of the smart folks who devised RDFa, recently gave a Google Tech Talk that made the point that semantics are the next big thing in the Internet search engine game.

However, for semantic web stuff to really take hold, two things need to happen first. I think these things need to look like this:

1. Developers must create tools, plugins, and other software that makes it possible for the wider community to create compelling, interoperable applications that support semantic encoding. Thankfully, we are already at this point, with toolkits like the Oomph Microformat toolkit coming out of MixLabs.
2. Armed with these software tools, CMS and other publishing platforms need to adopt semantics as first-class features of their platforms, and build interfaces that end-users can make immediate use of. This is where we still need to go, though some platforms like Drupal have begun to pave the way for this.

Drupal 7 will be fantastic, I’m sure, but we live in the here and now. I saw the Oomph microformat overlay on Emily Lewis’s blog and was more convinced than ever that if everyone—programmers and laymen alike—had easy access to these tools, they’d simply be pounding down the doors to use them. So that’s why I sat down and wrote a completely idiotic plugin for WordPress that makes it completely, utterly, brain-dead simple for anyone with a microformats-enabled WordPress theme to add the overlay to their site.

WP-Oomph: Download the plugin

My request to add the plugin to the WordPress.org Plugin Directory has not yet been completed, so in the mean time I’m hosting the plugin right here. (When/if it’s accepted it’ll end up being The plugin is hosted on that site permanently.)

The latest version is: 0.1.1.

Download the latest version of the WP-Oomph plugin.

Thanks to the Oomph team’s work, the plugin is a ridiculous 1-liner (for now) that uses WordPress’s wp_enqueue_script() function to call both its included jQuery library and the Oomph library itself. And, well, that’s it. I told you it was idiotic, but at least now the whole process of microformat-enabling a WordPress blog is 100% point-and-click.

WP-Oomph: Frequently Asked Questions

I installed and activated the plugin, but nothing is different. How come?

First, view the source of your WordPres-generated page and make sure you see a line similar to the following near the top:

<script type='text/javascript' src='http://visitmix.com/labs/oomph/1.0/Client/oomph.min.js?ver=1.0'></script>

If you see that but there’s still nothing different about your page, then you probably don’t have any (valid) microformats. You might consider switching to a WordPress theme with built-in microformat support, or modifying your theme’s code to add some of your own. You can learn more about the support WordPress offers for microformats in the Microformat wiki.

The plugin does let me do X thing that I want to do! Why not?

Most likely because I haven’t taken X thing into account. Sorry, I’m not a psychic (as much as I wish I were). However, you’re encouraged to leave a comment on this post or to contact me elsewhere to request that I add capabilities to the plugin. Better yet, if you’re comfortable doing so, send me a patch.

• @Neek_ I could say something terrible now but I won’t. Instead I’ll just IMPLY that I’ve said something terrible by mentioning that I COULD. #
• @EssinEm That sucks, but isn’t technically wrong unless you’ve got an employment contract that explicitly specifies terms of termination. :( #
• I have an INTENSE headache. I bet it results from not eating+new plan for Visa issues. Up side=in 4 wks, LOTS more writing+tech events time. #
• @BloodyLaughter @katebornstein Do either of you know if 1Password.app integrates with the Mac OS X Keychain? If it doesn’t, I’d not use it…. #
• @katebornstein @maidchaste Thanks for the info. I use the OS X Keychain as my single (synched) store of passwords: http://tinyurl.com/5972hb #
• Goddamn headache will not go away even after 2 hour nap & @BloodyLaughter’s kind care. Really wanted to write but may just succumb to sleep. #
• @ProblmLikeMaria Which Star Trek did you watch that you switched away from? Yes History Channel is interesting but Star Trek has better sex. #
• @aagblog My blog’s been the center of “Please be quiet on this particular subject” two different times now+one recently. I say speak freely. #
• I 2nd @katebornstein’s sentiment “Overturn Prop 8, but Fuck Marriage Anyway” strongly. Marriage=Special Tax Status http://tinyurl.com/67jaym #
• @JohnBaku Your dad doesn’t want you to be the best son in the world he only wants you to love him. (And you’re likely a better son than me.) #
• @mrsexsmith If I write you a @WordPress plugin, can you do some graphic design work for me? I need something appropriate for a new minisite. #
• @SaschaK Reports of a “severe maelstrom” of productivity due to an Internet outage in America: http://icanhaz.com/nointernets Try it out? :) #

• @sanbeiji Trader Joe’s at NYC’s Union Square was first store I shopped at with a sommelier & I asked him for “the booziest Shiraz, please.” #
• @echomikeromeo You’re clearly hanging out with the breed of girl that doesn’t make masturbation jokes. I’d suggest making the joke just cuz. #
• @BloodyLaughter & I check out the Newtown Festival. I wasn’t expecting it to be so big! That was all the out-of-the-house I needed today. #
• Updating various Trac sites to version 0.11.2, newly released today. Include security fixes+speed & search enhancements. http://tr.im/trac11 #
• After a few house cleaning chores, @BloodyLaughter & I sit down to focus on our respective writing tasks for the day. But before THAT, food! #
• Hi new followers @randomphrase, @juliobiason. @randomphrase presented Bazaar at last http://SyPy.org backed by @sourcefrog and @juliobiason. #
• @factorypreset When I feel “exhausted” like that the cure is often something that’s EMOTIONALLY recharging. Doing “nothing” is never enough. #
• Robin’s http://icanhaz.com/naughtycomics It’s a bird! It’s a plane! No it’s @BloodyLaughter LAUGHING HER ASS OFF at http://Superdickery.com. #

I did a brief talk on Git at SyPy recently. I had a great time learning about the differences between Git, Bazaar, Mercurial, and even some other tools like BitKeeper that got mentioned and were before my time. Both my co-presenter, Alistair (who I sadly have no personal web address for!), and Martin Pool had some really interesting things to say about DSCM tools and Bazaar in particular.

So anyway, my talk was pretty dense and unfortunately I had major issues with Keynote (WTF happened to presenter notes?!) while giving the presentation. I don’t feel like I did as well as I could have. That, and I’ve learned the lesson of practice, practice, practice before doing a live demo. Ugh.

That said, I did actually prepare a bunch of slides so I figured I’d share them with everyone here. The slides are available as a downloadable PDF with my presenter notes, or a ZIP archive of the Keynote file, if you’ve got that installed on your Mac.

I got some fantastic feedback from the great folks at the SyPy meeting. One particular piece of advice I thought was exceptionally poignant was that in the context of a “which tool to use” presentation, my presentation is very technical—probably too technical. Instead, I should have said more about the different ways and applications I used Git with or for.

I could have talked about how I use git as a core tool in the change management process for server configurations. Since git’s big selling point is scalability, this process also turns out to be really useful for larger server deployments. When (appropriately privileged) coworkers need configuration changes to a particular machine, they can actually send me a pull request and I can review their configuration change. I also could have talked about the various different binary file types I often store in git repositories, such as image, Flash, and other video assets for web development purposes. Git handles binaries exceptionally well!

None of these things made it into the presentation slides, so I tweaked the title to reflect the more fundamental technical thrust of its contents. Perhaps this means another git talk is in the works. Or maybe a sequel to this one called Git Fundamentals in 45 Minutes or Less. In any event, if you have any feedback or suggestions, constructive comments are always appreciated. :)

Download presentation

• Git Fundamentals in 30 Minutes or Less (PDF)
• Git Fundamentals in 30 Minutes or Less (Zipped Keynote)