Wednesday, October 9, 2024

Writing Solid Front-end Web Development Code

Front-end web development could once be described as a waking nightmare, what with the variety of browsers, use of proprietary syntaxes, lack of compliance, etc… Fast forward to 2016, in many ways, things have only gotten worse. Now we have a gazzilion screen resolutions to contend with, a lot of bleeding-edge technologies emerging, and an environment that is in constant evolution. All of this makes producing clean, semantic, and cross-browser code a hard job indeed. Over the next two months, I’ll be presenting a few guidelines for coding, testing, debugging, and profiling your websites. After today’s article on coding, expect one on testing within a few weeks; the following two parts will be posted next month.

ABC – Always Be Closing (Tags that Is)

Like Alec Baldwin said in his classic Glengarry Glen Ross scene, Always Be Closing (warning: clip contains strong language)! You can get away with a lot of missing closing tags, but it’s not recommended because different browsers often interpret the incomplete markup in their own way. In some cases, it will arrange elements in a strange way. It might even omit some elements completely!

To make each element’s start and end tags easily discernible in the markup, borrow a page from programming standards and indent each nested element.

<div id="container">
  <div id="header" class="first center">
    ...
  </div>
</div>

Another trick is to including a comment beside each closing tag that identifies the element that it belongs to.

<div id="container">
  <div id="header" class="first center">
    ...
  </div><!-- #header.first.center -->
</div><!-- #container -->

Declare the HTML5 DOCTYPE

The DOCTYPE tag goes at the very top of the page before the opening HTML tag and tells the browser whether the page contains HTML, XHTML, or a mix of both. Using an older DOCTYPE tag can cause the browser to interpret the markup incorrectly. All you need to declare HTML5 content is this:

<!DOCTYPE HTML>

For more information on the HTML5 DOCTYPE check out this article I wrote a little while ago.

Separate Structure, Presentation, and Behavior, with some Divergence

The maxim of keeping structure, presentation, and behavior separate has been around a while, but it bears revisiting, especially since the rules have changed a bit in recent years.

In basic terms, document structure is outlined in the HTML markup, presentation in CSS stylesheets, and behavior in JavaScript files. In following this practice, you would avoid inline styles and JS function calls, as well as certain tags such as <font>, <i>, <b> and attributes like border, align, value, and hspace.

In recent years, the lines have begun to blur. CSS now includes behaviors like :hover and animations as well as structure with the ::before and ::after pseudo elements. HTML has similar overlap: its new <input> types include aspects of both behavior and presentation. Where one of the structure, presentation, and behavior content types encroaches into another’s realm, that is divergence. There’s nothing wrong with a little divergence as such, just be cognizant of where and why you are using it. I myself introduced divergence into my content in my Create a Chart Plot Line Using a Pure HTML and CSS Solution article when I employed the ::after pseudo element to draw a horizontal line.

Consider Placing your JavaScript Files at the Bottom of the Page

When I first learned how to code JavaScript, the standard practice was to place Javascript files in the document HEAD. Then page elements could safely be referenced in the document or window’s onload event. The problem is that JavaScript files will be loaded first, and consequently hold up visible page content. By placing JavaScript files at the bottom of the document, scripts are only loaded once the BODY content has been displayed.

If you’ve only got a couple of minified scripts, placing them in the head won’t be a deal breaker, but once you’ve got more than that, it might be time to move them to the bottom. If you do have variables that need to be initialized right away, you can always leave those in the HEAD:

<!DOCTYPE HTML>

<html>
  <head>
    <title>Script Placement Example</title>
    <script type="text/javascript" src="js/init.js"></script>
  </head>
  <body>
    <div>Page Content</div>
    <script type="text/javascript" src="js/BigFatScript.js"></script>
  </body>
</html>

Robert Nyman discussed this idea on his site way back in 2008, while managing to make it all sound rather sexy!

Conclusion

Got any favorite coding standards of your own that weren’t included here? Fear not, I plan on adding to this list at some point. Just add your suggestions to the comments and they may be included.

Rob Gravelle
Rob Gravelle
Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured