Romantic Heart Made Of Semantic Code

You might have heard about Semantic Code. It’s a coding best practice whereby, for example, one wraps block content in a block element (div, p, etc.), inline content in an inline element (span), lists in list elements (ul, ol), you get the drift. This might seem obvious but thanks, or rather, because of the flexibility offered by style sheets some web developers ignore the intrinsic inline or block nature of HTML elements because they can change it via CSS. So a element can be made to be a block, a

can be turned into an inline element and so on. This malpractice conflicts with the very nature of HTML: it is a language and its function is to describe the contents of a web page. Ignoring that is not only foolish, it also makes for a more confused and less interconnected Internet, and we don’t want any of that. Writing semantic code means using HTML elements the way they were intended.

Now if code is poetry then why not take it to the extreme? How about Romantic Code? Say you’re creating a website for your girlfriend or a family member. Wouldn’t you like to add a personal touch to your code? Let’s get maudlin!

romantic-code

Example #1: values of sentimental value

Here’s a MooTools script I wrote for a (botched) version of my previous, static website:

window.addEvent('domready', function() {
    var mySmoothScroll = new SmoothScroll({duration:  2000,transition: Fx.Transitions.Sine.easeInOut});
});

See that number, 2000? That’s the year my cat Nero was born. I could’ve just picked any amount of milliseconds for the duration of that transition but instead I chose a number that has sentimental value to me. It could be any number, your girlfriend’s birthyear would be great, for example. No one will notice but you and her. Isn’t it a nice way to make code less boring and more intimate?

Example #2: include short poems in comments

As you can see the comment does include relevant information at the beginning but we certainly can spare a few lines for some tacky poetry for our loved ones, can’t we? Mind you that typography in this case is carefully chosen: the actual HTML comment appears in all capital letters while the ridiculous poem is strictly written in lowercase to be less conspicuous visually.

Let’s combine Examples 1&2 in this absurdly redundant code snippet:

<-- OUR TRIP TO KRAKOW, July  2009

<script type="text/javascript">

SheratonHotel = window.open('riverside-view');

sightseeing = new Array("Manggha Museum", "Aquarium",  "Zoo", "Wieliczka Salt Mines", "Auschwitz");

favoriteBars = new Array("Łubu Dubu", "Pauza", "Piękny  Pies", "Re", "Spokój", "Tajemniczy Ogród", "Tram Bar");

script>

-->

That’s a nice way to include references to the last trip you took with your significant other. Just write some Javascript mumbo jumbo containing names of places and/or dates then comment it out of the real code and there you have it: instant reminiscence right in your browser!

Example #3: romantic classes

Let’s say your girlfriend is a songwriter. The following example shows how to write a menu for her website:

<ul class="your-favorite menu  risotto-with-saffron">

<li>
<a href="#" class="theres-something about you">About Mea>
li>

<li>
<a href="#" class="i-love-your songs">My Songsa>
li>

<li>
<a href="#" class="your books move-me  everytime">My Booksa>
li>

<li>
<a href="#" class="always-in contact with-you">Contacta>
li>

ul>

Since HTML elements can have more than one class you can add as many as you wish, composing little phrases that resonate with you. The code still needs to be useful, though, so create at least one class that’s meaningful and relevant to the content and have fun coming up with the rest.

In conclusion, while these practices are certainly not recommended for general use they can still turn out to be useful for particular occasions. And if someone other than the special person takes a look at your code…there’s nothing wrong with giving these people a good laugh!

[Via cutelittlefactory]