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 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 recommandations 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
Once you have an up and running vorlon.js server 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.
1. Web Standards
There are a lot of common mistakes we can do in this area. Sometimes, it is not even a mistakes. 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 conditionnal 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 embeded 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 are better for browser compatibility and enable using HTML5 features.
2. 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 currently for sometimes now about this by great people. One exemple is the aXe product created bydeque. It is an open source tool which gives you a gigantic list of advices 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 form 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
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 :
3. Performances
You can follow some simple rules to get better performances for your website.
- Encore static content: tries to determine if you are using gzip or deflate encoding to reduce de network bandwith
- 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
4. Mobile Web
When it comes to mobiles, 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
- use responsive approaches: 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 somes 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.