Using Modern.IE to Improve WordPress Theme Development

Chris Burgess
Tweet

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

There are dozens of popular tools to help theme developers test the quality of their code. Not only can this help reduce errors in your themes, but it also helps ensure that your theme is reliably rendered on multiple devices and browsers.

Also, with WordPress performance being such a hot topic, the ability to identify potential performance issues while you’re developing your theme is extremely useful.

In this article, I will explain what modern.IE is, and how it can assist you in your WordPress theme development, and provide some pointers to more information. I’ll also walk you through setting up a test virtual image so that you can test your WordPress theme on the complete family of Windows and IE (Internet Explorer) web browsers.

Testing Real Data in Your WordPress Themes

There is a lot more to a WordPress theme than just the home page. Likewise, an empty theme with some placeholder text won’t really give your theme the workout it needs.

Once your theme is being used by real users in production, they’ll find ways to use it that you might not have ever expected, let alone tested. Enter WP Test (wptest.io). WP Test provides exhaustive (you can’t ever test for everything) test data to help simulate real usage by creating all sorts of content; it’s quite impressive and perfect for testing themes (it’s also handy for testing plugins).

WP Test

If you’re developing your own WordPress themes I’d highly recommend using WP Test.

What is modern.IE?

Firstly, for those unfamiliar with modern.IE, it’s a collection of free tools and resources provided by Microsoft aimed at helping web developers. One nice feature of modern.IE is that it’s available in languages other than English.

Modern.IE Home

I’ll give you a quick overview before drilling deeper into some of the testing tools that modern.IE provides.

Modern.IE Tools

Modern.IE isn’t just about tools, it’s a resource for developers. That said, the tools are definitely the core features on offer and the most fun to play with.

BrowserStack

BrowserStack is a popular web application that allows you to test your theme on hundreds of virtual machines. It’s a third party service, however you can try BrowserStack for three months via modern.IE.

BrowserStack and similar tools save you time previewing your themes on different devices and browsers. But, if you already maintain your own testing environment, you’ll be interested in the next point.

Virtual Machine Images

We all realize the importance of testing on multiple browser versions and unless you use a testing platform that offers this as a service (such as BrowerStack) you probably maintain your own set of virtual machine images. One nice resource modern.IE provides is various sets of Windows and IE versions which you can download to your own environments.

Modern.IE Virtual Machine Images

The virtualization library covers many different Windows versions, as well as IE from version 6 to 8. These images come in a variety of operating systems, virtualization platforms, with VirtualBox supported on Windows, Mac and Linux.

Here are the host operating systems and virtualization platforms available at the time of writing:

Windows

  • Hyper-V On Windows Server 2008 R2 SP1
  • Hyper-V On Windows Server 2012 & Windows 8 Pro w/Hyper-V
  • Virtual PC for Windows 7
  • VirtualBox on Windows
  • VMWare Player for Windows

Mac

  • VirtualBox for Mac
  • VMWare Fusion for Mac
  • Parallels for Mac

Linux

  • VirtualBox for Linux

And here are the Windows and IE versions provided:

  • IE11 – Windows 8.1
  • IE10 – Windows 8
  • IE11 – Windows 7
  • IE10 – Windows 7
  • IE9 – Windows 7
  • IE8 – Windows 7
  • IE7 – Windows Vista
  • IE8 – Windows XP
  • IE6 – Windows XP

To install any of these, you must download self-extracting RAR archives. Due to the size of the images, they’re broken up into several files and are best downloaded using the command line tools wget or cURL. In the example below, I’ll be downloading Windows XP/IE6 for Parallels for OS X using cURL:

curl -O -L "https://www.modern.ie/vmdownload?platform=mac&virtPlatform=parallels&browserOS=IE6-WinXP&parts=0&filename=VMBuild_20131127/Parallels/IE6_WinXP/IE6.WinXP.For.MacParallels.sfx"

Next we need to run the self-extracting RAR file, but first it needs to made executable:

chmod +x IE6.WinXP.For.MacParallels.sfx

Now we can run the file, this will extract the PVM files needed for our Parallels image:

./IE6.WinXP.For.MacParallels.sfx

The output should look like this:

RAR SFX archive

Extracting from ./IE6.WinXP.For.MacParallels.sfx

