On Agile Development and Why It’s Done So Wrong…

I’ve been in several organizations where we used an “agile” development process. I termed what is commonly known as Agile Development in lower case and quoted because most organizations I’ve been in practice Agile in spirit as opposed to canonically. Granted, any process needs to fit the particular organization, but many organizations’ idea of Agile is a focus on quick delivery. The end result? Lots of technical debt.

For instance, I once worked with one organization where they split their “agile” process into three stages: Sprint Planning, Development, and Repaying Technical Debt. About 10% was focused on sprint planning (which is reasonable), 60% was spent on development, and 30% was spent on repaying technical debt. When I heard that 30% spent on repaying technical debt, I about  flipped my lid! To me, allocating that much time to technical debt indicates to me that one very specific point in the principles of the Agile Manifesto was completely missed:

Continuous attention to technical excellence and good design

Unfortunately, lots of organizations miss this item, and also unfortunately, this particular item is kind of far down in the manifesto principles list. To me, it should be the first issue. Why? Mainly because in my experience, if you take the time to design, then you actually avert paying a lot of technical debt down the line due to a bad design – or lack thereof.

I understand that one of the major tenets of Agile is “working software over comprehensive documentation.” I totally agree with this. But in my experience, the practice usually translates to zero to no design. It’s not that I want to have rich technical specifications, but especially if you’re doing object-oriented programming, not having at the very least a class diagram and associated sequence diagrams to describe the interactions is well… a crime from my perspective.

Sure, I Believe In a Free Market – Kind of…

The battle cry of the RNC and Tea Party (I’m a registered Republican, by the way) is “free market.” I’m a proponent of a free market; markets that aren’t hindered by government. But I’m not at all in favor of a system of plunder and enslavement that is simply veiled by the term “free market economy.” You what that kind of free market got us? Just the Crash of 2008. What was that the result of? Very simply, it was deregulation of the financial sector. Without regulations to put a throttle on them, the big financial institutions came up with sub-prime loans. They then figured out a way to securitize that debt and create bonds on the paper. Then they created “insurance policies” in the form of collateralized debt obligations to insure against those financial instruments that I suspect they knew were going to fail.

In essence, the “free market” basically gave those Wall Street bastards the freedom to gamble with other people’s money. And the worst thing about that “freedom” is that after the Wall Street boys completely screwed up the economy where we saw millions of foreclosures and millions of jobs lost, they had nothing to worry about. The American taxpayer came to their rescue! You can’t tell me that it is more complicated than that. The freedoms those people enjoyed allowed them to act in such a way that they collectively brought the global economy to the brink of complete failure; they were all essentially acting as huge, interconnected hedge funds and they eventually became too big to fail. If one went down, they all would go down. So what did they do when they realized that they’d completely fucked up? They cried for help and they got it in the form of a $700 billion bailout!

Think about this: If anyone of the “little people” did what Wall Street did, they’d be ruined, if not jailed. You see anyone go to jail? Not at all. In fact, a year after the collapse, Goldman Sachs awarded billions in bonuses to its employees. No one learned any lesson. Perhaps the ultimate victims in this – the rank and file American public – learned a lesson: That those in the upper echelons of the financial community are simply above reproach and in reality and sadly, above the law.

The financial crisis just proved that a free market that is also free from moral responsibility does not work. With this coming election, I’m actually deathly afraid that my Republican leaders will simply allow Wall Street’s trend of fiscal irresponsibility to continue. Thus far, all I’ve heard from the candidates is not how they’re going to protect against the 2008 crash; instead, they’re making this a class war and taking the side of the crooks who got us into this mess in the first place; calling them “job creators.”

Frankly, I don’t really give a shit about politicians’ rhetoric on how they’re going to create jobs – especially within the context of this particular economic environment. I believe that they first have to find a way to keep Wall Street in check. If that means creating some sort of oversight or regulation, so be it.

To me, a free market is a market where everyone is free to prosper. But in order to make that work, there has to be some sense of responsibility and accountability. There was neither in this latest saga in our economic story, and all that’s going to happen if this continues is that we’re bound to have another collapse.

