The concise guide to using Pagefind for your static siteâs search functionality.
A version of this article appeared on viget.com
Read More
This article the second in a two-part series on running cross-browser tests directly on your primary computer. The first is Set Up Simulator and Test iOS Mobile Safari on Mac.
According to one well known source of desktop browser marketshare data, in November 2018 Internet Explorer usage was at 2.8% in the United States and 5.05% worldwide; Edge usage was at 2.15% in the United States and 4.25% worldwide. Not much perhaps compared to the leader Chrome (61.77% in the U.S., 49.13% worldwide) or even the runner up Safari (15.09% in the U.S., 32.38% worldwide). But that means as many as 1 in 20 United States users could be using either IE or Edge, and that means itâs well worth considering testing your site in Microsoft browsers. (Each siteâs audience is different, and the decision to spend time and money to make grumpy IE11 match a comp should be made with that siteâs traffic in mind.)
Internet Explorer and Edge only run on Microsoft operating systems. For front-end developers and quality assurance testers on Mac or Linux computers, those browsers are often tested when development is nearly finished, using a paid web app such as BrowserStack or CrossBrowserTesting aimed at visual QA more than debugging or high-fidelity UX testing.
A Windows 10 âvirtual machineâ (VM) âin lay terms, think a full additional computer in an app on your computerâ puts full true Microsoft browser testing at your fingertips.
This guide will get you set up with a Windows 10 VM. It takes 30-40 minutes, plus the time to download a 5GB disk image. You will need at least 25GB of disk space, but 50GB is recommended to give Windows 10 space to grow over time. Youâll use free software, including a full copy of Windows 10 provided for free by Microsoft.
There are various tools out there for running virtual machines (VMs). Weâll use VirtualBox - itâs free, it works great, itâs being actively developed, and itâs available for every operating system.
Installers come on physical media (DVDs or thumb drives) or in disk image files (typically .iso) Youâll use .iso files for your VirtualBox VMs. Microsoft provides Windows 10 iso for free! Go to the Download Windows 10 Disc Image (ISO File) page. Youâll be asked to make some choices:
Select your edition
As of this writing, the available options were an update a couple months old and an update a couple months older than that. Go with the most recent.
Select your language
For English users, I go with âEnglishâ over âEnglish International.â The international version uses British spellings in the Windows UI â âcolour,â for example, as opposed to the American âcolor.â There are some claims out there that the International version is problematically different. I donât know if thatâs true or not. I do know that âEnglishâ (which means American English) can be configured to use non-American keyboard mappings.
Select your processor
Donât know if your computer is 32-bit or 64-bit? Itâs probably 64-bit. Apple for example hasnât made a 32-bit computer since 2011. If you have a Mac, you can double check by going to the Apple menu and selecting âAbout This Macâ: if the âProcessorâ is Core Duo itâs 32-bit, anything else is 64; if you have a PC, youâll just have to look it up!
Open VirtualBox, and click âNewâ
Fill out the âName.â Using the OS as the name is a good convention, and will help you keep track of things later on. And if you name the VM after the OS, VirtualBox will automatically select the âTypeâ and âVersionâ.
On the next screen, bump the âMemory size.â The default is 2048MB (2GB). 4096MB (4GB) is a good place to start. If your computer has at least 16GB of RAM, consider giving 8192MB (8GB) to the virtual machine. You can always change this later if you find it makes your actual computer too slow when the virtual is running.
On the next two screens, follow the defaults for:
For âStorage on physical hard disk,â choose âDynamically allocated.â With this setting, the amount of space your virtual machine takes up on your real machine depends on exactly what virtual machine needs. With a âfixed sizeâ virtual machine, the virtual machine reserves the amount of storage you specify even if you specify more than it needs. Dynamic allocation has a significant long-term benefit: youâll be able to non-destructively modify the maximum size setting. This is relevant to Windows 10, which in my experience will need more and more storage, even if you donât install anything new. In about a year and a half, I saw one Windows 10 virtual machineâs needs increase by about 15GB. Because it was âfixed size,â I was not able to change the disk size without losing data.
The âFile location and sizeâ gives you an opportunity to change where on your computer you keep the files related to this VM. I do not recommend renaming the virtual hard disk file â historically, depending on the operating system, that could confuse things. But if you want to change the location, click the folder icon and select the location. I keep my VMs in a âVMsâ folder in my home folder.
For the âSize,â stick with the default 50GB. Remember that thanks to dynamic storage allocation your virtual machine should end up taking less space than this â expect a final size of around 20GB.
Hit âCreateâ!
In VirtualBoxâs sidebar, select your new âWindows 10â and then click on the large gear âSettingsâ button.
In General > Advanced,
In Network > Adapter 1 switch from âNATâ to âBridged Adapterâ. This will give your virtual machine access to any local servers running on the host.
Note that in System > Motherboard you can up the memory, and in System > Processor you can increase the number of processors. The default 1 works well for me, but if you want to play around with things thatâs where to do it.
When youâre done with the settings, hit okay. Now double click on your VM in the VirtualBox sidebar. Click the âbrowseâ icon, and locate the .iso you downloaded.
At this point I recommend closing all other apps that take a lot of memory.
Hit âStartâ, and you should see the Windows 10 installer start up. Follow the installer.
That should be it for configuration. In a minute or two, after the installer spins for a bit, you should be looking at a Windows 10 computer! Now you can safely delete the Windows 10 disk image you downloaded at the start.
Now weâll remove that Microsoft account.
Itâs time to introduce some VM lingo: the computer on which the VM is installed is called the host, and the VM is called the guest. In this case, the Windows 10 machine is the guest, and your physical computerâs system is the host.
VirtualBox provides a set of tools to extend your VMâs powers, do support things like copying text in the host and pasting in the guest. The tools are called Guest Additions. Install them!
VirtualBox has several display options, configurable from the hostâs View menu. Note that you must install the Guest Additions, above, for these to work correctly.
After playing around with the options, you might have trouble getting back to the defaults. The trick is to select no Mode option.
When youâre in a VirtualBox VM, all keystrokes are sent to the guest. To toggle this and send keystrokes to the host instead, hit the host key.
The current host key is named in the bottom right corner of the VM window. The icon immediately next to it, a downward-pointing arrow, indicates whether keystrokes are going âdownâ into guest. If itâs lit up green, keystrokes are going to the guest; otherwise keystrokes are going to the host.
Use the host key, for example, to switch to a different host app. I find this especially handy in full screen mode: I hit the host key, then trigger the hostâs app switcher.
The host key can be customized. In the hostâs menubar, select VirtualBox VM > Preferences > Input > Virtual Machine.
Think of your VM as a real computer. Just as you turn a physical computer off with the operating systemâs âshut downâ process, you should turn off your VM with its âshut downâ process. That means that to turn off your Windows VM you donât quit the VirtualBox instance, you send the shut down signal from the Windows menu: open the menu and, click the power icon, and choose to turn the computer off. VirtualBox will automatically close the container app.
To turn on a VirtualBox VM, open VirtualBox and either select your VM and hit the âStartâ button or simply double click the VM you want to start. You can also start the VM by opening its .vbox file. If you want to do that (for example, if you want to keep the VM in your Dock) and donât remember the location you chose back in the VM setup step, right on the VM in VirtualBox and choose the âshowâ option.
Your system is all set up! Windows 10 comes with Edge and Internet Explorer 11.
To access IE11, open the Windows menu and start typing âinternet explorerâ. Once itâs open, you can right-click its icon in the taskbar and select âPin to taskbar.â
Just for completeness, I like to install Chrome and Firefox. The process is familiar to anyone familiar with Windows, but that might not be you!
I remove the Mail and Store icons from the taskbar: right click on them, and select âUnpin from taskbarâ.
I remove the Cortana search field from the taskbar: right click on an empty part of the taskbar, or on the Cortana search field, and in âCortanaâ select âHidden.â
There you go, youâre ready to test any Windows 10 browser right from your own computer!
Add high-performance search to static sites with PageFind
The concise guide to using Pagefind for your static siteâs search functionality.
Git Prompt Kit: Configurable, Fast Git Status Components For Custom Zsh Themes
A collection of components for displaying Git information in your prompt
Watch for specific added nodes with MutationObserver
MutationObserver makes it easy to watch for the addition of specific nodes, if you know where to drill.