How Vorlon.js Helps You Improve Your Web Code

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

When it comes to writing good code in web development it is easy to get lost in the quantity of resources you find online. There are some basics that everyone knows or should know and there are some more specific ones.

Are you able to tell me right now that you are sure you follow these practices? Probably not. You probably have the intuition that you do and you are certainly writing your code with them in mind but you cannot be sure you always respect them.

As I said, there are a lot of different resources on the web. It is not easy to know all of them. It is not easy to follow all of them. And it is sure not easy to be sure you did it correctly.

This is why we decided to create the Best Practices plugin in Vorlon.js. It is a way for you to automatically get hints and recommendations about how you could improve your code. The current list of practices and scans have been created from our own experience. It is extensible and you can add your own rules to contribute to this plugin and make it more accurate and comprehensive. :)

A great thanks to Guillaume Leborgne and Mehdi Lahlou for their strong work on this!
Vorlon.js

How to Use the Best Practices Plugin

First of all, you need to setup a Vorlon.js environment. You can follow the documentation we provide here: http://vorlonjs.com/documentation/#vorlonjs-server.

Once you have a vorlon.js server up and running,and your website is connected to it, hit the “play” button on the Best Practice tab. It will run dynamic and static tests on the page you are currently debugging and the resources linked to it (JavaScript files, CSS files, etc.).

The above video shows you the kind of result you get when using this plugin. All the recommendations are organized into 4 categories: Web Standards, Accessibility, Performances, Mobile Web.

Let’s have a look at some of the rules you get in each of these categories.

Web Standards

There are a lot of common mistakes we can make in this area. Sometimes, it is not even a mistake. Take the JavaScript libraries you use, for instance: how frequently do you go and check if the version you are referencing is obsolete or not? Or consider the CSS prefixes problematic: are you sure you always add all the vendor prefixes? That could be a good idea to make sure your site works correctly on the widest range of computers. Do you have code which does browser detection? You should change it to feature detection. Etc. etc.

This section gives your insights about what you can improve in this area:
- Avoid browser detection: tells you if you have code calling navigator.userAgent
- Avoid browser specific content: is checking whether your website is sending a different content for some browsers
- Avoid conditional comment: Conditional comments are not the best way to adapt your website to target browser, and support is dropped for IE > 9.
- Incorrect use of CSS fallback: validates that all the CSS rules present in the CSS file are really there in the computed styles. This is a dynamic check and the result might be true or false depending on the browser you use.
- Incorrect use of prefixes: this one is performing a static scan on your CSS files to ensure you are always using all the vendor prefixes.
- Object and embed: the modern web is only about web languages not plugins, activeX and other embedded objects. This validates that your website does not include one.
- Update JavaScript libraries: checks if all the JS files you are using are considered by their creators as not obsolete.
- Use modern doctype: Modern doctype like <!DOCTYPE html> are better for browser compatibility and enable using HTML5 features.
Accessibility

Following web standards does not guarantee you that your web page is easily accessible. Accessibility is something the Vorlon.js team is really concerned about.

A lot of work is done in this area by great people. One example is the aXe product created by deque. It is an open source tool which gives you a gigantic list of advice about your website. They go deep in the analysis and can, for instance, tell you that a specific element has insufficient color contrast for someone visually impaired to see properly. This is really awesome work and we worked with the team at deque to integrate this into this plugin.

Note: this integration is not available in the npm version of Vorlon.js yet but you can get it from the dev branch in the github repository.

There are too much rules in there for me to be able to list them all, but here are the fixed one:
- Form elements must have labels for them to be understandable by automated web readers.
- Images must have alternate text: this one is listing you all the <img /> tag which does not contain the alt attribute.
- Use aria attributes
All the aXe rules are displayed only if they are in a failed state:
Performances

You can follow some simple rules to get better performances from your website.
- Encore static content: tries to determine if you are using gzip or deflate encoding to reduce de network bandwidth
- Minify static files: checks if you used a minification process to reduce the size of your CSS and JavaScript files
- Try bundling your files: simple algorithm that checks if you created a single file for all your scripts to reduce HTTP requests
Mobile Web

When it comes to mobile, a lot of web devs forget to add the correct elements and information to take it correctly into account.
- define platform icons: This is really not mandatory but it gives the user a better experience when they are pinning your websites.
- use meta viewport: Use meta viewport tag to choose how your website will get scaled on smaller devices like phones. Define at least <meta name="viewport" content="width=device-width, initial-scale=1">.
- use responsive approache: Even if your website target only certain devices, you may have users with unexpected devices or screen ratio.

Your Turn!

The plugin provides, for now, some basic rules. We really hope this will be completed by new rules that anyone in the community can create. Do not hesitate to add yours and create a pull request in the Vorlon.js repo.

More Hands-on with Web Development

This article is part of the web development series from Microsoft evangelists and engineers on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.

We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.microsoftedge.com:

More in-depth learning from our engineers and evangelists:

Interoperability best practices (series):
Coding Lab on GitHub: Cross-browser testing and best practices
Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
Advancing JavaScript without Breaking the Web (from Christian Heilmann)
Unleash 3D rendering with WebGL (from David Catuhe)
Hosted web apps and web platform innovations (from Kiril Seksenov)

Our community open source projects:

vorlon.JS (cross-device remote JavaScript testing)
manifoldJS (deploy cross-platform hosted web apps)
babylonJS (3D graphics made easy)

More free tools and back-end web dev stuff:

Visual Studio Code (lightweight code-editor for Mac, Linux, or Windows)
Visual Studio Dev Essentials (free, subscription-based training and cloud benefits)

Code with node.JS with trial on Azure Cloud