Front-end Code Review & Validation Tools

Front-end Code Review & Validation Tools

Introduction

Code review is the basis of the formal process for ensuring the quality of user experiences developed by the Creative Technology team. The Code review phase is part of an overall risk mitigation program of a project.This phase involves a meeting among the code developers, reviewers, and other stakeholders from within and outside a project team, with expected input and subsequent code revisions.

Validating Front-end code (HTML or CSS code) basically refers to using a program or an online service to check that the web page that you created is free of errors. W3C HTML and CSS Validators are the tools used for this purpose. They are easy to use, give clear results and provide lots of information about site errors as well as potential ways to fix them.

Use Case

This use case discusses Front-end (HTML, CSS, and JavaScript) Coding best practices that should be followed in order to reduce the validation warnings and errors. We have also listed out the online Validators, and those that are available in the form of Tools, Plugins, and Add-ons for validation.

Why do we need Tools to Validate Code?

If multiple developers work on a single project,with each following their own style of coding, maintaining a standard format across the entire project becomes a rigorous task. Thus we need to implement a uniform coding format that encompasses all aspects of code construction. These set of rules or checklist can be established as Coding standards only if all the members adhere to it.

Again, writing 1000 lines of code, is an exhaustive task and more so, when it comes to performing the code review phase. Analyzing each line of code manually is a demanding task and thus we need to depend on an automated tool to perform this validation.

Here, we are concerned with performing Front end code review. Validation of Front-end code is performed with the help of online Validators or tools, and Plugins. These help a developer in tracking, styling, and scripting bugs. Valid HTML also increases the chance of a web page being displayed correctly in the future browsers.

Coding Best Practices, Online Validators, Tools, and Plugins

HTML

Web pages are strings of words put together in an understandable format displayed through web browsers. The content in the webpages are given structure or formatted using HTML. HTML is the kind of format that can adapt itself to varying levels of code accuracy.

Coding Best Practices

  • Always close the tags. Otherwise we’ll come across validation and minor error handling issues at every turn.
  • Declare the right DocType.
  • Use UTF-8 Character encoding.
  • Never Use Inline Styles on your code.
  • Never Use Inline JavaScript.
  • Place all External CSS Files within the Head Tag.
  • Consider Placing JavaScript Files at the Bottom.
  • Make Use of Semantic Elements.

(Example: For headings use h1-h6 tags)

  • Use proper attributes for images and links.

(Example: “Alt“,”Title”)

  • Use lowercase letters within element names, attributes, and values.

(Example: <DIV> – Bad, <div> – Better).

  • Strictly use double quotes, not single or completely omitted quotes.

(Example: class=’container’ – Bad, class=”container” – Better)

  • Omit the values on Boolean attributes.

(Example: <input type=”text” name=” fname “ disabled=”disabled”> – Bad,

                <input type=”text” name=”fname” disabled> – Better)

  • You would have a text to code ratio of 3:7 or percentage of 30%.

Online Code Validators

HTML validator ensures that the HTML code on your web page complies with the standards set by the W3 Consortium. There are various types of validators – some check only for errors; others also make suggestions about our code, telling us when a certain way of coding might lead to unexpected results.

  • W3C validator is the most common HTML validator.
  • HTML Tidy is a tool for checking and cleaning up HTML source files.
  • Validator.nu: An online RELAX NG validation service. Supports multiple schema at a time.
  • Cynthia Says Portal tests individual pages for accessibility against either the W3C or Section 508 standards.

Validation Tools/ Plugins/ Add-ons

  • SublimeLinter: This is a Plug-in for Sublime Text. Sublime Text is a sophisticated text editor for code, Markup and prose. This Plug-in is programmed for locating errors (in HTML, CSS, JavaScript and a lot of other languages).
  • W3C HTML validation is performed using grunt Plugin. This Plugin validates all files in a directory automatically.
  • Unicorn Validation Plugin: This Plugin receives number of errors/warnings from W3C’s Unified Validator. W3C Unicorn Service helps to improve the quality of Web pages by performing a variety of checks (HTML validation, CSS validation).

html validation

  • Total Validator is an (X)HTML validator, an accessibility validator, a spell checker, and a broken links checker all rolled into one tool that performs a one-click validation of your website.
  • Jenkins + SonarSource: This Web Plugin enables analysis and reporting on HTML and JSP web pages.
  • HTML Validator: This is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors on a HTML page is seen in the form of an icon in the status bar when we browse.
  • Web Developer toolbar: This extension for Firefox is very popular and has tons of significant features along with some great tools to perform HTML and CSS validation.
  • HTML Validator: This is a Google Chrome extension to validate the HTML code of the current web page.

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting  a document written in a Markup language, i.e.; in HTML and XHTML. This is a tool that allows us to control the appearance of our web page. CSS can also be applied to any kind of XML, SVG and XUL documents.

