Web Application Coding Standards

It’s a new year and I have spend time talking to other front-end developers about their preferred best practices. Also, HTML5 received a draft update last year and I had a bit more experience with it. It’s time to make a few choices and try to stick with them. Feel free to use the below guidelines to help you improve your code consistency and create your own best practice.

There are a few simple benefits from having coding standards. Your source code is easier to read, has more consistency, sharing your code with others, or going back through it (legacy) will be easier. You support better loading-, performance-, and maintainable code for your pages. The only downside is that you have b considerate of others in the industry and perhaps remember your decisions.

This article is to introduce your to the general practices of coding standards for web applications, one specifically for html5 and css3 will be published separately.

Your content has to be presented to the visitor, be it in a web application, a blog post, or social network environment. Content is displayed through structure, with presentation and behavior. They are different things, so keep them separate. Use html for the markup, css for the presentation, and javascript for interactivity (progressively enhance user experience); you can store your data in the file system, in a template, or in the database and use php to pre-process everything.

Complexity (input) behind simplicity (output) deconstructed

Your code should be semantically correct, well-formed, using indentation, lower-case, and it should be valid syntax.

While this is correct:

<DIV class=warning><p>Watch out!</Div>

(the above uses capitalization, no double quotes for attribute values, and while the closing tag for p is optional, it’s wrapped around content so now it is required)

This is what I prefer, and use:

<div class="warning">
	<p>
		Watch out!
	</p>
</div>

(all lowercase, values inside double quotes, p tag is properly closed. And markup is using indentation)

These principles can apply to markup, presentation and behavior

Code is always changing, updated, patched, shared and re-purposed. Therefor it’s important to not compress it to save new lines, white spaces, etc. I do suggest to consider supporting tidy/minify of code, however, I believe this should be done in the pre-processing of the code, not in the actual engine code. Meaning, the rendered page in the browser could be compressed as ‘output’, but we leave the data we work with ‘input’ alone. Also, do not obfuscate the javascript. You can compress / minify the static content server-side.

Constantly test and optimize your code. Practice various situations and branch your changes from a master source.

Consider accessibility, performance, mobile web, alternative devices, search engine optimization, caching of content, and consider putting static-content on a cdn.

Finally, anything client-side in my opinion should be to enhance the user-experience. And your core features should work without javascript.

One more thing.

Before I let you go I want to share more a believe than a coding standard or a policy about best practices. I believe that how you are as a person reflects in the code. Better the way you deal with your projects, to better your life. Test various programs, pick one and learn it. Organize your projects, share and discuss what you’re doing with others. Support the industry, open standards and semantic web. Getting inspired by others to innovate will result in having the ability to learn, share your knowledge, and improve the quality of your work.


Posted

in

by

Tags: