Rey Bango » JavaScript

iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences

Rey Bango — Mon, 09 Apr 2012 16:35:50 +0000

I’ve had the good fortune of working with my friend Jonathan Sampson recently on figuring out how to help developers build plugin-free experiences. With IE10 Metro going plugin-free, it’s incredibly important to document steps to help developers provide their users with great experiences without the need for proprietary 3rd party add-ons.

If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new IE10 plug-in-free experience on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.

Today we’re going to work with a MSNBC plug-in-free experience for rich media. It breaks down to two things: styles and scripts.

To modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from http://fiddler2.com. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.

Step 1: Declare Standards mode and valid markup for modern browsers

In order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:

Step 2: Update your CSS vendor prefixes

The CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.

A key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.

For instance, we find the following on MSNBC:

background: -webkit-gradient(
  linear,
  left top,
  left bottom,
  color-stop(1, rgba(192,192,192,.6)),
  color-stop(0.5, rgba(0,0,0,.6))
);

With the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well.

background: -webkit-linear-gradient(
  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );
background: -moz-linear-gradient(
  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );
background: -ms-linear-gradient(
  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );
background: -o-linear-gradient(
  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );
background: linear-gradient(
  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );

While more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as SASS and Compass, -prefix-free, or even CSS Snippets in the upcoming Visual Studio 2011.

Also, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in A Best Practice for Programming with Vendor Prefixes on the IEBlog.

Step 3: Get rid of browser sniffing methods

There are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.

if ( navigator.userAgent.indexOf("iPad") > -1 ) {
  // Load HTML5 Experience
} else {
  // Load Flash Experience
}

The above code looks at the user agent string for the value “iPad”, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.

Here is an attempt to find the version of Internet Explorer.

if ( tests.IE ) {
  j = /msie.(\d\.\d+)/i;
  k = navigator.userAgent.match(j)[1];
}

The user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0” and “MSIE 9.0”, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0”, since only one digit is expected before the period.

These are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable – it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.

If we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.

Feature Detection

Rather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.

if ( !!document.createElement(“video”).canPlayType  ) {
  // Load HTML5 Video
} else {
  // Load Flash Video
}

In the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.

Feature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.

Many great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is Modernizr. This tool creates a global object called “Modernizr” which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:

if ( Modernizr.video ) {
  // Load HTML5 Video
}

MSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code.

Before we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our Developer Tools. Within the tools, open the Script tab and do a search for “userAgent”. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of http://www.msnbc.msn.com/id/37156949/.

Now that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.

Looking carefully, you’ll notice our resource is the third from the top. Next I will setup an AutoResponder for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:

Right-click this session and select “Decode Selected Sessions” from the context menu.
Select the AutoResponder tab on the right.
Click the “Enable automatic responses” checkbox in the AutoResponder tab.
Drag the selected session from the left panel into the AutoResponder tab.

At this point, you should have an entry within your AutoResponder tab with the following rules:

If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/
Then respond with: *200-SESSION_3

Right-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:

if(!(navigator.userAgent.toLowerCase().indexOf("ipad")>-1)){
  // Flash Experience
}

Rather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:

if ( !document.createElement("video").canPlayType ) {
  // Flash Experience
}

This test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.

Step 4: Update touch and pointer events

Safari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.

Due to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend, MSNBC’s event listeners will need to be amended to listen for MSPointer events like MSPointerDown, MSPointerUP, and MSPointerMove.

Due to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:

if (window.navigator.msPointerEnabled) {
  myCanvas.addEventListener("MSPointerMove", paint, false);
} else {
  myCanvas.addEventListener("mousemove", paint, false);
  myCanvas.addEventListener(“touchmove”, paint, false);
}

MSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:

Our events are tied up in http://www.msnbc.msn.com/id/43662671/15:

document.addEventListener("touchstart", touchHandler, false);
document.addEventListener("touchmove", touchHandler, false);
document.addEventListener("touchend", touchHandler, false);

We’re going to update this to include the MSPointer events as well:

