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.
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.”
//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
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
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.