Using modern.IE to Identify Common Coding Problems

This article was sponsored by modern.IE. Thank you for supporting the sponsors who make SitePoint possible!

By now, many of you are probably familiar with modern.IE and many of the testing tools it offers. One of the lesser-known features of this project is the Site Scan feature that, according to the modern.IE team, allows you to scan your website “for common coding problems to make sure users get the best possible experience”.

You’ll definitely want to check out this tool and in this post I’ll describe exactly what it does.

You can access the tool by entering a URL in the appropriate field on the modern.IE home page, highlighted below:

Or by going to the Browser Testing Report page, which is the main page for the Site Scan feature where you’ll see the results of your scan:

For this article I’ll be using my own website, Impressive Webs. I haven’t redesigned or recoded it in almost two years, and it’s a WordPress site, so I think it’s a good candidate to allow us to see some interesting results.

After entering my URL and allowing the scan to take place, I get the results shown in the image below. You can go directly to my results page here, which will allow you to poke around the various options.

As you can see, the results are divided into four main sections:

• Common problems from supporting old versions of IE
• Cross-browser and cross-device issues
• New features in Windows 8
• Accessibility improvements

The nice thing is that even for the sections where your site passes the test, there is a description given for what was scanned, along with a green check mark. Stuff that the scanner finds that doesn’t pass its tests are indicated with an orange exclamation point along with some suggestions on how to improve.

Let’s examine a couple of the ones that failed on my site scan. First, you’ll notice my website could use some improvements in image optimization:

The test tells me how many bytes I can save by optimizing my images correctly, why this is important, and even offers a third-party tool that I can consider to help in this area.

Another suggestion the report offers is that I use the prerender + prefetch features available in modern browsers like IE11 to improve the perceived speed of the site, and thus enhance the user experience:

In brief, using the <link> tag with the rel="prerender" feature allows you to preload an entire web page, while rel="prefetch" lets you preload specific resources.

As you can see, this testing report isn’t just a run-of-the-mill validator but an advanced site scan that offers cutting-edge suggestions to help you make your applications that much more effective. And hey, you might even be introduced to some features you haven’t heard of or tried before (like I was when I saw prerender and prefetch).

Compat Inspector

Another testing report that modern.IE offers is something called “Scan for code no longer supported in modern IE”, which uses something called Compat Inspector:

Running this scanner on my website produced the following results:

From what I can tell, all of these are warnings about browser sniffing techniques that I shouldn’t be using. In my case, all the examples are in third-party scripts, so not too big a deal. With each warning given, as with the Site Scan report, you have the option to drill down and view more info on that particular problem with suggestions on how to fix it.

Use the Reports Offline

Finally, another great feature of the Site Scan tool is the fact that it is open-source and it’s available for download on GitHub:

This allows you to grab the tool, install it locally, and run the tests on your local websites offline.

The Site Scan and Compat Inspector features are great options to consider adding to your testing workflow, in addition to the usual validation, linting, and other processes that are likely already part of your development roadmap.