if (window.navigator.msPointerEnabled) {
  document.addEventListener("MSPointerDown", touchHandler, false);
  document.addEventListener("MSPointerMove", touchHandler, false);
  document.addEventListener("MSPointerUp", touchHandler, false);
} else {
  document.addEventListener("touchstart", touchHandler, false);
  document.addEventListener("touchmove", touchHandler, false);
  document.addEventListener("touchend", touchHandler, false);
  document.addEventListener("mousedown", touchHandler, false);
  document.addEventListener("mousemove", touchHandler, false);
  document.addEventListener("mouseup", touchHandler, false);
}

First we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events.

Next we need to create cases for these event types in http://www.msnbc.com/id/44937131/. Currently, MSNBC starts with the following:

if ( event.type == "touchstart" ) {
  /* Start drag logic */
} else
if ( event.type == "touchmove" ) {
  /* Drag logic */
} else
if ( event.type == "touchend" ) {
  /* Complete drag logic */
}

We’ll modify this to listen for all of the registered event types:

if ( event.type.match( /(down|start)$/i ) ) {
  /* Start drag logic */
} else
if ( event.type.match( /move$/i ) ) {
  /* Drag logic */
} else
if ( event.type.match( /(up|end)$/i ) ) {
  /* Complete drag logic */
}

The above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “down” or “start”, we begin our drag code. If the event ends with a case-insensitive “move”, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “up” or “end”, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.

The above is an implementation of Ted Johnson’s solution in Handling Multi-touch and Mouse Input in All Browsers.

The drag logic itself initially relies upon the event.targetTouches TouchList. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.

var curX = event.targetTouches[0].pageX;

Using the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:

var curX = event.pageX || event.targetTouches[0].pageX;

If event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.

Another important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch – you’re either touching, or you’re not.

Now that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.

For further reading, and examples on how to target all browsers, see Handling Multi-touch and Mouse Input in All Browsers.

Testing both experiences

Recall our feature detection from earlier, how we first check to see if HTML5 video support is in the user’s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or document mode, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:

Press F12 to reveal the Developer Tools
Change your Document Mode to Internet Explorer 7 Standards
Refresh the page

If our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standards” if you’re using IE10), will return you to the HTML5 experience.

Get it Done!

Hopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using. To assist with testing in other plug-in-free environments, download Internet Explorer 10 (currently available only in the Windows 8 CP) and begin testing today!

Update: In the rush to get this post up, I realized that I forgot to thank and give credit to Jonathan Sampson for helping investigate and write about the great techniques mentioned above. He was a huge help in generating many of these great techniques. Thanks JS!

Fix Common IE Problems: Update your Docmode for Web Standards Document compatibility defines how a browser renders your website. The...

Related posts brought to you by Yet Another Related Posts Plugin.

Site Pinning: Rotating Overlay Icons for Multiple Service Notifications

Rey Bango — Tue, 18 Oct 2011 13:00:11 +0000

In my last post, I went over how to use IE9′s Site Pinning API to implement overlay icons to enhance user notifications. The demo focused on how to display a numeric icon to indicate when a specific event (e.g.: messages in an inbox) had occurred.

Pinned site with overlay icon

It’s a really great way of letting your users know that there’s pending information for them to check into. But what happens if your site offers multiple types of notifications? With websites offering so much functionality nowadays, it’s pretty common for them to also serve up multiple types of notifications, from friend requests and event reminders to new messages and game invites.

Rotating Multiple Overlays Icons

The great thing about the Site Pinning API is that it’s very flexible and through some JavaScript magic, you can easily display multiple overlay icons for the various services you have. In this demo, I want to rotate through 3 different overlay icons that alert the user to pending messages, requests and actions.

As before, I had to flex some of my artistic talent by creating the overlay icons using the x-icon editor. I created 5 of each and here’s how the first three look:

The code changed slightly from the last demo in order to accommodate multiple bits of data per fetch. While previously, I was only fetching one piece of data, in this demo, I’m returning 3, one for each notification type:

 myPin.init([{ "data" : [{ "label" : "Messages", "ntype" : "M", "num": 2 }, { "label" : "Requests", "ntype" : "R", "num": 1 }, { "label" : "Actions", "ntype" : "A", "num": 3 }] },
		        { "data" : [{ "label" : "Messages", "ntype" : "M", "num": 1 }, { "label" : "Requests", "ntype" : "R", "num": 5 }, { "label" : "Actions", "ntype" : "A", "num": 2 }] },
		        { "data" : [{ "label" : "Messages", "ntype" : "M", "num": 5 }, { "label" : "Requests", "ntype" : "R", "num": 1 }, { "label" : "Actions", "ntype" : "A", "num": 4 }] }
			   ]);

