HTML5 Coding Methodologies
Web developers have experienced many revolutions in recent years. The marked rise in the number of Web APIs has forced developers to constantly rethink their job description along with all of tasks that they do. Meanwhile, a plethora of new tools has emerged to capitalize on new technologies. It would not be an understatement to say that these tools have completely changed the way that HTML5 content is developed. The arsenal of tools to choose from ranges from boilerplates to performance tuning and building tools. While these tools have the potential to help us create content and apps more quickly and easily than previously, in order to develop in a smarter and better way, we should adopt a set of coding methodologies that foster a smoother development life cycle. In today's article, we'll examine a few of the latest coding methodologies that have found their way into web developers' process.
Methodology vs. Best Practice
As a member of the Best Practices team in the Canadian Federal Government, I feel that I should elucidate on what the difference is between a methodology and a best practice.
A best practice is a process or procedure that is defined either informally of formally, and has one or more of the following attributes: efficient, cost-effective, fosters competitive advantage, optimizing (work, workflow, customer service, etc.). Informally defined best practices are those that have evolved naturally over time that may not be documented or embodied in policies and procedures documents.
The key difference is that a methodology may or may not be an actual best practice as a methodology may be chosen and implemented for a variety of reasons, many of which do not result in one or more of the key attributes listed above. A best practice, on the other hand, is a proven practice that is a methodology in its own right (practices are usually conducted within a process and comprised of tasks and methods), but one whose goal is to select the best methodology out of all known methodologies at that time.
Put another way, best practices assure best results, while methodologies do not necessarily guarantee them.
For the remainder of this article and series, I will present a set of methodologies which have in fact proven (insofar as is possible within a fairly short time frame) to be reliable, and, if not the best practice, then at least a good one!
Choosing the Right Tools
The days of coding HTML in a text editor are long gone. Even a total newbie can produce a great-looking web page with minimal effort by utilizing a modern HTML authoring tool. In fact, I would strongly discourage anyone from attempting to create a page from scratch. What with standards compliance, browser quirks, responsive design considerations, etc, all coming into play, it's best to leave the markup and code generation to a specialized tool and concentrate instead on content.
Starting with the IDE (Integrated Development Environment), there is no such thing as an universal "best IDE". It really comes down to personal choice, unless your web site or app has very specific requirements. For instance, iPhone development relies heavily on XCode. I personally employ eclipse for all but the most simple of web pages. It's open source and can be customized with a multitude of plugins. For simple pages - and articles - I use Chami HTML-kit. HTML-Kit Tools is their commercial application, while HTML-Kit 292 is their free offering.
With so many outstanding choices, it's impossible for me to list all of them here, so rather than try to do that, I will identify some of the pertinent features to look for.
- autocompletion: Autocompletion is triggered by you typing a few characters. A dropdown of relevant suggestions will then appear. Once you learn how to use autocompletion it is possible to type no more than three characters for everything but new variable names.
- syntax highlighting: You'd be surprised how many elements make up a web page, from scripts, to tags, to attributes, etc. Syntax highlighting helps identify each of these.
- server support: It's helpful to be able to connect to a local or remote web server because certain operations, such as Ajax, require a server to work. Other connection types include FTP, SFTP, WebDAV servers, or to your online accounts (e.g. Dropbox).
- database explorer/connectivity: Modern web apps often deal with data and the traditional RDBMS (Relational DataBase management System) is still the place to put it. Therefore you will want to have the capability to view and edit your data structures and data from within your IDE.
- Tabbed Editor: There is no escaping the fact that you'll have to open a number of files at any given time. Tabs make it easy to switch between them.
- Extendable: A good IDE can be enhanced via plugins. That way, when a new technology comes out, you can simply install a plugin to begin using it immediately.
- Debugging: Although browsers have amazing debugging facilities, it's nice to be able to stay within your editor.
- Testing: Web apps, like any other application type, require testing to work out all of the kinks. A good IDE will provide testing tools.
Syntax highlighting and autocompletion in eclipse
For blogs and other relatively static sites, there are many online platforms and tools that will assist you in building your site without any coding whatsoever. We'll be getting to those, along with additional coding methodologies, in the next installment.
Rob Gravelle resides in Ottawa, Canada, and is the founder of GravelleWebDesign.com. Rob has built web applications for numerous businesses and has recently developed his own jquery-tables library.
Rob's alter-ego, "Blackjacques", is an accomplished guitar player, that has released several CDs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92) and reached the #1 spot in the National Heavy Metal charts on ReverbNation.com.