Mounting Your VMWare VM on OSX Lion

If you have a VMWare VM installed on your Lion machine, and you have set up SSH on the VM, then it is possible to mount your VM as a volume on your Mac using OSXFuse and a client such as ExpanDrive.

For those of us who like to use an IDE like IntelliJ or WebStorm to do development, being able to treat my VM as a volume on my Mac has been a boon to development. But moreover, mounting as a volume allows for easier file management than using the command line. Some folks are fine with the command line, and I applaud them, but I’ve gotten used to using an IDE and having all its conveniences. Call me soft, but a big part of development is being able to work efficiently. If you’re not efficient, then you’re not productive.

When I Vote for President I Will Vote…

…with my conscience.

My brother and I have always wondered what was up with our father and many of our ultra-right-wing conservative family members, puzzling over their seemingly blind support of candidates or anything Republican for that matter; all this on top of their absolutely annoying criticism of Democrats. On the other hand, one of my closest friends has been a staunch Democrat; staunch to the point of getting angry if I didn’t agree with his political ideals.

This morning, I read an article on the Romney aides attacking Newt Gingrich’s reliability and trustworthiness, and essentially calling him an anti-Republican, and just falling short of calling him psychotic. But the thing that one of the aides said struck me:

I don’t think Newt Gingrich cares about conservative principles

I then realized that statements like the one above are the root of the problem that I’ve been having with BOTH sides of our political landscape. Each camp has been very effective in polarizing the masses and debating on ideology, not the issues. If an issue does come up, it seems – at least from what I’ve been reading – that the legislators don’t argue the merits or the problems with the issue itself, they argue the ideology.

The net effect can be akin to brainwashing. Anytime you bring ideology into anything, you bring in emotion. Push the right emotional buttons – especially the anger buttons – and you can instantly move thousands, perhaps millions, towards your point of view. Today’s politicians have been extremely effective at that. Take a look at the GOP: Their resounding, practically single-minded battle-cry has been to make Obama a one-term president. My question for my fellow Republicans is simply this: What do you stand for that will be for the good of the American people?

Oh, they say all the right stuff to address the issues on their websites, that’s for sure. But the news they make has been all about political ideology. As a Republican, I anguish about this as it makes me extremely reluctant and actually confused about who would be best suited to run against our current president. As it stands, I believe the one who refuses to engage in the ideology debate will be the one I vote for; that is, if they don’t drive me away as a Republican voter due to their ideological squabbling.

So that is why in the end, I will vote my conscience, and vote for the candidate whom I believe believes in “by the people for the people.” That may be Republican – and I’m hoping it is – but it may not be, and as in previous elections, I will cross party lines.

Why Job Descriptions Are Useless

I wonder if companies ever wonder why the hell they get so many crappy resumes for the jobs they post. Part of it may have to do with job hunters simply taking a shotgun approach to their job search and throwing resumes out to see what sticks. For sure, I’ve done that in the past, but over time, I’ve learned to dig into the job descriptions, which leads me to the crux of this article. I’m not sure if classes are given on writing job descriptions, but especially in my recent experience, most that I’ve seen have been rubbish.

A lot of this probably has to do with the recruiter of the company being left to write the job description, and they don’t have the innate knowledge nor perspective of the role that one who is in or managing the position has. But frankly speaking, it’s not the recruiter’s job to come up with the job description. It’s the hiring manager’s. Then perhaps, we have another quandary, and that is that the hiring manager hasn’t been very clear nor precise in what he or she is after. Either way, the end result of a bad or inadequate job description is that companies get a lot of misaligned resumes, and waste a ton of time having to sift through them to find the gems.

I realize that many companies have methods and procedures for publishing job descriptions, and it usually starts with the hiring manager writing something up, then turning it into recruiting. But how many job descriptions are actually proofread for more than grammatical or spelling errors? Considering the plethora of what this author feels are crappy job descriptions, probably not much.

That said though, it’s not difficult to write an effective job description. One simply has to keep a couple of things in mind:

  1. First and foremost, a job description is sales collateral. Your buyers are your candidates. Instead discussing this point at length, let me ask a question to get your gears turning: If you were trying to sell a high-value, luxury product, would you package it in newspaper? So the job description should have some polish and have language that evokes a positive emotional response that will compel job hunters to dig deeper into the details of the job.
  2. The job description is also like an invitation to an exclusive club in which certain criteria have to be met. I’ll get into this point in detail below, but clarity and precision are key because you want to attract the right individuals and make it clear that only those who don’t meet the criteria don’t bother to apply; respectfully, of course.

The first point is pretty easy to accomplish, though I have found that you have to be careful about not coming off as too “snobby” in the job description. That’ll turn people off. The trick is to word the job description such that people will feel as if it would be a privilege to work at your company, but then balance it with points that will make them excited. A phrase such as,

We take great UI seriously, from visual and interaction design to engineering, and the people we have working on our UI are as equally passionate. We’re looking for people who share that passion, and want to be part of a team that creates “kick-ass” UI.

…is extremely effective in not only stating the value of working at the company, but appealing to people’s sense of ownership and passion.

Point 2 is all about focusing your requirements. Most job descriptions lump all the requirements together into a single section. I have preferred those that tell me the must-haves in one section, then the nice-to-haves in another section. Also, don’t list things that are NOT part of the job. For instance, most UI folks know very little about Java, but lots of job descriptions for UI list Java programming as a requirement; something along the lines of “3-5 years Java experience.” Don’t know how many times I’ve seen that, and when I inquired about it, the hiring manager says it’s really not that important. What would have been more accurate would be something like this: “3-5 years experience writing UI on top of a Java platform,” which is typically what that “3-5 years Java experience really means.”

In a case such as the Java experience, not only will scare off potentially great UI talent, you’ll attract the wrong people who may be great in Java but simply mediocre in UI. So with your requirements, you need to have laser-like focus with your must-haves, and don’t be afraid to say something to the effect of:

Only candidates who fulfill the following requirements will be considered…

This won’t prevent what I call resume spammers from sending you a resume, but it will help to reduce the glut.

Keys to Finding and Evaluating Great UI Engineering Talent

There are plenty of books and articles out there that talk about finding and maintaining technical talent in a generalized way, but very little information exists in the published word or on the internet regarding finding, hiring, and keeping great UI Engineering talent. Hiring managers across many industries have been stymied time and again in bringing in great UI Engineering talent and as this article by Patrick Neeman at JobVite indicates, it’s only going to get worse. I agree with most of the points Mr. Neeman makes, but his first bullet point, “Attention paid to the user experience,” in my mind, could be the crux of the whole problem. You see, to me, it all boils down to having the proper perspective, and the first point raises serious issues about companies’ perspectives on UI Engineering.

Not the perspective of the candidate, mind you; but companies’ perspectives on what makes a great UI Engineer. I’ll just say it plainly: Most companies’ expectations and perspectives on evaluating UI Engineering candidates is flawed. To understand this, we have to look at some key traits that make up a great UI Engineer.

  • Most UI Engineers did not start out in UI or UX. They come from varied backgrounds; but especially from non-technical, non-engineering backgrounds. The engineering they’ve gleaned over the years has been much more of an organic process.
  • Adding to the point above, these individuals are highly self-motivated. They may not have knowledge of a particular subject, but once they realize that, they have the drive to educate themselves AND apply the ability to add the techniques to their arsenal of tools.
  • Building on the two previous points, the best UI Engineers don’t have a CS background, though they practice the critical, high-level engineering such as creating class and sequence diagrams, or some other formalized method of technical design.
  • Most UI Engineers are pretty chill folks and I mean super-mellow. It’s a trait that I have observed in the best UI Engineers I have both hired and worked with over the years. They quietly go about their business and continually ROCK THE HOUSE with the things they create. Unfortunately, this chill demeanor often gets mistaken for a lack of motivation. Couldn’t be further from the truth. To a person, I’ve observed laser-like focus in the best with whom I’ve had the privilege to work.
  • The best UI Engineers have the uncanny ability to take designs and wireframes and express them in code; but more importantly, code that is backed with a solid technical design.
  • UI Engineers hold a special place in the development process because not only do they have to have great technical acuity, they have to understand the user experience, the product, and the marketing behind the product. I think adding to the chill factor, many are chill because their minds are constantly working in parallel processes to evaluate the appropriate way to express a visual design.
  • Great UI Engineers also have a certain underlying ferocity about ownership of the UI – believe me, it’s a good thing. They are acutely aware that what they build is how the customer will view not only the application, but the company as well. They know they have a huge responsibility, and they take it absolutely seriously.
  • The best UI Engineers I’ve worked with or have worked for me aren’t motivated by UI frameworks. They use the tools at hand first, and if a particular framework makes their job easier, but without affecting the user experience, they will learn the framework as necessary. The point here is that they are extremely quick studies.

