Twitter Bootstrap documentation quote of the day

From Bootstraps button documentation:

IE9 doesn’t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

It is my educated opinion that everybody should strive to write documentation like this.

{Less} CSS3 mixins and vendor prefixes

I doubt {Less} is much of a revenlation revelation to anyone nerdy enough to be reading my site, so I’ll skip the usual platitudes and jump right into why I’m writing this.

As part of a recent site build, I’ve been relying heavily on CSS3 features, many of which are only partially implemented across the browsers. Not a big deal for me, it just means a lot of vendor prefixes:

#someElement {
-webkit-transitionall .5s;
moz-transitionall .5s;
o-transitionall .5s;
transitionall .5s;

But I have a few problems with this (CSS validation and older Internet Explorer are not among them). Firstly, its a pain to need to add that 4 lines every time, and secondly, one day I’ll want to remove some or all of the vendor prefixes and I’ll need to do it a bunch of times.

As a devoted {Less} user, the answer seemed obvious at first, I’ll just throw in a mixin to reduce it down into one simple line.

#someElement {

I’m hardly the first person to come up with this idea, but looking around for other .less files that handled vendor prefixes the way I wanted, with all the CSS3 items I wanted, was challenging. So I cobbled together my own file.

You can grab it off Github if that’s your sort of thing LESSCSS mixins file of vendor prefixes for CSS3.

Quick Link: How to recreate Silverback’s Parallax

A stunning parallax effect, very nicely explained in a tutorial.  How to recreate Silverback’s Parallax
recreating a parallax effect

Judging the work quality of other developers

You ever inherited a site done by someone else, and looked and the site and thought “what the hell where they smoking when they did that, and who gave it to the client making it seem like a good idea”?  C’mon you web-snobs, I know you have.  We’ve all done it.  Heck, I’ve done it recently.

There are two sides to every story

Well, I’m going to stop making any judgments about the quality of other people’s work unless I know the circumstances around how it got developed.  A day of reflecting on my own work has made me rethink things.  Yesterday I was working on a project, plugging away and I thought “hey, I’ve solved this problem before, let me go see what I did”.  So I pull out some old code, and next thing I know, I’m looking over some work I did some time ago.  I wasn’t super impressed. I found a series of nested if statements at one point, when really it could have been written in one line.  Is that the end of the world?  No, but it shows inelegance, and a lack of careful planning.  If this was someone elses work I would have thought “phfft, they’re lazy”.  Anyhow, I was disappointed, so I thought I’d fix it up and upload it for my (former) client….

And then it all came flooding back. 

So as you can see… in a lot of the cases the slightly less elegant code was a result of a changing landscape. I don’t think I could possibly build to quality, when the idea of “quality” is a moving target.  In that case, a nested if just worked for me.  When you’re bound by the triple constraints of cost, quality and speed, then something has to bend.  If the client isn’t willing to sacrifice cost or speed, then quality is going to suffer.

So I’m no longer going to look at

$some_dudes_name 'some name';
"The name of that guy was " $some_dudes_name

and think “why did they even bother”?  Maybe the developer was dumb (that’s always a possibility), or maybe that variable used to hold other information, or maybe they were directed that way, or maybe the dev inherited other code that the client wasn’t willing to let them alter it.  Who knows?

Until I know the history and politics around why something was coded the way it was coded… I’m reserving judgment on anyone else’s work.

Oh yeah, and that inelegant client code I found?  I never did fix it up.

Who lets these people near a computer?

<tr><TD><FONT SIZE="5" style="color:red">I am so smrt</FONT></TD></tr

I mean really…  REALLY!?!?!  C’mon!

Quick Link: Three Layers of the Web

Three Layers of the Web Kevin Yank has an article posted on Sitepoint entitled “Simply JavaScript: The Three Layers of the Web”.  What I love about it, is that he does a masterful job of outlining the separation of content from presentation from behaviour.  I was just talking about this the other day, how HTML, CSS and Javascript make up the 3 legged table of the web; each is required if you are trying to build something stable.

These days, everyone seems to understand separating presentation from markup, but I still see <a href=”#” onclick=“doSomething();”> all over the place.  Hopefully, as more and more people keep repeating the message, separating behaviour, the same way we separate presentation, will work its way into our collective folk-knowledge.

If you are a beginning webmaster, spend some serious time reading about these separations - you’ll be a better webmaster for it.

What happened to the design?

To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.

How to Make Coloured, Non-Gradient Backgrounds in CSS

Inspired by Matthew Inman's "How to Make Square Corners with CSS", I hereby set out on a journey to reveal the one true technique to create coloured, non-gradient backgrounds for divs, paragraphs and other XHTML elements.  After literally seconds of painful research, I'll show you how to do this technique yourself.  Here's a sample of what you can expect to see.
coloured non-gradient backgrounds using CSS

Kill All Humans revised

Well, the time has come to properly do this site. Until now I've been using a Wordpress theme that I hacked together in an afternoon and named "Kill All Humans", but it never quite felt right. There were so many little things here and there, CSS inconsistencies, etc. So what I've decided to do is rebuild my site in Code Igniter, and chronicle the whole process in short (maybe 10 minute) videos.

The first step is re-building the XHTML to be like I want it to be. Below you'll find the XHTML/CSS building blocks of the new

Daily Reading List

Staying up to date in the field of web-design is a really tough job. One of the best ways to stay on top of the game is to read… a lot. Here are some of the sites I make frequent visits to: