Pestbarn

As we all perfectly know, designers are narcissists.

11 Okt 2011

Revamp project: The difference between markup and good markup

When I first started working at my current job, I was immediately given responsibility of the entire company website. All future updates, content additions and edits were to go through me. It took a while for me to get familiarized with the markup and CSS structure, and there’s a specific reason why.

The website was built on a (kind of) 960 grid system, or at least based off of the idea of it. ‘This will be easy as pie’, I thought, and started digging around in the markup and CSS, trying to get to know it a little bit before I’d be sent work orders to add, edit and remove both content and layout components. And the more I dug around in it, the more horrified I got. I’m in no way trying to disrespect the person who wrote this, but my <head>, <body> & <soul> started crying when I saw it all. Pun intended.

<div id="wide-content" style="padding-bottom:70px; margin-bottom:0px; background:url(images/bg-branches.gif) no-repeat bottom center;">

<h1 style="font-family:Georgia, Helvetica, Sans-serif; font-weight:normal;line-height:1.5em; font-size:30px;">
[Headline went here]
</h1>
<div class="wide-content-tagline" style="margin:0;">
<h2 style="font: 16px Georgia, Times, serif; font-weight: normal;">[Lorem ipsum dolor <em><strong>sit amet</strong></em>, <em><strong>consectetuer</strong></em> adipiscing <em><strong>elit</strong>]</em>.
</h2>
<br /><br /><a href="learnstuff"><img src="images/button-learn-more.gif" width="152" height="43" style="" /></a>


</div>
<!-- end wide-content-tagline -->

</div>
<!-- end wide-content -->


<div id="wide-content-3-col" style="margin-top:0px;">

	<div class="wide-content-3-col-column" style="">
    <a href="category1"><div class="icon-business-icon1"></div></a>
    <a href="category1"><span>[Category 1]</span></a>
    <p style="text-align: center;"><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </div>
    <!-- end services-col -->
    
	<div class="wide-content-3-col-column" style="" >
    <a href="category2"><div class="icon-business-icon2"></div></a>
    <a href="category2"><span>[Category 2]</span></a>
    <p style="text-align: center;"><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </div>
    <!-- end services-col -->

	<div class="wide-content-3-col-column" style="background:none;">
    <a href="category3"><div class="icon-business-icon3"></div></a>
    <a href="category3"><span>[Category 3]</span></a>
    <p style="text-align: center;"><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </div>
    <!-- end services-col -->        
<div class="hr-break" style="background: none; margin-top: -70px;"></div>
<div>
	<div class="wide-content-3-col-column" style="margin-bottom: -100px;">
	<p style="text-align: center;"><a href="subpage1">&raquo; Learn more &laquo;</a></p>
	</div>
	<div class="wide-content-3-col-column" style="margin-bottom: -100px;">
	<p style="text-align: center;"><a href="subpage2">&raquo; Learn more &laquo;</a></p>
	</div>
	<div class="wide-content-3-col-column" style="margin-bottom: -100px;">
	<p style="text-align: center;"><a href="subpage3">&raquo; Learn more &laquo;</a></p>
	</div>	
</div>
</div>
<!-- end wide-content-3-col -->

I’ve changed some attributes and content to make this code a little more anonymous.

This is the markup for – and bare with me now – a heading, a tagline and three icons with text underneath. What?

First off, the inline styles made me shiver. Secondly, the "wide-content-tagline" class ticked me off, having a containing <div> around a perfectly good <h2>. Wait, correction – the whole idea of prefixing all layout classes with "wide-content-". There were no "narrow-content-" classes, or components, or anything narrow at all on the entire website. Made no sense what so ever. I mean, just because I drink my coffee black, it doesn’t mean I’d name my coffee’s class ”black-coffee-cup” — I’d just call it ”coffee-cup”. The same goes for this markup.

On a related note, the semantics of this entire markup continues to kind of baffle me. I mean, "wide-content-3-col-column" sounds weird. It’s supposed to say ”I’m a column in a three-column row”, but instead it’s saying ”I’m a three-column column (?) who lives in a wide content container”.

And to put the cherry on top, the code indentation were either non-existing or wrongfully executed (and space-indented, yuck).