The list above constitutes what I believe are the most important traits of a great UI Engineer, though I do realize it may not be complete.

Evaluating UI Engineering Candidates

Wait a minute! I skipped finding the talent. This was on purpose. Before we can get into that discussion, it’s important to not only know the traits of a great UI Engineer, but also how to evaluate for those traits. We’ll get into finding that talent after this discussion.

Before I answer this question, I need to point out flaws that I’ve observed over the years – from both personal experience as a hiring manager and as a candidate – in the perception of the UI Engineer. Because there’s not really a good understanding of what makes up a great UI Engineer, as I mentioned above, most companies’ perceptions are innately flawed. So I need to point out a couple of important points about what a UI Engineer is NOT:

  • A UI Engineer is not a visual designer. While he or she may have a good sense of aesthetics, they are not UI designers. Some can do visual design, but that is not their focus.
  • Many of the best UI Engineers I’ve run across never received formal computer science training. So many companies throw algorithms at UI candidates during the interview process that have NOTHING to do with building great UI. This is way too low-level. If you’re going to effectively evaluate UI Engineers, you’ll remove this from your evaluation process.

With those points in mind, let’s proceed with a process that I have found to be highly effective. What I will be outlining below is the process, not the actual questions, though I will suggest context of your questions.

  1. First, start out with personal motivation and team fit. Many companies do this as a last process. I prefer to do this up front. My thought behind this is to not waste both the candidate’s and the team’s time if there isn’t a fit from a motivational, philosophical and cultural perspective.
  2. The next stage of the interview process needs to focus on object-oriented design acuity. This is the first part of the technical interview that focuses on high-level technical design. Don’t mark off points for a candidate that may not know UML; but great candidates these days should be familiar with object-oriented design to some extent. One way to test this would be to have them come up with an object hierarchy based upon some arbitrary set of objects. Here’s a great example that I ran across in my own interview process.Now mind you, diagramming can be taught. So it is of absolute no use to discuss the deeper technical points of UML or relational technology. What you’re after here is getting a sense of how the candidate organizes their thoughts given an environment and constraints within that environment. And you’re getting a sense of their acuity with object-oriented programming.For those who are thinking that this step is superfluous. Think again. Most UI Engineering candidates will list object-oriented JavaScript on their resumes. It’s one thing to know the syntax and how to code, it’s an entirely different matter to know the architecture behind the syntax, and this is what you are evaluating at this stage.Note that most junior candidates will be pretty clueless about this stuff. So if you’re interviewing a junior-level candidate, you need to be gentle, and evaluate the candidate based upon their ability to grasp the concepts AND especially your estimation of how much time you will have to spend in training the candidate.
  3. Following the design discussion, get into details surrounding the candidate’s work style. The questions you ask here will give you critical information on how efficient the candidate is when they work. What you’re looking for here is if they follow a process, whether formal or informal, and the closer to SDLC, the better. If they have followed a formal process in a previous position, ask them what they might improve.
  4. The next stage will go into specific technical questions around HTML, CSS, and JavaScript.
    • For HTML, ask questions about document structure, semantic HTML, and perhaps have them do a coding example. One effective way I’ve found to measure HTML skills is to give the candidate a sample wireframe and have them list out the document structure they’d use in as few containers as possible while still maintaining semantic HTML rules (be a bit wary if they’re not aware of the term “semantic HTML”).
    • For CSS, understanding the box model is ultra-important, so ask questions around how to solve box model issues among the various browsers. To test for CSS 2 and 3, ask a candidate to write out CSS that will take three divs and have them display horizontally adjacent on the page. In CSS 2, this is done with floats, but with CSS 3, you can use display:table-cell.
    • For JavaScript, there are well-established ways of testing JavaScript syntax knowledge, so I won’t discuss them here. To test for object-oriented JavaScript knowledge, give the candidate a couple or set of objects in a hierarchy (with properties and methods), and have them code the hierarchy. At a minimum, they should be able to use prototype inheritance. The better coders will write their properties and methods in an object literal and return it from within an anonymous function protected by the global scope. For instance: MyObject.prototype = (function() {  return {myMethod: function() {}} })().Please avoid doing classic algorithms like Fibonacci sequences unless you’re doing a lot of work with object hashes or the candidate is CS trained. Most of the time, they don’t have much to do with the core work a UI Engineer will be doing.Also, if you are using MVC in your organization, you should do an MVC exercise. This doesn’t necessarily have to be in code as the various frameworks approach MVC in different ways. But you should ask questions revolving the candidate’s understanding of MVC.

