Tag Archives: cloud

LiveReload on Windows 8 (or “So You’re Okay With Pressing the Windows Key All The Time, But Not Okay With Pressing F5 All The Time?”)


I still use a “big” computer without a touchscreen monitor (or “grampa box“, as the cool kids call it). It’s still just too hard to code on a tablet device.  I’ve tried  Codeanywhere on my iPad, and looked at a few other solutions such as the ones in this post but, being spoiled by the conveniences of Visual Studio as a primary development tool, I haven’t yet been able to convince myself that the “good” of being light and portable outweighs the “bad” of missing features. With all the push by major companies into cloud development it seems that something polished would exist by now, but it still doesn’t seem be there. Perhaps this means that cloud-based editors are an open market right now. Alas, if only I had more time in the evenings…

Windows 8 has been on my main computer for a few months now, and its admittedly a strange experience. It will stay there, as there are indeed some good features, but any way you slice it sometimes feels awkward. I think that this is partially because much of my memory is often mapped to three-dimensional physical locations. When working merrily away in “desktop mode” I can either see the location of each window or “see” its z-axis position behind the other windows in my mind’s eye. This is great, but after some time passes I’ll invariably perform some action that opens an app in “tablet mode”. The new app covers up all of the windows I had open. This is always unexpected, and breaks my concentration. The root cause of this concentration-breaking is still elusive, but I have yet to be able to think of tablet mode as just another layer sitting on top of all of the other windows. Initially I thought it was the fact that I have been using windows-based (Windows, Mac, Linux IDEs) systems for so many years. The same problem doesn’t seem to exist on tablets, however, as I usually think of the apps in a list on those devices. Only when the two “modes” of operation are mixed does it cause a problem for me.

Once the fullscreen app is open and my concentration is broken, things start to spiral downward. I think bad thoughts about Windows 8 while I reflexively press the Windows key. I seem to expect it to switch back to desktop mode, but it doesn’t. It instead goes to the start screen. More bad thoughts occur while I either hit Windows+D to go back to the desktop, or grab the mouse and click on the Desktop tile. Pressing Windows+Tab to switch back to desktop mode would work much better, but I am always so jarred from the entire contents of the screen changing that I panic and hit the Windows key by itself. I suppose the main point here is that I feel like I am always — and I mean always — having to hit the Windows key in Windows 8.

Pressing keys all the time isn’t fun. Only a certain number of them can be pressed before one dies. Because of this, I decided to try out LiveReload after hearing that it would run on Windows in this TekPub Full Throttle episode. LiveReload is a tool that will watch your project folders and automatically reload them when static content such as HTML, CSS, or JS files have changed. Not only does this save from having to hit the refresh key, but it also answers the ever present question: “Did I already refresh and the code isn’t working? I can’t remember.”

Upon visiting the friendly requirements page, I noticed (at least at the time of this writing) that while the main page simply reads “Requires XP+”, Windows 8 is not specifically mentioned on the compatibility page.

Main page reads "Requires XP+"

Main page reads “Requires XP+”

Compatibility page doesn't specifically mention Windows 8

Compatibility page doesn’t specifically mention Windows 8

After searching around on the internet for a bit, I couldn’t seem to find anyone who had tried LiveReload on Windows 8, so I decided to setup a quick  test. First, I created my test project – a default Asp.Net MVC4 project using the “Internet Application” template.

02 - TestProjectCreation  03 - TestProjectTemplate

Following the instructions on the “Getting Started” page, I then installed LiveReload and added the folder of my test project to it.

05 - LiveReload  05a - LiveReloadFolder

After that, an integration method needed to be chosen. As described on the How do I choose the best integration method? page, there are three main ways of making your site communicate with LiveReload…

  1. Add a JavaScript to your HTML pages.
  2. Install a browser plugin
  3. Use a framework plugin

Option 2 seemed the best for me, as I normally wouldn’t want to have to remember to remove extra scripts from pages before they are deployed, and framework plugins are currently only available for Ruby on Rails. I headed over to the Chrome Web Store and installed the LiveReload plugin.

06 - IntegrationMethod 07 - ChromeExtensions

After that, it was time to test. I enabled the plugin, and ran my test MVC project…

04 - DefaultIndexPage 08 - DefaultIndexInBrowser

… and then added a new heading tag to the HTML and saved the file.

09 - ModifiedIndexPage 10 - ModifiedIndexInBrowser

As you can see from the images above, the browser plugin responded to the save operation and reloaded the page beautifully.

It looks like LiveReload works with Windows 8! I haven’t done more extensive testing yet, but I am going to start using it for some projects at work as soon as I get a chance. I’ll post an update to this if I run into any problems.

Tagged , , , , ,