As a reminder, the method getData() simulates grabbing remote data. So if we look at the data above, we can simulate pulling back three distinct bits of data. This is why we call the method every 10 seconds using setInterval. This allows us to see how notifications might look over a period of time.

setInterval(function () { myPin.getData() }, 10000);

The next thing that changed is the use of a timer to allow a slight delay while rendering the overlay icons. Using setTimeout() provides enough of delay so that an individual overlay icon is visible to the user before rotating on to the next icon. If we didn’t have this delay, the rotation would be way too fast to provide any useful notification. If we look at the following image, we can see what the notification will look like:

Overlay icon showing numeric notification

This is accomplished via the following code:

// Grab the current set of data...
currData = this.dataBin[this.currIndex++].data;		

/* We're going to display a new overlay every x number of seconds to display a new overlay icon so
   let's loop through the data elements for the current set of data... */
for (var i=0; i < currData.length; i++ ){

	(function(idx) { setTimeout( function(){ myPin.dispOverlay( currData[idx] ); }, 1000 * idx); }( i ));					

}

Here’s what’s happening. In the first line, I grab the current set of data that holds all of the notification information (messages, requests & actions). That data looks like this:

[{ "label" : "Messages", "ntype" : "M", "num": 2 },
{ "label" : "Requests", "ntype" : "R", "num": 1 },
{ "label" : "Actions", "ntype" : "A", "num": 3 }]

I loop through each group of data and assign a timer using setTimeout() that will call dispOverlay() at ~1 second intervals. That’s the magic code that allows for the gradual icon rendering delay I mentioned before. The expected functionality is that the “messages” icon will render followed by the “requests” icon 1 second later, and then finally the “actions” icon.

Now, you might be wondering why I have an anonymous function wrapping the setTimeout(). It’s because I have a closure within setTimeout which can cause a common scoping issue in which the variable ‘i’, which I use to grab the current index of data, will only be updated to the last index value. James Padolsey has a great explanation on it and thanks to John David Dalton for helping me troubleshoot this.

The final change is in dispOverlay() in which I need to determine which overlay icon needs to display. Since I now have three different types of notifications, I need a conditional statement to determine the type and build the correct icon name:

if (theData.ntype == "M") {
	oImg = "images/messages-" + theData.num + ".ico";
} else if (theData.ntype == "R") {
	oImg = "images/requests-" + theData.num + ".ico";
} else if (theData.ntype == "A") {
	oImg = "images/actions-" + theData.num + ".ico";
}

This checks the type and serves up the right icon based on the type and the number of notifications pending for that type.

The Demo and Final Code

You can check out the demo by going here in IE9:

http://reybango.com/demos/sprotate/index.html

When the page renders, drag the tab down to your taskbar and pin it. You should see a new window appear with your newly pinned site. Next, you’ll see the overlay icons appear in the taskbar and they should begin to cycle every 10 seconds.

Here’s the full source code. You can also download everything here.




Pinned Site - Rotating Overlay Icons













Pinned Sites
Rotating Overlay Icons

Using Site Pinning and Overlay Icons for Enhanced User Notifications and Engagement I was recently doing some testing of IE9′s Site Pinning...

Related posts brought to you by Yet Another Related Posts Plugin.

Using Site Pinning and Overlay Icons for Enhanced User Notifications and Engagement

Rey Bango — Mon, 10 Oct 2011 13:00:06 +0000

I was recently doing some testing of IE9′s Site Pinning API and found out about a cool bit of functionality that can enhance user notifications. If you’re not familiar with site pinning, it’s a great way to allow users to have easy and quick access to their favorite sites via the Windows taskbar. There’s a really nice overview on Beauty of the Web that explains how it works.

Keeping Users Up-to-Date

One of the features the API provides is the notion of notifications that can allow developers to provide alerts to end users. The functionality allows you to dynamically insert custom overlay icons that can alert users when an important bit of information is available. These overlay icons are rendered over the favicon that is pinned to the taskbar. If you look at the image below, you can see it in action:

Pinned site with no overlay icon

Pinned site with overlay icon

So if you think about the possibilities, any site that offers users an inbox, special deals or sends out time-sensitive alerts could use this notification capability to keep their users up-to-date and more engaged on the site. Sites like the Huffington Post have already discovered that users that pinned HuffPost spent 49% more time on the site.

The best part is that adding this capability is insanely easy.

Setting it Up

For this post, we’re not going to go into the basics of how to pin a site. If you want to learn more, here’s a GREAT resource for getting you up to speed quickly: BuildMyPinnedSite.com. In fact, I used that site to help get me up-to-speed on the basics and it’s well-worth visiting.

To add notifications, you’ll need a couple of things:

A cool favicon for your site. If you don’t have one, you can use the handy web-based X-Icon Editor to create one.
A set of overlay icons to use. The recommended size is 16×16.

The API is JavaScript-based and we’ll use the following methods:

window.external.msSiteModeClearIconOverlay()
window.external.msSiteModeSetIconOverlay()
window.external.msSiteModeActivate()
window.external.msIsSiteMode()

The window.external.msSiteModeClearIconOverlay method is used to clear out any previously set overlay icons. window.external.msSiteModeSetIconOverlay allows you to specify the name of the notification icon as well as a accessible description. Lastly, we’ll use window.external.msSiteModeActivate to flash the pinned icon to notify the user of the update. Lastly, window.external.msIsSiteMode will let us know if the page was launched as a pinned site, thus allowing us to better determine when to run the code.

For the overlay icons, I’m using five images that display numbers 1 through 5 respectively to designate the number of messages are in a user’s inbox.

The Code

The first thing I need to add is the reference to my favicon. Note that if you don’t add one, then the Internet Explorer’s icon will be used by default.

Next, I want to create some sample data to work with. What I want to do for my demo is to have the overlay icon dynamically change every 5 seconds to simulate a more real-world scenario. The data is a simple array containing JSON data in each element.

myPin.init([{ "num": 1, "label": "Label 1" },
                { "num": 2, "label": "Label 2" },
                { "num": 3, "label": "Label 3" },
                { "num": 4, "label": "Label 4" },
                { "num": 5, "label": "Label 5" }
                ]);

By setting a timer, I’ll be able to pull a new set of data every 5 seconds.

setInterval(function () { myPin.getData(); }, 5000);

The main thing to keep in mind is that I’m “simulating” getting data from some remote host. In reality, all that the myPin.getData() method does is use a running counter to grab a new set of data and render a new overlay icon:

getData: function () {
            // A function that just simulates returning a result set...
            var idx = 0;

            // Determines whether the current page was launched as a pinned site.
            if (window.external.msIsSiteMode()) {

                idx = this.currIndex++;
                this.currIndex = (this.currIndex < 5) ? this.currIndex : 0;

                this.dispOverlay(this.dataBin[idx]);

            }

}

As you can see, it uses the running counter var currIndex to determine which array element to grab and then passes the data to dispOverlay(). This is where we use window.external.msSiteModeClearIconOverlay() to clear out any previously displayed overlay icons and also generate a string for the actual icon name. You can see that the oImg var is created on the fly based on the data we’re using.

dispOverlay: function (theData) {

            var oImg = "";

            // Is there any data?
            if (theData) {

                // Clear any preexisting overlay icon
                window.external.msSiteModeClearIconOverlay();

                // Create the image string...
                oImg = "images/num_" + theData.num + ".ico";

                // Go ahead and create the overlay image and it's label...
                this.setOverlay(oImg, theData.label);

            }

}

That icon name, along with the accessible label text for the icon, is passed to setOverlay() which sets the overlay icon via window.external.msSiteModeSetIconOverlay and flashes the taskbar icon using window.external.msSiteModeActivate.

setOverlay: function (icon, desc) {

            // Sets the overlay icons...
            window.external.msSiteModeSetIconOverlay(icon, desc);
            window.external.msSiteModeActivate();

}

Test it Out

To test this out, it’s a simple matter of running your newly pinned page in Internet Explorer 9, grabbing the tab and dragging it down to your taskbar:

Tab being dragged to the taskbar

Pinned site with no overlay icon

Five seconds after the page has been pinned, the code will fire off the first notification and continue to cycle through the other icons every subsequent five seconds.

Pinned site with overlay icon

An important thing to remember is that the IE F12 Developer tools are available to you to use in debugging your pinned site. So if you run into quirks, simply press the F12 key and the tools will appear.

The Demo and Final Code

You can check out the demo I whipped up by going here in IE9:

http://reybango.com/demos/sitepinning/index.html

When the page renders, drag the tab down to your taskbar and pin it. You should see a new windows appear with your newly pinned site. Five seconds later, you’ll see the first overlay icon appear in the taskbar.

Here’s the full source code. You can also download everything here. The really great part is that it isn’t a lot of code to implement this. In fact, to use the API only required 4 method calls. The bulk of the code was to simulate pulling in data. And the “>impact on user engagement is certainly worth adding in the capability.




Pinned Site Test












Pinned Site Test

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Eloquent JavaScript is one of the Best JavaScript Books I’ve Read

Rey Bango — Wed, 23 Mar 2011 15:35:54 +0000

The kind folks at No Starch sent me over a copy of the newly released book, Eloquent JavaScript by Marjin Haverbeke. I had already been recommending the namesake site as a must-read resource on my list of What to Read to Get Up to Speed in JavaScript so actually having the book was a welcome change. I know some people love to read stuff on the web but call me old fashioned in that I really like the feel of a book in my hands.

What I loved about this book is that it’s not your typical reference tomb. The basic premise is that it’s going to teach you proper constructs for writing solid JavaScript code as opposed to listing every method, attribute, data type or property ever included in the JavaScript language. It gets straight to the meat of JavaScript development, introducing you to the basic constructs of the language and then quickly diving into more complex topics such as partials and currying. This is all done in a step-by-step approach to give the reader an opportunity to not only digest the material but also see actual results in real-time. Definitely a great approach.

Differences Between the Site and the Book

As I mentioned the book is based on the great work that Marjin did on the namesake site. I’ve seen the site and absolutely love it but to me, I feel the book is a MUCH more organized version of his thoughts. The content is broken down into logical sections with better headers which makes conceptualizing specific areas much easier.

And again, I truly am partial to reading books instead of websites so for me, having the book was a real blessing.

What about JavaScript Libraries?

This book is really focused on the JavaScript language itself and not libraries. If you’re interested in really becoming a better JavaScript developer so you can take full advantage of your favorite library, then this book is a great choice. It’s a complementary selection.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

My Visual Studio 2010 HTML5 Templates are Updated for jQuery 1.5.1 and Modernizr 1.7

Rey Bango — Tue, 22 Mar 2011 22:53:39 +0000

I wanted to do a refresh of the Visual Studio 2010 HTML5 Templates I created last September. With jQuery now at v1.5.1 and Modernizr at v1.7, it was time for an update.

If you’ve already downloaded my original templates, you can simply overwrite those with the following files. If you’re new to this, then download the files and drop them into the folders I mention immediately below each file:

HTML5 Page Template with jQuery 1.5.1 & Modernizr 1.7

Drop this into “Visual Studio 2010 > Templates > ItemTemplates” folder

HTML5 Web Site Template with jQuery 1.5.1 & Modernizr 1.7

Drop this into “Visual Studio 2010 > Templates > ProjectTemplates” folder

Using the Templates

Once in place, all you have to do is select “File=>New Web Site” to use the new template:

To create a new HTML5 web page template, you’d select “File=>New File” to choose the HTML5 Page Template

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

What to Read to Get Up to Speed in JavaScript

Rey Bango — Wed, 15 Dec 2010 14:31:15 +0000

There’s a discussion going on on the JSMentors JavaScript mailing list about books to read to get you to the next level. There’s been a lot of great feedback and suggestions thrown out and I wanted to offer up what I felt were good books/resources to carry you through the learning process. While I list a number of books in the Big List page that I created, narrowing it down into specific levels makes a lot of sense.