Okay, that’s a lot to digest… But armed with this knowledge, we can now get into finding the talent.

Finding and Attracting Great UI Engineering Talent

To find great UI Engineering talent, it all starts out with a great job description. You can’t imagine how many job descriptions I’ve run across that just won’t get the right people looking at the job. What often happens is that a job description will go out and you’ll get hundreds of applicants; 95% of which are not qualified for the job. What you want to do with the job description is weed out the unqualified candidates. If you’re using a headhunter, giving them a great job description will help them with their weeding out process.

I’m not going to write out a job description here. What I will provide are some important touchpoints that should be included in the job description.

First come the core requirements:

  • At least three years of experience hand coding HTML, CSS, and JavaScript (for senior-level and above, this experience should be a minimum of five years)
  • Track record of  successfully working and openly communicating with cross-functional teams from design, marketing and engineering (this is more important than you might think).
  • Track record of taking visual designs and/or wireframes to completion
  • Be able to demonstrate methods of technical design via UML or other technical diagramming.
  • Knowledge of and familiarity with object-oriented JavaScript; preferably direct experience, without reliance on a third-party framework.
  • Must know semantic HTML
  • Must know unobtrusive JavaScript
  • Must know how and demonstrate how to resolve cross-browser issues
  • Can code XMLHTTPRequest by hand without a third-party library. (This is a good one: Do they actually know the mechanics behind AJAX – it’s only two functions, but you’d surprised how many don’t know this and have instead relied entirely on third party libraries).

Next comes a summary of the above and something that should be either asterisked or bolded:

Qualified candidates will be required to demonstrate and discuss their work in end-to-end UI development, from concept to technical design to application implementation and maintenance.

What I found by taking this approach is that I get fewer resumes, but resumes that are much more aligned with the actual job.

Notice that the core requirements above don’t mention third-party libraries such as jquery or MVC frameworks such as backbone or knockout. That’s stuff you can include below the section of core requirements as nice-to-haves. Remember, a good JS developer can pick that stuff up quickly, or they already know it. What you’re trying to do is actually scare away the dabblers or the backend guys who think they can do UI because they trivialize HTML, CSS, and JavaScript. You don’t want anyone who will say, “It’s just HTML…” or “It’s just JavaScript…”

As for the other stuff in the job description, I’ll leave that up to you, as different companies do different things.

Armed with all this, you should be able to acquire great UI Engineers.

Great Interview Exercise: Object-Oriented Awareness

Though I am now employed, the past few months have been illuminating with respect to the interview process. There is so much disparity between what employers are asking for in their job descriptions and what they actually do to evaluate the requirements that they claim they need in candidates. The most interesting thing I’ve run across is a requirement for MVC or object-oriented JavaScript. However, in about 90% of the interviews I’ve had, very little has been discussed with respect to general object-oriented principles, let alone object-oriented JavaScript. In fact, most interviewers simply ask if I know certain MVC frameworks such as “backbone” or “knockout.” When I’ve gotten those questions, though I answer that I am familiar with them, but have never built anything with them, I think to myself that the the interviewer is going to be entirely tactical with the interview, and only brush the surface of OO JavaScript.

I’ll just say it plainly: Just because someone happens to know a particular MVC or OOP framework doesn’t mean they actually understand OOP. No matter what framework you use, OOP is all about design, all about understanding the relationships and interactions between objects. Go ahead and make all the objects you want. But unless you have a clear idea of how they relate and interact, then you run the risk of doing A LOT of extra coding down the line to compensate for your lack of design. Mind you, I’m not just throwing this out as a matter of opinion, I’m coming from a position of experience.

Circling back to the crux of this article, that’s not to say that there haven’t been some great interview questions or exercises that cover OOP. There have been. But one in particular stands out above the rest, and it will be an exercise that I will use going forward. I got this from a great interview with a little company called Urban Mapping with which I interviewed a few weeks back. It was the first time I felt that a company “got it” with respect to object-oriented design. And you know what? The exercise had very little to do with JavaScript. Their thinking behind this exercise is that it’s more important to know the architecture behind what you’re building before you build it. AMEN TO THAT! So without further ado, let’s get into the exercise:

Let’s Build an Animal Kingdom

Given the following animals:

Dog, Cat, Eagle, Duck, Python, Anaconda, Iguana, Salmon, Lungfish, Frog

Build an object hierarchy that can describe this set of animals. After you’re done we’ll discuss. There isn’t necessarily a right or wrong answer to this. But we’re going to take this time to discuss your object-oriented awareness and acuity.

Here’s a possible solution to this hierarchy:

Once they’ve finished the diagram, you get into the application of the design. Note that this is not to be confused with implementation, but rather, providing a context to the design to see if there are any holes in it. But first, some questions:

  1. What was your reasoning behind building the hierarchy in this way?
  2. Would there be another way to approach this? (Another possibility would be to break it down by number of legs, but that is actually not optimal based upon the follow-up exercise of creating a world for the animals)

So the context we’ll use is this: Building a world to place the animals. So on the board, draw out an area that has a body of water, some trees, maybe a cloud to represent air, and some rocks. After  you’ve drawn it out, then say that we’ll instantiate these animal objects in various places on the board. The idea is to reveal if the design will support the constraints of the environment. If they broke down the hierarchy according to number of legs, they may have missed the functional level. This is something that can be suggested and will almost immediately be revealed once you start going through instantiation.

If they did break it down by function, then chances are they will have missed the multiple inheritance. For instance, an anaconda can be created either in water or on land; same with the dog. You can lead them through this with some questions:

  1. Is it possible that an animal can be instantiated in different locations? (You’ll especially look to see that the duck can be instantiated as a swimmer, walker, or a flyer). That last bit was a little evil on my part. 🙂
  2. Given that animals can be created in a couple of possible locations, and that there constraints as to where they can be created, where would you place the method that would check for the location? The correct answer would be at the second level, so that those animals that inherit from two parents will inherit the location constraint from both.

Summary

So in this exercise, what are we trying to accomplish?

  1. The obvious answer is to see if they get object-oriented design at all.
  2. The second thing this reveals is how well the candidate can communicate and justify their ideas.
  3. And just as importantly as the other two, this exercise reveals if this person has the ability to work with the team.

Note that this exercise is best done with a couple of people in the room – probably no more than three – especially to address item 3 above.

Based on my experience on the receiving end, doing this exercise was literally a breath of fresh air. Personally, I wouldn’t pull this on a junior developer, but this is something that I’d definitely use for senior front-end AND back-end developers. Remember, it’s not about the code with this exercise, it’s about the design thinking. Do a separate coding interview following this.

