How to Control HTML Code to Reduce Bugs

April 4, 2011 By Leave a Comment

As I was designing a site the other day, I realized that the way I have been tracking my code is something I should share.

Most of the projects I work on involve some sort of conversion to WordPress or other CMS system. Anyone who has ever developed a custom WordPress template from novel HTML, CSS, etc… knows how easy it is to run into bugs when it comes to running live code. You install it and something is missing, one of your div floats is outside where you want it to be. Or you are running an IE 6 test and you are totally pissed off that nothing looks right, but you have to make it readable by the 1% jerks (I have a better word) who haven’t yet switched over…I digress.

Anyway, the point I am trying to achieve with this post is that I keep track of my HTML code with HTML <!– comment here –> comment tags. Every time I end a div element: <div id=”nothing”>element</div><!– end nothing –> I comment right after the end div tag. This process has saved me (in some instances) hours when transitioning over to live code.

This application is practical when working with large amounts of nested <div> containers, but thought I would give my two cents :-) .

If anyone else has any special tricks for keeping track of code or improving productivity, comments are always welcome!

Share
Filed Under: Web Development Tagged With: , , ,

Click to Remove Text with JavaScript

December 15, 2010 By Leave a Comment

I have been working on some new projects and it seems that adding some UX (user experience) makes a website flow better. Today I will be talking about how to remove default text from a textbox by simply clicking on it or by using the onFocus function with JavaScript.

So… I have a textbox for a search function on a page that I set to display “Enter Search Terms…” by default. The goal is, when the user clicks on the text area, the default text disappears. With the default text gone, the user can type what they want without having to manually delete the default text.

This task can be accomplished by adding a very small piece of javascript code to the textbox HTML.

For example:
<div style=”padding:10px;”>
<h2 style=”padding: 0px; margin 0px;”>Find More Stuff…</h2>
<form id=”form1″ name=”form1″ method=”get” action=”find-stuff.php”>
<input name=”q” type=”text” id=”q” value=”Enter Search Terms…” onFocus=”javascript:this.value=”” />
<input type=”submit” name=”button” id=”button” value=”Submit” />
</form>

Notice “onFocus” in bold above…
To accomplish the goal of deleting text when clicking on a text area – add to your text input code.

Share
Filed Under: Web Development Tagged With: , , ,