Where to put your CSS hacks - conditioning your conditionals.

March 3rd, 2010

I’ve had/heard/seen this argument many times on blog after blog. So I thought it would be a useful blog post to highlight to upsides and down sides to each argument.

Conditional Comments

Conditional commenting is the practice of putting code in special comments in your HTML document that get executed only in specified IE browers, it usually looks something like this:

conditionalcommment
  • Pro’s

  • Keeps hacks separate making style sheet look clean.
  • Allows for automated validation of main style sheet
  • Enables clean easy use of completely browser specific enhancement code like filters and expressions
  • Is backwards compatible
  • Con’s

  • Encourages people to write browser specific CSS instead of writing better CSS. (broken windows theory)
  • Decoupling of styles can result in more bugs when people forget to update the conditional stylesheet. Also bugs can be harder to track down.
  • Is an extra HTTP request

Inline CSS Hacks

Inline CSS hacks are where you write *hacked* attribute, property pairs in your CSS using combinations of ascii characters to take advantage of bugs in different CSS parsers, looking something like this:

inlinehacks
  • Pro’s

  • Keeps hacks together with real code for easier tracing/debugging.
  • Less likely duplication of code
  • Con’s

  • Encourages people to use hacks instead of writing better CSS. (broken windows theory)
  • Stops automated validation of CSS as hacks are in the core code.
  • Hacks can be unreliable and have adverse effects on different browsers other than the infamously un-robust IE family.
  • Is not backwards compatible, if a hack gets fixed the rendering will break on later browsers

Ultimately it’s a preference thing and you can spin these pro’s and con’s either way to support your chosen method of development, but once it’s been chosen all developers need to stick with it. I think the important thing is that everyone needs to be vigilant that both are used with extreme caution and care as a last last resort in the CSS.

I see two useful things that could be created to follow this up to create the desired behaviour:

  • setting up some code that analyses the amount of CSS versus the amount of hacks or conditionals, then having a theoretical limit say 5% that you are not allowed to go above for a successful build.
  • Having a rule to write a detailed reasoned 3 line discourse in comments giving a description of why and in what circumstance each hacked rule is required.

Personally I opt of the conditional method, but that’s because I have a bizarre obsession with automated validation of CSS. See CSSOrder.

Biology is getting interesting!

March 3rd, 2010

When I was in school, biology was one of the dullest classes I had to endure.

Pointless experiments with Bunsen burners and peanuts, long drawn out processes that you had to learn by rote and videos on autopsies of smoker’s lungs is what I remember most.

In fact the most exciting thing was when our teacher vanished mysteriously for a period of six months and we had a replacement teacher.

On maybe the third lesson we had he with him he was late. Another class had over run, no problem, time to doodle and relax. However as I looked out of the window I saw him on the second story of the block of class rooms on the other side of the playground. He was very slowly approaching the stairs. The stars were white steel framed with blue rubber treads with embossed circular bumps the kind that had gaps in between the steps so you could see through to the bottom. He got to the edge of the stairs and stopped. After a long pause, he tightly clutched the banister rail and put out his foot as if he was about to step off the edge of a skyscraper or precipice. He slowly lowered his foot and as it touched the next step, he suddenly crumpled and desperately grasped at the railing on the side then he quickly turned around and on his hands and knees crawled quickly off back through the glass doors of the stairwell. I never saw him again. To this day he may still be there, crippled by what one must assume was a terrible case of vertigo. Anyway. He was nothing like this guy:

Fuck me. If biology had been this interesting when I was in school, I may well have actually listened rather than ignoring it to pursue a career in programming and advertising.

I can’t wait for the stage when we as engineers and software developers get some kind of higher level language abstraction to play with and start developing out own organisms, that we can then send off as code to some lab in China or India that will produce the DNA in dish and send it back to us. Then I can watch it grow in to the giant Killer monster I always dreamed of that would destroy this world and help me build a new civilisation. Or maybe, I’d just like to create some glow in the dark grass for my back garden.

A short point about quality of equipment.

February 20th, 2010

Last night and this morning I conducted 2 experiments.

The first experiment was last night before I went to bed, where I timed how long it took my work laptop, running windows XP to shut down. 4 minutes 20 seconds.

I think you can probably guess that the next experiment was to test the time it took to boot up. 3 minutes.

Now, I’ve read people make the same point that I’m about to make several times. The most famous being Joel Spolsky, in his blog and books. The point was really driven home when I attended the Cambridge dev days conference 2009 and was told that at the first conferences, during the breaks they had set up a stall offering to upgrade the ram in your laptop to it’s maximum, for FREE. This was how important Joel thinks it is for people to have the best equipment available to him.

laptopopencrop

For two years I have accepted the equipment I was given as one of life’s little endurance tests. Everybody got the same. Accept it and move on.