Update 7/2020

I’ve been using this for over ten years now and it is still one of the best ways to weed out code monkeys. If a candidate can’t get through this exercise, then it’s a fairly clear indication that their code is likely going to be a mess. It just proves out that just because you code in an object-oriented language doesn’t mean you know OOAD/OOP.

This has been especially effective in evaluating front-end developers; especially those developers who claim to be senior but their experience has been strictly limited to frameworks such as React or Angular. It doesn’t necessarily mean that I will reject them entirely, but it will affect where they’ll be placed in the engineering organization.

Thoughts On My Interview Process and HTML 5 / CSS 3

I’ve been interviewing for the past couple of months, and the bulk of my interviews have been with new companies. Many have some very interesting stories, and almost to the company, each one is really focused on the latest versions of HTML and CSS. Admittedly, my actual work on HTML 5 and CSS 3 has been minimal at best, though I am taking the time while I am not working to “woodshed” and get familiarized with the concepts and do some exercises in HTML 5 and CSS 3 so my ramp-up time once I get a job will be minimal.

Now one thing that I’ve observed when I look back on all the interviews I’ve had when the subject turns to HTML 5 and CSS 3 is a focus on the new, “sexy” elements, such as video, but moreover, the focus is on CSS 3. To me, when the focus is purely on the CSS 3 side of it, it’s only really telling half of the story.

I understand, people want “sexy.” But I’ve learned over the years that the ultimate presentation is secondary to the structure of the document you’re presenting, for the simple reason that without a good document structure, you’re asking for trouble down the road when you want to change things up in your presentation. If you’ve written a document structure that’s tailored to a particular presentation, you run the risk of it only being able to be used with that presentation and that presentation alone. This is precisely why it was encouraged NOT to use tables for layouts because tables literally fixed you into a grid structure that could not easily be modified at a later date.

With HTML 5, the game has completely changed. Though it is not fully complete nor ubiquitously available in all browsers, we UI developers finally have a set of tags that allow us to precisely describe a document. To me, that’s the crux of HTML 5. It’s not the new features and things you can do with CSS 3; it’s the document. Repeat: It’s the document.

For years, I’ve been seemingly howling at the moon with both designers and other engineers about the importance of document structure. I communicate well enough where we ultimately come to an agreement, but it is trying sometimes.

A little sidebar…

During the course of writing this article, I remembered one of my on-site interviews; one in which I failed miserably on the HTML part. But I learned my lesson in that one and actually came up with an even better solution than what the interviewer presented to me. The challenge was to create a horizontal “stoplight” of three squares, colored red yellow and green and do it with as little HTML as possible.

I immediately used divs and anchors, which was clear that that was not a minimal solution. The right thing to have used was an unordered list, then use :first-child and :last-child pseudo selectors to style the end pieces. The CSS solution that the interviewer came up with employed floating the li’s left to get them horizontal. That’s totally valid, but based upon my woodshedding with CSS 3, I came up with a different solution that instead employs display:table-cell to get the li’s to line up horizontally. Here’s the HTML:

<ul id="priorityList">
    <li> </li>
    <li> </li>
    <li> </li>
</ul>

And here’s the CSS:

#priorityList {
    list-style-type:none;
}

#priorityList li {
    display:table-cell;
    width:30px;
    background-color:yellow;
    cursor:pointer;
}

#priorityList li:first-child {
    background-color:red;
}

#priorityList li:last-child {
    background-color:green;
}

#priorityList li:hover {
    background-color: #EFEFEF;
}

After I started getting myself familiarized with CSS 3, returning to that interview example, I could’ve scored some pretty big points with this solution. 🙂 It’s actually significantly less CSS than what the interviewer came up with, and satisfies his basic requirements. Note that there is a non-breaking space in the li’s, but it’s not showing here in the article for some reason. I think WordPress is reading it, as opposed to obeying the “pre.” Oh well.