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
(1442, 3, '2010-10-11 11:18:42', '2010-10-11 15:18:42', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome Modernizr JavaScript library. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-22', '', '', '2010-10-11 11:18:42', '2010-10-11 15:18:42', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-22/', 0, 'revision', '', 0),
(1443, 3, '2010-10-11 11:25:14', '2010-10-11 15:25:14', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome Modernizr JavaScript library. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n\r\n\r\nThis is where Modernizr''s feature ', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-23', '', '', '2010-10-11 11:25:14', '2010-10-11 15:25:14', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-23/', 0, 'revision', '', 0),
(1444, 3, '2010-10-11 11:25:27', '2010-10-11 15:25:27', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome Modernizr JavaScript library. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n\r\n\r\nThis is where Modernizr''s feature ', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-24', '', '', '2010-10-11 11:25:27', '2010-10-11 15:25:27', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-24/', 0, 'revision', '', 0),
(1445, 3, '2010-10-11 11:31:50', '2010-10-11 15:31:50', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome Modernizr JavaScript library. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, use a new term coined by Alex Sexton called "regressive enhancement" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in Mike Aslup''s jQuery Corners plugin to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-25', '', '', '2010-10-11 11:31:50', '2010-10-11 15:31:50', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-25/', 0, 'revision', '', 0),
(1446, 3, '2010-10-11 11:32:09', '2010-10-11 15:32:09', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome Modernizr JavaScript library. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, use a new term coined by Alex Sexton called "regressive enhancement" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in Mike Aslup''s jQuery Corners plugin to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-26', '', '', '2010-10-11 11:32:09', '2010-10-11 15:32:09', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-26/', 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
(1447, 3, '2010-10-11 11:32:09', '2010-10-11 15:32:09', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome Modernizr JavaScript library. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, use a new term coined by Alex Sexton called "regressive enhancement" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in Mike Aslup''s jQuery Corners plugin to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-27', '', '', '2010-10-11 11:32:09', '2010-10-11 15:32:09', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-27/', 0, 'revision', '', 0),
(1448, 3, '2010-10-11 11:33:46', '2010-10-11 15:33:46', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome Modernizr JavaScript library. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in Mike Aslup''s jQuery Corners plugin to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nThe code is very simple\r\n\r\n\r\n\r\n\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-28', '', '', '2010-10-11 11:33:46', '2010-10-11 15:33:46', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-28/', 0, 'revision', '', 0),
(1449, 3, '2010-10-11 11:36:30', '2010-10-11 15:36:30', '', 'ie8-blog-mod-corners', 0, '', 'inherit', 'open', 'open', '', 'ie8-blog-mod-corners', '', '', '2010-10-11 11:36:30', '2010-10-11 15:36:30', '', 1416, 'http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png', 0, 'attachment', 'image/png', 0),
(1450, 3, '2010-10-11 11:33:52', '2010-10-11 15:33:52', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome Modernizr JavaScript library. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in Mike Aslup''s jQuery Corners plugin to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nThe code is very simple\r\n\r\n\r\n\r\n\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-29', '', '', '2010-10-11 11:33:52', '2010-10-11 15:33:52', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-29/', 0, 'revision', '', 0),
(1451, 3, '2010-10-11 11:37:47', '2010-10-11 15:37:47', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-30', '', '', '2010-10-11 11:37:47', '2010-10-11 15:37:47', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-30/', 0, 'revision', '', 0),
(1452, 3, '2010-10-11 11:41:10', '2010-10-11 15:41:10', '', 'HTML5 Semantic Tags using Polyfill to Degrade Gracefully', 0, '', 'inherit', 'open', 'open', '', 'polyfills', '', '', '2010-10-11 11:41:10', '2010-10-11 15:41:10', '', 1416, 'http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip', 0, 'attachment', 'application/zip', 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
(1453, 3, '2010-10-11 11:37:52', '2010-10-11 15:37:52', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-31', '', '', '2010-10-11 11:37:52', '2010-10-11 15:37:52', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-31/', 0, 'revision', '', 0),
(1454, 3, '2010-10-11 11:44:16', '2010-10-11 15:44:16', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n<h2>Download the Code</h2>\r\n\r\nI hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C''s desire to ensure that the HTML5 specification is up-to-snuff, I think it''s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.\r\n\r\nIf you''d like to play with the code directly, I''ve packaged it up in a .zip file and you can download it here:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip''>Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)</a>\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-32', '', '', '2010-10-11 11:44:16', '2010-10-11 15:44:16', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-32/', 0, 'revision', '', 0),
(1455, 3, '2010-10-11 11:44:23', '2010-10-11 15:44:23', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n<h2>Download the Code</h2>\r\n\r\nI hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C''s desire to ensure that the HTML5 specification is up-to-snuff, I think it''s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.\r\n\r\nIf you''d like to play with the code directly, I''ve packaged it up in a .zip file and you can download it here:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip''>Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)</a>\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-33', '', '', '2010-10-11 11:44:23', '2010-10-11 15:44:23', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-33/', 0, 'revision', '', 0),
(1456, 3, '2010-10-11 11:44:47', '2010-10-11 15:44:47', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n<h2>Download the Code</h2>\r\n\r\nI hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C''s desire to ensure that the HTML5 specification is up-to-snuff, I think it''s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.\r\n\r\nIf you''d like to play with the code directly, I''ve packaged it up in a .zip file and you can download it here:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip''>Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)</a>\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" to make HTML5 and CSS3 Usable Today', 0, '', 'inherit', 'open', 'open', '', '1416-revision-34', '', '', '2010-10-11 11:44:47', '2010-10-11 15:44:47', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-34/', 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
(1457, 3, '2010-10-11 11:44:52', '2010-10-11 15:44:52', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n<h2>Download the Code</h2>\r\n\r\nI hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C''s desire to ensure that the HTML5 specification is up-to-snuff, I think it''s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.\r\n\r\nIf you''d like to play with the code directly, I''ve packaged it up in a .zip file and you can download it here:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip''>Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)</a>\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" to make HTML5 and CSS3 Usable Today', 0, '', 'inherit', 'open', 'open', '', '1416-revision-35', '', '', '2010-10-11 11:44:52', '2010-10-11 15:44:52', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-35/', 0, 'revision', '', 0),
(1458, 3, '2010-10-11 11:45:45', '2010-10-11 15:45:45', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 and CSS3 specifications and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n<h2>Download the Code</h2>\r\n\r\nI hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C''s desire to ensure that the HTML5 specification is up-to-snuff, I think it''s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.\r\n\r\nIf you''d like to play with the code directly, I''ve packaged it up in a .zip file and you can download it here:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip''>Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)</a>\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" to make HTML5 and CSS3 Usable Today', 0, '', 'inherit', 'open', 'open', '', '1416-revision-36', '', '', '2010-10-11 11:45:45', '2010-10-11 15:45:45', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-36/', 0, 'revision', '', 0),
(1459, 3, '2010-10-11 11:45:51', '2010-10-11 15:45:51', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 and CSS3 specifications and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n<h2>Download the Code</h2>\r\n\r\nI hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C''s desire to ensure that the HTML5 specification is up-to-snuff, I think it''s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.\r\n\r\nIf you''d like to play with the code directly, I''ve packaged it up in a .zip file and you can download it here:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip''>Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)</a>\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" to make HTML5 and CSS3 Usable Today', 0, '', 'inherit', 'open', 'open', '', '1416-revision-37', '', '', '2010-10-11 11:45:51', '2010-10-11 15:45:51', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-37/', 0, 'revision', '', 0),
(1460, 3, '2010-10-11 11:47:36', '2010-10-11 15:47:36', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 and CSS3 specifications and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n<h2>Download the Code</h2>\r\n\r\nI hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C''s desire to ensure that the HTML5 specification is up-to-snuff, I think it''s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.\r\n\r\nI would highly recommend reviewing this <a href="http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">VERY BIG LIST of polyfills and shims</a> which can provide much of the missing capabilities in older browsers. \r\n\r\nIf you''d like to play with the code directly, I''ve packaged it up in a .zip file and you can download it here:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip''>Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)</a>\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" to make HTML5 and CSS3 Usable Today', 0, '', 'inherit', 'open', 'open', '', '1416-revision-38', '', '', '2010-10-11 11:47:36', '2010-10-11 15:47:36', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-38/', 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
(1461, 3, '2010-10-11 11:47:42', '2010-10-11 15:47:42', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 and CSS3 specifications and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 tags. Further, in order to get IE6-8 to recognize these tags, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it seems to be some type of parse bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n<h2>Download the Code</h2>\r\n\r\nI hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C''s desire to ensure that the HTML5 specification is up-to-snuff, I think it''s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.\r\n\r\nI would highly recommend reviewing this <a href="http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">VERY BIG LIST of polyfills and shims</a> which can provide much of the missing capabilities in older browsers. \r\n\r\nIf you''d like to play with the code directly, I''ve packaged it up in a .zip file and you can download it here:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip''>Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)</a>\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" to make HTML5 and CSS3 Usable Today', 0, '', 'inherit', 'open', 'open', '', '1416-revision-39', '', '', '2010-10-11 11:47:42', '2010-10-11 15:47:42', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-39/', 0, 'revision', '', 0),
(1462, 3, '2010-10-11 11:49:24', '2010-10-11 15:49:24', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 and CSS3 specifications and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 elements. Further, in order to get IE6-8 to recognize these elements, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it may be some type of parser bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n<h2>Download the Code</h2>\r\n\r\nI hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C''s desire to ensure that the HTML5 specification is up-to-snuff, I think it''s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.\r\n\r\nI would highly recommend reviewing this <a href="http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">VERY BIG LIST of polyfills and shims</a> which can provide much of the missing capabilities in older browsers. \r\n\r\nIf you''d like to play with the code directly, I''ve packaged it up in a .zip file and you can download it here:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip''>Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)</a>\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" to make HTML5 and CSS3 Usable Today', 0, '', 'inherit', 'open', 'open', '', '1416-revision-40', '', '', '2010-10-11 11:49:24', '2010-10-11 15:49:24', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-40/', 0, 'revision', '', 0),
(1463, 3, '2010-10-11 11:49:29', '2010-10-11 15:49:29', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 and CSS3 specifications and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 elements. Further, in order to get IE6-8 to recognize these elements, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it may be some type of parser bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n<h2>Download the Code</h2>\r\n\r\nI hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C''s desire to ensure that the HTML5 specification is up-to-snuff, I think it''s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.\r\n\r\nI would highly recommend reviewing this <a href="http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">VERY BIG LIST of polyfills and shims</a> which can provide much of the missing capabilities in older browsers. \r\n\r\nIf you''d like to play with the code directly, I''ve packaged it up in a .zip file and you can download it here:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip''>Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)</a>\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" to make HTML5 and CSS3 Usable Today', 0, '', 'inherit', 'open', 'open', '', '1416-revision-41', '', '', '2010-10-11 11:49:29', '2010-10-11 15:49:29', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-41/', 0, 'revision', '', 0),
(1464, 3, '2010-10-11 11:50:40', '2010-10-11 15:50:40', 'There''s been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.\r\n\r\n<h2>What''s a Polyfill?</h2>\r\n\r\nI really love Paul Irish''s definition since it sums it up perfectly:\r\n\r\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\r\n\r\nThe basic premise is that most older browsers may not have all of the features of the HTML5 and CSS3 specifications and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. \r\n\r\nSo for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here''s the layout code I used. \r\n\r\n[code lang="html"]\r\n&lt;!doctype html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\r\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\r\n     \r\n    &lt;!-- !CSS --&gt;\r\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\r\n  \r\n&lt;/head&gt;\r\n \r\n&lt;body&gt;\r\n    \r\n	&lt;header&gt;\r\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\r\n	&lt;/header&gt;\r\n\r\n    &lt;nav&gt;\r\n    	&lt;ul&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\r\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\r\n		&lt;/ul&gt;\r\n    &lt;/nav&gt;\r\n    	\r\n	&lt;section&gt;\r\n\r\n        &lt;header&gt;\r\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\r\n	    &lt;/header&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\r\n\r\n            &lt;footer&gt;\r\n                October 7, 2010 - comments( 0 )\r\n            &lt;/footer&gt;\r\n        &lt;/article&gt;\r\n\r\n        &lt;article&gt;\r\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\r\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\r\n            &lt;footer&gt;\r\n                October 5, 2010 - comments( 3 )\r\n            &lt;/footer&gt;\r\n	    &lt;/article&gt;		\r\n\r\n	&lt;/section&gt;\r\n		\r\n	&lt;footer&gt;\r\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\r\n	&lt;/footer&gt;\r\n\r\n&lt;/body&gt;\r\n &lt;/html&gt;\r\n[/code]\r\n\r\nI used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don''t have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. \r\n\r\nThen, I added the styles I needed to get my page to look the way I wanted:\r\n\r\n[code lang="css"]\r\n/* Global */\r\nbody { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }\r\na { color : #33CC33; } \r\na:hover { text-decoration: none; }\r\n\r\n/* Header */\r\nheader h1 { font-size: 48px; }\r\n\r\nnav { overflow: auto; margin-bottom: 25px; }\r\nnav li {float:left; padding-right: 5px; }\r\n\r\n/* Main Content Area */\r\nsection { width: 500px; font-size: 12px; }\r\nsection h1 { font-size: 16px; }\r\n\r\narticle { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }\r\narticle footer { text-align: right; margin-right:5px; } \r\narticle h1 { font-size: 12px; }\r\n[/code]\r\n\r\nand when I tested it in Firefox 3.6.10, it looked exactly like I expected:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>\r\n\r\nbut look what happened when I tried to bring up the page in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf-300x239.png" alt="" title="ie8-blog-nopf" width="300" height="239" class="alignleft size-medium wp-image-1434" /></a>\r\n\r\nNone of the stylings were available because IE8 doesn''t recognize the new HTML5 elements. Further, in order to get IE6-8 to recognize these elements, you explicitly have to create the DOM nodes for them using JavaScript. The exact reason is unclear but it may be some type of parser bug. The following code needs to be in the &lt;head&gt; section of your page in order for the elements to be created and recognized by IE6-8:\r\n\r\n[code lang="js"]\r\ndocument.createElement(&quot;header&quot;);\r\ndocument.createElement(&quot;nav&quot;);\r\ndocument.createElement(&quot;section&quot;);\r\ndocument.createElement(&quot;article&quot;);\r\ndocument.createElement(&quot;footer&quot;);\r\n[/code]\r\n\r\nIt''s a little bothersome to do that but it''s not a massive bit of code at least.\r\n\r\n<h2>Enter Modernizr</h2>\r\n\r\nThe code I just listed to create your HTML5 elements is certainly useful but work has already been done to handle that for us via the awesome <a href="http://www.modernizr.com/">Modernizr JavaScript library</a>. Not only does it act as a polyfill, creating these new elements for us automatically, but it offers a ton of detection capabilities for features of both HTML5 & CSS3. This allows you to determine how you will offer fallback support when a feature isn''t available.\r\n\r\nIncluding Modernizr.js is incredibly easy since it''s only a one line script tag like this:\r\n\r\n[code language="lang=&quot;html"]\r\n&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;\r\n[/code]\r\n\r\nAs I mentioned, Modernizr is smart enough to determine when new semantic elements need to be created and will handle the dynamic creation of elements such as &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; instead of you having to write JavaScript code to do it. So once I''ve added Modernizr to my page, I get the following results in IE8:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-300x176.png" alt="" title="ie8-blog-mod" width="300" height="176" class="alignleft size-medium wp-image-1441" /></a>\r\n\r\nNow you''re probably looking at this screenshot and say, "Hey, you have no rounded corners!". You''re right because I used the CSS3 <em>border-radius</em> property to create rounder corners for all of my &lt;article&gt; elements and IE8 doesn''t support that property. The important thing, though, is that IE8 now recognizes these new elements and allowed me to style them.\r\n\r\n<h2>But What About those Rounder Corners?</h2>\r\n\r\nGeez, you guys are so demanding! Okay, so the cool thing is that Modernizr offers detection of key features of HTML5 *and* CSS3 and with that, we can determine if something like <em>border-radius</em> is available and if not, using a new term coined by Alex Sexton, we''ll use "<strong>regressive enhancement</strong>" to provide similar capabilities for older browsers. In this case, we''re going to see if border-radius is available and if not, lazyload in <a href="http://jquery.malsup.com/corner/">Mike Aslup''s jQuery Corners plugin</a> to fill in the gap:\r\n\r\n[code lang="js"]\r\n    &lt;!-- Load jQuery --&gt;\r\n    &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;\r\n    \r\n    &lt;script type=&quot;text/javascript&quot;&gt;\r\n        // See if border-radius is available \r\n        if (!Modernizr.borderradius) {\r\n\r\n            // If not, then load in the jQuery Corners plugin and apply rounded corners to the article elements\r\n            $.getScript(&quot;js/jquery.corner.js&quot;, function () {\r\n                $(&quot;article&quot;).corner();\r\n            });\r\n\r\n        }\r\n    &lt;/script&gt;\r\n\r\n[/code]\r\n\r\nNow, when the code detects that <em>border-radius</em> is not available, it will just use the Corners jQuery plugin instead and render the following in any browser that doesn''t support the property:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod-corners-300x176.png" alt="" title="ie8-blog-mod-corners" width="300" height="176" class="alignleft size-medium wp-image-1449" /></a>\r\n\r\n\r\n<h2>Download the Code</h2>\r\n\r\nI hope this post has shown you how polyfills can allow you to use HTML5 & CSS3 today. While I respect the W3C''s desire to ensure that the HTML5 specification is up-to-snuff, I think it''s important to realize that developers are resourceful and professional enough to create best practices that allow us to build apps with these new features right now.\r\n\r\nI would highly recommend reviewing this <a href="http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">VERY BIG LIST of polyfills and shims</a> which can provide much of the missing capabilities in older browsers. \r\n\r\nIf you''d like to play with the code directly, I''ve packaged it up in a .zip file and you can download it here:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/10/polyfills.zip''>Code for HTML5 Semantic Tags using Polyfill to Degrade Gracefully (.zip)</a>\r\n\r\n\r\n', 'How Polyfills "fill in the gaps" to make HTML5 and CSS3 Usable Today', 0, '', 'inherit', 'open', 'open', '', '1416-revision-42', '', '', '2010-10-11 11:50:40', '2010-10-11 15:50:40', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-42/', 0, 'revision', '', 0),
(1466, 3, '2010-10-21 21:41:27', '2010-10-22 01:41:27', 'I did an <a href="http://channel9.msdn.com/Shows/Web+Camps+TV/Web-Camps-TV-9-Script-Junkie-jQuery-jQuery-Mobile-and-the-dance">interview with James Senior on Microsoft''s Channel 9</a>. We chatted about Script Junkie, the site I manage for Microsoft. We also chatted about the jQuery conference and how awesome it was going to be. Then, in the last 30 seconds of the interview, something just came over me. Well, Ralph Whitbeck though it would be awesome to create a video of that "special part" and air it to the jQuery Conference attendees. Here is his handy work:\r\n\r\n<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>', 'Something Just Came Over Me...', 0, '', 'publish', 'open', 'open', '', 'something-just-came-over-me', '', '', '2010-10-22 14:05:38', '2010-10-22 18:05:38', '', 0, 'http://blog.reybango.com/?p=1466', 0, 'post', '', 15),
(1467, 3, '2010-10-21 21:39:45', '2010-10-22 01:39:45', 'I did an interview with James Senior on Microsoft''s Channel 9. We chatted about Script Junkie, the site I manage for Microsoft. We also chatted about the jQuery conference and how awesome it was going to be. Then, in the last 30 seconds of the interview, something just came over me....\n\n<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>', 'My Crazy Dance Moves', 0, '', 'inherit', 'open', 'open', '', '1466-revision', '', '', '2010-10-21 21:39:45', '2010-10-22 01:39:45', '', 1466, 'http://blog.reybango.com/2010/10/21/1466-revision/', 0, 'revision', '', 0),
(1468, 3, '2010-10-21 21:39:51', '2010-10-22 01:39:51', 'I did an <a href="https://channel9.msdn.com/Shows/Web+Camps+TV/Web-Camps-TV-9-Script-Junkie-jQuery-jQuery-Mobile-and-the-dance">interview with James Senior on Microsoft''s Channel 9</a>. We chatted about Script Junkie, the site I manage for Microsoft. We also chatted about the jQuery conference and how awesome it was going to be. Then, in the last 30 seconds of the interview, something just came over me....\r\n\r\n<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>', 'My Crazy Dance Moves', 0, '', 'inherit', 'open', 'open', '', '1466-revision-2', '', '', '2010-10-21 21:39:51', '2010-10-22 01:39:51', '', 1466, 'http://blog.reybango.com/2010/10/21/1466-revision-2/', 0, 'revision', '', 0),
(1469, 3, '2010-10-21 21:40:09', '2010-10-22 01:40:09', 'I did an <a href="https://channel9.msdn.com/Shows/Web+Camps+TV/Web-Camps-TV-9-Script-Junkie-jQuery-jQuery-Mobile-and-the-dance">interview with James Senior on Microsoft''s Channel 9</a>. We chatted about Script Junkie, the site I manage for Microsoft. We also chatted about the jQuery conference and how awesome it was going to be. Then, in the last 30 seconds of the interview, something just came over me....\r\n\r\n<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>', 'Something Just Came Over Me...', 0, '', 'inherit', 'open', 'open', '', '1466-revision-3', '', '', '2010-10-21 21:40:09', '2010-10-22 01:40:09', '', 1466, 'http://blog.reybango.com/2010/10/21/1466-revision-3/', 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
(1470, 3, '2010-10-21 21:40:14', '2010-10-22 01:40:14', 'I did an <a href="https://channel9.msdn.com/Shows/Web+Camps+TV/Web-Camps-TV-9-Script-Junkie-jQuery-jQuery-Mobile-and-the-dance">interview with James Senior on Microsoft''s Channel 9</a>. We chatted about Script Junkie, the site I manage for Microsoft. We also chatted about the jQuery conference and how awesome it was going to be. Then, in the last 30 seconds of the interview, something just came over me....\r\n\r\n<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>', 'Something Just Came Over Me...', 0, '', 'inherit', 'open', 'open', '', '1466-revision-4', '', '', '2010-10-21 21:40:14', '2010-10-22 01:40:14', '', 1466, 'http://blog.reybango.com/2010/10/21/1466-revision-4/', 0, 'revision', '', 0),
(1471, 3, '2010-10-21 21:41:27', '2010-10-22 01:41:27', 'I did an <a href="https://channel9.msdn.com/Shows/Web+Camps+TV/Web-Camps-TV-9-Script-Junkie-jQuery-jQuery-Mobile-and-the-dance">interview with James Senior on Microsoft''s Channel 9</a>. We chatted about Script Junkie, the site I manage for Microsoft. We also chatted about the jQuery conference and how awesome it was going to be. Then, in the last 30 seconds of the interview, something just came over me....\r\n\r\n<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>', 'Something Just Came Over Me...', 0, '', 'inherit', 'open', 'open', '', '1466-revision-5', '', '', '2010-10-21 21:41:27', '2010-10-22 01:41:27', '', 1466, 'http://blog.reybango.com/2010/10/21/1466-revision-5/', 0, 'revision', '', 0),
(1472, 3, '2010-10-21 21:42:32', '2010-10-22 01:42:32', 'I did an <a href="https://channel9.msdn.com/Shows/Web+Camps+TV/Web-Camps-TV-9-Script-Junkie-jQuery-jQuery-Mobile-and-the-dance">interview with James Senior on Microsoft''s Channel 9</a>. We chatted about Script Junkie, the site I manage for Microsoft. We also chatted about the jQuery conference and how awesome it was going to be. Then, in the last 30 seconds of the interview, something just came over me. Well, Ralph Whitbeck though it would be awesome to create a video of that "special part" and air it to the jQuery Conference attendees. Here is his handy work:\r\n\r\n<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>', 'Something Just Came Over Me...', 0, '', 'inherit', 'open', 'open', '', '1466-autosave', '', '', '2010-10-21 21:42:32', '2010-10-22 01:42:32', '', 1466, 'http://blog.reybango.com/2010/10/21/1466-autosave/', 0, 'revision', '', 0),
(1473, 3, '2010-10-21 21:42:23', '2010-10-22 01:42:23', 'I did an <a href="https://channel9.msdn.com/Shows/Web+Camps+TV/Web-Camps-TV-9-Script-Junkie-jQuery-jQuery-Mobile-and-the-dance">interview with James Senior on Microsoft''s Channel 9</a>. We chatted about Script Junkie, the site I manage for Microsoft. We also chatted about the jQuery conference and how awesome it was going to be. Then, in the last 30 seconds of the interview, something just came over me. Well, Ralph Whitbeck though it would be awesome to create a video of that "special part" and air it to the jQuery Conference attendees. Here is his handy work:\r\n\r\n<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YAIPCp_BOGU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>', 'Something Just Came Over Me...', 0, '', 'inherit', 'open', 'open', '', '1466-revision-6', '', '', '2010-10-21 21:42:23', '2010-10-22 01:42:23', '', 1466, 'http://blog.reybango.com/2010/10/21/1466-revision-6/', 0, 'revision', '', 0),
(1475, 3, '2010-11-12 12:20:08', '2010-11-12 16:20:08', 'Next week, <a href="http://www.environmentsforhumans.com/">Environments for Humans</a> will be hosting their 2nd <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit Online Conference</a> and what a great event it will be. The speakers (myself included) are just an who''s-who of the jQuery world so you can be sure to get awesome presentations during the event. Lined up are experts like:\r\n\r\n<ul>\r\n<li>John Resig</li>\r\n<li>Jonathan Snook</li>\r\n<li>Richard Worth</li>\r\n<li>Emily Lewis</li>\r\n<li>...and a lot more.</li>\r\n</ul>\r\n\r\nThe event is divided into two tracks targeting designers on the 16th and developers on the 17th. I''ll be presenting on the 17th and will be discussing how to use the new jQuery Templates plugin to make code layout much easier.\r\n\r\nYou can register for the event by going to the <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit website</a> and when you do, be sure to take advantage of the following code for a 20% discount on your registration: <em><strong>JQUERY2010</strong></em>\r\n\r\nThe great thing about this is by registering, you''re also helping out the jQuery project as <a href="http://www.environmentsforhumans.com/">Environments for Humans</a> is donating part of the proceeds of the conference to the jQuery Foundation.\r\n\r\nI''m looking forward to this event and I hope to see you there as well!\r\n', 'Presenting at the jQuery Summit Online Conference on November 17th', 0, '', 'publish', 'open', 'open', '', 'presenting-at-the-jquery-summit-online-conference-on-november-17th', '', '', '2010-11-12 12:20:08', '2010-11-12 16:20:08', '', 0, 'http://blog.reybango.com/?p=1475', 0, 'post', '', 0),
(1476, 3, '2010-11-12 12:17:20', '2010-11-12 16:17:20', 'Next week, <a href="http://www.environmentsforhumans.com/">Environments for Humans</a> will be hosting their 2nd <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit Online Conference</a> and what a great event it will be. The speakers (myself included) are just an who''s-who of the jQuery world so you can be sure to get awesome presentations during the event. Lined up are experts like:\n\n<ul>\n<li>John Resig</li>\n<li>Jonathan Snook</li>\n<li>Richard Worth</li>\n<li>Emily Lewis</li>\n<li>...and a lot more.</li>\n</ul>\n\nThe event is divided into two tracks targeting designers on the 16th and developers on the 17th. I''ll be presenting on the 17th and will be discussing how to use the new jQuery Templates plugin to make code layout much easier.\n\nYou can register for the event by going to the <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit website</a> and when you do, be sure to take advantage of the following code for a 20% discount on your registration: <strong>JQUERY2010</strong><em></em>\n', 'Presenting at the jQuery Summit Online Conference', 0, '', 'inherit', 'open', 'open', '', '1475-revision', '', '', '2010-11-12 12:17:20', '2010-11-12 16:17:20', '', 1475, 'http://blog.reybango.com/2010/11/12/1475-revision/', 0, 'revision', '', 0),
(1477, 3, '2010-11-12 12:17:46', '2010-11-12 16:17:46', 'Next week, <a href="http://www.environmentsforhumans.com/">Environments for Humans</a> will be hosting their 2nd <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit Online Conference</a> and what a great event it will be. The speakers (myself included) are just an who''s-who of the jQuery world so you can be sure to get awesome presentations during the event. Lined up are experts like:\r\n\r\n<ul>\r\n<li>John Resig</li>\r\n<li>Jonathan Snook</li>\r\n<li>Richard Worth</li>\r\n<li>Emily Lewis</li>\r\n<li>...and a lot more.</li>\r\n</ul>\r\n\r\nThe event is divided into two tracks targeting designers on the 16th and developers on the 17th. I''ll be presenting on the 17th and will be discussing how to use the new jQuery Templates plugin to make code layout much easier.\r\n\r\nYou can register for the event by going to the <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit website</a> and when you do, be sure to take advantage of the following code for a 20% discount on your registration: <em><strong>JQUERY2010</strong></em>\r\n\r\nI''m looking forward to this event and I hope to see you there as well!\r\n', 'Presenting at the jQuery Summit Online Conference', 0, '', 'inherit', 'open', 'open', '', '1475-revision-2', '', '', '2010-11-12 12:17:46', '2010-11-12 16:17:46', '', 1475, 'http://blog.reybango.com/2010/11/12/1475-revision-2/', 0, 'revision', '', 0),
(1478, 3, '2010-11-12 12:18:05', '2010-11-12 16:18:05', 'Next week, <a href="http://www.environmentsforhumans.com/">Environments for Humans</a> will be hosting their 2nd <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit Online Conference</a> and what a great event it will be. The speakers (myself included) are just an who''s-who of the jQuery world so you can be sure to get awesome presentations during the event. Lined up are experts like:\r\n\r\n<ul>\r\n<li>John Resig</li>\r\n<li>Jonathan Snook</li>\r\n<li>Richard Worth</li>\r\n<li>Emily Lewis</li>\r\n<li>...and a lot more.</li>\r\n</ul>\r\n\r\nThe event is divided into two tracks targeting designers on the 16th and developers on the 17th. I''ll be presenting on the 17th and will be discussing how to use the new jQuery Templates plugin to make code layout much easier.\r\n\r\nYou can register for the event by going to the <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit website</a> and when you do, be sure to take advantage of the following code for a 20% discount on your registration: <em><strong>JQUERY2010</strong></em>\r\n\r\nI''m looking forward to this event and I hope to see you there as well!\r\n', 'Presenting at the jQuery Summit Online Conference on November 17th', 0, '', 'inherit', 'open', 'open', '', '1475-revision-3', '', '', '2010-11-12 12:18:05', '2010-11-12 16:18:05', '', 1475, 'http://blog.reybango.com/2010/11/12/1475-revision-3/', 0, 'revision', '', 0),
(1479, 3, '2010-11-12 12:19:45', '2010-11-12 16:19:45', 'Next week, <a href="http://www.environmentsforhumans.com/">Environments for Humans</a> will be hosting their 2nd <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit Online Conference</a> and what a great event it will be. The speakers (myself included) are just an who''s-who of the jQuery world so you can be sure to get awesome presentations during the event. Lined up are experts like:\r\n\r\n<ul>\r\n<li>John Resig</li>\r\n<li>Jonathan Snook</li>\r\n<li>Richard Worth</li>\r\n<li>Emily Lewis</li>\r\n<li>...and a lot more.</li>\r\n</ul>\r\n\r\nThe event is divided into two tracks targeting designers on the 16th and developers on the 17th. I''ll be presenting on the 17th and will be discussing how to use the new jQuery Templates plugin to make code layout much easier.\r\n\r\nYou can register for the event by going to the <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit website</a> and when you do, be sure to take advantage of the following code for a 20% discount on your registration: <em><strong>JQUERY2010</strong></em>\r\n\r\nThe great thing about this is by registering, you''re also helping out the jQuery project as <a href="http://www.environmentsforhumans.com/">Environments for Humans</a> is donating part of the proceeds of the conference to the jQuery Foundation.\r\n\r\nI''m looking forward to this event and I hope to see you there as well!\r\n', 'Presenting at the jQuery Summit Online Conference on November 17th', 0, '', 'inherit', 'open', 'open', '', '1475-revision-4', '', '', '2010-11-12 12:19:45', '2010-11-12 16:19:45', '', 1475, 'http://blog.reybango.com/2010/11/12/1475-revision-4/', 0, 'revision', '', 0),
(1480, 3, '2010-11-12 12:19:55', '2010-11-12 16:19:55', 'Next week, <a href="http://www.environmentsforhumans.com/">Environments for Humans</a> will be hosting their 2nd <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit Online Conference</a> and what a great event it will be. The speakers (myself included) are just an who''s-who of the jQuery world so you can be sure to get awesome presentations during the event. Lined up are experts like:\r\n\r\n<ul>\r\n<li>John Resig</li>\r\n<li>Jonathan Snook</li>\r\n<li>Richard Worth</li>\r\n<li>Emily Lewis</li>\r\n<li>...and a lot more.</li>\r\n</ul>\r\n\r\nThe event is divided into two tracks targeting designers on the 16th and developers on the 17th. I''ll be presenting on the 17th and will be discussing how to use the new jQuery Templates plugin to make code layout much easier.\r\n\r\nYou can register for the event by going to the <a href="http://www.environmentsforhumans.com/2010/jquery-summit/">jQuery Summit website</a> and when you do, be sure to take advantage of the following code for a 20% discount on your registration: <em><strong>JQUERY2010</strong></em>\r\n\r\nThe great thing about this is by registering, you''re also helping out the jQuery project as <a href="http://www.environmentsforhumans.com/">Environments for Humans</a> is donating part of the proceeds of the conference to the jQuery Foundation.\r\n\r\nI''m looking forward to this event and I hope to see you there as well!\r\n', 'Presenting at the jQuery Summit Online Conference on November 17th', 0, '', 'inherit', 'open', 'open', '', '1475-revision-5', '', '', '2010-11-12 12:19:55', '2010-11-12 16:19:55', '', 1475, 'http://blog.reybango.com/2010/11/12/1475-revision-5/', 0, 'revision', '', 0),
(1482, 3, '2010-11-29 10:36:47', '2010-11-29 14:36:47', 'There are a number of resources on the Internet for reading up on JavaScript but very few viable options for actually exchanging ideas with extremely knowledgeable JavaScript developers, especially when it comes to just wanting to know about JavaScript itself and not a specific JS library. This was a pain point I personally felt when I wanted to learn more about the language and be able to have "mentors" that could help me better understand JS and ECMAScript.\r\n\r\nAfter chatting a bit with JavaScript expert <a href="http://twitter.com/#!/abozhilov">Asen Bozhilov</a> about this, we decided to fill that hole by launching a new mailing list called <a href="http://jsmentors.com/">JSMentors</a> that allows developers to get to know the language and find the expert guidance in a friendly and professional environment. The list offers developers a place to:\r\n<ul>\r\n                        <li>Discuss ECMA-262 standard</li>\r\n                        <li>Discuss different implementations of ECMA-262</li>\r\n                        <li>Discuss different host environments of JavaScript</li>   \r\n                        <li>Discuss implementation of algorithms in JavaScript</li> \r\n                        <li>Discuss your library design</li> \r\n                        <li>Review your code</li>\r\n                        <li>Review your book on JavaScript topic</li>\r\n                        <li>Review your article on JavaScript topic</li>\r\n</ul>\r\n\r\nWe also wanted to provide a list that was <strong>professional, courteous, and friendly to developers of all skill levels</strong>. Too many forums, newsgroups and lists look down on beginners or questions deemed too introductory and we wanted to ensure that JSMentors didn''t fall into that same hole. So we created a set of simple rules. Via the JSMentors mailing list you must not:\r\n                    <ul>\r\n                        <li>Insult other subscribers</li>\r\n                        <li>Post racism</li>\r\n                        <li>Spam publications</li>\r\n                    </ul>       \r\n\r\nSo far it''s been working great and developers are getting the mentoring that they desperately want and need. And the great thing is that the mentors are a who''s-who of the JavaScript world. Check out this list:\r\n\r\n<ul>\r\n					    <li>Garrett Smith</li>\r\n					    <li>Juriy Zaytsev a.k.a. kangax</li>\r\n					    <li>Dmitry A. Soshnikov</li>\r\n					    <li>Steven Levithan</li>					    \r\n					    <li>John-David Dalton</li>\r\n					    <li>Stoyan Stefanov</li>\r\n					    <li>Benjamin Rosseaux a.k.a. BeRo</li>\r\n					    <li>Diego Perini</li>\r\n					    <li>Angus Croll</li>\r\n					    <li>Peter van der Zee</li>\r\n					    <li>Christian C. Salvadó</li>\r\n					    <li>Peter Michaux</li>\r\n				    </ul>\r\n\r\nOne important thing to note is that the main focus of the list is <strong>the JavaScript language</strong> and while you can post about JavaScript libraries, you''re more likely to get a better answer in a library''s specific support forum or list than on JSMentors.com.\r\n\r\nAsen and I would like to invite developers to join <a href="http://jsmentors.com/">JSMentors.com</a> and create a productive list to help everyone become better JavaScript developers and help push the web forward.\r\n', 'JSMentors.com - The Mailing List to Learn JavaScript in a Professional and Courteous Environment', 0, '', 'publish', 'open', 'open', '', 'jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment', '', '', '2010-11-29 10:36:47', '2010-11-29 14:36:47', '', 0, 'http://blog.reybango.com/?p=1482', 0, 'post', '', 3),
(1483, 3, '2010-11-29 10:35:28', '2010-11-29 14:35:28', 'There are a number of resources on the Internet for reading up on JavaScript but very few viable options for actually exchanging ideas with extremely knowledgeable JavaScript developers, especially when it comes to just wanting to know about JavaScript itself and not a specific JS library. This was a pain point I personally felt when I wanted to learn more about the language and be able to have "mentors" that could help me better understand JS and ECMAScript.\n\nAfter chatting a bit with JavaScript expert <a href="http://twitter.com/#!/abozhilov">Asen Bozhilov</a> about this, we decided to fill that hole by launching a new mailing list called <a href="http://jsmentors.com/">JSMentors</a> that allows developers to get to know the language and find the expert guidance in a friendly and professional environment. The list offers developers a place to:\n<ul>\n                        <li>Discuss ECMA-262 standard</li>\n                        <li>Discuss different implementations of ECMA-262</li>\n                        <li>Discuss different host environments of JavaScript</li>   \n                        <li>Discuss implementation of algorithms in JavaScript</li> \n                        <li>Discuss your library design</li> \n                        <li>Review your code</li>\n                        <li>Review your book on JavaScript topic</li>\n                        <li>Review your article on JavaScript topic</li>\n</ul>\n\nWe also wanted to provide a list that was <strong>professional, courteous, and friendly to developers of all skill levels</strong>. Too many forums, newsgroups and lists look down on beginners or questions deemed too introductory and we wanted to ensure that JSMentors didn''t fall into that same hole. So we created a set of simple rules. Via the JSMentors mailing list you must not:\n                    <ul>\n                        <li>Insult other subscribers</li>\n                        <li>Post racism</li>\n                        <li>Spam publications</li>\n                    </ul>       \n\nSo far it''s been working great and developers are getting the mentoring that they desperately want and need. And the great thing is that the mentors are a who''s-who of the JavaScript world. Check out this list:\n\n<ul>\n					    <li>Garrett Smith</li>\n					    <li>Juriy Zaytsev a.k.a. kangax</li>\n					    <li>Dmitry A. Soshnikov</li>\n					    <li>Steven Levithan</li>					    \n					    <li>John-David Dalton</li>\n					    <li>Stoyan Stefanov</li>\n					    <li>Benjamin Rosseaux a.k.a. BeRo</li>\n					    <li>Diego Perini</li>\n					    <li>Angus Croll</li>\n					    <li>Peter van der Zee</li>\n					    <li>Christian C. Salvadó</li>\n					    <li>Peter Michaux</li>\n				    </ul>\n\nOne important thing to note is that the main focus of the list is <strong>the JavaScript language</strong> and while you can post about JavaScript libraries, you''re more likely to get a better answer in a library''s specific support forum or list than on JSMentors.com.\n\nAsen and I would like to invite developers to join <a href="http://jsmentors.com/">JSMentors.com</a> and create a productive list to help everyone become better JavaScript developers and help push the web forward.\n', 'JSMentors.com - ', 0, '', 'inherit', 'open', 'open', '', '1482-revision', '', '', '2010-11-29 10:35:28', '2010-11-29 14:35:28', '', 1482, 'http://blog.reybango.com/2010/11/29/1482-revision/', 0, 'revision', '', 0),
(1484, 3, '2010-11-29 10:36:04', '2010-11-29 14:36:04', 'There are a number of resources on the Internet for reading up on JavaScript but very few viable options for actually exchanging ideas with extremely knowledgeable JavaScript developers, especially when it comes to just wanting to know about JavaScript itself and not a specific JS library. This was a pain point I personally felt when I wanted to learn more about the language and be able to have "mentors" that could help me better understand JS and ECMAScript.\r\n\r\nAfter chatting a bit with JavaScript expert <a href="http://twitter.com/#!/abozhilov">Asen Bozhilov</a> about this, we decided to fill that hole by launching a new mailing list called <a href="http://jsmentors.com/">JSMentors</a> that allows developers to get to know the language and find the expert guidance in a friendly and professional environment. The list offers developers a place to:\r\n<ul>\r\n                        <li>Discuss ECMA-262 standard</li>\r\n                        <li>Discuss different implementations of ECMA-262</li>\r\n                        <li>Discuss different host environments of JavaScript</li>   \r\n                        <li>Discuss implementation of algorithms in JavaScript</li> \r\n                        <li>Discuss your library design</li> \r\n                        <li>Review your code</li>\r\n                        <li>Review your book on JavaScript topic</li>\r\n                        <li>Review your article on JavaScript topic</li>\r\n</ul>\r\n\r\nWe also wanted to provide a list that was <strong>professional, courteous, and friendly to developers of all skill levels</strong>. Too many forums, newsgroups and lists look down on beginners or questions deemed too introductory and we wanted to ensure that JSMentors didn''t fall into that same hole. So we created a set of simple rules. Via the JSMentors mailing list you must not:\r\n                    <ul>\r\n                        <li>Insult other subscribers</li>\r\n                        <li>Post racism</li>\r\n                        <li>Spam publications</li>\r\n                    </ul>       \r\n\r\nSo far it''s been working great and developers are getting the mentoring that they desperately want and need. And the great thing is that the mentors are a who''s-who of the JavaScript world. Check out this list:\r\n\r\n<ul>\r\n					    <li>Garrett Smith</li>\r\n					    <li>Juriy Zaytsev a.k.a. kangax</li>\r\n					    <li>Dmitry A. Soshnikov</li>\r\n					    <li>Steven Levithan</li>					    \r\n					    <li>John-David Dalton</li>\r\n					    <li>Stoyan Stefanov</li>\r\n					    <li>Benjamin Rosseaux a.k.a. BeRo</li>\r\n					    <li>Diego Perini</li>\r\n					    <li>Angus Croll</li>\r\n					    <li>Peter van der Zee</li>\r\n					    <li>Christian C. Salvadó</li>\r\n					    <li>Peter Michaux</li>\r\n				    </ul>\r\n\r\nOne important thing to note is that the main focus of the list is <strong>the JavaScript language</strong> and while you can post about JavaScript libraries, you''re more likely to get a better answer in a library''s specific support forum or list than on JSMentors.com.\r\n\r\nAsen and I would like to invite developers to join <a href="http://jsmentors.com/">JSMentors.com</a> and create a productive list to help everyone become better JavaScript developers and help push the web forward.\r\n', 'JSMentors.com - The Mailing List to Learn JavaScript in a Professional and Courteous Environment', 0, '', 'inherit', 'open', 'open', '', '1482-revision-2', '', '', '2010-11-29 10:36:04', '2010-11-29 14:36:04', '', 1482, 'http://blog.reybango.com/2010/11/29/1482-revision-2/', 0, 'revision', '', 0),
(1485, 3, '2010-11-29 10:36:19', '2010-11-29 14:36:19', 'There are a number of resources on the Internet for reading up on JavaScript but very few viable options for actually exchanging ideas with extremely knowledgeable JavaScript developers, especially when it comes to just wanting to know about JavaScript itself and not a specific JS library. This was a pain point I personally felt when I wanted to learn more about the language and be able to have "mentors" that could help me better understand JS and ECMAScript.\r\n\r\nAfter chatting a bit with JavaScript expert <a href="http://twitter.com/#!/abozhilov">Asen Bozhilov</a> about this, we decided to fill that hole by launching a new mailing list called <a href="http://jsmentors.com/">JSMentors</a> that allows developers to get to know the language and find the expert guidance in a friendly and professional environment. The list offers developers a place to:\r\n<ul>\r\n                        <li>Discuss ECMA-262 standard</li>\r\n                        <li>Discuss different implementations of ECMA-262</li>\r\n                        <li>Discuss different host environments of JavaScript</li>   \r\n                        <li>Discuss implementation of algorithms in JavaScript</li> \r\n                        <li>Discuss your library design</li> \r\n                        <li>Review your code</li>\r\n                        <li>Review your book on JavaScript topic</li>\r\n                        <li>Review your article on JavaScript topic</li>\r\n</ul>\r\n\r\nWe also wanted to provide a list that was <strong>professional, courteous, and friendly to developers of all skill levels</strong>. Too many forums, newsgroups and lists look down on beginners or questions deemed too introductory and we wanted to ensure that JSMentors didn''t fall into that same hole. So we created a set of simple rules. Via the JSMentors mailing list you must not:\r\n                    <ul>\r\n                        <li>Insult other subscribers</li>\r\n                        <li>Post racism</li>\r\n                        <li>Spam publications</li>\r\n                    </ul>       \r\n\r\nSo far it''s been working great and developers are getting the mentoring that they desperately want and need. And the great thing is that the mentors are a who''s-who of the JavaScript world. Check out this list:\r\n\r\n<ul>\r\n					    <li>Garrett Smith</li>\r\n					    <li>Juriy Zaytsev a.k.a. kangax</li>\r\n					    <li>Dmitry A. Soshnikov</li>\r\n					    <li>Steven Levithan</li>					    \r\n					    <li>John-David Dalton</li>\r\n					    <li>Stoyan Stefanov</li>\r\n					    <li>Benjamin Rosseaux a.k.a. BeRo</li>\r\n					    <li>Diego Perini</li>\r\n					    <li>Angus Croll</li>\r\n					    <li>Peter van der Zee</li>\r\n					    <li>Christian C. Salvadó</li>\r\n					    <li>Peter Michaux</li>\r\n				    </ul>\r\n\r\nOne important thing to note is that the main focus of the list is <strong>the JavaScript language</strong> and while you can post about JavaScript libraries, you''re more likely to get a better answer in a library''s specific support forum or list than on JSMentors.com.\r\n\r\nAsen and I would like to invite developers to join <a href="http://jsmentors.com/">JSMentors.com</a> and create a productive list to help everyone become better JavaScript developers and help push the web forward.\r\n', 'JSMentors.com - The Mailing List to Learn JavaScript in a Professional and Courteous Environment', 0, '', 'inherit', 'open', 'open', '', '1482-revision-3', '', '', '2010-11-29 10:36:19', '2010-11-29 14:36:19', '', 1482, 'http://blog.reybango.com/2010/11/29/1482-revision-3/', 0, 'revision', '', 0),
(1523, 3, '2010-12-15 10:31:15', '2010-12-15 14:31:15', '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/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=tmm_pap_title_0?ie=UTF8&qid=1342201950&sr=1-1">Professional JavaScript for Web Developers (Wrox Programmer to Programmer)</a></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/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=tmm_pap_title_0?ie=UTF8&qid=1342201950&sr=1-1">Professional JavaScript for Web Developers (Wrox Programmer to Programmer)</a></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://javascriptrocks.com/">JavaScript Rocks</a></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', 'What to Read to Get Up to Speed in JavaScript', 0, '', 'publish', 'open', 'open', '', 'what-to-read-to-get-up-to-speed-in-javascript', '', '\nhttp://blog.reybango.com/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/#books-js', '2012-07-13 13:54:13', '2012-07-13 17:54:13', '', 0, 'http://blog.reybango.com/?p=1523', 0, 'post', '', 62),
(1487, 3, '2010-12-02 11:12:19', '2010-12-02 15:12:19', 'I posted earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. <a href="http://james.padolsey.com/javascript/javascripts-dark-alley/">I''m not alone in this feeling</a>. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating <a href="http://jsmentors.com/">JSMentors.com</a>. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>No insulting other subscribers</li>\r\n<li>No posting racism</li>\r\n<li>No spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my drivers for this list. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'publish', 'open', 'open', '', 'why-we-built-the-jsmentors-com-javascript-mailing-list', '', '\nhttp://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/', '2010-12-02 11:12:19', '2010-12-02 15:12:19', '', 0, 'http://blog.reybango.com/?p=1487', 0, 'post', '', 5);
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
(1488, 3, '2010-12-02 10:35:38', '2010-12-02 14:35:38', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\n\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a>. CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. And I regretted it.\n\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. ', 'Why We Built the JSMentors.com Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision', '', '', '2010-12-02 10:35:38', '2010-12-02 14:35:38', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision/', 0, 'revision', '', 0),
(1489, 3, '2010-12-02 10:43:48', '2010-12-02 14:43:48', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\n\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a>. CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\n\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful.\n\n\n', 'Why We Built the JSMentors.com Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-2', '', '', '2010-12-02 10:43:48', '2010-12-02 14:43:48', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-2/', 0, 'revision', '', 0),
(1490, 3, '2010-12-02 10:44:49', '2010-12-02 14:44:49', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\n\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a>. CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\n\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\n\nSo I began chatting with Asen Bozhilov about this and how I wo\n', 'Why We Built the JSMentors.com Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-3', '', '', '2010-12-02 10:44:49', '2010-12-02 14:44:49', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-3/', 0, 'revision', '', 0),
(1491, 3, '2010-12-02 10:50:56', '2010-12-02 14:50:56', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a>. CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\nSo I began chatting with Asen Bozhilov about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. I also wanted to see many of the non-confrontational experts on CLJ serve as mentors and be able to share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating JSMentors.com. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n</ul>\r\n\r\n\r\n', 'Why We Built the JSMentors.com Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-4', '', '', '2010-12-02 10:50:56', '2010-12-02 14:50:56', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-4/', 0, 'revision', '', 0),
(1492, 3, '2010-12-02 10:51:01', '2010-12-02 14:51:01', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a>. CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\nSo I began chatting with Asen Bozhilov about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. I also wanted to see many of the non-confrontational experts on CLJ serve as mentors and be able to share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating JSMentors.com. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n</ul>\r\n\r\n\r\n', 'Why We Built the JSMentors.com Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-5', '', '', '2010-12-02 10:51:01', '2010-12-02 14:51:01', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-5/', 0, 'revision', '', 0),
(1493, 3, '2010-12-02 10:54:54', '2010-12-02 14:54:54', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a>. CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with Asen Bozhilov about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. I also wanted to see many of the non-confrontational experts on CLJ serve as mentors and be able to share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating JSMentors.com. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>Insult other subscribers</li>\r\n<li>Post racism</li>\r\n<li>Spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n', 'Why We Built the JSMentors.com Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-6', '', '', '2010-12-02 10:54:54', '2010-12-02 14:54:54', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-6/', 0, 'revision', '', 0),
(1494, 3, '2010-12-02 10:54:59', '2010-12-02 14:54:59', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a>. CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with Asen Bozhilov about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. I also wanted to see many of the non-confrontational experts on CLJ serve as mentors and be able to share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating JSMentors.com. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>Insult other subscribers</li>\r\n<li>Post racism</li>\r\n<li>Spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n', 'Why We Built the JSMentors.com Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-7', '', '', '2010-12-02 10:54:59', '2010-12-02 14:54:59', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-7/', 0, 'revision', '', 0),
(1495, 3, '2010-12-02 11:04:50', '2010-12-02 15:04:50', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a>. CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating JSMentors.com. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>Insult other subscribers</li>\r\n<li>Post racism</li>\r\n<li>Spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my motivations. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-8', '', '', '2010-12-02 11:04:50', '2010-12-02 15:04:50', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-8/', 0, 'revision', '', 0),
(1496, 3, '2010-12-02 11:05:07', '2010-12-02 15:05:07', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating JSMentors.com. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>Insult other subscribers</li>\r\n<li>Post racism</li>\r\n<li>Spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my motivations. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-9', '', '', '2010-12-02 11:05:07', '2010-12-02 15:05:07', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-9/', 0, 'revision', '', 0),
(1497, 3, '2010-12-02 11:05:16', '2010-12-02 15:05:16', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating JSMentors.com. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>Insult other subscribers</li>\r\n<li>Post racism</li>\r\n<li>Spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my motivations. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-10', '', '', '2010-12-02 11:05:16', '2010-12-02 15:05:16', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-10/', 0, 'revision', '', 0),
(1498, 3, '2010-12-02 11:05:41', '2010-12-02 15:05:41', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating <a href="http://jsmentors.com/">JSMentors.com</a>. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>Insult other subscribers</li>\r\n<li>Post racism</li>\r\n<li>Spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my motivations. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-11', '', '', '2010-12-02 11:05:41', '2010-12-02 15:05:41', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-11/', 0, 'revision', '', 0),
(1499, 3, '2010-12-02 11:05:46', '2010-12-02 15:05:46', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating <a href="http://jsmentors.com/">JSMentors.com</a>. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>Insult other subscribers</li>\r\n<li>Post racism</li>\r\n<li>Spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my motivations. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-12', '', '', '2010-12-02 11:05:46', '2010-12-02 15:05:46', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-12/', 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
(1500, 3, '2010-12-02 11:08:22', '2010-12-02 15:08:22', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. <a href="http://james.padolsey.com/javascript/javascripts-dark-alley/">I''m not alone in this feeling</a>. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating <a href="http://jsmentors.com/">JSMentors.com</a>. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>Insult other subscribers</li>\r\n<li>Post racism</li>\r\n<li>Spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my motivations. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-13', '', '', '2010-12-02 11:08:22', '2010-12-02 15:08:22', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-13/', 0, 'revision', '', 0),
(1501, 3, '2010-12-02 11:08:27', '2010-12-02 15:08:27', 'I announced earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. <a href="http://james.padolsey.com/javascript/javascripts-dark-alley/">I''m not alone in this feeling</a>. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating <a href="http://jsmentors.com/">JSMentors.com</a>. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>Insult other subscribers</li>\r\n<li>Post racism</li>\r\n<li>Spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my motivations. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-14', '', '', '2010-12-02 11:08:27', '2010-12-02 15:08:27', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-14/', 0, 'revision', '', 0),
(1502, 3, '2010-12-02 11:09:52', '2010-12-02 15:09:52', 'I posted earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. <a href="http://james.padolsey.com/javascript/javascripts-dark-alley/">I''m not alone in this feeling</a>. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating <a href="http://jsmentors.com/">JSMentors.com</a>. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>Insult other subscribers</li>\r\n<li>Post racism</li>\r\n<li>Spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my motivations. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-15', '', '', '2010-12-02 11:09:52', '2010-12-02 15:09:52', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-15/', 0, 'revision', '', 0),
(1503, 3, '2010-12-02 11:09:56', '2010-12-02 15:09:56', 'I posted earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. <a href="http://james.padolsey.com/javascript/javascripts-dark-alley/">I''m not alone in this feeling</a>. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating <a href="http://jsmentors.com/">JSMentors.com</a>. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>Insult other subscribers</li>\r\n<li>Post racism</li>\r\n<li>Spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my motivations. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-16', '', '', '2010-12-02 11:09:56', '2010-12-02 15:09:56', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-16/', 0, 'revision', '', 0),
(1504, 3, '2010-12-02 11:10:51', '2010-12-02 15:10:51', 'I posted earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. <a href="http://james.padolsey.com/javascript/javascripts-dark-alley/">I''m not alone in this feeling</a>. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating <a href="http://jsmentors.com/">JSMentors.com</a>. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>No insulting other subscribers</li>\r\n<li>No posting racism</li>\r\n<li>No spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my motivations. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-17', '', '', '2010-12-02 11:10:51', '2010-12-02 15:10:51', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-17/', 0, 'revision', '', 0),
(1505, 3, '2010-12-02 11:10:55', '2010-12-02 15:10:55', 'I posted earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. <a href="http://james.padolsey.com/javascript/javascripts-dark-alley/">I''m not alone in this feeling</a>. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating <a href="http://jsmentors.com/">JSMentors.com</a>. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>No insulting other subscribers</li>\r\n<li>No posting racism</li>\r\n<li>No spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my motivations. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-18', '', '', '2010-12-02 11:10:55', '2010-12-02 15:10:55', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-18/', 0, 'revision', '', 0),
(1506, 3, '2010-12-02 11:11:54', '2010-12-02 15:11:54', 'I posted earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. <a href="http://james.padolsey.com/javascript/javascripts-dark-alley/">I''m not alone in this feeling</a>. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating <a href="http://jsmentors.com/">JSMentors.com</a>. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>No insulting other subscribers</li>\r\n<li>No posting racism</li>\r\n<li>No spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my drivers for this list. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-19', '', '', '2010-12-02 11:11:54', '2010-12-02 15:11:54', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-19/', 0, 'revision', '', 0),
(1507, 3, '2010-12-02 11:11:59', '2010-12-02 15:11:59', 'I posted earlier this week <a href="http://blog.reybango.com/2010/11/29/jsmentors-com-the-mailing-list-to-learn-javascript-in-a-professional-and-courteous-environment/">about the launch of the JSMentors.com mailing list</a>. So far the response has been amazing. The list has grown from 344 on Nov 29 to 900+ today. Just phenomenal growth and a testament to the need of the list. But where did this idea come from?\r\n\r\n<h2>comp.lang.javascript Was Not for Me</h2>\r\n\r\nI''ve been involved in the JavaScript community for some time, especially with the jQuery JavaScript library project. I''ve been fortunate to make a lot of friends who have helped me overcome many of the pitfalls and hurdles normally associated with becoming a JavaScript developer. As I began feeling more confident, I did what I feel most people do when they want to advance their skills to the next level and ventured over to <a href="http://groups.google.com/group/comp.lang.javascript/topics">comp.lang.javascript</a> (CLJ). CLJ has a long history due to its roots in the newsgroup mediums which predated forums as the main method of communicating about many topics. I had heard that the developers there were top notch and you could find great content. To me, this was the obvious place to go. So I went. <strong>And I regretted it.</strong>\r\n\r\nEverything people said was true. There are many incredibly smart and savvy JavaScript developers there; I would say some of the best in the world. The problem I encountered was a consistent lack of manners, courtesy and respect that completely overshadowed any of the conversations that were going on. <a href="http://james.padolsey.com/javascript/javascripts-dark-alley/">I''m not alone in this feeling</a>. And this seemed to be happening due to a small but vocal minority that tended to hijack any thread and turn them into their own chest-thumping diatribe. I''ve dealt with tough crowds before but even I was shocked by what was happening here. Couple that with the insane amount of spam being posted there, I knew that *I* wouldn''t be successful in this environment (CLJ) in spite of some of the great information being posted. Notice how I highlighted "*I*". That''s because CLJ may be perfectly suited for others. I know <a href="http://perfectionkills.com/">several</a> <a href="http://dhtmlkitchen.com/">developers</a> <a href="http://www.netben.nl/">who</a> participate and find it useful. It just wasn''t for me.\r\n\r\n<h2>A Community Resource</h2>\r\n\r\nSo I began chatting with <a href="http://asenbozhilov.com">Asen Bozhilov</a> about this and explained how I would love to see a list where anyone who wanted to become a better JavaScript developer could go to and participate in a courteous, respectful and professional environment. It was also important to have as many of the non-confrontational experts on CLJ serve as mentors and share their knowledge with people who genuinely wanted to learn but didn''t want to be shot down or berated due to their skill level. So Asen & I set about creating <a href="http://jsmentors.com/">JSMentors.com</a>. Asen is one of this super experts and he has very close ties with many of the experts on CLJ. After chatting with them a bit, many found this to be a great idea, especially since it offered them:\r\n<ul>\r\n	<li>A chance to teach best practices to an ever-growing community of developers</li>\r\n	<li>A medium to publish content that they felt was important</li>\r\n	<li>An opportunity for the JavaScript world to meet these top developers and begin learning from some of the best</li>\r\n</ul>\r\n\r\nThe important part was that each of these mentors understood that this list was going to be very different and that our goal was to nurture a community. And we made the rules of the list perfectly clear to ensure no confusion:\r\n\r\n<ul>\r\n<li>No insulting other subscribers</li>\r\n<li>No posting racism</li>\r\n<li>No spam publications</li>\r\n</ul>\r\n\r\nThis had to be different from CLJ to work. It had to focus not only on the language but also the community.\r\n\r\n<h2>JSMentors.com is Born</h2>\r\n\r\nThe list was launched with little fanfare. We wanted it to grow organically to see how people would react and that was a great tact. Since launching, we''ve steadily grown the mailing list as well as the <a href="http://jsmentors.com/">list of mentors</a>. The great thing is that we''re getting top-level developers involved who would never had considered participating in CLJ due to the tough nature of communication there. This was exactly what we wanted. A place where developers of ALL skill levels can go and exchange ideas in a professional setting. It''s not to say that occasionally there won''t be disagreements. That''s normal. But Asen & I actively monitor the list and we''re adamant about the rules we''ve set and maintaining a good list. Ultimately, we want everyone to become better developers and yes, I have a little selfish motivation myself as the opportunity to learn from so many top developers is one my drivers for this list. And I think that''s a good thing. :)\r\n', 'Why We Built the JSMentors.com JavaScript Mailing List', 0, '', 'inherit', 'open', 'open', '', '1487-revision-20', '', '', '2010-12-02 11:11:59', '2010-12-02 15:11:59', '', 1487, 'http://blog.reybango.com/2010/12/02/1487-revision-20/', 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
(1508, 3, '2010-09-20 11:40:28', '2010-09-20 15:40:28', 'I''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<a href="http://dhtmlx.com/">DHTMLX</a>\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<a href="http://litmusapp.com/">Litmus</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	<li><a href="http://www.amazon.com/gp/product/0321660773?ie=UTF8&tag=rebasbl-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321660773">Microformats Made Simple</a><img src="http://www.assoc-amazon.com/e/ir?t=rebasbl-20&l=as2&o=1&a=0321660773" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />\r\n</li>\r\n\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', '', '897-revision-6', '', '', '2010-09-20 11:40:28', '2010-09-20 15:40:28', '', 897, 'http://blog.reybango.com/2010/09/20/897-revision-6/', 0, 'revision', '', 0);
