Using Modern.IE to Improve WordPress Theme Development
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).
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.
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.
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.
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.
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:
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
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.
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.
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:
- https://www.sitepoint.com/using-modern-ie-identify-common-coding-problems/
- https://www.sitepoint.com/testing-internet-explorer-modern-ie/
- http://make.wordpress.org/themes/
- https://www.sitepoint.com/so-you-think-you-know-how-write-wordpress-theme/
- https://www.sitepoint.com/store/build-your-own-wicked-wordpress-themes/ (Book)
If you have any other useful resources for theme development, please feel free to share them in the comments section below.
