Over the years, HTML and CSS have practically become second nature to me. With almost anything that I want to create, I’m able to first visualize the code in my head and what the code will produce. It was the same way in grade school with math problems. I had the hardest time showing my work because I did the whole thing in my head. Here are a few reasons why I prefer HTML prototyping:

1. It’s lightweight – I mean seriously, it’s just a text editor and a web browser.
2. It’s fast – Well, at least for me anyway.
3. It’s real – This is a pretty big one. When you prototype in HTML, you have a real product in front of you. You’re able to touch, click, drag, scroll, and resize a real thing. That’s huge! You immediately know your limitations, either with your abilities or with HTML and CSS itself.
4. You’re half-way there – When a design is chosen, you’ve already done half the work. The design/layout is set. Now you just need to plug in the code to make it work with your favorite content management system.

I know that HTML prototyping isn’t for everyone, so how do you prototype? What’s your design process?

Comment Everything

Every line, every function, every end bracket gets a comment. Even if it’s obvious what the code is doing, I write it out in plain English just to make sure. It may not be as obvious to me in the future or to another individual looking at the code.

Remove Repetition

It’s almost always unnecessary to have repeating blocks of code throughout your project. If you find yourself repeating or reusing code, turn it into a function. You can then just call it when you need it. It will make your code cleaner and you’ll thank yourself down the road when you decide to change something and don’t have to update your code in half a dozen different places.

Indent

There’s a hierarchy to every bit of code you write. Use indents and white space to reflect that hierarchy. It will make it easier to find things and easier to know where things start and end.

Be Descriptive

When naming classes, functions, and variables, use names that make sense. You want reading your code to be like reading a sentence.

These are just a few steps that make for better coding practices. There are plenty more and I’m sure that mine are far from perfect. What are some coding practices that you use?

Any time I start something new, I like to being with a template (or boilerplate). Something to give me a foundation to build off of. This time around it looks like I’ll be starting with the WordPress Plugin Boilerplate by Tom McFarlin.

My goal for the final product is to have a plugin with a settings page as well as maybe half a dozen widgets, each with their own options.