But last night, after writing my hat change blog post, I realised something really obvious. For two years, I have started and shut down that laptop on average once a day if not more. There are 365 days in one year. 4.2 + 3 = 7.2 minutes a day. Waiting. Waiting for my equipment to be usable. 365 times 2 years is 730 days * 7.2 = 5265 minutes. 5265 minutes can also be said as 3.65 days, or if we talking working days (8 hours) 10.96 days.

Over the last 2 years I have wasted 10.96 WORKING DAYS of my F*UCKING LIFE WAITING FOR A CRAPPY LAPTOP TO SHUT DOWN AND BOOT UP.

To put that in terms a businessman can understand, my daily charge out rate for the company is somewhere in the ball park of £1,000 per day. That means, someone has paid £11,000 over the last two years for me to stand around waiting for my laptop.

Now, I’m no financial genius, but it seems to me, for £11,000 I could buy some pretty shit hot equipment. I mean for 3k I could buy a pretty amazing laptop and still have 8k to play with. The scary thing is when you multiply this by the number of people working in the company it gets into the tens of millions per year wasted.

I guess my overall point is the people who you work for are your most important asset, you should be proactively giving them equipment to try to enable them to do their job as efficiently as possible and grow them as much as you can as they are what is making you money.

Update

I just finished watching Bill Gates’ latest TED talk on his new mission to solve the energy problem.

Thinking back to this blog entry I started to wonder how much of an impact the inefficient equipment we provide people wastes valuable human resources and adds to our carbon debt, and how efficiency is actually every bodies problem, not just the concern of the rich. Also it was annoying because my broadband connection sucks making the video take 45 mins to watch rather than 27 mins. I wondered how much extra carbon shoddy services from Giant companies like Virgin media and BT end up pumping into the environment.

When collection verges dangerously on obsession.

February 20th, 2010
SP_A0700

5 1950’s, 60’s & 70’s Samsonite attache cases.

Hat change!

February 19th, 2010

I’ve been fairly quiet recently in terms of posts, this is mainly because I’ve just resigned as Senior front-end developer at Sapient and accepted the post of “front-end specialist” at Nokia in Berlin.

hats

From April 1st 2010 I will be working on the Ovi maps project. Ovi maps interests me for several reasons, firstly it’s got a massive user base and so is a chance to really get stuck into a application that’s just getting into it’s stride. There’s a great opportunity to start making small engineering changes that really a big difference in terms of performance and usability. It’s served to such a wide variety of different devices/platforms that I will get to see the realities of large mobile app development as well as hopefully bringing in some learned best practices from the web app world regarding CI and Continuous testing. I would also like to do some developer relations promotion, as before interviewing for the job I had no idea what Ovi maps was. Obviously now Ovi’s had a bit more PR but the developers remain relatively anonymous. Something I’d like to change given the quality of people working there.

I will be sad to leave Sapient, although it has it’s problems there a few really spectacular people there, whom I wish all the success for in the future and hope that some things begin to change.

All I have to do now, is figure out how to move my entire flat and life to another city, ekkk.

Why I f*cking hate JSP.

February 8th, 2010

Enforcing Strict Model-View Separation in Template Engines by Terrance Parr

The short version is that JSP makes XHTML VIRTUALLY IMPOSSIBLE to validate in it’s fragmented form, which would be much, much, faster than compiling it and then running an html test on a server version to check it’s validity. “Fail fast” is the phrase du jour with CI/CD and JSP prevents this, as well as creating a HORRIBLE HORRIBLE mess of crappy crappy code.

So in short, never use JSP, or Faces, or any of those other ridiculous technologies. The only thing that prevents you using String template is unfounded fear. The pain you save your developers is worth it. Trust me.

Proffesional Self Assesment for 2009

January 11th, 2010

I am just filling in my companies annual self assessment form and thought I would share some of my thoughts regarding 2009.

Value and Quality

“Quality is doing things right when no-one is looking” this is a quote from John T Ford, mentioned in the infamous software book “The Mythical Man Month” by Fredrick Brookes. This year I have strived to fulfil this meme to it’s upmost. I believe the quality achieved by automating things that previously used unreliable human methods to achieve adds the same level of value to the client as the entire creative process. A relevant historical example of this can be found in the automotive industry and the subsequent collapse of poor quality American vehicle engineering as the Japanese and Asian markets obliterated them with durable, reliable, inexpensive import cars. The same is true of software and the beginning of this trend can be seen in companies like Goggle.

Productivity

This year, I have learned about the most important form of productivity as espoused by the agile and Lean principles. “Sustainable development” is a quality generally completely misunderstood in this certain circles, but is in fact the source of a large amount of client dissatisfaction. Selling projects in under budget and with the assumption that developers will work overtime to get them completed is a fallacy perpetuated by incompetence. Rushed, ill thought out work leads to unrealistic expectations for the client and ultimately disappointment in the output which is then reflected onto our company and the production staff. Even more harmful is the attrition it leads to as experienced developers leave unfulfilled and frustrated. In which case productivity should be measured by a lack of overtime and encouragement of advanced thinking.

