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-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .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 {
.transition(all, .5s);
}
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.
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.
- “Now, who was that client again….? oh yeah… them”
- “I had that working perfectly and then they changed the specs”
- “Golly, another new head of the committee… welcome to the team”
- “I remember that line of code… they actually threatened that if I didn’t have that working by the end of the day I wouldn’t get paid.”
- “But I’ve already changed that to behave the exact opposite way you want, after you asked me to, after you told me to change it back”
- “Design by committee is horrible, but design by committee when 3 of the 4 people who were spearheading the committee have quit or ‘moved on’ is death”
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';
echo "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.
<tr><TD><FONT SIZE="5" style="color:red">I am so smrt</FONT></TD></tr>
I mean really… REALLY!?!?! C’mon!
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.
To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.
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.
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 derekallard.com.
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:
