Test Driven Markup

When I smoke at my full time job I get the opportunity to talk to some really amazing programmers.  These guys are just top notch, and while intimidating, their attitudes are what really drives all this home. Both humble and badass, wrapped in one awesome package, these developers truly are a joy to work with. Granted, most of them aren't smokers, but I tend to drag them down with me to pick their brains from time to time, as well as actually working with them on a project by project basis.

One particular new resident here at Telligent is Jimmy Miller. He's tack sharp, and equally passionate. A real joy to work with as well. In a single 20 minute conversation, he sold me on test driven development. It's really a neat concept, and even though I'm not a developer, there are some great things I can take away from that conversation.

It's an extremely valuable, time saving process down the line, and so I started to mull over how I could incorporate this into my everyday Markup development. There are some key things to look out for with markup development that is aimed at Blogs / Web Applications / "Insert-Dynamic-Markup-Need-Site-Here."

A sneak of what I've noted so far:

• When your working with a grid of information, such as a gallery with titles and captions, your grid will break if its a list based, left floated grid. Hangs occur on items that are taller than normal, leaving you with gaps and such. These should be focused on fixed heights / widths, and the developers should cut text that will cause breaks. The CSS side of things can set specific heights on the list elements to provide a nice baseline across the board of browsers. Basically Get your heights of each grid element the same for a left floated grid of information.
• Be sure your titles are allowed to wrap, or alternatively, have development / CSS force them not to and cut off excess
• All usernames should be able to use the name of "Sixteencharacters" as a good baseline. This ensures that "DallasTexasSuperUser1980" will have enough of his name showing that he won't be breaking the layouts and also keep enough of his identity in his name for short description needs.

It's just three quick things, but as I go through further development with Telligent and Markup Ninjas, I'll be compiling a list, and so will my team. This list will basically be a checklist to go through for each page you take from Design to XHTML, and you check bits and pieces off as you go. It ensures that when things get implemented and dynamic, unpredictable markup is present, your layout is bullet proof.

Also, be on the lookout for a simple, testing script we're developing. It'll dive into the DOM and look for keywords / classes to swap text out and automate the whole list for you. Did you class something title? Cool, our script will slam through that design, look for titles, and see if they can wrap to 3 lines without breaking your layout. Or what if those titles only wrap 1 line in one piece and 3 in another? Is your layout safe? We're all about Bullet Proofing our markup here at Markup Ninjas, but we're also all about giving back and speeding the process up, so we'll let you know as soon as we're able to tear away from work to write this up. In the meantime, a check list will be posted very shortly :D.