This is actually an old version of For the latest and greatest, check out the new site.

Programming Like a Designer, part 2

If you couldn’t already tell, this article is a continuation of “Programming Like a Designer, part 1”. If you haven’t already done so, I would suggest going back to read the original article, as a lot of the examples in this article are based on some from part 1. I also want to point out that I am going to skip some of the topics that I said I would discuss, like recursion. I’m going to save that for other posts, as they may be a little too advanced. I’m changing the scope of this article in that I’m making it a practical application of the aforementioned process as opposed to a primer on the concepts of programming. If there’s an interest in that, please let me know and I can write about that in another post.

I’ve gotten several million requests to write up about my two-column setup, so I’m going to use that as my practical example. Okay, so maybe it wasn’t quite as large as several million requests, but it was close. Anyway, I’m going to assume that you have some understanding and experience with HTML and CSS. If you’re impatient like I am and you feel like you already have a good grasp of programming, feel free to jump straight into my JavaScript file. For those of you still with me, let’s move along.

Imagine that you want to create a two-column layout for a web page or web site. You have your style sheet set up to style the columns properly, but you’re using some type of content generator like Movable Type, Textpattern, Wordpress, or something similar, so you can only post an article in one specific place in the HTML, not two. Because of that, putting content into two columns is not a possible solution.

With those limitations and using the concepts from part 1, here’s how I progressed:

Plan. I wrote down exactly what I wanted to do. I said, “I want my article to appear in two columns. Because my CMS can’t do that, I have to do it after the page is rendered. What I could do is find out how many paragraphs my article has, then split the article in the middle.”

Comment. Taking the “prose” version of what I want to do, I need to start commenting. I’m writing JavaScript, but this concept will work regardless of the language. In order to create my code, my comments will look something like this:

//find the number of paragraphs
//find the middle
//create the left column
//place the first half in the left column
//place the second half in the right column

Research syntax. This is a large topic to cover and can vary greatly per project. Make sure not to skip this step, because, although you may already know how to accomplish what you set out to do, you may come across a quicker or more efficient way to do it. Utilize friends, books, the internet, pretty much anything you can to help you in your process.

For this specific project, I had to do extensive research on the DOM, which, at the time, I knew nothing about. Mozilla’s Gecko DOM Reference was a superb resource for this project. Through my research, I found that each HTML tag counts as an element or a node, and all nodes can have children and a parent. This led me to the conclusion that, if I can count the number of elements within a specific parent, I could remove the first half and place them in a different parent, specifically a left column. I could then do the same for a right column. Notice the translation from plain speak into plain speak using keywords from the syntax research.

Write syntax. Using my process to get me to this point, I began to write my code. First, I created a function called splitColumns to nest all of this in. I then pasted my already written comments into the appropriate spots. Finally, I started to write code based on the flow of the comments.

While going through the code line by line would be boring, I will point out the key concepts. The getElementById function was essential in that it does just what it says; it selects specific elements in your code based on the id attribute that you give it. The getElementsByTagName function was just as important. Another a well-named function, using the 2 of these together allowed me to count the number of <p> tags in the <div> called “article.”

The next two important functions are createElement and appendChild. The combination of these two is where the magic happens. I used these two functions to create my left and right columns and add “children” to it, which are actually the original <p> tags.

To tie it all together, let’s try to directly put the process together. Notice how “find out how many paragraphs the article has” becomes //find the number of paragraphs and eventually:

var numOfParagraphs = article.getElementsByTagName("p");

Programming doesn’t have to be difficult, or even useless or obtrusive. I created a small snippet of code that enhances my design, which is the benefit of designers being able to code. I don’t ever consider myself a developer or even an expert coder, but following this process has definitely opened up new paths to explore. The only foolproof way to get good at this is to try it for yourself.

Update: Here’s a great way to take this programming thing to the next level. Jim Benton over at Infinite Expanse has written a killer plugin for Textpattern that’s based on my Javascript 2-column script. Anyone want to take it even higher and create a multi-column customizable layout?


stephanee thielker said:

you may want to give this a look

it's rough, only a working model.

Posted on August 5, 2005 11:53 PM

Dan Mall said:

Great idea, Stephanee! Very clever!

Posted on August 5, 2005 11:54 PM

Ian said:

Wow, Steph. That was really incredible. I like the way that the columns were limited to the viewport. And the way pages were added when the viewport became too small. Neat.

Thanks for this article, Dan. Keep up the good work. Please.

Posted on August 5, 2005 11:55 PM

Geoff said:

Steph, the columns don't work at all in Opera.

Posted on August 5, 2005 11:56 PM

Sorry: comments are closed.