The sad part is that the design, the visual part, the side of the page that regular people see each time they come visit the website is a real beauty! It’s elegant, classy, using color with wise moderation in the exact right places, and is an awesome visual buffet of eye-goodness. This designer really knew what he was doing all the way, until the markup were written.

My solution? To rewrite the entire markup and CSS, and add some discrete visual effects simply to make this fantastic design even more… fantastic! This next code block shows my take on the markup, which does the exact same as the above one did, only with an additional headline picture and one extra category + icon.

<div id="front" class="columns">

	<div class="column-duo">
		<img src="images/frontpicture.png" alt="[Headline picture]" />
	</div>

	<div class="column-duo">
		<h1>[Headline went here]</h1>
		<p class="excerpt">Lorem ipsum dolor sit <em><strong>amet</strong></em>, consectetuer <em><strong>adipiscing</em></strong> elit.</p>
		<a href="learnstuff"><img src="images/button-learn-more.gif" alt="[Learn stuff]" class="learn-more" /></a>
	</div>

</div>

<div class="columns">

	<div class="column-quadri">
		<a href="business#category1"><img src="images/icons/category1.png" alt="[Category 1]" /></a>
		<h2><a href="business#category1">[Category 1]</a></h2>
		<p><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	</div>

	<div class="column-quadri">
		<a href="business#category2"><img src="images/icons/category2.png" alt="[Category 2]" /></a>
		<h2><a href="business#category2">[Category 2]</a></h2>
		<p><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	</div>

	<div class="column-quadri">
		<a href="business#category3"><img src="images/icons/category3.png" alt="[Category 3]" /></a>
		<h2><a href="business#category3">[Category 3]</a></h2>
		<p><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	</div>

	<div class="column-quadri">
		<a href="business#category4"><img src="images/icons/category4.png" alt="[Category 4]" /></a>
		<h2><a href="business#category4">[Category 4]</a></h2>
		<p><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	</div>
</div>

First off, I made a universal class called "columns", which could contain column rows of four different types – "column-uni" (1 column), "column-duo" (2 columns), "column-tri" (3 columns), and finally, "column-quadri" (4 columns). Secondly, I switched the whole <div><h2> ordeal to a simple <h1> with an accompanying <p class="excerpt">, the latter one I also made universal, since excerpts were used at several places and pages on the website.

40 lines of code instead of 52 for the same layout block, despite the fact of two additional columns. When you take care of CSS where it belongs (in a separate stylesheet), name your classes appropriately, and use some sensible code indentation, you eliminate lots of problems and increase readability.

Finally, I could breathe again while swimming in all this code. Easy? As pie.

Publicerad i Vardagsprat och märkt , , , , , | Kommentera
27 Sep 2011

Phil Bozeman explains Whitechapel’s lyrics

I’ll be writing this entry in english, since I know the fanbase of the band Whitechapel is mostly english speaking.

A couple of weeks ago, on the day of September 6th, lead singer Phil Bozeman posted song meanings to all of their songs on his Facebook page. This includes all songs on all three albums (except for one instrumental piece), and I will post them here in the right order. All quotes below this point are from Phil Bozeman.

The Somatic Defilement (2007)

The Somatic Defilement is a concept album "based" on Jack The Ripper. Which a lot is fairy tale songs.

  1. Necrotizing (instrumental)
  2. The Somatic Defilement

    This song is a fabrication of the mind of Jack The Ripper. This song puts the work of him with the work of many serial killers. They crave power through the dead.

  3. Devirgination Studies

    This song is along the same lines but goes off the theme of female driven killers, much like Jack The Ripper. Again, this is me putting myself in their head.

  4. Prostatic Fluid Asphyxiation

    Again, this song is driven by female serial killers. The power they feel and long for is explained through sexual pleasures that they have at their disposal.

  5. Fairy Fay

    In this song, the story of Fairy Fay, a woman murdered but never proven to be one of his victims. Some say she never existed and this is a fabrication of the murder. Hence the line ”This confidential lick of my tongue will be taken to the grave and never be seen again.”

  6. Ear to Ear

    Again, the song speaks for itself. Pretty much every victim had their throats cut and severed violently by Jack The Ripper.

  7. Alone in the Morgue

    This song has nothing to do with Jack The Ripper, this song is a simple song about a coroner who is a demented necrophiliac. The song speaks for itself.

  8. Festering Fiesta

    This song focuses on more of a Jeffery Dahmer approach. His collection of rotting bodies were his keepsake for his work. Beyond the point of disgusting.

  9. Vicer Exciser

    This song is about a killer who thrives of watching his victim suffer and bring them to the point of being on the brink of death but can keep them alive and aware of what is going on while they are slowly killed. The title means ”a bad habit to cut”.

  10. Articulo Mortis

    The term means ”in the moment of death.” This song is a fabrication of Jack The Ripper experiencing that moment of death with his victim and conversing with them and feelings of remorse for what he has done.