Strategic Context

With a marketplace of vendors that are consolidating into large inefficient groups driven by bureaucracy and nepotism, trying to win the business of other larger inefficient monoliths, there are few things that will allow one to distinguish themselves from the crowd. Honesty, integrity and reliability are the three main things that will allow us to stand tall above the rest and are the most important things for our strategic context in terms of winning the business of the companies of tomorrow.

Quickstart tutorial to Mercurial and GoogleCode

January 3rd, 2010

I love using new technology. I really do. It’s great, basic things you knew how to do with an older system, get reinvented and become no longer trivial. They become a long drawn out, painful process, that involves your blood pressure raising to that perfect level where it reduces you lifespan by a twenty minutes. Each time.

mercurial-logoSo when I switched to command line Mercurial from Tortoise GUI SVN, you can imagine my delight.

To be fair, I actually had already got command line SVN experience, so thought the transition might be somewhat simpler. It wasn’t. The commands may be very similar but the process itself is not.

code_logoFrustratingly it is actually very simple once you know the command-set to get you up and running, unfortunately no has written a basic, 123 guide to setting up a googleCode mercurial instance on windows XP. So I thought I’d be the first.

  1. Download and install Mercurial command line. Make sure to check the last check box on the installation screen along with the readme, this allows you to access Mercurial from the command line.
  2. Create your Google code project. This part’s easy, follow the steps enter the words and navigate youself to the main project screen. It helps if you already have a Google account.
  3. Now we get to the fun part. Open your command line in windows, by going to Start->run->type cmd in the input box and click ok. Or if you have style double click the short-cut you’ve created for yourself on the desktop.
  4. You’ll want to navigate to a folder where you can store your project. For the sake of this example, lets say your project is named testproject and is in the root of c:\. first back out to the root with:
    cd \
    
  5. Then make a directory to store the project in:
     mkdir testproject
  6. enter the directory
     cd testproject 
  7. Now you want to take a clone of your googlecode repository, to do this type the following command:
    hg clone https://testproject.googlecode.com/hg/ testproject
    
  8. The last parameter is the directory to copy it into on the local file system. This should result in Mercurial spewing out some output identifying that it has correctly downloaded.
  9. To check, type:
    cd testproject
    dir
    
  10. If it was successful, you’ll see a directory called “.hg”
  11. If it’s there, now you want to make your first commit. Create a text file called readme and dump it in the directory with the .hg in. To add your new files type:
    hg add *
    
  12. Next you’ll want to commit them, type:

    hg commit -m "added first file to repository"
    
  13. So you have commited your first change to the repository, but this does not mean it’s gone up to the main node on Google, it is currently just committed to your local file server. To commit the changes back up to Google’s servers, you’ll need to run the following:
    hg push
    

    This will prompt you for a user name and password, the password IS NOT YOUR DEFAULT PASSWORD. Go to your accounts hosting page to find it.

  14. Now, if your like me, i.e. LAZY, you don’t want to have to enter your username and password each friggin’ time you want to push. You want an automated way to authenticate your https googlecode push actions. The way to get around this is to open the “.hg” directory and find the file “hgrc”. Edit this in your preferred text editor. Where you see the line
  15. default = https://testproject.googlecode.com/hg
  16. change it to
  17. https://(your username here):(your password here)@testproject.googlecode.com/hg
  18. And Voila! everytime you push, it automatically skips the login and password steps.

I hope this helps, I spent sometime this weekend trawling the internet for clues as to how to do this most basic of processes but could find no simple explanation, written in a language people could understand.

Great public interactive promotional game

December 17th, 2009

While I was in Boston for this year’s Ajaxian conference, I was wondering around the main shopping area on Sunday when all the shops were closed, when I came across this installation for EA games.

It immediately caught my attention and watching people play it reaffirmed in my mind, what an incredibly positive effect this had on their brand perception. Interactive freebies like this, cost little to install, have no maintenance overheads and have a massive pay back. It’s just a shame more companies aren’t willing to invest in them, and agencies aren’t pushing them more strongly.

Synthetic Biology: The convergence of modern software and DNA

November 29th, 2009

I’ve been ranting about this in drunken pub conversations for a few years now. But finally someone with an ounce of academic credibility to back me up.

My 2030 prediction for my company is:

  • Instead of creating iPhone Apps will be creating bespoke organisms for clients:
  • IA’s will be architecting their functionality
  • GD’s will be designing how they look
  • Tech arch’s will be designing how they are built
  • Developers will be using a synthetic Biology language to write/model/build/print them
  • Testers will be testing them to make sure they meet the requirements
  • Project managers will manage these new bio-tech projects
  • And Account directors will continue to mainly play golf ;-)

A further interesting discussion of this was posted up by a fellow member of the London Futurists group.