Note that some resources will overlap between levels. That should be expected as some books cover a wide breadth of language features. Also, I am NOT covering blogs in this post, only books (print and online). If you think something’s missing, please add it to the comments below.

Also, I’m not saying that you need to read every book mentioned below. These are books that I’ve read over the years and found incredibly useful so I’m categorizing them to make it easier for you to get going. I’ve done the legwork so need for you to do the same. Choose the books that you feel suit you.

Introductory

These are books that will give you the fundamentals of the JavaScript language and get you started:

Intermediate

Once you’ve gotten an understanding of the basics, it’s time to get a resource that will take you deeper and in many cases be your reference for years to come. These books fit that description.

Professional JavaScript for Web Developers (Wrox Programmer to Programmer)
JavaScript: The Definitive Guide
Eloquent JavaScript (Online Resource)
DOM Scripting: Web Design with JavaScript and the Document Object Model – Not JavaScript-specific but a good resource for learning to interact with the DOM

Advanced

You have a firm grasp of the JavaScript language and now you want to step up your game. These books will help you get the knowledge you need to organize your applications and build maintainable code.

God Mode Reading

As Peter van der Zee likes to call it “godmode; the actual specification”. Want some deep reading and know every nook and cranny of the language. Here ya go:

Standard ECMA-262 ECMAScript Language Specification 3rd edition (December 1999) – PDF File – This is what’s widely supported in all major browsers
Standard ECMA-262 ECMAScript Language Specification 5th edition (December 2009) – This is what all major browser vendors are working to implement

Blogs

ScriptJunkie.com – I’m a little biased on this one because I manage this site but I work hard to get really good content about JavaScript as well as HTML & CSS
JSmentors.com – the JavaScript mailing list I started with Asen Bozhilov which provides a safe, professional place to discuss JavaScript and learn from the best
DailyJS
BadassJS
JavaScript Weekly Newsletter
JSMag – Monthly Magazine
YUI Theatre – Tons of videos on JavaScript-related topics
John Resig
Peter van der Zee
Peter Michaux
Garrett Smith
Juriy Zaytsev a.k.a. kangax
Dmitry A. Soshnikov
Steven Levithan
John-David Dalton
Stoyan Stefanov
Benjamin Rosseaux a.k.a. BeRo
Diego Perini
Angus Croll
Peter van der Zee
Christian C. Salvadó
Christophe Porteneuve
Nicholas C. Zakas
David Flanagan
Rey Bango – That’s me! Here’s my feed URL. Subscribe!

What if I had to Choose Just 3 Books

If I had to choose just three books to have in my stash, I’d go with the following:

Some may disagree with me on this but I’ve personally found each one of these books incredibly valuable. Professional JavaScript for Web Developers is a complete reference and covers EVERYTHING. All developers need a book like this. The book on Object-Oriented JavaScript is great to give you an understanding of leveraging one of the best features in JavaScript. Once you get past the basics, you’re going to want to identify key coding practices that make your code better and more maintainable. JavaScript Patterns helps you do that.

What would you guys choose?

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Why We Built the JSMentors.com JavaScript Mailing List

Rey Bango — Thu, 02 Dec 2010 15:12:19 +0000

I posted earlier this week about the launch of the JSMentors.com mailing list. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?

comp.lang.javascript Was Not for Me