This Is Exile (2008)

This Is Exile is a concept album of the fall of evil. This album is not about Satan or anything of the sort! Many of you question my religion, I don't follow religion but I am a believer of God! I am not here to judge, I am here to let you know about me and my work and how I feel. I'm not saying you must believe what I do, that is your decision.

  1. Father Of Lies

    This is the beginning, where it all started. This is the failure of a certain being and how his lust for power corrupts him to corrupt what he once believed. This is the tragedy of his betrayal. Again, these are fictional characters.

  2. This Is Exile

    This song is a sad outlook for the fallen one. Exiled to darkness and eternal torment, much like how we treat ourselves. A place where we destroy ourselves. A place where happiness is obsolete.

  3. Possession

    This song portrays the deviant mind of the harvester of evil and how it is used by us to create a dark future. We let our minds be controlled because we refuse to control it.

  4. To All That Are Dead

    This song is about how the restless dead and the tortured souls are used as pawns by people who choose to be evil. This song portrays the people who chose to be tortured and the hurt it causes to those who were loved by them.

  5. Exalt

    This song is about cults. Cults are usually evil groups of people who follow a certain belief. This song portrays the madness and corruption they have on a person/people. Believe in yourself and what’s true in your heart, not what someone brainwashes you and tells you to believe.

  6. Somatically Incorrect

    The title is a play on words of the term ”grammatically incorrect.” Referring back to the first album title. This song is about the anatomy of us as a species and how we adapt to what we surround ourselves with. The mind is a powerful tool that is easily misused.

  7. Death Becomes Him (instrumental)

    The title refers to ”Daemon” being destroyed. The weakness of his mind and inability to control it has led to his demise. The music is depressing and dark, just like he left this world.

  8. Daemon (The Procreated)

    Again, this song is not about Satan or anything religious. This song is about letting yourself be created as a demon to cause pain and suffering on others. This is where the third character comes into play. A pawn for evil.

  9. Eternal Refuge

    This song is about the hypocrites of this world who choose to live a life of pain but portray that they’re existence is innocent. People who are constantly seeking refuge for their actions and judgmental actions towards innocent people. Evil will consume you and make you think you’re invincible.

  10. Of Legions (instrumental)

    The title refers to an army of individuals, not that of the Roman army but of us as a species. This song has the feel of an epic march to free ourselves from darkness and eternal suffering.

  11. Messiahbolical

    This song is about false prophets and how they will do anything and everything to corrupt their followers. In the end, if you live a life of deceit, you will never be happy. If you fail yourself, you fail everything and everyone.

A New Era of Corruption (2010)

A New Era of Corruption. This album is more about my life and personal experiences. It also portrays my views on reality. In a nutshell, this album is about my life and who I have come to be.

  1. Devolver

    This song is about how I felt when my father and mother died. I felt as if I was devolving and losing my mind. I lost my faith and my beliefs. I hated everyone. I felt like I was beginning a new era of corruption in my life. My step father fed me lies and hippocratic oaths. I let evil take me over.

  2. Breeding Violence

    Again, this song is me. Once a man, now a beast. My mind corrupted by hypocrisy. This is me during the time of my loss of my parents and what I let myself become. My step father was breeding violence into me and I let him. I felt helpless. I was a threat to the future of my mortality.

  3. The Darkest Day of Man

    This song is about how easily people are fooled and how gullible they are. People will believe almost everything they’re told. Trust yourself and believe what is true in your heart. These are our darkest days and we are letting it happen. This also portrays a tyrant taking advantage of that.

  4. Reprogrammed to Hate

    This song goes back to my personal life during my dark days as a teenager. I let my step father essentially reprogram my mind to be something I wasn’t. This is me speaking to him and him speaking to me.

  5. End of Flesh

    This song is my journey into darkness and how I was alive and well but what I was born into was dead to me. I was pretty much becoming Anakin Skywalker, hahaha.

  6. Unnerving

    This song is about my mother and her schizophrenic period. My mom had a notebook that she would write disturbing things. My mom had multiple personalities and this song is about her personalities tearing her down. The term ”God” in this song is referring to her personalities making her believe that they are ”God”.

  7. A Future Corrupt

    This is me letting evil corrupt my future. Destroying my youth, my faith and making me think that evil is my resort for happiness. This was me pretending to be a tyrant when I was a kid.

  8. Prayer of Mockery

    This song is portrays my disbelief in God after everything that happened to me. I was angry and consuming myself with evil and darkness. This is what I let myself become and what I was, and I am not proud of it. All that has changed now but I still remember and will never forget what I was letting myself slip into.

  9. Murder Sermon

    This is the song I wrote about killing my step-father after his lies, deceit and promises he made. He brought religion into it and was completely hypocritical about it. He got my mom addicted to crack which eventually led to her death. This was a dream I had of killing him and shoving his religion down his throat that he preached. Another thing I am not proud of.

  10. Necromechanical

    This song is about us as drones to life and how we let ourselves become what we could easily control. This is another dream of mine awaking as a machine and controlled by someone else. It was beyond frightening.

  11. Single File to Dehumanization

    Yet another dream I had. All I remember was being in a line of people that didn’t end and I was unaware of where I was going but I couldn’t get out of the line. To this day, I have no explanation for the dream. This is also to do with how it seems in real life.

(end quote)

A million thanks goes out to Phil Bozeman for writing these explanations to his fans. If you haven’t heard of Whitechapel before, you should definitely catch them on The Diseased.com, MySpace or Facebook.

Deathcore band Whitechapel with Phil Bozeman (3rd from the left)

Publicerad i Vardagsprat och märkt , , , , , , , | Kommentera
19 Sep 2011

Sju album du borde lyssna på

Jag publicerade nyligen en lista på sju av mina absoluta favoritalbum på Lista.se, här är den!

När det gäller musik har vi alla väldigt olika smak, men många av oss har gemensamt att vi hela tiden söker oss till ny och fräsch musik. Här presenteras sju stycken riktigt bra album, inom genrerna rock och metal, som jag garanterar blir en upplevelse för den som lyssnar med ett öppet sinne.

http://lista.se/embed/468/2056

Original: Sju album du borde lyssna på | Listor | Lista.se.

Postat i Vardagsprat | Kommentera
25 Aug 2011

HTML 5 Cheat Sheet

Jag hittade precis ett alldeles utmärkt cheat sheet för HTML5. Första kommentaren på bilden på Flickr lyder ”Seems kinda counterproductive to post it as an image”, då fick jag idén att göra ett eget cheat sheet fast i HTML5 istället för i en bild. Frågan är bara hur jag ska finna tid till det.

Via Flickr:
HTML 5 Visual Cheat Sheet is a useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

Publicerad i Vardagsprat och märkt , , , , , | Kommentera
02 Aug 2011

Undantagstillstånd

Undantagstillstånd, av Annette Hagberg

Nu har läkarna äntligen kommit på vad smärtan beror på. Tumören har tydligen börjat röra på sig igen, så han skall få en ny behandling med cellgifter. Han skall få en port insatt i bröstet idag, så att de slipper sticka honom varje gång han skall få cellgifter intravenöst. Personal från smärtkliniken vill sätta in en morfinpump i ryggraden på honom. De nya cellgifterna gör honom extremt känslig för kyla – han måste ha handskar på sig när han tar ut något från frysen, och han kan heller inte dricka något kallt, och inte äta något varmt…

Denna bok handlar om hur en familj påverkas
av att en familjemedlem får en dödlig sjukdom.
Den beskriver vågor av hopp och förtvivlan,
läkarutlåtanden, resultaten av alternativ vård
samt hur man får både förståelse och oförståelse
av omgivningen. Ett vuxet pars relation påverkas
också starkt av den ena partens sjukdom, vilket
träffsäkert beskrivs i denna bok.

Köp boken hos Bokus.com

Postat i Vardagsprat | Kommentera

Post Navigation

← Older Entries
Newer Entries →
Följ

Få meddelanden om nya inlägg via e-post.

%d bloggers like this: