Hacking Windows 8 Snapped Mode

I recently updated four machines of mine to Windows 8.1. Love it, not a thing I would change (talking high-level here). But one of my favorite features continues to give me a slight headache.

In Windows 8 you have the ability to “snap” a web-browser to either side of your screen. This is great if you’re trying to keep documentation up, an in-browser chat visible, or even some productivity tools that are browser-based.

Sadly, many of the sites I snap wind up getting reduced so badly that I can no longer make out what is on them – kinda like how browsing the web is when you’re on a small mobile device, and the site you’re viewing isn’t “responsive” in a cross-browser compat way.

As an example, here I am trying to use wunderlist (awesome service) on my Acer Aspire R7.

Wunderlist in Snapped Mode.
Wunderlist in Snapped Mode.

Ideally I would just contact Wunderlist and have them fix their site for IE in Snapped Mode, but that isn’t always easy. Fortunately, there happens to exist a feature in IE that we can leverage – custom accessibility stylesheets.

In order to find this setting, click the Gear icon (or press alt to reveal your toolbar, and then click “Tools”) > Internet Options > General [tab] > Accessibility [button]. Alternatively, you can press the Gear icon

Internet Explorer on Windows 8 uses the same settings whether you’re in the Desktop mode or the Immersive (“Metro”) mode. As such, all we need to do is create our own custom stylesheet that will be applied to every website we visit. With this, we can set the new viewport size on our own.

Setting custom stylesheet in Internet Explorer.
Setting custom stylesheet in Internet Explorer.

I should note here that after setting (or updating) your stylesheet, you will need to close and re-open Internet Explorer (That’s a feature I’d like to see changed). This was really bugging me since I would make changes, and refresh, only to see no changes at all.

In the screenshot above you can see that I tossed in a basic media query to set the viewport to 320px wide anytime the browser itself was 400px or less in size. The result is immediately seen when you re-open Internet Explorer and pull up Wunderlist.

Wunderlist, with our custom stylesheet in place.
Wunderlist, with our custom stylesheet in place.

The end result is a far better user experience, and something I can now use in parallel to my daily work. I hope this works for you, and you find the Snapped Mode as enjoyable as I do.

You may have to add a bit more to your stylesheet to target certain websites, etc. This basic example was meant to address one site only. A real-world application would be ever-changing to accommodate sites and services you come across in your daily routine.

Hack on, hackers.

Phenomenal Day thanks to jQuery and Windows 8

Friday, March 29th, 2013, was a phenomenal day in this developer’s life.

In late 2012 my employer, appendTo, began working with Microsoft on an extremely exciting project – preparing a version of the web’s most beloved JavaScript library, jQuery, for Windows RT and use in Windows Store applications. This was particularly exciting for me since jQuery is one of my most active tags on Stack Overflow.

Towards the end of our work in preparing this special version of jQuery, I had the great pleasure of working with Elijah Manor on material that would be presented at //build/ 2012 by one of appendTo’s founders, Mike Hostetler.

We had successfully delivered a version of jQuery that worked with the new security model in Windows Store applications. But this wasn’t the end-goal; none of us wanted to maintain a clone of jQuery that was engineered specifically for Windows Store applications.

The project was a huge success, I was on cloud 9 having gotten to work with such phenomenal developers, and fantastic partners, on such a game-changing project. But again, our work wasn’t done – we merely wet our appetites for far better results. We wanted jQuery itself to work in Windows Store applications, not some sufficiently-similar clone of jQuery.

Our focus was then turned to working more closely with jQuery core contributors, which resulted in me getting to meet even more amazing people, like the President of the jQuery Foundation, Dave Methvin. Dave is one of those old-school hackers that could keep you tuned to his every word for hours on end; such an amazing guy. With guys like him at the helm, it’s easy to see why jQuery is such a success.

Moving forward, I began testing jQuery builds within Windows Store applications. This required forking, cloning, building, authoring and modifying unit tests, and more; it was a smörgåsbord of geek indulgence. At this time jQuery core contributors were working hard on version 2.0, the highly-anticipated version of jQuery that would shed itself of legacy support like a cicada liberated from it’s shell.

The timing couldn’t have been more perfect; Dave and the others were carefully extracting massive chunks of code from jQuery’s core that existed for no other reason than to support over a decade of antiquated browsers. In parallel to their efforts, appendTo was diving into versions of jQuery from 1.8.3 to pre-builds of 2.0, addressing any and all patterns considered “unsafe” in the new non-browser environment.

In the end, it all paid off. jQuery 2.0 appears to be ready for Windows Store applications, and every web-developer looking to try their hands in the lucrative market of Native Windows 8 applications authored in JavaScript (and now jQuery) has a familiar gateway into the new stomping grounds. It’s been an exciting project, and I’m incredibly humbled to have played a role in all of it.

jquery-pagesEverything peeked for me yesterday though, when co-worker Ralph Whitbeck and I had our article Building Windows Store Applications With jQuery 2.0 published on Nettuts+. Immediately following that, I was mentioned on the Interoperability @ Microsoft blog. And soon thereafter, mentioned on none other than TechCrunch, a site with over 1,600,000 tech-loving subscribers.

I imagine this type of thing happens everyday with various different developers. You put your nose down into a project that you are personally excited to be a part of. You work countless hours researching, writing, and testing. You meet a few exciting people along the way, and then one day you lift up your eyes to realize that you just had part in something truly amazing.

The web is such an exciting place, and contributing to open-source projects is an incredibly rewarding thing. Fortunately, for myself and all of my peers, getting your hands dirty with such amazing projects is easier today than it has ever been before thanks to services like GitHub.

As for me, I’m looking forward to seeing how jQuery 2.0 and beyond are used in Windows Store applications, and perhaps be so fortunate enough to contribute further to this amazing project in the future. You can do the same.

The big problem with Microsoft’s Flash whitelist browser sniffing

In The big problem with Microsoft’s Flash whitelist, ars author Peter Bright shared some of his concerns with the forthcoming Windows 8 Metro version of Internet Explorer 10. He states “it’s neither a full desktop browser nor a detectable mobile browser” after being shafted by Sony Pictures for not using a Flash-enabled browser.

Peter expressed concerns that since IE10 Metro uses the same user-agent string as IE10 on the desktop, developers won’t be able to detect which is which, and as such, they’ll assume you’re on a desktop and that your desktop supports Flash. As was pointed out in the article, HTML5 content is commonly reserved for mobile browsers – which the Metro IE10 is not.

At the bottom of Peter’s article was a byline that stated Peter “covers programming and software development, Web technology and browsers,” and as such I am saddened to see such a defense of user-agent sniffing and absolutely no mention of feature-detection.

User-agent sniffing, or “browser sniffing”, is the act of examining the user-agent string sent with requests to a server and inferring the browser or system’s abilities from that information alone. For instance, if your user-agent string contains a reference to “iPad”, I can safely assume you support HTML5.

The bottom line is that this practice is unprofessional, and naive. The user agent string is not an immutable property of the browser. It changes with each browser release, it changes with certain plugins being installed, and it changes by the authority of the user if they happen to be tampering with their developer tools (perhaps trying to get around poorly-coded sites that require certain user agent strings for access).

The jQuery documentation, while providing $.browser.msie for IE detection states “We recommend against using this property; please try to use feature detection instead.”

The Popular Yahoo Library, YUI, also contains the UA class for detecting the users browser, but they too plead with the user: “Do not fork for a browser if it can be avoided. Use feature detection when you can. Use the user agent as a last resort.”

One is forced to ask, why didn’t any of this make its way into Peter’s article? The article was instead an attack on Metro IE10 for not being an enabler to poor development practices. As Peter pointed out, he wasn’t able to watch his video because the site he was visiting was sniffing his user agent string. If Sony Pictures had been doing things the correct way, we wouldn’t have these problems.

Feature detection isn’t hard to do. In fact, regarding HTML5 video it’s a very trivial task:

if ( !!document.createElement("video").canPlayType ) {
    // Load HTML5
} else {
    // Go for Flash

That is all it takes. Not too hard right? It is even more trivial if you use a feature-detection suite like Modernizr to handle the heavy-lifting for you. No tampering with user-agent strings, no screwing up your parsing and thus breaking your user’s experience – not of that. Just giving the browser what the browser can handle.

When you assume you know what the browser is capable of without actually making some attempts, you ruin things for everybody. Just ask Karl Dubost, a web developer working with the Opera browser. He expressed some of his frustration when CFABank unnecessarily blocked Opera users from gaining access to their accounts.

Or perhaps Rey Bango, a jQuery team member and Developer Evangelist for Microsoft who shared the story of Paydirt, a wonderful service that prevented IE users from knowing how great their product was because they assumed IE wouldn’t work, even though IE9 and 10 handled their product very well.

This is what Peter’s complaint should have been – people are developing terrible sites. And it’s not just some kid at his house, it’s large companies like Sony Pictures. It’s a call for education, and it’s something we in the development community are working very hard to remedy.

Kudos to Microsoft for taking the actions they’ve taken. Having plugins in the browser leads to security risks, unnecessary battery usage, and so much more. Not to mention, if people build things using the native features available in modern browsers today (with the many great polyfills and fallbacks where necessary), we find the need for major plugins like Flash practically vanish.

I, for one, eagerly await the arrival of the plugin-free browser.

“Windows 8 is too hard to turn off”

Did you know the Windows 8 operating system is too hard to shut down? In fact, it’s a “pain-in-the-rump,” according to Steven J. Vaughan-Nichols of ZDNet.com.

I must be honest – when I read those words I just thought to myself, this guy cannot be serious. The gentleman is a technically-savvy author, writing for ZDNet, coming from a background that is replete with relevant experience, and he thinks Windows 8 is too hard to shut down?

In Windows 8, the shutdown button is literally one click from the desktop, or one simple command: WinKey+I. As a Linux user, I would expect Steven to appreciate the brevity of keyboard shortcuts, but in his defense he may not have even known about this shortcut. The other method is simply to navigate to the top-right of your primary screen to reveal the charms, then click the “Settings” icon. (See: Getting around in Windows 8)

While I completely dismiss Steven’s worries about Windows 8 (having used it myself as my primary OS since the developer preview), I do admit that his tone and message could have come across a lot worse. In the end, I think Steven’s article is just a Linux user upset that Windows 8 isn’t Linux – and I don’t mean that in some snarky disrespectful way. We all have our likes and dislikes; he likes Linux, I like usability (okay, that was a bit snarky, hehe).

While I had to fight back the urge to jam pencils into my eye-sockets reading his complaint, I just remind myself, it could have been a lot worse.