I’ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I’ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to comp.lang.javascript (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. And I regretted it.

Everything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. I’m not alone in this feeling. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I’ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn’t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted “*I*”. That’s because CLJ may be perfectly suited for others. I know several developers who participate and find it useful. It just wasn’t for me.

A Community Resource

So I began chatting with Asen Bozhilov about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn’t want to be shot down or berated due to their skill level. So Asen & I set about creating JSMentors.com. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:

A chance to teach best practices to an ever-growing community of developers
A medium to publish content that they felt was important
An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best

The important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:

No insulting other subscribers
No posting racism
No spam publications

This had to be different from CLJ to work. It had to focus not only on the language but also the community.

JSMentors.com is Born

The list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we’ve steadily grown the mailing list as well as the list of mentors. The great thing is that we’re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It’s not to say that occasionally there won’t be disagreements. That’s normal. But Asen & I actively monitor the list and we’re adamant about the rules we’ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my drivers for this list. And I think that’s a good thing.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

JSMentors.com – The Mailing List to Learn JavaScript in a Professional and Courteous Environment

Rey Bango — Mon, 29 Nov 2010 14:36:47 +0000

There are a number of resources on the Internet for reading up on JavaScript but very few viable options for actually exchanging ideas with extremely knowledgeable JavaScript developers, especially when it comes to just wanting to know about JavaScript itself and not a specific JS library. This was a pain point I personally felt when I wanted to learn more about the language and be able to have “mentors” that could help me better understand JS and ECMAScript.

After chatting a bit with JavaScript expert Asen Bozhilov about this, we decided to fill that hole by launching a new mailing list called JSMentors that allows developers to get to know the language and find the expert guidance in a friendly and professional environment. The list offers developers a place to:

Discuss ECMA-262 standard
Discuss different implementations of ECMA-262
Discuss different host environments of JavaScript
Discuss implementation of algorithms in JavaScript
Discuss your library design
Review your code
Review your book on JavaScript topic
Review your article on JavaScript topic

We also wanted to provide a list that was professional, courteous, and friendly to developers of all skill levels. Too many forums, newsgroups and lists look down on beginners or questions deemed too introductory and we wanted to ensure that JSMentors didn’t fall into that same hole. So we created a set of simple rules. Via the JSMentors mailing list you must not:

Insult other subscribers
Post racism
Spam publications

So far it’s been working great and developers are getting the mentoring that they desperately want and need. And the great thing is that the mentors are a who’s-who of the JavaScript world. Check out this list:

Garrett Smith
Juriy Zaytsev a.k.a. kangax
Dmitry A. Soshnikov
Steven Levithan
John-David Dalton
Stoyan Stefanov
Benjamin Rosseaux a.k.a. BeRo
Diego Perini
Angus Croll
Peter van der Zee
Christian C. Salvadó
Peter Michaux

One important thing to note is that the main focus of the list is the JavaScript language and while you can post about JavaScript libraries, you’re more likely to get a better answer in a library’s specific support forum or list than on JSMentors.com.

Asen and I would like to invite developers to join JSMentors.com and create a productive list to help everyone become better JavaScript developers and help push the web forward.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Presenting at the jQuery Summit Online Conference on November 17th

Rey Bango — Fri, 12 Nov 2010 16:20:08 +0000

Next week, Environments for Humans will be hosting their 2nd jQuery Summit Online Conference and what a great event it will be. The speakers (myself included) are just an who’s-who of the jQuery world so you can be sure to get awesome presentations during the event. Lined up are experts like:

John Resig
Jonathan Snook
Richard Worth
Emily Lewis
…and a lot more.

The event is divided into two tracks targeting designers on the 16th and developers on the 17th. I’ll be presenting on the 17th and will be discussing how to use the new jQuery Templates plugin to make code layout much easier.

You can register for the event by going to the jQuery Summit website and when you do, be sure to take advantage of the following code for a 20% discount on your registration: JQUERY2010

The great thing about this is by registering, you’re also helping out the jQuery project as Environments for Humans is donating part of the proceeds of the conference to the jQuery Foundation.

I’m looking forward to this event and I hope to see you there as well!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

How Polyfills “fill in the gaps” to make HTML5 and CSS3 Usable Today

Rey Bango — Mon, 11 Oct 2010 15:52:21 +0000

There’s been a lot of commotion over the last week since the W3C announced that HTML5 is not ready yet for deployment to websites. Some really smart people have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.

What’s a Polyfill?

I really love Paul Irish’s definition since it sums it up perfectly:

polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.

The basic premise is that most older browsers may not have all of the features of the HTML5 and CSS3 specifications and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like

which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8.

So for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here’s the layout code I used.




    
    Rey's Awesome HTML5 Blog
    
    
    
    

    
    
    





	
        Rey's Awesome HTML5 Blog
	

    
    	
			Home
			About
			Contact
		
    

	

        
        Rey's Blog Posts
	    

        
            The In's & Out's of HTML5
		    Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. 

            
                October 7, 2010 - comments( 0 )
            
        

        
            HTML5 Ate My Lunch
		    Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. 
            
                October 5, 2010 - comments( 3 )
            
	    		

	

	
		Copyright Rey Bango, 2010

I used a HTML5 reset style sheet because unfortunately, most browser don’t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an

element to be block level but due to a lack of the internal browser style sheet, it renders inline.

Then, I added the styles I needed to get my page to look the way I wanted:

/* Global */
body { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }
a { color : #33CC33; }
a:hover { text-decoration: none; }

/* Header */
header h1 { font-size: 48px; }

nav { overflow: auto; margin-bottom: 25px; }
nav li {float:left; padding-right: 5px; }

/* Main Content Area */
section { width: 500px; font-size: 12px; }
section h1 { font-size: 16px; }

article { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
article footer { text-align: right; margin-right:5px; }
article h1 { font-size: 12px; }

and when I tested it in Firefox 3.6.10, it looked exactly like I expected:

but look what happened when I tried to bring up the page in IE8:

None of the stylings were available because IE8 doesn’t recognize the new HTML5 elements. Further, in order to get IE6-8 to recognize these elements, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it may be some type of parser bug. The following code needs to be in the section of your page in order for the elements to be created and recognized by IE6-8:

document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("footer");

It’s a little bothersome to do that but it’s not a massive bit of code at least.

Enter Modernizr

The code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome Modernizr JavaScript library. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn’t available.

Including Modernizr.js is incredibly easy since it’s only a one line script tag like this:

As I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as

instead of you having to write JavaScript code to do it. So once I’ve added Modernizr to my page, I get the following results in IE8:

Now you’re probably looking at this screenshot and say, “Hey, you have no rounded corners!”. You’re right because I used the CSS3 border-radius property to create rounder corners for all of my

elements and IE8 doesn’t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.

But What About those Rounder Corners?

Geez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like border-radius is available and if not, using a new term coined by Alex Sexton, we’ll use “regressive enhancement” to provide similar capabilities for older browsers. In this case, we’re going to see if border-radius is available and if not, lazyload in Mike Aslup’s jQuery Corners plugin to fill in the gap:

Now, when the code detects that border-radius is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn’t support the property:

Download the Code

I hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C’s desire to ensure that the HTML5 specification is up-to-snuff, I think it’s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.

I would highly recommend reviewing this VERY BIG LIST of polyfills and shims which can provide much of the missing capabilities in older browsers.

If you’d like to play with the code directly, I’ve packaged it up in a .zip file and you can download it here:

Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Rey Bango » JavaScript

iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences

Step 1: Declare Standards mode and valid markup for modern browsers

Step 2: Update your CSS vendor prefixes

Step 3: Get rid of browser sniffing methods

Feature Detection

Step 4: Update touch and pointer events

Testing both experiences

Get it Done!

Site Pinning: Rotating Overlay Icons for Multiple Service Notifications

Rotating Multiple Overlays Icons

The Demo and Final Code

Pinned Sites

Using Site Pinning and Overlay Icons for Enhanced User Notifications and Engagement

Keeping Users Up-to-Date

Setting it Up

The Code

Test it Out

The Demo and Final Code

Pinned Site Test

Eloquent JavaScript is one of the Best JavaScript Books I’ve Read

Differences Between the Site and the Book

What about JavaScript Libraries?

My Visual Studio 2010 HTML5 Templates are Updated for jQuery 1.5.1 and Modernizr 1.7

Using the Templates

What to Read to Get Up to Speed in JavaScript

Introductory

Intermediate

Advanced

God Mode Reading

Blogs

What if *I* had to Choose Just 3 Books

Why We Built the JSMentors.com JavaScript Mailing List

comp.lang.javascript Was Not for Me

A Community Resource

JSMentors.com is Born

JSMentors.com – The Mailing List to Learn JavaScript in a Professional and Courteous Environment

Presenting at the jQuery Summit Online Conference on November 17th

How Polyfills “fill in the gaps” to make HTML5 and CSS3 Usable Today

What’s a Polyfill?

What if I had to Choose Just 3 Books