Coding Best Practices

  • Use lower case letter for selectors and properties.
  • Alphabetize your CSS property for better performance.
  • Use ID and class names that are as short as possible.
  • Put spaces after “:” in CSS property declarations.

(Example: color:#FF0000 – Bad, color: #FF0000 – Better)

  • Use Hex color codes #000 unless using rgba()
  • Do not specify units for zero values.

(Example: margin: 0px; – Bad, margin: 0; – Better)

  • Use Sprite Images instead of calling individuals images.
  • Use a common naming system for selectors.
  • Use shorthand properties.

(Example: margin:  10px 20px;)

Online Code Validators

A CSS validator checks your Cascading Style Sheets in the same manner; basically, most will check them to make sure that they comply with the CSS standards set by the W3 Consortium. There are a few which will also tell you which CSS features are supported by which browsers.

  • W3C CSS Validation Service finds errors and potential problems in Cascading Style Sheets.
  • CSS Validation Service: CSS or cascading style sheet is a web based application language which describes the presentation and style from the document that is written in a Markup language. Click on the hyperlink given. Enter the URI of a document (HTML with CSS or CSS only) that needs to be validated in the input tab given.
  • CSSLint refers to syntactic errors in code. CSS Lint points out problems with our online CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency.

css validation

Validation Tools/ Plugins/ Add-ons

  • CSS Validator is a Mozilla extension that validates a page using the W3C CSS Validator.
  • Unicorn Validation Plugin performs CSS validation using Jenkins.
  • SMACSS is great conceptually, even if you don’t fully subscribe to the exact structure explained by Jonathan Snook, the philosophy is useful.
  • The Web Developer toolbar extension for Firefox is very popular and has tons of great features along with some great tools to check HTML and CSS validation.
  • Maven CSS Validator Plugin checks Cascading Style Sheets (CSS) files for validity against the CSS specification.
  • http://www.w3.org/WAI/ER/tools/complete: This link provides us with the complete list of the W3C Web Accessibility Evaluation Tools, that are software programs or online services that help determine if a Web site meets accessibility guidelines.

JavaScript

JavaScript is the most popular programming languages in the world. It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.

The HTML/CSS combination of data is only suitable for displaying information. In order to support a website to perform complex operations, we need a programming language in the back end, and JavaScript would be the right option. Programs written in JavaScript run directly in the web browser. Hence, if our website has a JavaScript program, the program will be automatically fetched by our visitor’s browser and executed on our system.

Coding Best Practices

  • Avoid inline and embedded JavaScript.
  • Keep the global scope clean. Put code into Namespaces Page, Util, and Controls.
  • Feature Detect – i.e. before using any advanced feature on an old browser assuming that it may support, let’s first check to see if the function exists, and then use it.
  • Test performance in all browsers mentioned above – use console.time to track down performance bottlenecks.
  • In order to minimize number of event listeners on a page, use event delegation.
  • Keep components as independent as possible.
  • Avoid using global variables. All variables used in a function should be declared as local variables.

Online Code Validators

  • JSLint is a Web-based tool for verifying your JavaScript code for errors. It has tons of features and settings that can be used to customize verification algorithms in to suit our needs.
  • JSHint is a JavaScript code quality checker.
  • JavaScript Lint is a code checker that finds common mistakes in scripts.

Validation Tools/ Plugins/ Add-ons

  •  jshint-eclipse: Integrates JSHint, a popular code quality checker for JavaScript, with the Eclipse IDE.
  • JavaScript Debugger: Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.

javascript validation

  • Unicorn Validation Plugin: This Plugin uses W3C’s Unified Validator, Jenkins to perform JavaScript validation thereby  helping to improve the quality of Web pages by performing a variety of checks.

Conclusion

As front end developers, we should work towards creating web pages that can clearly communicate with the audience and be able to put forth the ideas through interactive pages or interfaces. It is here that the code review process and Validators help us achieve our goals.

100% valid code is not our goal here. Validation will help us not only in debugging code, but ultimately lead us in creating better maintainable sites. Validating your front-end code for standards compliance has certain benefits: it protects our pages from problems arising from syntax errors in the code due to different ways of interpreting errors by the search engines and other browsers.

Some of the other benefits are enforcing coding standards, finding defects, better structured code and improving the long-term outlook for code quality in our organization.

Reference

10536 Views 2 Views Today