INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1864, 3, '2012-04-09 12:28:34', '2012-04-09 16:28:34', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> 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.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. 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.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn 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:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe 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.\r\n\r\nA 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 <em>-webkit</em> properties, omitting the prefixes which target other browsers such as <em>-o, -ms, and -moz</em>. 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.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith 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. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile 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 <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, 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 href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is <em>browser sniffing</em>. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe 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.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe 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.\r\n\r\nThese 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.\r\n\r\nIf 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.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash-300x225.png" alt="" title="get-flash" width="300" height="225" class="alignleft size-medium wp-image-1854" /></a>\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather 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 <em>feature detection</em>.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the <em>canPlayType</em> method exists on our newly-created <em>video</em> tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a <em>video</em> element is, the <em>canPlayType</em> method will be present. If the video element is unknown to the browser, the <em>canPlayType</em> 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.\r\n\r\nFeature 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.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “<em>Modernizr</em>â€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC 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. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. 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 <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent-300x225.png" alt="" title="find-userAgent" width="300" height="225" class="alignleft size-medium wp-image-1855" /></a>\r\n\r\nNow 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.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions-300x225.png" alt="" title="fiddler-sessions" width="300" height="225" class="alignleft size-medium wp-image-1858" /></a>\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select <em>Edit Response</em>. 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:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather 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:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis 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.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari 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 <em>pointer</em>. 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 <em>pointerType</em> property.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png" alt="" title="20110920-pointer" width="264" height="272" class="alignleft size-full wp-image-1859" /></a>\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like <em>touchstart, touchmove</em>, and <em>touchend</em>,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like <em>MSPointerDown, MSPointerUP</em>, and <em>MSPointerMove</em>.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC 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:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst 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. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe 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 <em>onresizeend</em> and <em>keyup</em>. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the <em>event.targetTouches</em> <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the <em>pageX</em> and <em>pageY</em> properties from the first item in the <em>TouchList</em>, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing 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:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf <em>event.pageX</em> is not found, we fall back to assigning the value of <em>targetTouches[0].pageX</em> to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to <em>touchmove</em>. 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.\r\n\r\nNow 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.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall 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 <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf 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.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully 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 <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-17', '', '', '2012-04-09 12:28:34', '2012-04-09 16:28:34', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-17/', 0, 'revision', '', 0),
(1865, 3, '2012-04-09 12:28:46', '2012-04-09 16:28:46', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> 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.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. 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.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn 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:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe 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.\r\n\r\nA 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 <em>-webkit</em> properties, omitting the prefixes which target other browsers such as <em>-o, -ms, and -moz</em>. 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.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith 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. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile 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 <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, 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 href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is <em>browser sniffing</em>. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe 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.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe 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.\r\n\r\nThese 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.\r\n\r\nIf 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.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash-300x225.png" alt="" title="get-flash" width="300" height="225" class="alignleft size-medium wp-image-1854" /></a>\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather 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 <em>feature detection</em>.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the <em>canPlayType</em> method exists on our newly-created <em>video</em> tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a <em>video</em> element is, the <em>canPlayType</em> method will be present. If the video element is unknown to the browser, the <em>canPlayType</em> 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.\r\n\r\nFeature 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.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “<em>Modernizr</em>â€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC 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. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. 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 <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent-300x225.png" alt="" title="find-userAgent" width="300" height="225" class="alignleft size-medium wp-image-1855" /></a>\r\n\r\nNow 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.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions-300x225.png" alt="" title="fiddler-sessions" width="300" height="225" class="alignleft size-medium wp-image-1858" /></a>\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select <em>Edit Response</em>. 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:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather 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:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis 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.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari 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 <em>pointer</em>. 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 <em>pointerType</em> property.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png" alt="" title="20110920-pointer" width="264" height="272" class="alignleft size-full wp-image-1859" /></a>\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like <em>touchstart, touchmove</em>, and <em>touchend</em>,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like <em>MSPointerDown, MSPointerUP</em>, and <em>MSPointerMove</em>.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC 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:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst 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. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe 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 <em>onresizeend</em> and <em>keyup</em>. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the <em>event.targetTouches</em> <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the <em>pageX</em> and <em>pageY</em> properties from the first item in the <em>TouchList</em>, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing 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:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf <em>event.pageX</em> is not found, we fall back to assigning the value of <em>targetTouches[0].pageX</em> to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to <em>touchmove</em>. 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.\r\n\r\nNow 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.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall 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 <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf 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.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully 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 <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-18', '', '', '2012-04-09 12:28:46', '2012-04-09 16:28:46', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-18/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1866, 3, '2012-04-09 12:28:52', '2012-04-09 16:28:52', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> 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.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. 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.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn 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:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe 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.\r\n\r\nA 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 <em>-webkit</em> properties, omitting the prefixes which target other browsers such as <em>-o, -ms, and -moz</em>. 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.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith 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. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile 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 <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, 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 href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is <em>browser sniffing</em>. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe 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.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe 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.\r\n\r\nThese 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.\r\n\r\nIf 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.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash-300x225.png" alt="" title="get-flash" width="300" height="225" class="alignleft size-medium wp-image-1854" /></a>\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather 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 <em>feature detection</em>.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the <em>canPlayType</em> method exists on our newly-created <em>video</em> tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a <em>video</em> element is, the <em>canPlayType</em> method will be present. If the video element is unknown to the browser, the <em>canPlayType</em> 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.\r\n\r\nFeature 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.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “<em>Modernizr</em>â€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC 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. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. 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 <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent-300x225.png" alt="" title="find-userAgent" width="300" height="225" class="alignleft size-medium wp-image-1855" /></a>\r\n\r\nNow 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.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions-300x225.png" alt="" title="fiddler-sessions" width="300" height="225" class="alignleft size-medium wp-image-1858" /></a>\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select <em>Edit Response</em>. 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:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather 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:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis 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.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari 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 <em>pointer</em>. 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 <em>pointerType</em> property.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png" alt="" title="20110920-pointer" width="264" height="272" class="alignleft size-full wp-image-1859" /></a>\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like <em>touchstart, touchmove</em>, and <em>touchend</em>,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like <em>MSPointerDown, MSPointerUP</em>, and <em>MSPointerMove</em>.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC 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:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst 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. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe 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 <em>onresizeend</em> and <em>keyup</em>. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the <em>event.targetTouches</em> <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the <em>pageX</em> and <em>pageY</em> properties from the first item in the <em>TouchList</em>, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing 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:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf <em>event.pageX</em> is not found, we fall back to assigning the value of <em>targetTouches[0].pageX</em> to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to <em>touchmove</em>. 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.\r\n\r\nNow 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.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall 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 <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf 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.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully 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 <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-19', '', '', '2012-04-09 12:28:52', '2012-04-09 16:28:52', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-19/', 0, 'revision', '', 0),
(1867, 3, '2012-04-10 12:19:38', '2012-04-10 16:19:38', 'I''ve had the good fortune of working with my friend <a href="https://twitter.com/#!/jonathansampson">Jonathan Sampson</a> 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.\n\nIf you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> 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.\n\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \n\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. 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.\n\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\n\nIn 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:\n\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\n\n<h2>Step 2: Update your CSS vendor prefixes</h2>\n\nThe 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.\n\nA 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 <em>-webkit</em> properties, omitting the prefixes which target other browsers such as <em>-o, -ms, and -moz</em>. 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.\n\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\n\n[code lang="css"]background: -webkit-gradient(\n  linear,\n  left top,\n  left bottom,\n  color-stop(1, rgba(192,192,192,.6)),\n  color-stop(0.5, rgba(0,0,0,.6))\n);[/code]\n\nWith 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. \n\n[code lang="css"]background: -webkit-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: -moz-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: -ms-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: -o-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: linear-gradient(\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\n\nWhile 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 <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\n\nAlso, 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 href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\n\n<h2>Step 3: Get rid of browser sniffing methods</h2>\n\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is <em>browser sniffing</em>. This method consists of examining the navigator object for certain patterns or values.\n\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\n  // Load HTML5 Experience\n} else {\n  // Load Flash Experience\n}[/code]\n\nThe 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.\n\nHere is an attempt to find the version of Internet Explorer. \n\n[code lang="javascript"]if ( tests.IE ) {\n  j = /msie.(\\d\\.\\d+)/i;\n  k = navigator.userAgent.match(j)[1];\n}[/code]\n\nThe 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.\n\nThese 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.\n\nIf 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.\n\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash-300x225.png" alt="" title="get-flash" width="300" height="225" class="alignleft size-medium wp-image-1854" /></a>\n\n<h2>Feature Detection</h2>\n\nRather 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 <em>feature detection</em>.\n\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\n  // Load HTML5 Video\n} else {\n  // Load Flash Video\n}[/code]\n\nIn the above example, we start by testing whether the <em>canPlayType</em> method exists on our newly-created <em>video</em> tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a <em>video</em> element is, the <em>canPlayType</em> method will be present. If the video element is unknown to the browser, the <em>canPlayType</em> 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.\n\nFeature 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.\n\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “<em>Modernizr</em>â€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\n\n[code lang="javascript"]if ( Modernizr.video ) {\n  // Load HTML5 Video\n}[/code]\n\nMSNBC 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. \n\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. 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 <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\n\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent-300x225.png" alt="" title="find-userAgent" width="300" height="225" class="alignleft size-medium wp-image-1855" /></a>\n\nNow 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.\n\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions-300x225.png" alt="" title="fiddler-sessions" width="300" height="225" class="alignleft size-medium wp-image-1858" /></a>\n\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\n\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\n<li>Select the AutoResponder tab on the right.</li>\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\n\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\n\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\n<li>Then respond with: *200-SESSION_3</li></ul>\n\nRight-click the entry in the AutoResponder and select <em>Edit Response</em>. 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:\n\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\n  // Flash Experience\n}[/code]\n\nRather 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:\n\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\n  // Flash Experience\n}[/code]\n\nThis 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.\n\n<h2>Step 4: Update touch and pointer events</h2>\n\nSafari 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 <em>pointer</em>. 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 <em>pointerType</em> property.\n\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png" alt="" title="20110920-pointer" width="264" height="272" class="alignleft size-full wp-image-1859" /></a>\n\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like <em>touchstart, touchmove</em>, and <em>touchend</em>,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like <em>MSPointerDown, MSPointerUP</em>, and <em>MSPointerMove</em>.\n\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\n\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\n} else {\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\n}[/code]\n\nMSNBC 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:\n\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\n\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\n\nWe’re going to update this to include the MSPointer events as well:\n\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\n} else {\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\n}[/code]\n\nFirst 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. \n\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\n\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\n  /* Start drag logic */\n} else \nif ( event.type == &quot;touchmove&quot; ) {\n  /* Drag logic */\n} else \nif ( event.type == &quot;touchend&quot; ) {\n  /* Complete drag logic */\n}[/code]\n\nWe’ll modify this to listen for all of the registered event types:\n\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\n  /* Start drag logic */\n} else \nif ( event.type.match( /move$/i ) ) {\n  /* Drag logic */\n} else \nif ( event.type.match( /(up|end)$/i ) ) {\n  /* Complete drag logic */\n}[/code]\n\nThe 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 <em>onresizeend</em> and <em>keyup</em>. Be sure to consider this in your project.\n\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\n\nThe drag logic itself initially relies upon the <em>event.targetTouches</em> <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the <em>pageX</em> and <em>pageY</em> properties from the first item in the <em>TouchList</em>, however in Internet Explorer these values are found directly on the event object.\n\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\n\nUsing 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:\n\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\n\nIf <em>event.pageX</em> is not found, we fall back to assigning the value of <em>targetTouches[0].pageX</em> to our variable.\n\nAnother important item to keep in mind is that this site initially responds to <em>touchmove</em>. 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.\n\nNow 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.\n\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\n\n<h2>Testing both experiences</h2>\n\nRecall 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 <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\n\n<ol><li>Press F12 to reveal the Developer Tools</li>\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\n<li>Refresh the page</li></ol>\n\nIf 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.\n\n<h2>Get it Done!</h2>\n\nHopefully 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 <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\n\n<strong><em>Update: In the rush to get this post up, I realized that I forgot to thank and give credit to <a href="https://twitter.com/#!/jonathansampson">Jonathan Sampson</a> 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!</em></strong>\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-autosave', '', '', '2012-04-10 12:19:38', '2012-04-10 16:19:38', '', 1843, 'http://blog.reybango.com/2012/04/10/1843-autosave/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1868, 3, '2012-04-09 12:35:50', '2012-04-09 16:35:50', 'I''ve had the good fortune of working with my friend <a href="https://twitter.com/#!/jonathansampson">Jonathan Sampson</a> 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.\r\n\r\nIf you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> 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.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. 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.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn 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:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe 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.\r\n\r\nA 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 <em>-webkit</em> properties, omitting the prefixes which target other browsers such as <em>-o, -ms, and -moz</em>. 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.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith 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. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile 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 <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, 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 href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is <em>browser sniffing</em>. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe 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.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe 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.\r\n\r\nThese 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.\r\n\r\nIf 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.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash-300x225.png" alt="" title="get-flash" width="300" height="225" class="alignleft size-medium wp-image-1854" /></a>\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather 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 <em>feature detection</em>.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the <em>canPlayType</em> method exists on our newly-created <em>video</em> tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a <em>video</em> element is, the <em>canPlayType</em> method will be present. If the video element is unknown to the browser, the <em>canPlayType</em> 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.\r\n\r\nFeature 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.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “<em>Modernizr</em>â€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC 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. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. 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 <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent-300x225.png" alt="" title="find-userAgent" width="300" height="225" class="alignleft size-medium wp-image-1855" /></a>\r\n\r\nNow 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.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions-300x225.png" alt="" title="fiddler-sessions" width="300" height="225" class="alignleft size-medium wp-image-1858" /></a>\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select <em>Edit Response</em>. 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:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather 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:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis 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.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari 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 <em>pointer</em>. 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 <em>pointerType</em> property.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png" alt="" title="20110920-pointer" width="264" height="272" class="alignleft size-full wp-image-1859" /></a>\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like <em>touchstart, touchmove</em>, and <em>touchend</em>,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like <em>MSPointerDown, MSPointerUP</em>, and <em>MSPointerMove</em>.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC 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:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst 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. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe 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 <em>onresizeend</em> and <em>keyup</em>. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the <em>event.targetTouches</em> <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the <em>pageX</em> and <em>pageY</em> properties from the first item in the <em>TouchList</em>, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing 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:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf <em>event.pageX</em> is not found, we fall back to assigning the value of <em>targetTouches[0].pageX</em> to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to <em>touchmove</em>. 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.\r\n\r\nNow 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.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall 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 <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf 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.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully 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 <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-20', '', '', '2012-04-09 12:35:50', '2012-04-09 16:35:50', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-20/', 0, 'revision', '', 0),
(1870, 3, '2012-05-08 15:12:05', '2012-05-08 19:12:05', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w71.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w71-150x150.png" alt="" title="pd-ie9w7" width="150" height="150" class="alignleft size-thumbnail wp-image-1896" /></a>\r\n<em>Chrome, IE10, IE9/Win8, IE9/Win7 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works in IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n<h2><em>Update: Closing comments on the post. Plenty of lively feedback which regardless of your stance, I truly appreciate.</em></h2>\r\n\r\n', 'Hey Paydirt: Your Site Works Just Fine in IE ', 0, '', 'publish', 'closed', 'closed', '', 'hey-paydirt-your-site-works-just-fine-in-ie', '', '', '2012-05-08 23:16:46', '2012-05-09 03:16:46', '', 0, 'http://blog.reybango.com/?p=1870', 0, 'post', '', 133),
(1871, 3, '2012-05-08 13:00:45', '2012-05-08 17:00:45', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\n \nToday, I came across this article on HackerNews which caught me totally by surprise:\n\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong>We don''t support Internet Explorer, and we''re calling that a feature</strong></a>â€\n\nWhen I checked out the site entry, it directed me to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their blog post, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\n“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€\nThey also mentioned that sensible browsers support cool features:\n“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\n•	They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry\n•	They had the “-msâ€ prefix for CSS3 gradients which was added in IE10\n•	They added support for -khtml-box-shadow but not -ms-box-shadow???\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented were available since IE9, a two-year old browser. And in addition, they had actually done some initial work on supporting CSS3 features that are available in IE10 (e.g.: transitions & CSS3 gradients).\nAt this point, I’m completely stumped because:\n•	Their site works great in both IE9 & IE10\n•	They’ve included support for some IE features in their CSS\n•	They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of the jQuery project team). But I can honestly say that IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here. \nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site JUST WORKS!\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you even checked it out? Perhaps being a Mac company, testing may be the issue. If it is, then let’s discuss the options.\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help you work through the issues.\n\n\n\n', '', 0, '', 'inherit', 'open', 'open', '', '1870-revision', '', '', '2012-05-08 13:00:45', '2012-05-08 17:00:45', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision/', 0, 'revision', '', 0),
(1872, 3, '2012-05-08 13:01:45', '2012-05-08 17:01:45', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\n \nToday, I came across this article on HackerNews which caught me totally by surprise:\n\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong>We don''t support Internet Explorer, and we''re calling that a feature</strong></a>â€\n\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\n\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\n\nThey also mentioned that sensible browsers support cool features:\n“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\n•	They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry\n•	They had the “-msâ€ prefix for CSS3 gradients which was added in IE10\n•	They added support for -khtml-box-shadow but not -ms-box-shadow???\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented were available since IE9, a two-year old browser. And in addition, they had actually done some initial work on supporting CSS3 features that are available in IE10 (e.g.: transitions & CSS3 gradients).\nAt this point, I’m completely stumped because:\n•	Their site works great in both IE9 & IE10\n•	They’ve included support for some IE features in their CSS\n•	They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of the jQuery project team). But I can honestly say that IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here. \nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site JUST WORKS!\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you even checked it out? Perhaps being a Mac company, testing may be the issue. If it is, then let’s discuss the options.\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help you work through the issues.\n\n\n\n', '', 0, '', 'inherit', 'open', 'open', '', '1870-revision-2', '', '', '2012-05-08 13:01:45', '2012-05-08 17:01:45', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-2/', 0, 'revision', '', 0),
(1873, 3, '2012-05-08 13:04:12', '2012-05-08 17:04:12', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented were available since IE9, a two-year old browser. And in addition, they had actually done some initial work on supporting CSS3 features that are available in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of the jQuery project team). But I can honestly say that IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you even checked it out? Perhaps being a Mac company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help you work through the issues.\r\n\r\n\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1870-revision-3', '', '', '2012-05-08 13:04:12', '2012-05-08 17:04:12', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-3/', 0, 'revision', '', 0),
(1874, 3, '2012-05-08 13:05:08', '2012-05-08 17:05:08', 'Chrome', 'pd-chrome', 0, '', 'inherit', 'open', 'open', '', 'pd-chrome', '', '', '2012-05-08 13:05:08', '2012-05-08 17:05:08', '', 1870, 'http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png', 0, 'attachment', 'image/png', 0),
(1875, 3, '2012-05-08 13:05:36', '2012-05-08 17:05:36', 'IE9', 'pd-ie9', 0, '', 'inherit', 'open', 'open', '', 'pd-ie9', '', '', '2012-05-08 13:05:36', '2012-05-08 17:05:36', '', 1870, 'http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png', 0, 'attachment', 'image/png', 0),
(1876, 3, '2012-05-08 13:05:57', '2012-05-08 17:05:57', 'IE10', 'pd-ie10', 0, '', 'inherit', 'open', 'open', '', 'pd-ie10', '', '', '2012-05-08 13:05:57', '2012-05-08 17:05:57', '', 1870, 'http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png', 0, 'attachment', 'image/png', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1877, 3, '2012-05-08 13:04:18', '2012-05-08 17:04:18', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented were available since IE9, a two-year old browser. And in addition, they had actually done some initial work on supporting CSS3 features that are available in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of the jQuery project team). But I can honestly say that IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you even checked it out? Perhaps being a Mac company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help you work through the issues.\r\n\r\n\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1870-revision-4', '', '', '2012-05-08 13:04:18', '2012-05-08 17:04:18', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-4/', 0, 'revision', '', 0),
(1878, 3, '2012-05-08 13:06:08', '2012-05-08 17:06:08', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented were available since IE9, a two-year old browser. And in addition, they had actually done some initial work on supporting CSS3 features that are available in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of the jQuery project team). But I can honestly say that IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you even checked it out? Perhaps being a Mac company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help you work through the issues.\r\n\r\n\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1870-revision-5', '', '', '2012-05-08 13:06:08', '2012-05-08 17:06:08', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-5/', 0, 'revision', '', 0),
(1879, 3, '2012-05-08 13:06:55', '2012-05-08 17:06:55', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented were available since IE9, a two-year old browser. And in addition, they had actually done some initial work on supporting CSS3 features that are available in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of the jQuery project team). But I can honestly say that IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you even checked it out? Perhaps being a Mac company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help you work through the issues.\r\n\r\n\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1870-revision-6', '', '', '2012-05-08 13:06:55', '2012-05-08 17:06:55', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-6/', 0, 'revision', '', 0),
(1880, 3, '2012-05-08 13:17:33', '2012-05-08 17:17:33', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented were available since IE9, a two-year old browser. And in addition, they had actually done some initial work on supporting CSS3 features that are available in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But I can honestly say that IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help you work through the issues.\r\n\r\n\r\n\r\n', 'Paydirt''s Reasons for not Supporting Internet Explorer Don''t Add Up', 0, '', 'inherit', 'open', 'open', '', '1870-revision-7', '', '', '2012-05-08 13:17:33', '2012-05-08 17:17:33', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-7/', 0, 'revision', '', 0),
(1881, 3, '2012-05-08 13:23:27', '2012-05-08 17:23:27', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE.</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented were available since IE9, a two-year old browser. And in addition, they had actually done some initial work on supporting CSS3 features that are available in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But I can honestly say that IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help you work through the issues.\r\n\r\n\r\n\r\n', 'Paydirt''s Reasons for not Supporting Internet Explorer Don''t Add Up', 0, '', 'inherit', 'open', 'open', '', '1870-revision-8', '', '', '2012-05-08 13:23:27', '2012-05-08 17:23:27', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-8/', 0, 'revision', '', 0),
(1882, 3, '2012-05-08 13:23:44', '2012-05-08 17:23:44', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented were available since IE9, a two-year old browser. And in addition, they had actually done some initial work on supporting CSS3 features that are available in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But I can honestly say that IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help you work through the issues.\r\n\r\n\r\n\r\n', 'Paydirt''s Reasons for not Supporting Internet Explorer Don''t Add Up', 0, '', 'inherit', 'open', 'open', '', '1870-revision-9', '', '', '2012-05-08 13:23:44', '2012-05-08 17:23:44', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-9/', 0, 'revision', '', 0),
(1883, 3, '2012-05-08 13:24:50', '2012-05-08 17:24:50', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented were available since IE9, a two-year old browser. And in addition, they had actually done some initial work on supporting CSS3 features that are available in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But I can honestly say that IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help you work through the issues.\r\n\r\n\r\n\r\n', 'Paydirt''s Reasons for not Supporting Internet Explorer Don''t Add Up', 0, '', 'inherit', 'open', 'open', '', '1870-revision-10', '', '', '2012-05-08 13:24:50', '2012-05-08 17:24:50', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-10/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1884, 3, '2012-05-08 14:12:45', '2012-05-08 18:12:45', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Paydirt''s Reasons for not Supporting Internet Explorer Don''t Add Up', 0, '', 'inherit', 'open', 'open', '', '1870-revision-11', '', '', '2012-05-08 14:12:45', '2012-05-08 18:12:45', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-11/', 0, 'revision', '', 0),
(1885, 3, '2012-05-08 14:13:12', '2012-05-08 18:13:12', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey PayDirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-12', '', '', '2012-05-08 14:13:12', '2012-05-08 18:13:12', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-12/', 0, 'revision', '', 0),
(1886, 3, '2012-05-08 14:31:11', '2012-05-08 18:31:11', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey PayDirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-13', '', '', '2012-05-08 14:31:11', '2012-05-08 18:31:11', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-13/', 0, 'revision', '', 0),
(1887, 3, '2012-05-08 14:31:21', '2012-05-08 18:31:21', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey PayDirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-14', '', '', '2012-05-08 14:31:21', '2012-05-08 18:31:21', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-14/', 0, 'revision', '', 0),
(1888, 3, '2012-05-08 14:32:12', '2012-05-08 18:32:12', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey Paydirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-15', '', '', '2012-05-08 14:32:12', '2012-05-08 18:32:12', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-15/', 0, 'revision', '', 0),
(1889, 3, '2012-05-08 15:10:19', '2012-05-08 19:10:19', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey Paydirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-16', '', '', '2012-05-08 15:10:19', '2012-05-08 19:10:19', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-16/', 0, 'revision', '', 0),
(1890, 3, '2012-05-08 15:12:05', '2012-05-08 19:12:05', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey Paydirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-17', '', '', '2012-05-08 15:12:05', '2012-05-08 19:12:05', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-17/', 0, 'revision', '', 0),
(1892, 3, '2012-05-08 16:02:30', '2012-05-08 20:02:30', 'IE9 Windows 7', 'pd-ie9w7', 0, '', 'inherit', 'open', 'open', '', 'pd-ie9w7', '', '', '2012-05-08 16:02:30', '2012-05-08 20:02:30', '', 1870, 'http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w7.png', 0, 'attachment', 'image/png', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1893, 3, '2012-05-08 23:13:28', '2012-05-09 03:13:28', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w71.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w71-150x150.png" alt="" title="pd-ie9w7" width="150" height="150" class="alignleft size-thumbnail wp-image-1896" /></a>\r\n<em>Chrome, IE10, IE9/Win8, IE9/Win7 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works in IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n<h2><em>Update: Closing comments on the post. Plenty of lively feedback which regardless of your stance, I truly appreciate.</em></h2>\r\n\r\n', 'Hey Paydirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-autosave', '', '', '2012-05-08 23:13:28', '2012-05-09 03:13:28', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-autosave/', 0, 'revision', '', 0),
(1894, 3, '2012-05-08 15:39:06', '2012-05-08 19:39:06', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a>\r\n<em>Chrome, IE9 & IE10 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works in IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey Paydirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-18', '', '', '2012-05-08 15:39:06', '2012-05-08 19:39:06', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-18/', 0, 'revision', '', 0),
(1895, 3, '2012-05-08 16:04:07', '2012-05-08 20:04:07', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w7.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w7-150x150.png" alt="" title="pd-ie9w7" width="150" height="150" class="alignleft size-thumbnail wp-image-1892" /></a>\r\n<em>Chrome, IE10, IE9/Win8, IE9.Win7 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works in IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey Paydirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-19', '', '', '2012-05-08 16:04:07', '2012-05-08 20:04:07', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-19/', 0, 'revision', '', 0),
(1896, 3, '2012-05-08 16:13:09', '2012-05-08 20:13:09', '', 'pd-ie9w7', 0, '', 'inherit', 'open', 'open', '', 'pd-ie9w7-2', '', '', '2012-05-08 16:13:09', '2012-05-08 20:13:09', '', 1870, 'http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w71.png', 0, 'attachment', 'image/png', 0),
(1897, 3, '2012-05-08 16:05:02', '2012-05-08 20:05:02', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w7.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w7-150x150.png" alt="" title="pd-ie9w7" width="150" height="150" class="alignleft size-thumbnail wp-image-1892" /></a>\r\n<em>Chrome, IE10, IE9/Win8, IE9.Win7 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works in IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey Paydirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-20', '', '', '2012-05-08 16:05:02', '2012-05-08 20:05:02', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-20/', 0, 'revision', '', 0),
(1898, 3, '2012-05-08 16:13:29', '2012-05-08 20:13:29', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w71.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w71-150x150.png" alt="" title="pd-ie9w7" width="150" height="150" class="alignleft size-thumbnail wp-image-1896" /></a>\r\n<em>Chrome, IE10, IE9/Win8, IE9.Win7 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works in IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey Paydirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-21', '', '', '2012-05-08 16:13:29', '2012-05-08 20:13:29', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-21/', 0, 'revision', '', 0),
(1899, 3, '2012-05-08 16:14:08', '2012-05-08 20:14:08', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w71.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w71-150x150.png" alt="" title="pd-ie9w7" width="150" height="150" class="alignleft size-thumbnail wp-image-1896" /></a>\r\n<em>Chrome, IE10, IE9/Win8, IE9/Win7 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works in IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey Paydirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-22', '', '', '2012-05-08 16:14:08', '2012-05-08 20:14:08', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-22/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1900, 3, '2012-05-08 23:06:46', '2012-05-09 03:06:46', 'One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.\r\n\r\n<h2>We''re Not Supporting IE!</h2>\r\n \r\nToday, I came across this article on HackerNews which caught me totally by surprise:\r\n\r\n“<a href="http://news.ycombinator.com/item?id=3941799"><strong><em>We don''t support Internet Explorer, and we''re calling that a feature</em></strong></a>â€\r\n\r\nWhen I checked out the site entry, <a href="https://paydirtapp.com/blog/we-dont-support-ie/">it directed me</a> to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their <a href="https://paydirtapp.com/blog/we-dont-support-ie/">blog post</a>, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:\r\n\r\n<em>“That''s why we made a key decision at Paydirt: we don''t support IE - at all - and we don''t pretend to. You can''t even sign up for Paydirt using IE.â€</em>\r\n\r\nThey also mentioned that sensible browsers support cool features:\r\n\r\n<em>“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.â€</em>\r\n\r\nSo of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.\r\n\r\n<h2>Um...it works in IE</h2>\r\n\r\nSure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-chrome-150x150.png" alt="" title="pd-chrome" width="150" height="150" class="alignleft size-thumbnail wp-image-1874" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie10-150x150.png" alt="" title="pd-ie10" width="150" height="150" class="alignleft size-thumbnail wp-image-1876" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9-150x150.png" alt="" title="pd-ie9" width="150" height="150" class="alignleft size-thumbnail wp-image-1875" /></a><a href="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w71.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/05/pd-ie9w71-150x150.png" alt="" title="pd-ie9w7" width="150" height="150" class="alignleft size-thumbnail wp-image-1896" /></a>\r\n<em>Chrome, IE10, IE9/Win8, IE9/Win7 Screenshots of Paydirt</em>\r\n\r\n<h2>Why is there code in here for IE support?</h2>\r\n\r\nNext, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:\r\n<ul>\r\n<li>They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry</li>\r\n<li>They had the “-msâ€ prefix for CSS3 gradients which was added in IE10</li>\r\n<li>They added support for -khtml-box-shadow but not -ms-box-shadow???</li>\r\n</ul>\r\n\r\nThis threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).\r\n\r\nAt this point, I’m completely stumped because:\r\n<ul><li>Their site works great in both IE9 & IE10</li>\r\n<li>They’ve included support for some IE features in their CSS</li>\r\n<li>They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-msâ€ vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).</li></ul>\r\n\r\n<h2>It works in IE so why not just Open it Up</h2>\r\n\r\nSo we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of <a href="http://jquery.org/team">the jQuery project team</a>). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again. \r\n\r\nMind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markupâ€ and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site <strong>JUST WORKS</strong>!\r\n\r\nNow, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.\r\n\r\nClaiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.\r\n\r\n\r\n\r\n', 'Hey Paydirt: Your Site Works Just Fine in IE ', 0, '', 'inherit', 'open', 'open', '', '1870-revision-23', '', '', '2012-05-08 23:06:46', '2012-05-09 03:06:46', '', 1870, 'http://blog.reybango.com/2012/05/08/1870-revision-23/', 0, 'revision', '', 0),
(1901, 3, '2012-05-09 13:15:42', '2012-05-09 17:15:42', '', 'hbdc-200px', 0, '', 'inherit', 'open', 'open', '', 'hbdc-200px', '', '', '2012-05-09 13:15:42', '2012-05-09 17:15:42', '', 0, 'http://blog.reybango.com/wp-content/uploads/2012/05/hbdc-200px.png', 0, 'attachment', 'image/png', 0),
(1902, 3, '2011-01-05 18:02:14', '2011-01-05 22:02:14', 'There''s a <a href="http://groups.google.com/group/jsmentors/browse_thread/thread/336a60331692fae0?tvc=2">discussion going on on the JSMentors JavaScript mailing list about books to read to get you to the next level</a>. There''s been a lot of great feedback and suggestions thrown out and I wanted to offer up what I felt were good <strong>books/resources</strong> to carry you through the learning process. While I list a number of books in the <a href="http://blog.reybango.com/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/#books-js">Big List page that I created</a>, narrowing it down into specific levels makes a lot of sense. \r\n\r\nNote 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). <strong>If you think something''s missing, please add it to the comments below.</strong>\r\n\r\n<strong><em>Also, I''m not saying that you need to read every book mentioned below.</em></strong> 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.\r\n\r\n<h2>Introductory</h2>\r\n\r\nThese are books that will give you the fundamentals of the JavaScript language and get you started:\r\n\r\n<ul>\r\n<li><a href="http://www.amazon.com/gp/product/0596517742?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0596517742">JavaScript: The Good Parts</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=0596517742" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://www.amazon.com/gp/product/047022780X?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=047022780X">Professional JavaScript for Web Developers (Wrox Programmer to Programmer)</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=047022780X" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://www.amazon.com/gp/product/0321423305?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0321423305">ppk on JavaScript, 1/e</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=0321423305" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://www.amazon.com/gp/product/1590596803?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=1590596803">Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional (Beginning: from Novice to Professional)</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=1590596803" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://eloquentjavascript.net/">Eloquent JavaScript</a> (Online Resource)</li>\r\n</ul>\r\n\r\n<h2>Intermediate</h2>\r\n\r\nOnce 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.\r\n\r\n<ul>\r\n<li><a href="http://www.amazon.com/gp/product/047022780X?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=047022780X">Professional JavaScript for Web Developers (Wrox Programmer to Programmer)</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=047022780X" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://www.amazon.com/gp/product/0596101996?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0596101996">JavaScript: The Definitive Guide</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=0596101996" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://eloquentjavascript.net/">Eloquent JavaScript</a> (Online Resource)</li>\r\n<li><a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=1590595335" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"> - Not JavaScript-specific but a good resource for learning to interact with the DOM</li>\r\n</ul>\r\n\r\n<h2>Advanced</h2>\r\n\r\nYou 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.\r\n\r\n<ul>\r\n<li><a href="http://www.amazon.com/gp/product/059680279X?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=059680279X">High Performance JavaScript (Build Faster Web Application Interfaces)</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=059680279X" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1">\r\n</li>\r\n<li><a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=1847194141" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://www.amazon.com/gp/product/0596806752?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0596806752">JavaScript Patterns</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=0596806752" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://www.amazon.com/gp/product/1934356670?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=1934356670">Pragmatic Guide to JavaScript</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=1934356670" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://www.amazon.com/gp/product/1590597273?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=1590597273">Pro JavaScript Techniques</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=1590597273" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://www.amazon.com/gp/product/193398869X?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=193398869X">Secrets of the JavaScript Ninja</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=193398869X" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li></ul>\r\n\r\n<h2>God Mode Reading</h2>\r\n\r\nAs <a href="http://qfox.nl/">Peter van der Zee</a> likes to call it <em>"godmode; the actual specification"</em>. Want some deep reading and know every nook and cranny of the language. Here ya go:\r\n\r\n<ul>\r\n	<li><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">Standard ECMA-262 ECMAScript Language Specification 3rd edition (December 1999) - <strong>PDF File</strong></a> - This is what''s widely supported in all major browsers\r\n</li>\r\n	<li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Standard ECMA-262 ECMAScript Language Specification 5th edition (December 2009)</a> - This is what all major browser vendors are working to implement</li>\r\n\r\n</ul>\r\n\r\n<h2>Blogs</h2>\r\n\r\n<ul>\r\n	<li><a href="http://scriptJunkie.com">ScriptJunkie.com</a> - 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</li>\r\n <li><a href="http://jsmentors.com/">JSmentors.com</a> - the JavaScript mailing list I started with <a href="http://twitter.com/abozhilov">Asen Bozhilov</a> which provides a safe, professional place to discuss JavaScript and learn from the best</li>\r\n	<li><a href="http://dailyjs.com/">DailyJS</a></li>\r\n	<li><a href="http://badassjs.com/">BadassJS</a></li>\r\n	<li><a href="http://javascriptweekly.com/">JavaScript Weekly Newsletter</a></li>\r\n	<li><a href="http://www.jsmag.com/">JSMag</a> - Monthly Magazine</li>\r\n	<li><a href="http://developer.yahoo.com/yui/theater/">YUI Theatre</a> - Tons of videos on JavaScript-related topics</li>\r\n	<li><a href="http://ejohn.org/category/blog/">John Resig</a></li>\r\n	<li><a href="http://qfox.nl/weblog">Peter van der Zee</a></li>\r\n	<li><a href="http://michaux.ca/">Peter Michaux</a></li>\r\n<li><a href="http://jsmentors.com/Garrett-Smith.html">Garrett Smith</a></li>\r\n					    <li><a href="http://jsmentors.com/Juriy-Zaytsev.html">Juriy Zaytsev a.k.a. kangax</a></li>\r\n					    <li><a href="http://jsmentors.com/Dmitry-A-Soshnikov.html">Dmitry A. Soshnikov</a></li>\r\n					    <li><a href="http://jsmentors.com/Steven-Levithan.html">Steven Levithan</a></li>					    \r\n					    <li><a href="http://jsmentors.com/John-David-Dalton.html">John-David Dalton</a></li>\r\n					    <li><a href="http://jsmentors.com/Stoyan-Stefanov.html">Stoyan Stefanov</a></li>\r\n					    <li><a href="http://jsmentors.com/Benjamin-Rosseaux.html">Benjamin Rosseaux a.k.a. BeRo</a></li>\r\n					    <li><a href="http://jsmentors.com/Diego-Perini.html">Diego Perini</a></li>\r\n					    <li><a href="http://javascriptweblog.wordpress.com/">Angus Croll</a></li>\r\n					    <li><a href="http://jsmentors.com/Peter-van-der-Zee.html">Peter van der Zee</a></li>\r\n					    <li><a href="http://jsmentors.com/Christian-C-Salvado.html">Christian C. Salvadó</a></li>\r\n					    <li><a href=http://jsmentors.com/"Christophe-Porteneuve.html">Christophe Porteneuve</a></li>\r\n					    <li><a href="http://jsmentors.com/Nicholas-C-Zakas.html">Nicholas C. Zakas</a></li>\r\n					    <li><a href="http://jsmentors.com/David-Flanagan.html">David Flanagan</a></li>\r\n	<li><a href="http://feeds.feedburner.com/reybango/zSyW">Rey Bango</a> - That''s me! Here''s my feed URL. Subscribe!</li>\r\n\r\n</ul>\r\n\r\n\r\n\r\n<h2>What if *I* had to Choose Just 3 Books</h2>\r\n\r\nIf I had to choose just three books to have in my stash, I''d go with the following:\r\n\r\n<ul>\r\n<li><a href="http://www.amazon.com/gp/product/047022780X?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=047022780X">Professional JavaScript for Web Developers (Wrox Programmer to Programmer)</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=047022780X" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=1847194141" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n<li><a href="http://www.amazon.com/gp/product/0596806752?ie=UTF8&amp;tag=rebasbl-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0596806752">JavaScript Patterns</a><img class=" ztjyztsxjfidzcmozwna" src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&amp;l=as2&amp;o=1&amp;a=0596806752" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1"></li>\r\n</ul>\r\n\r\nSome 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.\r\n\r\nWhat would you guys choose?\r\n\r\n\r\n', 'What to Read to Get Up to Speed in JavaScript', 0, '', 'inherit', 'open', 'open', '', '1523-revision-47', '', '', '2011-01-05 18:02:14', '2011-01-05 22:02:14', '', 1523, 'http://blog.reybango.com/2011/01/05/1523-revision-47/', 0, 'revision', '', 0),
(1913, 3, '2012-07-24 16:19:38', '2012-07-24 20:19:38', '<strong>UPDATE:</strong> The poll is now closed. <a href="http://blog.reybango.com/2012/07/26/the-results-of-my-essential-tools-libs-and-frameworks-for-front-end-development-survey/">You can see the results in this blog post</a>.\r\n\r\nI want to compile a list of the most common tools, frameworks & libs web developers are using today. Things seem to change daily with new, cool, and helpful projects announced all the time. It''d be great to nail some of these down as a reference.\r\n\r\nExamples:\r\n\r\njQuery\r\nBackbone\r\nUnderscore\r\nGrunt\r\nMocha\r\nRequireJS\r\nHTML5 Boilerplate\r\nModernizr\r\nSASS\r\nCompass\r\n\r\nRebecca Murphey <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">took a stab at this</a> a couple of months ago.\r\n\r\nSo, what are you using that makes your front-end dev insanely easier?\r\n\r\n\r\n\r\n\r\n\r\n', 'Essential Tools, Libs and Frameworks for Front-End Development. What are you Using?', 0, '', 'publish', 'open', 'open', '', 'essential-tools-libs-and-frameworks-for-front-end-development-what-are-you-using', '', '\nhttp://blog.reybango.com/2012/07/26/the-results-of-my-essential-tools-libs-and-frameworks-for-front-end-development-survey/', '2012-07-27 11:25:23', '2012-07-27 15:25:23', '', 0, 'http://blog.reybango.com/?p=1913', 0, 'post', '', 15),
(1914, 3, '2012-07-24 16:16:40', '2012-07-24 20:16:40', 'I want to compile a list of the most common tools, frameworks & libs web developers are using today. Things seem to change daily with new, cool, and helpful projects announced all the time. It''d be great to nail some of these down as a reference.\n\nExamples:\n\njQuery\nBackbone\nUnderscore\nGrunt\nMocha\nLess\nSASS\nCompass\n\nI''m sure there are others. Rebecca Murphey <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">took a stab at this</a> a couple of months ago.\n\n', 'Essential Tools, Libs and Frameworks for Front-end Development. What are you Using?', 0, '', 'inherit', 'open', 'open', '', '1913-revision', '', '', '2012-07-24 16:16:40', '2012-07-24 20:16:40', '', 1913, 'http://blog.reybango.com/2012/07/24/1913-revision/', 0, 'revision', '', 0),
(1915, 3, '2012-07-24 16:17:39', '2012-07-24 20:17:39', 'I want to compile a list of the most common tools, frameworks & libs web developers are using today. Things seem to change daily with new, cool, and helpful projects announced all the time. It''d be great to nail some of these down as a reference.\n\nExamples:\n\njQuery\nBackbone\nUnderscore\nGrunt\nMocha\nRequireJS\nHTML5 Boilerplate\nModernizr\nSASS\nCompass\n\nRebecca Murphey <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">took a stab at this</a> a couple of months ago.\n\nSo, what are you using that makes your front-end dev insanely easier?', 'Essential Tools, Libs and Frameworks for Front-end Development. What are you Using?', 0, '', 'inherit', 'open', 'open', '', '1913-revision-2', '', '', '2012-07-24 16:17:39', '2012-07-24 20:17:39', '', 1913, 'http://blog.reybango.com/2012/07/24/1913-revision-2/', 0, 'revision', '', 0),
(1916, 3, '2012-07-24 16:17:40', '2012-07-24 20:17:40', 'I want to compile a list of the most common tools, frameworks & libs web developers are using today. Things seem to change daily with new, cool, and helpful projects announced all the time. It''d be great to nail some of these down as a reference.\r\n\r\nExamples:\r\n\r\njQuery\r\nBackbone\r\nUnderscore\r\nGrunt\r\nMocha\r\nRequireJS\r\nHTML5 Boilerplate\r\nModernizr\r\nSASS\r\nCompass\r\n\r\nRebecca Murphey <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">took a stab at this</a> a couple of months ago.\r\n\r\nSo, what are you using that makes your front-end dev insanely easier?', 'Essential Tools, Libs and Frameworks for Front-end Development. What are you Using?', 0, '', 'inherit', 'open', 'open', '', '1913-revision-3', '', '', '2012-07-24 16:17:40', '2012-07-24 20:17:40', '', 1913, 'http://blog.reybango.com/2012/07/24/1913-revision-3/', 0, 'revision', '', 0),
(1917, 3, '2012-07-24 16:18:23', '2012-07-24 20:18:23', 'I want to compile a list of the most common tools, frameworks & libs web developers are using today. Things seem to change daily with new, cool, and helpful projects announced all the time. It''d be great to nail some of these down as a reference.\r\n\r\nExamples:\r\n\r\njQuery\r\nBackbone\r\nUnderscore\r\nGrunt\r\nMocha\r\nRequireJS\r\nHTML5 Boilerplate\r\nModernizr\r\nSASS\r\nCompass\r\n\r\nRebecca Murphey <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">took a stab at this</a> a couple of months ago.\r\n\r\nSo, what are you using that makes your front-end dev insanely easier?', 'Essential Tools, Libs and Frameworks for Front-end Development. What are you Using?', 0, '', 'inherit', 'open', 'open', '', '1913-revision-4', '', '', '2012-07-24 16:18:23', '2012-07-24 20:18:23', '', 1913, 'http://blog.reybango.com/2012/07/24/1913-revision-4/', 0, 'revision', '', 0),
(1918, 3, '2012-07-24 16:18:29', '2012-07-24 20:18:29', 'I want to compile a list of the most common tools, frameworks & libs web developers are using today. Things seem to change daily with new, cool, and helpful projects announced all the time. It''d be great to nail some of these down as a reference.\r\n\r\nExamples:\r\n\r\njQuery\r\nBackbone\r\nUnderscore\r\nGrunt\r\nMocha\r\nRequireJS\r\nHTML5 Boilerplate\r\nModernizr\r\nSASS\r\nCompass\r\n\r\nRebecca Murphey <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">took a stab at this</a> a couple of months ago.\r\n\r\nSo, what are you using that makes your front-end dev insanely easier?', 'Essential Tools, Libs and Frameworks for Front-end Development. What are you Using?', 0, '', 'inherit', 'open', 'open', '', '1913-revision-5', '', '', '2012-07-24 16:18:29', '2012-07-24 20:18:29', '', 1913, 'http://blog.reybango.com/2012/07/24/1913-revision-5/', 0, 'revision', '', 0),
(1919, 3, '2012-07-27 11:25:08', '2012-07-27 15:25:08', '<strong>UPDATE:</strong> The poll is now closed. <a href="http://blog.reybango.com/2012/07/26/the-results-of-my-essential-tools-libs-and-frameworks-for-front-end-development-survey/">You can see the results in this blog post</a>.\n\nI want to compile a list of the most common tools, frameworks & libs web developers are using today. Things seem to change daily with new, cool, and helpful projects announced all the time. It''d be great to nail some of these down as a reference.\n\nExamples:\n\njQuery\nBackbone\nUnderscore\nGrunt\nMocha\nRequireJS\nHTML5 Boilerplate\nModernizr\nSASS\nCompass\n\nRebecca Murphey <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">took a stab at this</a> a couple of months ago.\n\nSo, what are you using that makes your front-end dev insanely easier?\n\n\n\n\n\n', 'Essential Tools, Libs and Frameworks for Front-End Development. What are you Using?', 0, '', 'inherit', 'open', 'open', '', '1913-autosave', '', '', '2012-07-27 11:25:08', '2012-07-27 15:25:08', '', 1913, 'http://blog.reybango.com/2012/07/24/1913-autosave/', 0, 'revision', '', 0),
(1941, 3, '2012-07-24 16:43:26', '2012-07-24 20:43:26', 'I want to compile a list of the most common tools, frameworks & libs web developers are using today. Things seem to change daily with new, cool, and helpful projects announced all the time. It''d be great to nail some of these down as a reference.\r\n\r\nExamples:\r\n\r\njQuery\r\nBackbone\r\nUnderscore\r\nGrunt\r\nMocha\r\nRequireJS\r\nHTML5 Boilerplate\r\nModernizr\r\nSASS\r\nCompass\r\n\r\nRebecca Murphey <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">took a stab at this</a> a couple of months ago.\r\n\r\nSo, what are you using that makes your front-end dev insanely easier?\r\n\r\n<em><strong>UPDATE:</strong> Christian Heilmann gave me a great idea to use a Google Docs form as a poll. Submit your feedback here:</em>\r\n\r\n<h3><a href="https://docs.google.com/spreadsheet/viewform?formkey=dGtoUEdLRkRKX2lMWDQ2TFJma2tVcGc6MQ">Essential Tools, Libs and Frameworks for Front-End Development Poll</a></h3>\r\n\r\nI''ll roll-up the results in a couple of weeks.\r\n\r\n\r\n\r\n\r\n', 'Essential Tools, Libs and Frameworks for Front-End Development. What are you Using?', 0, '', 'inherit', 'open', 'open', '', '1913-revision-7', '', '', '2012-07-24 16:43:26', '2012-07-24 20:43:26', '', 1913, 'http://blog.reybango.com/2012/07/24/1913-revision-7/', 0, 'revision', '', 0),
(1920, 3, '2012-07-24 16:19:38', '2012-07-24 20:19:38', 'I want to compile a list of the most common tools, frameworks & libs web developers are using today. Things seem to change daily with new, cool, and helpful projects announced all the time. It''d be great to nail some of these down as a reference.\r\n\r\nExamples:\r\n\r\njQuery\r\nBackbone\r\nUnderscore\r\nGrunt\r\nMocha\r\nRequireJS\r\nHTML5 Boilerplate\r\nModernizr\r\nSASS\r\nCompass\r\n\r\nRebecca Murphey <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">took a stab at this</a> a couple of months ago.\r\n\r\nSo, what are you using that makes your front-end dev insanely easier?', 'Essential Tools, Libs and Frameworks for Front-End Development. What are you Using?', 0, '', 'inherit', 'open', 'open', '', '1913-revision-6', '', '', '2012-07-24 16:19:38', '2012-07-24 20:19:38', '', 1913, 'http://blog.reybango.com/2012/07/24/1913-revision-6/', 0, 'revision', '', 0),
(1921, 3, '2012-07-26 11:52:34', '2012-07-26 15:52:34', 'Two days ago, I put up <a href="http://blog.reybango.com/2012/07/24/essential-tools-libs-and-frameworks-for-front-end-development-what-are-you-using/">a simple survey</a> that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now want to share the results.\r\n\r\n<h3>Why Am I Doing This?</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers (myself included) stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I did my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions. The results shown below for the main list was based off of what Google Docs provided. I didn''t do those calculations but I have to assume they''re correct.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a framework released by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n<h3>The Raw Data</h3>\r\n\r\nHere''s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/07/EssentialToolsLibsandFrameworksforFrontEndDevelopment.csv">Raw Data from the Survey</a> (.csv)\r\n\r\n', 'The Results of my Essential Tools, Libs and Frameworks for Front-End Development Survey', 0, '', 'publish', 'open', 'open', '', 'the-results-of-my-essential-tools-libs-and-frameworks-for-front-end-development-survey', '', '\nhttp://blog.reybango.com/2012/07/24/essential-tools-libs-and-frameworks-for-front-end-development-what-are-you-using/', '2012-07-26 13:10:46', '2012-07-26 17:10:46', '', 0, 'http://blog.reybango.com/?p=1921', 0, 'post', '', 18),
(1922, 3, '2012-07-26 11:23:45', '2012-07-26 15:23:45', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\n\n<h3>Details</h3>\n\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\n\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives \na snapshot of what''s frequently used.\n\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey.\n\nI ended up with 1031 total responses that I felt were good submissions.\n\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\n<ul><li>LESS</li>\n<li>Git</li>\n<li>ExtJS</li>\n<li>Ember.js</li>\n<li>prefix-free</li>\n<li>JSBin</li>\n<li>JSFiddle</li>\n<li>dabblet</li>\n<li>Kendo UI</li>\n<li>Wijmo</li>\n<li>Coffeescript</li>\n<li>YUI</li></ul>\n\n\n\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision', '', '', '2012-07-26 11:23:45', '2012-07-26 15:23:45', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision/', 0, 'revision', '', 0),
(1923, 3, '2012-07-26 11:24:45', '2012-07-26 15:24:45', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\n\n<h3>The Process</h3>\n\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\n\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives \na snapshot of what''s frequently used.\n\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey.\n\nI ended up with 1031 total responses that I felt were good submissions.\n\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\n<ul><li>LESS</li>\n<li>Git</li>\n<li>ExtJS</li>\n<li>Ember.js</li>\n<li>prefix-free</li>\n<li>JSBin</li>\n<li>JSFiddle</li>\n<li>dabblet</li>\n<li>Kendo UI</li>\n<li>Wijmo</li>\n<li>Coffeescript</li>\n<li>YUI</li></ul>\n\n\n\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision-2', '', '', '2012-07-26 11:24:45', '2012-07-26 15:24:45', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-2/', 0, 'revision', '', 0),
(1925, 3, '2012-07-26 11:26:16', '2012-07-26 15:26:16', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\r\n\r\n<h3>The Process</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives \r\na snapshot of what''s frequently used.\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision-4', '', '', '2012-07-26 11:26:16', '2012-07-26 15:26:16', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-4/', 0, 'revision', '', 0),
(1924, 3, '2012-07-26 11:25:21', '2012-07-26 15:25:21', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\r\n\r\n<h3>The Process</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives \r\na snapshot of what''s frequently used.\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\njQuery			916	89%\r\nModernizr		525	51%\r\nGit			489	47%\r\nHTML5 Boilerplate	439	43%\r\nSublime Text 2		442	43%\r\njQuery UI		421	41%\r\nBootstrap		346	34%\r\nSass			316	31%\r\nJSFiddle		261	25%\r\nUnderscore		245	24%\r\nLESS			237	23%\r\nBackbone		215	21%\r\nCompass			182	18%\r\nRequireJS		173	17%\r\nHandlebars		108	10%\r\nJSBin			102	10%\r\nCoffeescript		104	10%\r\nKnockoutJS		95	9%\r\nGrunt			80	8%\r\nJasmine			87	8%\r\nQunit			67	7%\r\nKendo UI		66	6%\r\nZepto			52	5%\r\nMocha			41	4%\r\nMooTools		38	4%\r\nYUI			41	4%\r\nAngularJS		34	3%\r\nExtJS			29	3%\r\nprefix-free		31	3%\r\ndabblet			29	3%\r\nDojo			20	2%\r\nEmber.js		16	2%\r\nWijmo			20	2%\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision-3', '', '', '2012-07-26 11:25:21', '2012-07-26 15:25:21', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-3/', 0, 'revision', '', 0),
(1926, 3, '2012-07-26 11:30:52', '2012-07-26 15:30:52', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\r\n\r\n<h3>The Process</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives \r\na snapshot of what''s frequently used.\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a fairly new framework release by HP which looks to have come out of the great work done by Palm. I haven''t used it so I don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they were all seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision-5', '', '', '2012-07-26 11:30:52', '2012-07-26 15:30:52', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-5/', 0, 'revision', '', 0),
(1927, 3, '2012-07-26 11:37:22', '2012-07-26 15:37:22', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a fairly new framework release by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision-6', '', '', '2012-07-26 11:37:22', '2012-07-26 15:37:22', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-6/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1928, 3, '2012-07-26 11:38:10', '2012-07-26 15:38:10', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a fairly new framework release by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision-7', '', '', '2012-07-26 11:38:10', '2012-07-26 15:38:10', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-7/', 0, 'revision', '', 0),
(1929, 3, '2012-07-26 11:38:27', '2012-07-26 15:38:27', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a fairly new framework release by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision-8', '', '', '2012-07-26 11:38:27', '2012-07-26 15:38:27', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-8/', 0, 'revision', '', 0),
(1930, 3, '2012-07-26 11:43:47', '2012-07-26 15:43:47', '', 'EssentialToolsLibsandFrameworksforFrontEndDevelopment', 0, '', 'inherit', 'open', 'open', '', 'essentialtoolslibsandframeworksforfrontenddevelopment', '', '', '2012-07-26 11:43:47', '2012-07-26 15:43:47', '', 1921, 'http://blog.reybango.com/wp-content/uploads/2012/07/EssentialToolsLibsandFrameworksforFrontEndDevelopment.csv', 0, 'attachment', 'text/csv', 0),
(1931, 3, '2012-07-26 11:39:03', '2012-07-26 15:39:03', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a framework released by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision-9', '', '', '2012-07-26 11:39:03', '2012-07-26 15:39:03', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-9/', 0, 'revision', '', 0),
(1932, 3, '2012-07-26 11:44:42', '2012-07-26 15:44:42', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a framework released by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n<h3>The Raw Data</h3>\r\n\r\nHere''s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/07/EssentialToolsLibsandFrameworksforFrontEndDevelopment.csv">Raw Data from the Survey</a> (.csv)\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision-10', '', '', '2012-07-26 11:44:42', '2012-07-26 15:44:42', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-10/', 0, 'revision', '', 0),
(1933, 3, '2012-07-26 11:44:48', '2012-07-26 15:44:48', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a framework released by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n<h3>The Raw Data</h3>\r\n\r\nHere''s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/07/EssentialToolsLibsandFrameworksforFrontEndDevelopment.csv">Raw Data from the Survey</a> (.csv)\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision-11', '', '', '2012-07-26 11:44:48', '2012-07-26 15:44:48', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-11/', 0, 'revision', '', 0),
(1934, 3, '2012-07-26 11:45:57', '2012-07-26 15:45:57', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions. The results show below for the main list was based off of what Google Docs provided. I didn''t do those calculations but I have to assume they''re correct.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a framework released by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n<h3>The Raw Data</h3>\r\n\r\nHere''s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/07/EssentialToolsLibsandFrameworksforFrontEndDevelopment.csv">Raw Data from the Survey</a> (.csv)\r\n\r\n', '', 0, '', 'inherit', 'open', 'open', '', '1921-revision-12', '', '', '2012-07-26 11:45:57', '2012-07-26 15:45:57', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-12/', 0, 'revision', '', 0),
(1935, 3, '2012-07-26 11:47:28', '2012-07-26 15:47:28', 'Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now wanted to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions. The results show below for the main list was based off of what Google Docs provided. I didn''t do those calculations but I have to assume they''re correct.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a framework released by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n<h3>The Raw Data</h3>\r\n\r\nHere''s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/07/EssentialToolsLibsandFrameworksforFrontEndDevelopment.csv">Raw Data from the Survey</a> (.csv)\r\n\r\n', 'The Results of my Essential Tools, Libs and Frameworks for Front-End Development Survey', 0, '', 'inherit', 'open', 'open', '', '1921-revision-13', '', '', '2012-07-26 11:47:28', '2012-07-26 15:47:28', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-13/', 0, 'revision', '', 0),
(1936, 3, '2012-07-26 11:48:05', '2012-07-26 15:48:05', 'Two days ago, I put up <a href="http://blog.reybango.com/2012/07/24/essential-tools-libs-and-frameworks-for-front-end-development-what-are-you-using/">a simple survey</a> that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now want to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions. The results show below for the main list was based off of what Google Docs provided. I didn''t do those calculations but I have to assume they''re correct.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a framework released by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n<h3>The Raw Data</h3>\r\n\r\nHere''s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/07/EssentialToolsLibsandFrameworksforFrontEndDevelopment.csv">Raw Data from the Survey</a> (.csv)\r\n\r\n', 'The Results of my Essential Tools, Libs and Frameworks for Front-End Development Survey', 0, '', 'inherit', 'open', 'open', '', '1921-revision-14', '', '', '2012-07-26 11:48:05', '2012-07-26 15:48:05', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-14/', 0, 'revision', '', 0),
(1937, 3, '2012-07-26 11:48:31', '2012-07-26 15:48:31', 'Two days ago, I put up <a href="http://blog.reybango.com/2012/07/24/essential-tools-libs-and-frameworks-for-front-end-development-what-are-you-using/">a simple survey</a> that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now want to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers (myself included) stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions. The results show below for the main list was based off of what Google Docs provided. I didn''t do those calculations but I have to assume they''re correct.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a framework released by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n<h3>The Raw Data</h3>\r\n\r\nHere''s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/07/EssentialToolsLibsandFrameworksforFrontEndDevelopment.csv">Raw Data from the Survey</a> (.csv)\r\n\r\n', 'The Results of my Essential Tools, Libs and Frameworks for Front-End Development Survey', 0, '', 'inherit', 'open', 'open', '', '1921-revision-15', '', '', '2012-07-26 11:48:31', '2012-07-26 15:48:31', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-15/', 0, 'revision', '', 0),
(1938, 3, '2012-07-26 11:51:17', '2012-07-26 15:51:17', 'Two days ago, I put up <a href="http://blog.reybango.com/2012/07/24/essential-tools-libs-and-frameworks-for-front-end-development-what-are-you-using/">a simple survey</a> that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now want to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers (myself included) stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I did my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions. The results shown below for the main list was based off of what Google Docs provided. I didn''t do those calculations but I have to assume they''re correct.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a framework released by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n<h3>The Raw Data</h3>\r\n\r\nHere''s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/07/EssentialToolsLibsandFrameworksforFrontEndDevelopment.csv">Raw Data from the Survey</a> (.csv)\r\n\r\n', 'The Results of my Essential Tools, Libs and Frameworks for Front-End Development Survey', 0, '', 'inherit', 'open', 'open', '', '1921-revision-16', '', '', '2012-07-26 11:51:17', '2012-07-26 15:51:17', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-16/', 0, 'revision', '', 0),
(1939, 3, '2012-07-26 11:51:22', '2012-07-26 15:51:22', 'Two days ago, I put up <a href="http://blog.reybango.com/2012/07/24/essential-tools-libs-and-frameworks-for-front-end-development-what-are-you-using/">a simple survey</a> that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now want to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers (myself included) stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I did my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions. The results shown below for the main list was based off of what Google Docs provided. I didn''t do those calculations but I have to assume they''re correct.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a framework released by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n<h3>The Raw Data</h3>\r\n\r\nHere''s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/07/EssentialToolsLibsandFrameworksforFrontEndDevelopment.csv">Raw Data from the Survey</a> (.csv)\r\n\r\n', 'The Results of my Essential Tools, Libs and Frameworks for Front-End Development Survey', 0, '', 'inherit', 'open', 'open', '', '1921-revision-17', '', '', '2012-07-26 11:51:22', '2012-07-26 15:51:22', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-17/', 0, 'revision', '', 0),
(1940, 3, '2012-07-26 11:52:34', '2012-07-26 15:52:34', 'Two days ago, I put up <a href="http://blog.reybango.com/2012/07/24/essential-tools-libs-and-frameworks-for-front-end-development-what-are-you-using/">a simple survey</a> that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now want to share the results.\r\n\r\n<h3>Why Are You Doing This</h3>\r\n\r\nAs I''ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.\r\n\r\nI''m doing this to help web developers (myself included) stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what''s frequently used.\r\n\r\nA couple of people buzzed me (some complaining and eluding bias), because I hadn''t listed "x" tool or lib in the survey. The survey wasn''t meant to be all-inclusive and if you look at the "Other" section below, you''ll see how adding everyone''s favorite tool would''ve been impossible. That''s what the "Other" option was for. <strong>Ultimately, instead of looking at what wasn''t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.</strong>\r\n\r\n<h3>The Process</h3>\r\n\r\nAfter closing the survey, I removed all blank records and then went entry by entry to factor in the "Other" submissions and list out tools not originally added on the survey. I did my best to list every technology mentioned although it''s quite possible I may have missed something. If I did, it was purely accidental.\r\n\r\nI ended up with 1031 total responses that I felt were good submissions. The results shown below for the main list was based off of what Google Docs provided. I didn''t do those calculations but I have to assume they''re correct.\r\n\r\nImportant to note is that the following options were added after 218 people had already replied so those values could''ve been much higher if added at the beginning. This is evident in Git & Coffeescript''s high numbers despite being added late.\r\n<ul><li>LESS</li>\r\n<li>Git</li>\r\n<li>ExtJS</li>\r\n<li>Ember.js</li>\r\n<li>prefix-free</li>\r\n<li>JSBin</li>\r\n<li>JSFiddle</li>\r\n<li>dabblet</li>\r\n<li>Kendo UI</li>\r\n<li>Wijmo</li>\r\n<li>Coffeescript</li>\r\n<li>YUI</li></ul>\r\n\r\n<h3>Results from the Main List</h3>\r\n\r\n<script src="https://gist.github.com/3182689.js?file=gistfile1.txt"></script>\r\n\r\n<h3>Results from the "Other" Submissions</h3>\r\n\r\nThe ones listed below were submitted via the "Other" option and not on the main list.\r\n\r\n<script src="https://gist.github.com/3182707.js?file=gistfile1.txt"></script>\r\n\r\n<h3>A note about Enyo</h3>\r\n\r\n<a href="http://enyojs.com/">EnyoJS</a> is a framework released by HP which looks to have come out of the great work done by Palm. I haven''t used it and don''t have an opinion whether it''s actually awesome or not. I''ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, <strong>MANY</strong> were single Enyo submissions with no other option chosen. Just seemed too odd to me but I''ll put out the data and if someone else wants to publish, go for it.\r\n\r\n<h3>The Raw Data</h3>\r\n\r\nHere''s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/07/EssentialToolsLibsandFrameworksforFrontEndDevelopment.csv">Raw Data from the Survey</a> (.csv)\r\n\r\n', 'The Results of my Essential Tools, Libs and Frameworks for Front-End Development Survey', 0, '', 'inherit', 'open', 'open', '', '1921-revision-18', '', '', '2012-07-26 11:52:34', '2012-07-26 15:52:34', '', 1921, 'http://blog.reybango.com/2012/07/26/1921-revision-18/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1944, 3, '2010-07-21 14:48:17', '2010-07-21 18:48:17', '<p><strong><em>NOTE: I''ve moved the list to it''s own dedicated page so that I can manage it a little easier so for the most up-to-date list, <a href="http://blog.reybango.com/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/">go to the following page</a></em>.</strong></p>\r\n\r\nI''ve been meaning to do a roll-up of top JavaScript, CSS & HTML development tools that I use or have been recommended to me and after having lunch with my bud Brian Wilpon today, I realized I just needed to do it. He asked me what some of the newer tools are and I think this is the best way to help him (and the community in general). It''s definitely not an all-inclusive list so if you see some that you feel I should add or remove, let me know in the comments.\r\n\r\nHere they are by category:\r\n\r\n<strong>Debugging Tools That Make Life MUCH Easier:</strong>\r\n\r\nEffectively debugging JavaScript applications is a royal pain in the derriere and to compile that, the available tools just don''t stand up to those used by managed code developers. Luckily, we do have a decent set of tools that lessens the pain substantially. Firebug is definitely a must have since it incorporates so much DOM & XHR introspection as well as the Web Developer Toolbar. Both are simply awesome. I also love Charles for HTTP sniffing and it''s saved my butt when Firebug couldn''t handle it. \r\n\r\n<a href="http://msdn.microsoft.com/en-us/library/dd565628%28VS.85%29.aspx">IE8 Developer Tools</a> - Microsoft''s browser debugger tools\r\n<a href="http://getfirebug.com/">Firebug</a> - Mozilla''s browser debugger add-on \r\n<a href="http://trac.webkit.org/wiki/WebInspector">WebKit Web Inspector</a> - Webkit''s browser debugger tools\r\n<a href="http://www.fiddler2.com/fiddler2/">Fiddler</a> - HTTP Sniffer. Great for seeing Ajax requests.\r\n<a href="http://www.charlesproxy.com/">Charles</a> - HTTP Sniffer. Great for seeing Ajax requests. (my personal fav)\r\n<a href="http://kevinlangdon.com/serviceCapture/">Service Capture</a> - HTTP Sniffer. Great for seeing Ajax requests.\r\n<a href="http://ajax.dynatrace.com/pages/">dynaTrace Ajax</a> - HTTP performance analyzer\r\n<a href="http://chrispederick.com/work/web-developer/">Web Developer’s Toolbar</a> - All purpose Firefox toolbar to inspect everything on a page\r\n<a href="http://developer.yahoo.com/yslow/">YSlow</a> - Analyzes page performance based on accepted industry best practices.\r\n<a href="http://code.google.com/speed/page-speed/">PageSpeed</a> - Analyzes page performance based on accepted industry best practices.\r\n<a href="http://www.debugbar.com/">DebugBar</a> - An IE plugin that brings advanced debugging features to IE including JS, DOM & HTTP inspection\r\n\r\n<strong>CSS Editors:</strong>\r\n\r\nI prefer to write my CSS code by hand. Call me old-school but many swear by the following CSS editors. CSSEdit by MacRabbit (Mac only) is especially loved by many designers.\r\n\r\n<a href="http://www.topstyle4.com/">TopStyle</a>\r\n<a href="http://www.blumentals.net/rapidcss/">Rapid CSS</a>\r\n<a href="http://www.culturedcode.com/xyle/">Xyle</a>\r\n<a href="http://www.skybound.ca/">Stylizer</a>\r\n<a href="http://www.macrabbit.com/cssedit/">CSSEdit</a>\r\n\r\n<strong>CSS Frameworks:</strong>\r\n\r\nThese frameworks have really taken off. Like their JavaScript brethren, they help to abstract much of the complexity of building consistent layouts in cross-browser fashion. They''re definitely something I need to look into more and from what I''ve read, 960 GS & Blueprint are the ones people are looking at.\r\n\r\n<a href="http://960.gs">960 Grid System</a>\r\n<a href="http://blueprintcss.org/">Blueprint CSS Framework</a>\r\n<a href="http://www.yaml.de/en/">YAML</a>\r\n<a href="http://developer.yahoo.com/yui/grids/">Yahoo YUI Grids CSS</a>\r\n<a href="http://devkick.com/lab/tripoli/">Tripoli</a>\r\n<a href="http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/">Object-Oriented CSS</a>\r\n\r\n<strong>CSS Resets:</strong>\r\n\r\nWant to minimize browser inconsistencies? Then use a CSS reset stylesheet to specify baseline CSS styles that make browser presentation defaults more consistent. \r\n\r\n<a href="http://meyerweb.com/eric/tools/css/reset/">Meyer Reset by Eric Meyer</a>\r\n<a href="http://developer.yahoo.com/yui/reset/">YUI2: Reset CSS</a>\r\n<a href="http://www.iecss.com/">IECSS</a>\r\n\r\n<strong>JavaScript Libraries:</strong>\r\n\r\nI definitely recommend everyone to learn JavaScript as you''ll need it to be a really effective client-side developer. With that said, a good JS library will go a long way to making your development faster and much more stable. These libraries are all very mature and dramatically help to abstract the complexities of cross-browser development. My personal favorite is <a href="http://jquery.com/">jQuery</a>, of which I''m a member of the project team.\r\n\r\n<a href="http://jquery.com/">jQuery</a>\r\n<a href="http://jqueryui.com">jQuery UI</a>\r\n<a href="http://prototypejs.org/">Prototype</a>\r\n<a href="http://mootools.net/">MooTools</a>\r\n<a href="http://dojotoolkit.org/">Dojo</a>\r\n<a href="http://developer.yahoo.com/yui/">YUI</a>\r\n<a href="http://javascriptmvc.com/">JavaScriptMVC</a>\r\n<a href="http://qooxdoo.org/">qooxdoo</a>\r\n<a href="http://extjs.com">Ext JS</a>\r\n<a href="http://labs.adobe.com/technologies/spry/">Adobe Spry</a>\r\n<a href="http://raphaeljs.com/">Raphael.js</a> - simplifies working with vector graphics on the web\r\n<a href="http://labjs.com/">LabJS Dynamic Script Loader</a> - Allows execution and load management of JavaScript files\r\n<a href="http://brianleroux.github.com/lawnchair/">Lawnchair</a> - A lightweight client-side JSON document store\r\n<a href="http://www.thomasfrank.se/sessionvars.html">Sessvars.js</a> - Client-side session data management solution\r\n<a href="http://codebetter.com/blogs/matthew.podwysocki/archive/2010/02/16/introduction-to-the-reactive-extensions-to-javascript.aspx">Reactive Extensions For JS</a>\r\n<a href="http://beebole.com/pure">PURE JS Templating Lib</a>\r\n<a href="http://documentcloud.github.com/underscore/">Underscore.js</a> - Utility lib for jQuery that provides a ton of extended functionality\r\n\r\n<strong>JavaScript Minifiers</strong>\r\n\r\nEvery byte counts when you''re sending files via HTTP and best practices dictate that on a production, you need to optimize all of your files to minimize page load times. Compressing JavaScript code is one of the easiest ways to do that and these tools will help. On the jQuery project, we''ve started using Google''s Closure compiler because it''s generated the best compression. Try all of them out to see which suits you best.\r\n\r\n<a href="http://developer.yahoo.com/yui/compressor/">YUI compressor</a>\r\n<a href="http://code.google.com/closure/compiler/">Closure compiler</a>\r\n<a href="http://www.crockford.com/javascript/jsmin.html">JSMIN</a>\r\n<a href="http://dean.edwards.name/packer/">Dean Edward''s Packer</a>\r\n<a href="http://aspnet.codeplex.com/releases/view/40584">Microsoft Ajax Minifer</a> \r\n<a href="http://shrinksafe.dojotoolkit.org/">Dojo Shrinksafe</a>\r\n\r\n<strong>JavaScript Shells</strong>\r\n\r\nThere are times when you just want to test a snippet of code without actually going through the trouble of creating a full page. That''s where JavaScript shells shine. JSFiddle and JSBin both rock because apart from supporting plain ole JS, they also allow you to include a host of libraries including jQuery, MooTools, & Dojo. \r\n\r\n<a href="http://jsfiddle.net/">jsfiddle.net</a> \r\n<a href="http://jsbin.com/">JSBin</a>\r\n<a href="http://mootools.net/shell/">mootools.net/shell</a> <em>(MooTools-specific)</em>\r\n\r\n<strong>Color Management:</strong>\r\n\r\nAs a programmer, I''m insanely color scheme challenged. I''m inclined to mix yellow with mauve causing a concerted moan to occur across the design community. Luckily, these tools help you choose web safe color schemes that are not only consistent but won''t burn the eyeballs off your site visitors. :)\r\n\r\n<a href="http://www.colourlovers.com/">Colourlovers</a>\r\n<a href="http://kuler.adobe.com/">Kuler</a>\r\n\r\n<strong>Editors and IDEs:</strong>\r\n\r\nI work at Microsoft so you would expect me to be a Visual Studio whiz. Not so. Only recently starting at MS, I''ve only dipped my toe in the VS waters. What I''ve seen though has impressed me but I still have a long way to go before I understand it. If you''re on a Mac, though, I do highly recommend both TextMate and Coda. Both are truly awesome. I''ve used Coda a little more because I liked the UI of it a little better than TextMate''s but TM''s bundle system and ecosystem is amazing. You can get code-complete for just about anything via bundles. For Windows, Notepad++ has been just awesome. I wish it had built-in FTP support like UltraEdit. \r\n\r\n<a href="http://msdn.microsoft.com/en-us/vstudio/default.aspx">Visual Studio</a>\r\n<a href="http://www.microsoft.com/expression/">Expression</a>\r\n<a href="http://macromates.com/">TextMate</a>\r\n<a href="http://panic.com/coda/">Coda</a>\r\n<a href="http://www.ultraedit.com/">UltraEdit</a>\r\n<a href="http://www.activestate.com/komodo/">Komodo IDE</a>\r\n<a href="http://notepad-plus.sourceforge.net/uk/site.htm">Notepad++</a>\r\n<a href="http://notepad2.com/">Notepad2</a>\r\n<a href="http://www.barebones.com/products/bbedit/">BBEdit</a>\r\n<a href="http://www.aptana.org/">Aptana</a>\r\n<a href="http://macrabbit.com/espresso/">Espresso</a>\r\n<a href="http://www.sublimetext.com/">Sublime Text</a>\r\n<a href="http://www.jetbrains.com/webstorm/index.html">WebStorm</a>\r\n<a href="http://www.vim.org/">VIM</a>\r\n<a href="http://www.eclipse.org/">Eclipse</a>\r\n<a href="http://netbeans.org/">Netbeans</a>\r\n<a href="http://www.geany.org/">Geany</a>\r\n\r\n<strong>Wireframing:</strong>\r\n\r\nI know some of you are cowboys (or cowgirls) and you just want to start hacking. Well, for the truly impatient, these tools at least let you wireframe your pages quickly and easily. I''ve used Balsamiq and FlairBuilder and both rock. It seems that FlairBuilder is really cranking it up with some nice features. Both are Adobe AIR apps which means they''re cross-platform.\r\n\r\n<a href="http://www.omnigroup.com/">Omnigraffle</a>\r\n<a href="http://www.balsamiq.com/">Balsamiq</a>\r\n<a href="http://www.flairbuilder.com/">FlairBuilder</a>\r\n<a href="http://office.microsoft.com/en-us/visio/default.aspx">Visio</a>\r\n<a href="http://www.axure.com/">Axure</a>\r\n\r\n<strong>Browser Testing:</strong>\r\n\r\nI''ve been fortunate to have multiple OS versions over the years. My wife would definitely prefer for me to have a couple of less PCs sitting around but it''s let me test out my web apps on a variety of platforms, browsers and OSes. Shoot, I even have a version of IE6! For those with less hardware, these services should definitely help. Note that services like BrowserCam & Gomez are subscription-based but worth the cash if you can afford it.\r\n\r\n<a href="http://www.browsercam.com/Default2.aspx">BrowserCam</a>\r\n<a href="https://browserlab.adobe.com/index.html">Adobe BrowserLab</a>\r\n<a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677&displaylang=en">Microsoft Expression Web SuperPreview for IE</a>\r\n<a href="http://www.gomez.com/products-solutions/products/cross-browser-testing/">Gomez</a>\r\n<a href="http://tredosoft.com/Multiple_IE">TredoSoft MultipleIE</a>\r\n<a href="http://crossbrowsertesting.com/">CrossBrowserTesting</a>\r\n<a href="http://michelf.com/projects/multi-safari/">Multi-Safari</a>\r\n<a href="http://www.browserscope.org/">Browserscope</a>\r\n<a href="http://stevesouders.com/cuzillion/help.php">Cuzillion</a>\r\n<a href="http://www.my-debugbar.com/wiki/IETester/HomePage">IETester</a>\r\n\r\n<strong>Testing (based on the <a href="http://ejohn.org/blog/which-unit-testing-framework/">list by John Resig</a>):</strong>\r\n\r\nThis was a list I snagged from John Resig. Obviously, he''s done a boatload of testing so I know this list rocks. JSLint is the old mainstay created by Douglas Crockford but other have really become increasingly essential to good testing. jQuery developers should definitely be looking at QUnit & jQuery-Lint. The most complete tool is Selenium but it does have a bit of a learning curve. If you''re into determining JS performance, checkout SunSpider, Dromaeo, Google''s V8 Benchmark and JSLitmus. These measure the performance of the JS engine, not your apps.\r\n\r\n<a href="http://jslint.com/">JSLint</a>\r\n<a href="http://github.com/jamespadolsey/jQuery-Lint">jQuery Lint</a>\r\n<a href="http://www.jsunit.net/">JSUnit</a>\r\n<a href="http://seleniumhq.org/projects/core/">Selenium Core</a>\r\n<a href="http://jania.pe.kr/aw/moin.cgi/JSSpec">JSSpec (MooTools)</a>\r\n<a href="http://github.com/tobie/unittest_js/tree/master">UnitTestJS (Prototype)</a>\r\n<a href="http://docs.jquery.com/QUnit">QUnit (jQuery)</a>\r\n<a href="http://docs.dojocampus.org/quickstart/doh">DOH Unit Testing (Dojo)</a>\r\n<a href="http://developer.yahoo.com/yui/yuitest/">YUITest 2</a>\r\n<a href="http://developer.yahoo.com/yui/3/test/">YUITest 3</a>\r\n<a href="https://developer.mozilla.org/En/Mochitest">Mochitest</a>\r\n<a href="http://github.com/nkallen/screw-unit/tree/master">ScrewUnit</a>\r\n<a href="http://jsunittest.com/">JsUnitTest</a>\r\n<a href="http://jsunity.com/">jsUnity</a> \r\n<a href="http://code.google.com/p/js-test-driver/">JsTestDriver</a>\r\n<a href="http://www.thefrontside.net/crosscheck">Crosscheck</a>\r\n<a href="http://groups.google.com/group/envjs">Env.js</a> \r\n<a href="http://fireunit.org/">FireUnit</a>\r\n<a href="http://validator.w3.org/">W3C Markup Validation Service</a>\r\n<a href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a>\r\n<a href="http://www2.webkit.org/perf/sunspider-0.9/sunspider.html">SunSpider</a>\r\n<a href="http://code.google.com/apis/v8/run.html">V8 Benchmark</a>\r\n<a href="http://v2.dromaeo.com/">Dromaeo</a>\r\n<a href="http://broofa.com/Tools/JSLitmus/">JSLitmus</a>\r\n<a href="http://users.skynet.be/mgueury/mozilla/">HTML Validator Firefox Add-on</a>\r\n\r\n<strong>Documentation:</strong>\r\n\r\n<a href="http://developer.yahoo.com/yui/">Yahoo UI Docs</a>\r\n<a href="http://www.programmableweb.com/">APIs</a> - Most comprehensive list of APIs on the web\r\n<a href="http://api.jquery.com/">jQuery Docs</a>\r\n<a href="http://jqueryui.com/demos/">jQuery UI Docs</a>\r\n<a href="http://mootools.net/docs/core">MooTools Docs</a>\r\n<a href="http://api.prototypejs.org/">Prototype Docs</a>\r\n<a href="http://dojotoolkit.org/documentation/">Dojo Docs</a>\r\n<a href="http://json.org/">JSON Reference</a>\r\n<a href="http://en.wikipedia.org/wiki/JSON#JSONP">JSONP</a>\r\n\r\n<h2>Server-Side JavaScript</h2>\r\n\r\n<a href="http://www.mozilla.org/rhino/">Rhino</a>\r\n<a href="http://nodejs.org/">Node.js</a>\r\n<a href="http://narwhaljs.org/">Narwhal.js</a>\r\n<a href="http://commonjs.org/">CommonJS Standards Project</a>\r\n<a href="http://o.sitepen.com/labs/persevere.php">Persevere</a>\r\n<a href="http://en.wikipedia.org/wiki/Comet_%28programming%29">Comet</a>\r\n\r\n<h2>Books</h2>\r\n\r\nThe books below are really a great selection. I have many in my own library and every so often re-read them I''m currently reading <a href="http://www.amazon.com/gp/product/059680279X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=059680279X">High Performance JavaScript</a> by Nicholas Zakas. Another great book is Stoyan Stefanov''s <a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a>. I also highly recommend Steve Souders performance book at the bottom of the list. They''re basically the definitive sources for optimizing your web apps.\r\n\r\n<strong>JavaScript/DOM:</strong>\r\n<ul>\r\n<li><a href="http://www.amazon.com/gp/product/0596101996?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596101996">JavaScript: The Definitive Guide</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596101996" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/0596517742?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596517742">JavaScript: The Good Parts</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596517742" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/047022780X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=047022780X">Professional JavaScript for Web Developers (Wrox Programmer to Programmer)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=047022780X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/1590595335?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590595335">DOM Scripting: Web Design with JavaScript and the Document Object Model</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590595335" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/1590598563?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598563">AdvancED DOM Scripting: Dynamic Web Design Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598563" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/1590596803?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590596803">Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional (Beginning: from Novice to Professional)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590596803" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141">Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847194141" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/1590597273?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597273">Pro JavaScript Techniques</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597273" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/193398869X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=193398869X">Secrets of the JavaScript Ninja</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=193398869X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/0321491939?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321491939">Ajax Security</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321491939" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/0321423305?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321423305">ppk on JavaScript, 1/e</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321423305" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/1590597648?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590597648">Accelerated DOM Scripting with Ajax, APIs, and Libraries</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590597648" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/059680279X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=059680279X">High Performance JavaScript (Build Faster Web Application Interfaces)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=059680279X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n</li>\r\n</ul>\r\n\r\n<strong>JavaScript Libraries:</strong>\r\n<ul>\r\n<li><a href="http://www.amazon.com/gp/product/0596159773?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596159773">jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596159773" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/1847196705?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847196705">Learning jQuery 1.3</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847196705" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/1935182323?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1935182323">jQuery in Action, Second Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1935182323" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1847199720?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847199720">jQuery UI 1.7: The User Interface Library for jQuery</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847199720" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n	<li><a href="http://www.rebeccamurphey.com/jqfundamentals/">Rebecca Murphey''s jQuery Fundamentals Training Materials (Creative Commons License)</a></li>\r\n\r\n\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1934356115?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1934356115">Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences (Pragmatic Programmers)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1934356115" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1430210664?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430210664">Practical Dojo Projects (Practical Projects)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430210664" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/0470452021?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0470452021">Concise Guide to Dojo (Wrox Programmer to Programmer)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0470452021" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/0596516487?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596516487">Dojo: The Definitive Guide</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596516487" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/0321605128?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321605128">The Dojo Toolkit: Visual QuickStart Guide</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321605128" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1430225211?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430225211">Getting StartED with Dojo</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430225211" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1847194583?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194583">MooTools 1.2 Beginner''s Guide</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847194583" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1430209836?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430209836">MooTools Essentials: The Official MooTools Reference for JavaScript™ and Ajax Development (Firstpress)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430209836" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n</li>\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1590599195?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590599195">Practical Prototype and script.aculo.us (Expert''s Voice in Web Development)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590599195" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1934356018?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1934356018">Prototype and script.aculo.us: You Never Knew JavaScript Could Do This! (Pragmatic Programmers)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1934356018" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n</li>\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1933988037?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1933988037">Prototype and Scriptaculous in Action [Ajax]</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1933988037" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1847192327?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847192327">Learning the Yahoo! User Interface library: Develop your next generation web applications with the YUI JavaScript development library.</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847192327" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1847195148?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847195148">Learning Ext JS</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847195148" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n</li>\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1847198708?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847198708">Ext JS 3.0 Cookbook</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1847198708" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n	<li><a href="http://www.amazon.com/gp/product/1935182110?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1935182110">Ext JS in Action</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1935182110" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n</li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/047038459X?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=047038459X">Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools (Wrox Programmer to Programmer)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=047038459X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n</ul>\r\n\r\n\r\n\r\n<strong>HTML & CSS:</strong>\r\n<ul>\r\n<li><a href="http://www.amazon.com/gp/product/1590598040?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1590598040">Pro CSS and HTML Design Patterns</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1590598040" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/1430219203?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1430219203">Web Standards Solutions: The Markup and Style Handbook, Special Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1430219203" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/0321509021?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321509021">Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321509021" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.sitepoint.com/books/cssdesign1/?SID=82b54f50488243b44b6b9c7acb10731a">The Art & Science Of CSS</a>\r\n<a href="http://www.sitepoint.com/books/css2/?SID=82b54f50488243b44b6b9c7acb10731a">HTML Utopia: Designing Without Tables Using CSS</a></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/0980455278?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0980455278">Build Your Own Website The Right Way Using HTML & CSS, 2nd Edition</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0980455278" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/1600330045?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1600330045">Head First HTML with CSS & XHTML</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=1600330045" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n	<li><a href="http://www.webstepbook.com/">Web Programming Step by Step</a></li>\r\n\r\n</ul>\r\n\r\n<strong>Performance:</strong>\r\n<ul>\r\n<li><a href="http://www.amazon.com/gp/product/0596529309?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596529309">High Performance Web Sites: Essential Knowledge for Front-End Engineers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596529309" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n\r\n<li><a href="http://www.amazon.com/gp/product/0596522304?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596522304">Even Faster Web Sites: Performance Best Practices for Web Developers</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0596522304" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></li>\r\n</ul>\r\n', 'The Big List of JavaScript, CSS, and HTML Development Tools, Libraries, Projects, and Books', 0, '', 'inherit', 'open', 'open', '', '664-revision-63', '', '', '2010-07-21 14:48:17', '2010-07-21 18:48:17', '', 664, 'http://blog.reybango.com/2010/07/21/664-revision-63/', 0, 'revision', '', 0),
(1945, 3, '2012-01-09 16:46:55', '2012-01-09 20:46:55', 'Document compatibility defines how a browser renders your website.  The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">explicitly declaring</a> the HTML5 document type:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\nThis markup triggers <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">standards mode</a> in Internet Explorer 9 and 10.  And it also works well in Chrome and Firefox.  Four steps will get your site ready for many browsers and devices:\r\n\r\n<h2>Step 1: Validate that your site uses standards mode</h2>\r\nCheck whether or not your site is currently in standards mode:\r\n<ol>\r\n<li>Open the website in <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">IE10 platform preview</a>.\r\n<ul><li><strong>Note:</strong> You can also follow the same steps to update the docmode for IE9 only without downloading the preview.</li></ul></li> \r\n<li>Press F12 to launch the IE Developer Tools or find it on the <em>Tools</em> menu as shown below: \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png" alt="" title="dev-tool-menu-1" width="243" height="268" class="alignleft size-full wp-image-1806" /></a>\r\n<ul><li><strong>Note:</strong> If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the <a href="http://msdn.microsoft.com/en-us/library/gg589507%28v=VS.85%29.aspx">following tutorial</a>.</li></ul></li> \r\n<li>Check if your site indicates <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> as shown in the toolbar below:\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1-300x39.png" alt="" title="ie-dev-tools-1" width="300" height="39" class="alignleft size-medium wp-image-1808" /></a>\r\n<em>Click to Enlarge</em></li>\r\n<li>If your site is in <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 Standards</em>, <strong>you’re done!</strong>  Note if the Browser Mode and Document Mode of your site are different than above.  A common example is <em>Browser Mode = IE8</em> and <em>Document Mode = Quirks</em> which indicates that your website was designed for older versions of IE and may not be ready for web standards.  \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2-300x42.png" alt="" title="ie-dev-tools-2" width="300" height="42" class="alignleft size-medium wp-image-1809" /></a>\r\n<em>Click to Enlarge</em></li></ol>\r\n\r\n<h2>Step 2: Implement docmode for web standards</h2>\r\nForce IE10 standards mode to test your website:\r\n\r\n<ol><li>Insert [code lang="html"]&lt;!DOCTYPE html&gt;[/code] into your website’s HTML page\r\n<ul><li>Learn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a></li></ul></li>\r\n<li>Reload your page in the browser and check the <em>Browser Mode</em> and <em>Document Mode</em> again using the F12 Developer Tools.  If <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> are not shown, continue below.</li></ol>\r\n\r\n<h2>Step 3: Determine why your site is not in Standards Mode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n\r\n<ol><li>My page is not in Browser Mode: IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website may flagged in <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx">Compatibility View</a> and forced into an older browser mode to ensure the site functions<ul><li><strong>Resolution:</strong> Check if your site is on the list <a href="http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml">here</a>.  Learn more about the Compatibility View list and request removal <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx#removal">here</a>.</li></ul></li></ul></li>\r\n<li>My page is not in Document Mode = IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website’s doctype is invalid or missing\r\n<ul><li><strong>Resolution:</strong> Check for a <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">valid, well-formed doctype</a> like:\r\n[code lang="html"]&lt;!DOCTYPE html&gt;\r\n&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;\r\n&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/code]\r\nLearn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a>.</li></ul></li>\r\n	\r\n<ul><li><strong>Possible Cause:</strong> Docmode being forced via <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx">X-UA-Compatible meta tag</a>\r\n<ul><li><strong>Resolution:</strong> Check for code similar to this in the <head> of the page.\r\n[code lang="html"]&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;\r\n&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; &gt;[/code]\r\n\r\nRemove it and reload your page.  Continue testing.  Learn more about Specifying Document Compatibility Modes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx#SetMode">here</a>.</li></ul></li></li></ol>\r\n\r\n<h2>Step 4: Resolve common IE problems when updating docmode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n<ul><li><strong>Possible Cause:</strong> <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">Conditional comments</a> support browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">conditional comments</a> that run non-standard code.  These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully.  Check for code similar to this:\r\n[code lang="html"]&lt;!--[if IE 8]&gt;\r\n\r\n&lt;p&gt;Welcome to Internet Explorer 8.&lt;/p&gt;\r\n\r\n&lt;![endif]--&gt;\r\n[/code]\r\nRemove it and reload your page.  Continue testing. Learn more about Conditional Comments <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">here</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">User agent sniffing</a> supports browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">user agent sniffing</a>. These are often used to specifically target a browser based on the user agent string presented via the browser mode.  Check for code similar to this:\r\n[code lang="js"]if (version = /MSIE (\\d+\\.\\d+)/.exec(navigator.userAgent)) {\r\n\r\n	isIE = true;\r\n\r\nbrowserVersion = parseFloat(version[1]);\r\n}[/code]\r\nStart by implementing <a href="http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx">feature detection</a> where possible with web standards.  Learn more about User-Agent Strings <a href="http://msdn.microsoft.com/en-us/library/ms537503(v=VS.85).aspx">here</a>. The IE10 User-Agent String is located <a href="http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx">here</a>.</li></ul></li></ul>\r\n\r\n<h2>Other reasons my page does not render correctly:</h2>\r\n\r\n<ul><li><strong>Possible Cause:</strong> Your website may be using browser specific features that are no longer supported.  Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Run the <a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/Default.html">Compatibility Inspector tool</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Learn how to create plug-in free experiences.  A complete step-by-step guide will be available shortly.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be loading browser version-specific CSS files:\r\n<ul><li><strong>Resolution:</strong> Ensure layout is avoiding CSS hacks where possible.  Learn more about investigating CSS issues <a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">here</a>.</li></ul></li></ul>\r\n\r\nA list of common problems is available in the <a href="http://msdn.microsoft.com/en-us/library/ff986083(v=VS.85).aspx">IE Compatibility Cookbook</a>. \r\n\r\nIf you’re unable to update your docmode with these resolution steps, tweet us <a href="http://twitter.com/#!/IE">@IE</a> or check the <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads">Forums on MSDN</a>.\r\n\r\nFor further detail, try these articles:\r\n<ul><li><a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">Defining Document Capability</a> @ MSDN</li>\r\n<li><a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">Investigating Document Mode Issues</a> @ MSDN</li>\r\n<li><a href="http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx">Interoperable Quirks Mode in IE10</a> @ IE Blog</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/">Compatibility Inspector tool</a> @ IETestDrive.com</li>\r\n<li><a href="http://www.w3.org/QA/Tips/Doctype">Don’t Forget to Add a Doctype</a> @ W3C.org</li></ul>\r\n', 'Fix Common IE Problems: Update your Docmode for Web Standards', 0, '', 'inherit', 'open', 'open', '', '1800-revision-35', '', '', '2012-01-09 16:46:55', '2012-01-09 20:46:55', '', 1800, 'http://blog.reybango.com/2012/01/09/1800-revision-35/', 0, 'revision', '', 0),
(2080, 3, '2013-05-25 12:42:31', '2013-05-25 16:42:31', '', 'WP_20130518_006', 0, '', 'inherit', 'open', 'open', '', 'wp_20130518_006', '', '', '2013-05-25 12:42:31', '2013-05-25 16:42:31', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130518_006.jpg', 0, 'attachment', 'image/jpeg', 0),
(2086, 3, '2013-05-25 12:42:43', '2013-05-25 16:42:43', '', 'WP_20130518_012', 0, '', 'inherit', 'open', 'open', '', 'wp_20130518_012', '', '', '2013-05-25 12:42:43', '2013-05-25 16:42:43', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130518_012.jpg', 0, 'attachment', 'image/jpeg', 0),
(2087, 3, '2013-05-25 12:42:45', '2013-05-25 16:42:45', '', 'WP_20130518_013', 0, '', 'inherit', 'open', 'open', '', 'wp_20130518_013', '', '', '2013-05-25 12:42:45', '2013-05-25 16:42:45', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130518_013.jpg', 0, 'attachment', 'image/jpeg', 0),
(2088, 3, '2013-05-25 12:42:46', '2013-05-25 16:42:46', '', 'WP_20130518_014', 0, '', 'inherit', 'open', 'open', '', 'wp_20130518_014', '', '', '2013-05-25 12:42:46', '2013-05-25 16:42:46', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130518_014.jpg', 0, 'attachment', 'image/jpeg', 0),
(2089, 3, '2013-05-25 12:42:48', '2013-05-25 16:42:48', '', 'WP_20130521_001', 0, '', 'inherit', 'open', 'open', '', 'wp_20130521_001', '', '', '2013-05-25 12:42:48', '2013-05-25 16:42:48', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130521_001.jpg', 0, 'attachment', 'image/jpeg', 0),
(2090, 3, '2013-05-25 12:42:50', '2013-05-25 16:42:50', '', 'WP_20130521_002', 0, '', 'inherit', 'open', 'open', '', 'wp_20130521_002', '', '', '2013-05-25 12:42:50', '2013-05-25 16:42:50', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130521_002.jpg', 0, 'attachment', 'image/jpeg', 0),
(2091, 3, '2013-05-25 12:42:53', '2013-05-25 16:42:53', '', 'WP_20130521_003', 0, '', 'inherit', 'open', 'open', '', 'wp_20130521_003', '', '', '2013-05-25 12:42:53', '2013-05-25 16:42:53', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130521_003.jpg', 0, 'attachment', 'image/jpeg', 0),
(2092, 3, '2013-05-25 12:42:54', '2013-05-25 16:42:54', '', 'WP_20130521_004', 0, '', 'inherit', 'open', 'open', '', 'wp_20130521_004', '', '', '2013-05-25 12:42:54', '2013-05-25 16:42:54', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130521_004.jpg', 0, 'attachment', 'image/jpeg', 0),
(2093, 3, '2013-05-25 12:42:56', '2013-05-25 16:42:56', '', 'WP_20130521_005', 0, '', 'inherit', 'open', 'open', '', 'wp_20130521_005', '', '', '2013-05-25 12:42:56', '2013-05-25 16:42:56', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130521_005.jpg', 0, 'attachment', 'image/jpeg', 0),
(2094, 3, '2013-05-25 12:42:58', '2013-05-25 16:42:58', '', 'WP_20130521_006', 0, '', 'inherit', 'open', 'open', '', 'wp_20130521_006', '', '', '2013-05-25 12:42:58', '2013-05-25 16:42:58', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130521_006.jpg', 0, 'attachment', 'image/jpeg', 0),
(2095, 3, '2013-05-25 12:43:00', '2013-05-25 16:43:00', '', 'WP_20130521_007', 0, '', 'inherit', 'open', 'open', '', 'wp_20130521_007', '', '', '2013-05-25 12:43:00', '2013-05-25 16:43:00', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130521_007.jpg', 0, 'attachment', 'image/jpeg', 0),
(2096, 3, '2013-05-25 12:43:02', '2013-05-25 16:43:02', '', 'WP_20130521_009', 0, '', 'inherit', 'open', 'open', '', 'wp_20130521_009', '', '', '2013-05-25 12:43:02', '2013-05-25 16:43:02', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130521_009.jpg', 0, 'attachment', 'image/jpeg', 0),
(2097, 3, '2013-05-25 12:43:04', '2013-05-25 16:43:04', '', 'WP_20130521_011', 0, '', 'inherit', 'open', 'open', '', 'wp_20130521_011', '', '', '2013-05-25 12:43:04', '2013-05-25 16:43:04', '', 2076, 'http://blog.reybango.com/wp-content/uploads/2013/05/WP_20130521_011.jpg', 0, 'attachment', 'image/jpeg', 0),
(2098, 3, '2013-05-25 12:44:58', '2013-05-25 16:44:58', 'I was lucky enough to have a pair of Google Glass to play with for a couple of days. Pretty nifty device and I could definitely see the potential, especially after a great chat with Matt May about them during Google I/O. The possibilities, especially in warehouses and retail operations, are really promising.\n\nI was recently asked about the dimensions so I took a tape measure and took pictures of the device at various angles trying to give decent views of the dimensions. I live in the States and of course we don''t use the metric system so you''ll have to convert measurements on your own. :)\n\nThe gallery shows both the packaging of Glass and the measurements. Note that I don''t have the device with me at the moment so I won''t be able to give you more details.\n\n[gallery ids="2077,2078,2079,2080,2081,2082,2083,2084,2085,2086,2087,2088,2089,2090,2091,2092,2093,2094,2095,2096,2097"]', 'Google Glass Dimensions', 0, '', 'inherit', 'open', 'open', '', '2076-revision', '', '', '2013-05-25 12:44:58', '2013-05-25 16:44:58', '', 2076, 'http://blog.reybango.com/2013/05/25/2076-revision/', 0, 'revision', '', 0);
