Although considered as a commonly overlooked area of front-end development, HTML is perhaps an indispensable component of every website, big or small. If you’re the one who’s been thinking about optimizing his/her site’s HTML lately, then you’ve reached the right post.
What will I look into, in this post?
In this tutorial, I’ll be speaking about the effective optimization of website markup using the very popular HTML Inspector tool. Additionally, I’ll also let you know why it is indeed one of the most befitting tools for developers who’re new to a site’s code.
HTML Inspector- What is it?
Introduced by Philip Walton, HTML Inspector is a fully customizable tool that allows you to write better quality markup for your website. By using HTML Inspector for your site, you’ll start receiving a series of messages in your browser’s developer tools console. These messages will offer you useful insights on different HTML issues that require your immediate attention. Here is a screen-shot for how these messages will be displayed, post configuration of HTML Inspector:
HTML Inspector- Installation and Customization
Just follow the below steps for installing and running HTML Inspector on your website, local or remote:
Step 1– For installing and using HTML Inspector via command-line, simply use NPM(it requires PhantomJS). The command used for the same is shown below:
npm install -g html-inspector
Likewise, if you want to install and run HTML Inspector via browser, use the below command:
bower install html-inspector
Step 2– Customize default settings for HTML Inspector
Well, there are two ways of customizing HTML Inspector tool settings. Let’s have a look at them one by one:
Method No.1
Changing default values in config settings
HTMLInspector.inspect() when run with default setup will execute HTML Inspector tool with the default values. The inspect() method will use an optional config object for changing these default values using the code snippet displayed below:
HTMLInspector.inspect({
domRoot: "main",
excludeRules: ["validate-elements", "validate-attributes"],
excludeElements: ["svg", "span", "input"],
onComplete: function(errors) {
errors.forEach(function(error) {
console.warn(error.message, error.context)
}
}
});
The above code will inform HTML Inspector not to inspect certain elements and avoid validating elements or attributes.
Method No.2
Writing custom rules, which would then be followed by HTML Inspector
If HTML Inspector’s default inspection warnings fail to impress you, there’s always an option for writing new rules of your own. The structure used for doing the same is shown below:
HTMLInspector.rules.add(name, [config], func)
As an example, here’s how the code would look like, when two specific data-* attribute namespaces are being internally deprecated in favor of a different inspect() method:
HTMLInspector.rules.add(
"deprecated-data-prefixes",
{
deprecated: ["foo", "bar"]
},
function(listener, reporter, config) {
// register a handler for the `attribute` event
listener.on('attribute', function(name, value, element) {
var prefix = /data-([a-z]+)/.test(name) && RegExp.$1
// return if there's no data prefix
if (!prefix) return
// loop through each of the deprecated names from the
// config array and compare them to the prefix.
// Warn if they're the same
config.deprecated.forEach(function(item) {
if (item === prefix) {
reporter.warn(
"deprecated-data-prefixes",
"The 'data-" + item + "' prefix is deprecated.",
)
}
})
}
)
});
HTML Inspector- What makes it a great tool for development teams?
One of the greatest benefits to using HTML Inspector is for the web developers who need to work on the code already created by previous coders. For example, interns and new hires can easily take a deeper dive into the multiple issues that are existing within a particular markup. Plus, with customized rules in place, it becomes quite convenient for the newbie developers to read the displayed warnings and make make the necessary moderations to the code. The best part of using HTML Inspector is that it is compatible with all the modern browsers, with only one condition that the chosen browser should support CSSOM, ES5 methods and console.warn().
In Conclusion
It’s true working on a new code is quite challenging. But, we are fortunate enough to have tools like HTML Inspector which can guide us in the right direction when it comes to eliminating errors/issues from markup.
GitHub Source: https://github.com/philipwalton/html-inspector
No Comment