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. :)
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.
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.
This section gives your insights about what you can improve in this area:
- Avoid browser detection: tells you if you have code calling
- 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.
- Use modern doctype: Modern doctype like
<!DOCTYPE html>are better for browser compatibility and enable using HTML5 features.
- Avoid browser detection: tells you if you have code calling
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
All the aXe rules are displayed only if they are in a failed state:
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
- Try bundling your files: simple algorithm that checks if you created a single file for all your scripts to reduce HTTP requests
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.
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
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:
- Scan your site for out-of-date libraries, layout issues, and accessibility
- Download free virtual machines for Mac, Linux, and Windows
- Check Web Platform status across browsers including the Microsoft Edge roadmap
- Remotely test for Microsoft Edge on your own device
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)
- Unleash 3D rendering with WebGL (from David Catuhe)
- Hosted web apps and web platform innovations (from Kiril Seksenov)
Our community open source projects:
- 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)