Creating    IE6 - WinXP.pvm                                           OK
Extracting  IE6 - WinXP.pvm/config.pvs                                OK
Extracting  IE6 - WinXP.pvm/config.pvs.backup                         OK
Creating    IE6 - WinXP.pvm/IE6 - WinXP.hdd                           OK
Extracting  IE6 - WinXP.pvm/IE6 - WinXP.hdd/DiskDescriptor.xml        OK
Extracting  IE6 - WinXP.pvm/IE6 - WinXP.hdd/DiskDescriptor.xml.Backup  OK
Extracting  IE6 - WinXP.pvm/IE6 - WinXP.hdd/IE6 - WinXP.hdd           OK
Extracting  IE6 - WinXP.pvm/IE6 - WinXP.hdd/IE6 - WinXP.hdd.0.{5fbaabe3-6958-40ff-92a7-860e329aab41}.hds  OK
Extracting  IE6 - WinXP.pvm/IE6 - WinXP.hdd/IE6 - WinXP.hdd.drh       OK
Extracting  IE6 - WinXP.pvm/parallels.log                             OK
Extracting  IE6 - WinXP.pvm/statistic.log                             OK
Extracting  IE6 - WinXP.pvm/VmInfo.pvi                                OK
Creating    IE6 - WinXP.pvm/Snapshots                                 OK
Creating    IE6 - WinXP.pvm/Windows Disks                             OK
All OK

All we need to do now is import the image into Parallels and we’re ready to fire up Windows XP and IE6.

Windows XP and IE6

It will take a while to set up all of the images, but in the end you’ll have coverage of all Windows and IE versions in your own testing environment.

Compatibility Report and Site Scan

The Compatibility Report/Site Scan (also referred to as the Compat Report) is a nifty tool that checks your HTML, CSS and JavaScript for problems or ways that you can improve your code in your theme. It also alerts you to obsolete versions of common JavaScript libraries. This is important if you’re using a starter theme that may be using older versions of a particular library.

Compat Report

To use the Compatibility Report, just enter a URL and click Scan.

The results are displayed in logical sections that can be expanded for more information. This is a great learning tool, since it tells you how your code can be improved.

You can share completed reports as a PDF, by email or even on Facebook (I’m sure your friends will be relieved you’re sending compressed content :)).

Here’s what a report looks like:

Modern.IE Site Scan

Here’s a link to an example report:

While using the online version of the Compatibility Report is handy, like most of these kinds of remote tools, they only work on publicly accessible URLs. This is a pain at times, but luckily for those who need private testing or if you just like to roll your own tools, the code is open source and available on GitHub here.

You might have also noticed that along with the results shown on the main page, there are two additional tabs.

  • Get screenshots of your site across browsers and devices
  • Scan for code no longer supported in modern IE

Modern.IE Tabs

I’ll briefly cover what you’ll find in these sections.

Get screenshots of your site across browsers and devices

This is a nice, quick and easy way to get screenshots of your site on various platforms and devices. This feature uses BrowserStack to generate the images. Unlike the link to BrowserStack on the front page, these feature generates a sample of nine images within modern.IE.

BrowserStack Screenshot Example

As with the Compatibility Report, you can also share these results.

Scan for code no longer supported in modern IE

This is also referred to as the ‘Compat Inspector’. It’s essentially a JavaScript tool developed by the IE team that checks to make sure your code isn’t including anything known to have issues.

Compat Inspector

You can find out more information on using Compat Inspector here.

The use of Compat Inspector in modern.IE is automated using Sauce Labs. They offer a testing platform with over 130 browsers and can integrate with third party Continuous Integration services such as Jenkins and Travis CI.

Status.IE

Accessible at http://status.modern.ie, Status.IE publishes implementation details of current and future features supported by IE (and other browsers). You can view the source and get more information at the Status.IE GitHub repo.

IE Developer Community

The IE Developer Community section is a launchpad for all things IE. It lists events, IE reference documentation, and links to IE-based discussions on Twitter and StackOverflow.

Articles and Developer Resources

The ‘articles and developer resources‘ section is a handy curated list of best practices and web developer resources.

The IE Developer Channel

The IE Developer Channel lets you connect to the IE engineering team as well as download a version of IE that lets you test upcoming features.

Summary

If you’re developing your own WordPress themes, thorough testing should definitely be an important part of your workflow. Modern.IE gives you a wide range of tools to help you test your code, as well as community resources to help keep up with modern web development best practices.

There’s a lot more to modern.IE than what I’ve covered, but hopefully you’ve seen enough to get started. If you’re interested in further reading on modern.IE and WordPress Theme development below are some great starting points:

If you have any other useful resources for theme development, please feel free to share them in the comments section below.

Free JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja and receive updates on exclusive offers from SitePoint.

  • joolythomas

    $87 an hour! Seriously I don’t know why more people haven’t tried this, I work two shifts, 2 hours in the day and 2 in the evening…And whats awesome is Im working from home so I get more time with my kids.

    Here ­­­­­­­­­is ­­­­­­­­­I ­­­­­started>>>>>>>>>➜➜➜➜➜➜➜

    ➜➜➜➜ W­W­W­.­W­O­R­K­J­U­R­Y­.ℭ­ℴ­m

    —————————————————–

    GO TO THE SITE –>>>CLICK NEXT TAB FOR MORE INFO AND HELP

  • AspireToInspire

    Why can’t this be done with Outlook? Outlook is such a complete disaster when it comes to rendering html.