Hyperbolic title using the word sexy to describe some code

Written by Harry Roberts on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

Brief explanation as to how I, a ‘ninja’ or ‘rockstar’ of some description, have managed to solve a problem that doesn’t exist whilst utilising some less-than-exemplary techniques. A quick sentence mocking those who haven’t used all Javascript libraries on every page of their latest build. This is followed with a rhetorical question asking why not enough people are using verbose libraries to fix problems caused by poor markup and stupid CSS.

Brief paragraph explaining why I think there’s a massive gap in the market for something like this; something which has no production or commercial value.

Basic misunderstanding of the underlying principles of the problem asserted in no uncertain terms here.

<code>Transitional doctype.

  Links to JS libraries used to force my shoddy code into working.

  Unexplained code which is only tested in non-IE browsers, and only actually works in Firefox.
  
  This code is also littered with semantic inaccuracies which further proves my lack of basic knowledge on this subject.

  This line actually breaks what I'm trying to achieve. I should remove it but I don't know that.

  <span class="code-comment"><!-- I forgot to remove this comment from this section which I have actually copied and pasted from someone else --></span>

  Displaying my lack of JS knowledge by combining external libraries with inline code.

  I left this line in because I don't know what it does, and I don't want to break anything by taking it out. I probably don't actually need it.

  This miraculously fixes the above breakage. I worked this one out myself =D

Untold lines of code later, I have achieved what most developers could have done in less than half the time and to more than ten times the quality.</code>

A paragraph which talks about what the above achieves, but fails to explain how it does so. This is largely because I don’t know this myself, and the fact that the source-code I copied wasn’t commented enough to allow me to work it out.

Giant download button.

Quoting someone out of context to help further my claims that this is indeed the most effective method for combating something which is nothing but I’ve made into a big thing through my knowing nothing.

Brief self-back-patting sentence. Mild, unaimed mockery at developers failing to embrace the power of jQuery coupled with MooTools combined with eight lines of stylistic markup and some inaccessible code to create something that doesn’t even make sense.

Final paragraph explaining why my method is better than using CSS3, which ‘isn’t supported yet’, and how you can use this on your next website just by copying and pasting the above in some place which should cause it to have some effect on something. I don’t know where this location is because I don’t actually understand what I’ve bodged together. Sign off with a sentence reaffirming the aforementioned misunderstanding, and how you can overcome it with several thousand bytes of inaccessible, insemantic and verbose code.

Huge ‘Tweet this’ link.

Submits article to dozens of web development sites to share my work with novice developers hoping to learn how to do things the correct way. Sits back and awaits lots of link-bait, low quality traffic, and novice devlopers thinking this is gospel.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.