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
(1342, 3, '2010-09-16 11:28:08', '2010-09-16 15:28:08', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-23', '', '', '2010-09-16 11:28:08', '2010-09-16 15:28:08', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-23/', 0, 'revision', '', 0),
(1343, 3, '2010-09-16 11:28:13', '2010-09-16 15:28:13', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-24', '', '', '2010-09-16 11:28:13', '2010-09-16 15:28:13', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-24/', 0, 'revision', '', 0),
(1344, 3, '2010-09-16 11:36:50', '2010-09-16 15:36:50', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-25', '', '', '2010-09-16 11:36:50', '2010-09-16 15:36:50', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-25/', 0, 'revision', '', 0),
(1345, 3, '2010-09-16 11:36:55', '2010-09-16 15:36:55', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-26', '', '', '2010-09-16 11:36:55', '2010-09-16 15:36:55', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-26/', 0, 'revision', '', 0),
(1346, 3, '2010-09-16 12:10:18', '2010-09-16 16:10:18', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-27', '', '', '2010-09-16 12:10:18', '2010-09-16 16:10:18', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-27/', 0, 'revision', '', 0),
(1347, 3, '2010-09-16 12:11:08', '2010-09-16 16:11:08', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n\r\n<h2>Screencast</h2>\r\n\r\nTo actually see how the pinning works and how jump lists appear, I created a screencast that explains the whole process:\r\n\r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-28', '', '', '2010-09-16 12:11:08', '2010-09-16 16:11:08', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-28/', 0, 'revision', '', 0),
(1348, 3, '2010-09-16 12:11:13', '2010-09-16 16:11:13', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n\r\n<h2>Screencast</h2>\r\n\r\nTo actually see how the pinning works and how jump lists appear, I created a screencast that explains the whole process:\r\n\r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-29', '', '', '2010-09-16 12:11:13', '2010-09-16 16:11:13', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-29/', 0, 'revision', '', 0),
(1349, 3, '2010-09-16 12:11:51', '2010-09-16 16:11:51', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n\r\n<h2>Screencast</h2>\r\n\r\nTo actually see how the pinning works and how jump lists appear, I created a screencast that explains the whole process:\r\n\r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-30', '', '', '2010-09-16 12:11:51', '2010-09-16 16:11:51', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-30/', 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
(1350, 3, '2010-09-16 12:21:05', '2010-09-16 16:21:05', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n\r\n<h2>Screencast</h2>\r\n\r\nTo actually see how the pinning works and how jump lists appear, I created a screencast that explains the whole process:\r\n\r\n<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/DM-Tq-EMTVg?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/DM-Tq-EMTVg?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>\r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-31', '', '', '2010-09-16 12:21:05', '2010-09-16 16:21:05', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-31/', 0, 'revision', '', 0),
(1351, 3, '2010-09-16 12:21:13', '2010-09-16 16:21:13', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n\r\n<h2>Screencast</h2>\r\n\r\nTo actually see how the pinning works and how jump lists appear, I created a screencast that explains the whole process:\r\n\r\n<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/DM-Tq-EMTVg?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/DM-Tq-EMTVg?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>\r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-32', '', '', '2010-09-16 12:21:13', '2010-09-16 16:21:13', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-32/', 0, 'revision', '', 0),
(1352, 3, '2010-09-16 12:25:25', '2010-09-16 16:25:25', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n\r\n<h2>Screencast</h2>\r\n\r\nTo actually see how the pinning works and how jump lists appear, I created a screencast that explains the whole process:\r\n\r\n<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/DM-Tq-EMTVg?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/DM-Tq-EMTVg?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="480"></embed></object>\r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-33', '', '', '2010-09-16 12:25:25', '2010-09-16 16:25:25', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-33/', 0, 'revision', '', 0),
(1353, 3, '2010-09-16 12:26:21', '2010-09-16 16:26:21', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n\r\n<h2>Screencast</h2>\r\n\r\nTo actually see how the pinning works and how jump lists appear, I created a screencast that explains the whole process:\r\n\r\n<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/DM-Tq-EMTVg?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/DM-Tq-EMTVg?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="480"></embed></object>\r\n', 'How to Add Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-34', '', '', '2010-09-16 12:26:21', '2010-09-16 16:26:21', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-34/', 0, 'revision', '', 0),
(1354, 3, '2010-09-16 12:26:47', '2010-09-16 16:26:47', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n\r\n<h2>Screencast</h2>\r\n\r\nTo actually see how the pinning works and how jump lists appear, I created a screencast that explains the whole process:\r\n\r\n<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/DM-Tq-EMTVg?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/DM-Tq-EMTVg?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="480"></embed></object>\r\n', 'How to Add Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-35', '', '', '2010-09-16 12:26:47', '2010-09-16 16:26:47', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-35/', 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
(1355, 3, '2010-07-21 14:44:08', '2010-07-21 18:44:08', '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</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-5', '', '', '2010-07-21 14:44:08', '2010-07-21 18:44:08', '', 897, 'http://blog.reybango.com/2010/07/21/897-revision-5/', 0, 'revision', '', 0),
(1357, 3, '2010-09-21 14:49:17', '2010-09-21 18:49:17', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \n\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\n\n\n', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision', '', '', '2010-09-21 14:49:17', '2010-09-21 18:49:17', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision/', 0, 'revision', '', 0),
(1358, 3, '2010-09-21 14:51:17', '2010-09-21 18:51:17', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \n\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\n\nThe gist of it is that you can take any page that you create a\n\n\n', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-2', '', '', '2010-09-21 14:51:17', '2010-09-21 18:51:17', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-2/', 0, 'revision', '', 0),
(1359, 3, '2010-09-21 15:00:05', '2010-09-21 19:00:05', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\n\r\n', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-3', '', '', '2010-09-21 15:00:05', '2010-09-21 19:00:05', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-3/', 0, 'revision', '', 0),
(1360, 3, '2010-09-21 15:11:50', '2010-09-21 19:11:50', '', 'export-1', 0, '', 'inherit', 'open', 'open', '', 'export-1', '', '', '2010-09-21 15:11:50', '2010-09-21 19:11:50', '', 1356, 'http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png', 0, 'attachment', 'image/png', 0),
(1361, 3, '2010-09-21 15:12:28', '2010-09-21 19:12:28', '', 'export-2', 0, '', 'inherit', 'open', 'open', '', 'export-2', '', '', '2010-09-21 15:12:28', '2010-09-21 19:12:28', '', 1356, 'http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png', 0, 'attachment', 'image/png', 0),
(1362, 3, '2010-09-21 15:12:48', '2010-09-21 19:12:48', '', 'export-3', 0, '', 'inherit', 'open', 'open', '', 'export-3', '', '', '2010-09-21 15:12:48', '2010-09-21 19:12:48', '', 1356, 'http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png', 0, 'attachment', 'image/png', 0),
(1363, 3, '2010-09-21 15:13:07', '2010-09-21 19:13:07', '', 'export-4', 0, '', 'inherit', 'open', 'open', '', 'export-4', '', '', '2010-09-21 15:13:07', '2010-09-21 19:13:07', '', 1356, 'http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png', 0, 'attachment', 'image/png', 0),
(1364, 3, '2010-09-21 15:13:36', '2010-09-21 19:13:36', '', 'export-5', 0, '', 'inherit', 'open', 'open', '', 'export-5', '', '', '2010-09-21 15:13:36', '2010-09-21 19:13:36', '', 1356, 'http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png', 0, 'attachment', 'image/png', 0),
(1365, 3, '2010-09-21 15:00:30', '2010-09-21 19:00:30', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\n\r\n', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-4', '', '', '2010-09-21 15:00:30', '2010-09-21 19:00:30', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-4/', 0, 'revision', '', 0),
(1366, 3, '2010-09-21 15:13:48', '2010-09-21 19:13:48', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-5', '', '', '2010-09-21 15:13:48', '2010-09-21 19:13:48', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-5/', 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
(1367, 3, '2010-09-21 15:13:58', '2010-09-21 19:13:58', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-6', '', '', '2010-09-21 15:13:58', '2010-09-21 19:13:58', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-6/', 0, 'revision', '', 0),
(1368, 3, '2010-09-21 15:21:02', '2010-09-21 19:21:02', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\n', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-7', '', '', '2010-09-21 15:21:02', '2010-09-21 19:21:02', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-7/', 0, 'revision', '', 0),
(1369, 3, '2010-09-21 15:27:13', '2010-09-21 19:27:13', '', 'project-1', 0, '', 'inherit', 'open', 'open', '', 'project-1', '', '', '2010-09-21 15:27:13', '2010-09-21 19:27:13', '', 1356, 'http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png', 0, 'attachment', 'image/png', 0),
(1370, 3, '2010-09-21 15:27:37', '2010-09-21 19:27:37', '', 'project-2', 0, '', 'inherit', 'open', 'open', '', 'project-2', '', '', '2010-09-21 15:27:37', '2010-09-21 19:27:37', '', 1356, 'http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png', 0, 'attachment', 'image/png', 0),
(1371, 3, '2010-09-21 15:28:43', '2010-09-21 19:28:43', '', 'template-choice', 0, '', 'inherit', 'open', 'open', '', 'template-choice', '', '', '2010-09-21 15:28:43', '2010-09-21 19:28:43', '', 1356, 'http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png', 0, 'attachment', 'image/png', 0),
(1372, 3, '2010-09-21 15:29:35', '2010-09-21 19:29:35', '', 'solution-explorer', 0, '', 'inherit', 'open', 'open', '', 'solution-explorer', '', '', '2010-09-21 15:29:35', '2010-09-21 19:29:35', '', 1356, 'http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png', 0, 'attachment', 'image/png', 0),
(1373, 3, '2010-09-21 15:21:47', '2010-09-21 19:21:47', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\n', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-8', '', '', '2010-09-21 15:21:47', '2010-09-21 19:21:47', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-8/', 0, 'revision', '', 0),
(1374, 3, '2010-09-21 15:29:45', '2010-09-21 19:29:45', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-9', '', '', '2010-09-21 15:29:45', '2010-09-21 19:29:45', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-9/', 0, 'revision', '', 0),
(1375, 3, '2010-09-21 15:33:09', '2010-09-21 19:33:09', '', 'HTML5 Page Template', 0, '', 'inherit', 'open', 'open', '', 'html5-page-template', '', '', '2010-09-21 15:33:09', '2010-09-21 19:33:09', '', 1356, 'http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip', 0, 'attachment', 'application/zip', 0),
(1376, 3, '2010-09-21 15:33:37', '2010-09-21 19:33:37', '', 'HTML5 Web Site Template', 0, '', 'inherit', 'open', 'open', '', 'html5-web-site', '', '', '2010-09-21 15:33:37', '2010-09-21 19:33:37', '', 1356, 'http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip', 0, 'attachment', 'application/zip', 0),
(1377, 3, '2010-09-21 15:30:00', '2010-09-21 19:30:00', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-10', '', '', '2010-09-21 15:30:00', '2010-09-21 19:30:00', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-10/', 0, 'revision', '', 0),
(1378, 3, '2010-09-21 15:34:57', '2010-09-21 19:34:57', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \n\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\n\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \n\n<h2>Adding a Page Template</h2>\n\nSo here''s the basic HTML5 template I wanted to include:\n\n[code language="html"]\n&lt;!DOCTYPE html&gt;   \n&lt;head&gt;\n	&lt;meta charset=&quot;utf-8&quot;&gt;\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\n	&lt;title&gt;&lt;/title&gt;\n	&lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;\n	&lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\n	&lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;\n	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot;&gt;\n	\n    &lt;!-- !CSS --&gt;\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot;&gt;\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot;&gt;\n	\n    &lt;!-- !Modernizr - All other JS at bottom \n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\n\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\n    &lt;!-- &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; --&gt;\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\n\n&lt;/head&gt;\n\n&lt;body&gt;\n	&lt;div id=&quot;container&quot;&gt;\n\n	&lt;/div&gt;\n&lt;/body&gt;\n\n&lt;/html&gt;\n[/code]\n\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\n\nNow, when I select "File->New File..." to add a new item, my template is available:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\n\n<h2>Adding a Web Site Template</h2>\n\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\n\n<ul>\n<li>My HTML5 basic page template</li>\n<li>jQuery</li>\n<li>Modernizr</li>\n<li>HTML5 Reset CSS file</li>\n<li>An empty CSS file called style.css</li>\n<li>A consistent folder structure for all of these</li>\n</ul>\n\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\n\nSo now when I select "File=>New Web Site" I see my new template:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\n\nand when I choose that, here''s what gets loaded for my new site:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\n\n<h2>Download the Templates</h2>\n\nThis is a huge time-saver for me so I want to be sure to share this so I''ve made both templates available for download so you can drop them into Visual Studio yourself.\n\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\n\nDrop this into "Visual Studio 2010 > Templates > Item Templates" folder\n\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\n', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-11', '', '', '2010-09-21 15:34:57', '2010-09-21 19:34:57', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-11/', 0, 'revision', '', 0),
(1379, 3, '2010-09-21 15:35:40', '2010-09-21 19:35:40', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me so I want to be sure to share this so I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-12', '', '', '2010-09-21 15:35:40', '2010-09-21 19:35:40', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-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
(1380, 3, '2010-09-21 15:35:44', '2010-09-21 19:35:44', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me so I want to be sure to share this so I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-13', '', '', '2010-09-21 15:35:44', '2010-09-21 19:35:44', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-13/', 0, 'revision', '', 0),
(1381, 3, '2010-09-21 15:36:41', '2010-09-21 19:36:41', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'HTML5 Website and Page Templates for Visual Studio', 0, '', 'inherit', 'open', 'open', '', '1356-revision-14', '', '', '2010-09-21 15:36:41', '2010-09-21 19:36:41', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-14/', 0, 'revision', '', 0),
(1382, 3, '2010-09-21 15:37:08', '2010-09-21 19:37:08', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-15', '', '', '2010-09-21 15:37:08', '2010-09-21 19:37:08', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-15/', 0, 'revision', '', 0),
(1383, 3, '2010-09-21 15:37:16', '2010-09-21 19:37:16', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-16', '', '', '2010-09-21 15:37:16', '2010-09-21 19:37:16', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-16/', 0, 'revision', '', 0),
(1384, 3, '2010-09-21 15:38:40', '2010-09-21 19:38:40', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-17', '', '', '2010-09-21 15:38:40', '2010-09-21 19:38:40', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-17/', 0, 'revision', '', 0),
(1385, 3, '2010-09-21 15:38:45', '2010-09-21 19:38:45', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-18', '', '', '2010-09-21 15:38:45', '2010-09-21 19:38:45', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-18/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1386, 3, '2011-03-22 21:54:44', '2011-03-23 01:54:44', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="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;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\n<h3><em>Note: The templates in this article have been updated to support jQuery 1.5.1 & Modernizr 1.7. <a href="http://blog.reybango.com/2011/03/22/my-visual-studio-2010-html5-templates-are-updated-for-jquery-1-5-1-and-modernizr-1-7/">Check it out here</a>.</em>\r\n</h3>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder\r\n\r\n\r\n', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-autosave', '', '', '2011-03-22 21:54:44', '2011-03-23 01:54:44', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-autosave/', 0, 'revision', '', 0),
(1387, 3, '2010-09-21 15:40:31', '2010-09-21 19:40:31', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot;&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-19', '', '', '2010-09-21 15:40:31', '2010-09-21 19:40:31', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-19/', 0, 'revision', '', 0),
(1388, 3, '2010-09-21 18:53:08', '2010-09-21 22:53:08', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;html&gt;\r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot; /&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; /&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-20', '', '', '2010-09-21 18:53:08', '2010-09-21 22:53:08', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-20/', 0, 'revision', '', 0),
(1389, 3, '2010-09-21 18:57:35', '2010-09-21 22:57:35', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot; /&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; /&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-21', '', '', '2010-09-21 18:57:35', '2010-09-21 22:57:35', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-21/', 0, 'revision', '', 0),
(1390, 3, '2010-09-21 19:00:30', '2010-09-21 23:00:30', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot; /&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; /&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-22', '', '', '2010-09-21 19:00:30', '2010-09-21 23:00:30', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-22/', 0, 'revision', '', 0),
(1391, 3, '2010-09-21 19:14:18', '2010-09-21 23:14:18', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!DOCTYPE html&gt;   \r\n&lt;html lang=&quot;en&quot; xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot; /&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; /&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-23', '', '', '2010-09-21 19:14:18', '2010-09-21 23:14:18', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-23/', 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
(1392, 3, '2010-09-21 19:15:11', '2010-09-21 23:15:11', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!doctype html&gt;   \r\n&lt;html lang=&quot;en&quot; xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot; /&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; /&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-24', '', '', '2010-09-21 19:15:11', '2010-09-21 23:15:11', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-24/', 0, 'revision', '', 0),
(1393, 3, '2010-09-21 19:15:23', '2010-09-21 23:15:23', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!doctype html&gt;   \r\n&lt;html lang=&quot;en&quot; xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot; /&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; /&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-25', '', '', '2010-09-21 19:15:23', '2010-09-21 23:15:23', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-25/', 0, 'revision', '', 0),
(1394, 3, '2010-09-21 19:25:10', '2010-09-21 23:25:10', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="html"]\r\n&lt;!doctype html&gt;   \r\n&lt;html lang=&quot;en&quot; xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r\n&lt;head&gt;\r\n	&lt;meta charset=&quot;utf-8&quot; /&gt;\r\n	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; /&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-26', '', '', '2010-09-21 19:25:10', '2010-09-21 23:25:10', '', 1356, 'http://blog.reybango.com/2010/09/21/1356-revision-26/', 0, 'revision', '', 0),
(1396, 3, '2010-09-28 09:48:12', '2010-09-28 13:48:12', '', 'wp7train', 0, '', 'inherit', 'open', 'open', '', 'wp7train', '', '', '2010-09-28 09:48:12', '2010-09-28 13:48:12', '', 1395, 'http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png', 0, 'attachment', 'image/png', 0),
(1397, 3, '2010-09-28 09:44:00', '2010-09-28 13:44:00', 'I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details. ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision', '', '', '2010-09-28 09:44:00', '2010-09-28 13:44:00', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision/', 0, 'revision', '', 0),
(1398, 3, '2010-09-28 09:48:30', '2010-09-28 13:48:30', '<a href="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png" alt="" title="wp7train" width="320" height="189" class="alignleft size-full wp-image-1396" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details. ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-2', '', '', '2010-09-28 09:48:30', '2010-09-28 13:48:30', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-2/', 0, 'revision', '', 0),
(1399, 3, '2010-09-28 09:48:37', '2010-09-28 13:48:37', '<a href="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png" alt="" title="wp7train" width="320" height="189" class="alignleft size-full wp-image-1396" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details. ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-3', '', '', '2010-09-28 09:48:37', '2010-09-28 13:48:37', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-3/', 0, 'revision', '', 0),
(1400, 3, '2010-09-28 09:49:11', '2010-09-28 13:49:11', '<a href="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png" alt="" title="wp7train" width="320" height="189" class="alignleft size-full wp-image-1396" style="float:left;" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details. ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-4', '', '', '2010-09-28 09:49:11', '2010-09-28 13:49:11', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-4/', 0, 'revision', '', 0),
(1401, 3, '2010-09-28 09:49:15', '2010-09-28 13:49:15', '<a href="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png" alt="" title="wp7train" width="320" height="189" class="alignleft size-full wp-image-1396" style="float:left;" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details. ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-5', '', '', '2010-09-28 09:49:15', '2010-09-28 13:49:15', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-5/', 0, 'revision', '', 0),
(1402, 3, '2010-09-28 09:50:08', '2010-09-28 13:50:08', '<a href="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png" alt="" title="wp7train" width="320" height="189" class="alignleft size-full wp-image-1396" style="float:left; margin-right: 5px; margin-bottom: 5px;" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details. ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-6', '', '', '2010-09-28 09:50:08', '2010-09-28 13:50:08', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-6/', 0, 'revision', '', 0),
(1403, 3, '2010-09-28 09:50:12', '2010-09-28 13:50:12', '<a href="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png" alt="" title="wp7train" width="320" height="189" class="alignleft size-full wp-image-1396" style="float:left; margin-right: 5px; margin-bottom: 5px;" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details. ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-7', '', '', '2010-09-28 09:50:12', '2010-09-28 13:50:12', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-7/', 0, 'revision', '', 0),
(1404, 3, '2010-09-28 09:52:56', '2010-09-28 13:52:56', '<a href="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png" alt="" title="wp7train" width="320" height="189" class="alignleft size-full wp-image-1396" style="float:left; margin-right: 5px; margin-bottom: 5px;" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Here''s the deal:\r\n\r\n<blockquote>Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details.</blockquote>\r\n\r\nIf you''re a mobile developer or considering jumping into the mobile space, this is a great opportunity to get great <strong>FREE</strong> exposure to Microsoft''s newest platform and get your apps loaded up onto the marketplace quickly.\r\n ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-8', '', '', '2010-09-28 09:52:56', '2010-09-28 13:52:56', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-8/', 0, 'revision', '', 0),
(1405, 3, '2010-09-28 09:53:34', '2010-09-28 13:53:34', '<a href="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png" alt="" title="wp7train" width="320" height="189" class="alignleft size-full wp-image-1396" style="margin-bottom: 5px;" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Here''s the deal:\r\n\r\n<blockquote>Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details.</blockquote>\r\n\r\nIf you''re a mobile developer or considering jumping into the mobile space, this is a great opportunity to get great <strong>FREE</strong> exposure to Microsoft''s newest platform and get your apps loaded up onto the marketplace quickly.\r\n ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-9', '', '', '2010-09-28 09:53:34', '2010-09-28 13:53:34', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-9/', 0, 'revision', '', 0),
(1406, 3, '2010-09-28 09:54:23', '2010-09-28 13:54:23', '', 'wp7train', 0, '', 'inherit', 'open', 'open', '', 'wp7train-2', '', '', '2010-09-28 09:54:23', '2010-09-28 13:54:23', '', 1395, 'http://blog.reybango.com/wp-content/uploads/2010/09/wp7train1.png', 0, 'attachment', 'image/png', 0),
(1407, 3, '2010-09-28 09:53:38', '2010-09-28 13:53:38', '<a href="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train.png" alt="" title="wp7train" width="320" height="189" class="alignleft size-full wp-image-1396" style="margin-bottom: 5px;" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Here''s the deal:\r\n\r\n<blockquote>Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details.</blockquote>\r\n\r\nIf you''re a mobile developer or considering jumping into the mobile space, this is a great opportunity to get great <strong>FREE</strong> exposure to Microsoft''s newest platform and get your apps loaded up onto the marketplace quickly.\r\n ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-10', '', '', '2010-09-28 09:53:38', '2010-09-28 13:53:38', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-10/', 0, 'revision', '', 0),
(1408, 3, '2010-09-28 09:55:33', '2010-09-28 13:55:33', '<a href="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train1.png" alt="" title="wp7train" width="250" height="147" class="alignleft size-full wp-image-1406" style="float:left; margin-right: 5px; margin-bottom: 5px;" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Here''s the deal:\r\n\r\n<blockquote>Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details.</blockquote>\r\n\r\nIf you''re a mobile developer or considering jumping into the mobile space, this is a great opportunity to get great <strong>FREE</strong> exposure to Microsoft''s newest platform and get your apps loaded up onto the marketplace quickly.\r\n ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-11', '', '', '2010-09-28 09:55:33', '2010-09-28 13:55:33', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-11/', 0, 'revision', '', 0),
(1409, 3, '2010-09-28 09:55:37', '2010-09-28 13:55:37', '<a href="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train1.png" alt="" title="wp7train" width="250" height="147" class="alignleft size-full wp-image-1406" style="float:left; margin-right: 5px; margin-bottom: 5px;" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Here''s the deal:\r\n\r\n<blockquote>Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details.</blockquote>\r\n\r\nIf you''re a mobile developer or considering jumping into the mobile space, this is a great opportunity to get great <strong>FREE</strong> exposure to Microsoft''s newest platform and get your apps loaded up onto the marketplace quickly.\r\n ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-12', '', '', '2010-09-28 09:55:37', '2010-09-28 13:55:37', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-12/', 0, 'revision', '', 0),
(1410, 3, '2010-09-28 09:56:08', '2010-09-28 13:56:08', '<a href="http://www.msdnevents.com/wp7"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train1.png" alt="" title="wp7train" width="250" height="147" class="alignleft size-full wp-image-1406" style="float:left; margin-right: 5px; margin-bottom: 5px;" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Here''s the deal:\r\n\r\n<blockquote>Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details.</blockquote>\r\n\r\nIf you''re a mobile developer or considering jumping into the mobile space, this is a great opportunity to get great <strong>FREE</strong> exposure to Microsoft''s newest platform and get your apps loaded up onto the marketplace quickly.\r\n ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-13', '', '', '2010-09-28 09:56:08', '2010-09-28 13:56:08', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-13/', 0, 'revision', '', 0),
(1411, 3, '2010-09-28 09:56:13', '2010-09-28 13:56:13', '<a href="http://www.msdnevents.com/wp7"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train1.png" alt="" title="wp7train" width="250" height="147" class="alignleft size-full wp-image-1406" style="float:left; margin-right: 5px; margin-bottom: 5px;" /></a>I''m pretty excited about the new Windows Phone 7 and I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Here''s the deal:\r\n\r\n<blockquote>Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details.</blockquote>\r\n\r\nIf you''re a mobile developer or considering jumping into the mobile space, this is a great opportunity to get great <strong>FREE</strong> exposure to Microsoft''s newest platform and get your apps loaded up onto the marketplace quickly.\r\n ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-14', '', '', '2010-09-28 09:56:13', '2010-09-28 13:56:13', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-14/', 0, 'revision', '', 0),
(1412, 3, '2010-09-28 09:58:02', '2010-09-28 13:58:02', '<a href="http://www.msdnevents.com/wp7"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train1.png" alt="" title="wp7train" width="250" height="147" class="alignleft size-full wp-image-1406" style="float:left; margin-right: 5px; margin-bottom: 5px;" /></a>I''m pretty excited about the new <a href="http://www.windowsphone7.com/">Windows Phone 7</a>. I''ve used it several times and I have to say it is a VERY hot phone and I can''t wait to get mine. I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Here''s the deal:\r\n\r\n<blockquote>Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details.</blockquote>\r\n\r\nIf you''re a mobile developer or considering jumping into the mobile space, this is a great opportunity to get great <strong>FREE</strong> exposure to Microsoft''s newest platform and get your apps loaded up onto the marketplace quickly.\r\n ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-15', '', '', '2010-09-28 09:58:02', '2010-09-28 13:58:02', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-15/', 0, 'revision', '', 0),
(1413, 3, '2010-09-28 09:58:06', '2010-09-28 13:58:06', '<a href="http://www.msdnevents.com/wp7"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train1.png" alt="" title="wp7train" width="250" height="147" class="alignleft size-full wp-image-1406" style="float:left; margin-right: 5px; margin-bottom: 5px;" /></a>I''m pretty excited about the new <a href="http://www.windowsphone7.com/">Windows Phone 7</a>. I''ve used it several times and I have to say it is a VERY hot phone and I can''t wait to get mine. I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Here''s the deal:\r\n\r\n<blockquote>Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details.</blockquote>\r\n\r\nIf you''re a mobile developer or considering jumping into the mobile space, this is a great opportunity to get great <strong>FREE</strong> exposure to Microsoft''s newest platform and get your apps loaded up onto the marketplace quickly.\r\n ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'inherit', 'open', 'open', '', '1395-revision-16', '', '', '2010-09-28 09:58:06', '2010-09-28 13:58:06', '', 1395, 'http://blog.reybango.com/2010/09/28/1395-revision-16/', 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
(1416, 3, '2010-10-11 11:52:21', '2010-10-11 15:52:21', '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, '', 'publish', 'open', 'open', '', 'how-polyfills-fill-in-the-gaps-to-make-html5-and-css3-usable-today', '', '\nhttp://html5doctor.com/html-5-reset-stylesheet/', '2010-10-11 11:52:21', '2010-10-11 15:52:21', '', 0, 'http://blog.reybango.com/?p=1416', 0, 'post', '', 12),
(1415, 3, '2010-09-23 18:13:59', '2010-09-23 22:13:59', 'Now that I work at Microsoft, I''m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it''s pretty barebones. Since I''m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. \r\n\r\nToday, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.\r\n\r\nThe gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. \r\n\r\n<h2>Adding a Page Template</h2>\r\n\r\nSo here''s the basic HTML5 template I wanted to include:\r\n\r\n[code language="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;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; /&gt;\r\n	&lt;title&gt;&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;!-- !Modernizr - All other JS at bottom \r\n	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n\r\n	&lt;!-- Grab Microsoft''s or Google''s CDN''d jQuery. fall back to local if necessary --&gt;\r\n    &lt;!-- &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; --&gt;\r\n	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;\r\n	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write(''&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\\/script&gt;'')&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n	&lt;div id=&quot;container&quot;&gt;\r\n\r\n	&lt;/div&gt;\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;\r\n[/code]\r\n\r\nAfter I created and saved this page, I went to "File->Export Template..." and followed these steps:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>\r\n\r\nNow, when I select "File->New File..." to add a new item, my template is available:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>\r\n\r\n<h2>Adding a Web Site Template</h2>\r\n\r\nCreating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn''t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:\r\n\r\n<ul>\r\n<li>My HTML5 basic page template</li>\r\n<li>jQuery</li>\r\n<li>Modernizr</li>\r\n<li>HTML5 Reset CSS file</li>\r\n<li>An empty CSS file called style.css</li>\r\n<li>A consistent folder structure for all of these</li>\r\n</ul>\r\n\r\nThe first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>\r\n\r\nSo now when I select "File=>New Web Site" I see my new template:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>\r\n\r\nand when I choose that, here''s what gets loaded for my new site:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>\r\n\r\n<h2>Download the Templates</h2>\r\n\r\nThis is a huge time-saver for me and I want to share this. I''ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip''>HTML5 Page Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ItemTemplates" folder\r\n\r\n<a href=''http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip''>HTML5 Web Site Template</a>\r\n\r\nDrop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder', 'How to Create HTML5 Website and Page Templates for Visual Studio 2010', 0, '', 'inherit', 'open', 'open', '', '1356-revision-27', '', '', '2010-09-23 18:13:59', '2010-09-23 22:13:59', '', 1356, 'http://blog.reybango.com/2010/09/23/1356-revision-27/', 0, 'revision', '', 0),
(1417, 3, '2010-10-11 09:57:29', '2010-10-11 13:57:29', 'There''s been a lot of commotion over the last week since the W3C announced that HTML5 is not ready yet for deployment to websites.', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision', '', '', '2010-10-11 09:57:29', '2010-10-11 13:57:29', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision/', 0, 'revision', '', 0),
(1418, 3, '2010-10-11 10:22:00', '2010-10-11 14:22:00', '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> people have weighed in on this topic and I agree with their thoughts.', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-2', '', '', '2010-10-11 10:22:00', '2010-10-11 14:22:00', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-2/', 0, 'revision', '', 0),
(1419, 3, '2010-10-11 10:22:53', '2010-10-11 14:22:53', '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.', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-3', '', '', '2010-10-11 10:22:53', '2010-10-11 14:22:53', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-3/', 0, 'revision', '', 0),
(1420, 3, '2010-10-11 10:23:03', '2010-10-11 14:23:03', '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.', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-4', '', '', '2010-10-11 10:23:03', '2010-10-11 14:23:03', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-4/', 0, 'revision', '', 0),
(1421, 3, '2010-10-11 10:43:46', '2010-10-11 14:43: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.', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-5', '', '', '2010-10-11 10:43:46', '2010-10-11 14:43:46', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-5/', 0, 'revision', '', 0),
(1422, 3, '2010-10-11 10:45:53', '2010-10-11 14:45:53', '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.\n\nWhat''s a Polyfill?\n\nI really love Paul Irish''s definition since it sums it up perfectly:\n\npolyfill: A shim that m\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-6', '', '', '2010-10-11 10:45:53', '2010-10-11 14:45:53', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-6/', 0, 'revision', '', 0),
(1423, 3, '2010-10-11 10:46:52', '2010-10-11 14:46: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.\n\nWhat''s a Polyfill?\n\nI really love Paul Irish''s definition since it sums it up perfectly:\n\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\n\n\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-7', '', '', '2010-10-11 10:46:52', '2010-10-11 14:46:52', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-7/', 0, 'revision', '', 0),
(1424, 3, '2010-10-11 10:53:04', '2010-10-11 14:53:04', '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\nWhat''s a Polyfill?\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 <article>, <section>, <header> & <nav> 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\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-8', '', '', '2010-10-11 10:53:04', '2010-10-11 14:53:04', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-8/', 0, 'revision', '', 0),
(1425, 3, '2010-10-11 10:53:08', '2010-10-11 14:53:08', '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\nWhat''s a Polyfill?\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 <article>, <section>, <header> & <nav> 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\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-9', '', '', '2010-10-11 10:53:08', '2010-10-11 14:53:08', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-9/', 0, 'revision', '', 0),
(1426, 3, '2010-10-11 10:53:56', '2010-10-11 14:53:56', '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\nWhat''s a Polyfill?\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\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-10', '', '', '2010-10-11 10:53:56', '2010-10-11 14:53:56', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-10/', 0, 'revision', '', 0),
(1427, 3, '2010-10-11 10:53:59', '2010-10-11 14:53:59', '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\nWhat''s a Polyfill?\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\n\r\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-11', '', '', '2010-10-11 10:53:59', '2010-10-11 14:53:59', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-11/', 0, 'revision', '', 0),
(1428, 3, '2010-10-11 10:56:58', '2010-10-11 14:56:58', '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\nWhat''s a Polyfill?\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.\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\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-12', '', '', '2010-10-11 10:56:58', '2010-10-11 14:56:58', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-12/', 0, 'revision', '', 0),
(1429, 3, '2010-10-11 10:59:05', '2010-10-11 14:59:05', '', 'fx-blog', 0, '', 'inherit', 'open', 'open', '', 'fx-blog', '', '', '2010-10-11 10:59:05', '2010-10-11 14:59:05', '', 1416, 'http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png', 0, 'attachment', 'image/png', 0),
(1431, 3, '2010-10-11 10:57:02', '2010-10-11 14:57:02', '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\nWhat''s a Polyfill?\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.\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\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-13', '', '', '2010-10-11 10:57:02', '2010-10-11 14:57:02', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-13/', 0, 'revision', '', 0),
(1432, 3, '2010-10-11 11:04:39', '2010-10-11 15:04:39', '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.\n\nWhat''s a Polyfill?\n\nI really love Paul Irish''s definition since it sums it up perfectly:\n\n<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>\n\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. \n\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. \n\n[code lang="html"]\n&lt;!doctype html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot; /&gt;\n    &lt;title&gt;Rey''s Awesome HTML5 Blog&lt;/title&gt;\n    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;\n    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;\n    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;\n     \n    &lt;!-- !CSS --&gt;\n    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;\n    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;\n  \n&lt;/head&gt;\n \n&lt;body&gt;\n    \n	&lt;header&gt;\n        &lt;h1&gt;Rey''s Awesome HTML5 Blog&lt;/h1&gt;\n	&lt;/header&gt;\n\n    &lt;nav&gt;\n    	&lt;ul&gt;\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\n			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\n		&lt;/ul&gt;\n    &lt;/nav&gt;\n    	\n	&lt;section&gt;\n\n        &lt;header&gt;\n        &lt;h1&gt;Rey''s Blog Posts&lt;/h1&gt;\n	    &lt;/header&gt;\n\n        &lt;article&gt;\n            &lt;header&gt;&lt;h1&gt;The In''s &amp; Out''s of HTML5&lt;/h1&gt;&lt;/header&gt;\n		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;\n\n            &lt;footer&gt;\n                October 7, 2010 - comments( 0 )\n            &lt;/footer&gt;\n        &lt;/article&gt;\n\n        &lt;article&gt;\n            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;\n		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;\n            &lt;footer&gt;\n                October 5, 2010 - comments( 3 )\n            &lt;/footer&gt;\n	    &lt;/article&gt;		\n\n	&lt;/section&gt;\n		\n	&lt;footer&gt;\n		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;\n	&lt;/footer&gt;\n\n&lt;/body&gt;\n &lt;/html&gt;\n[/code]\n\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. \n\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>\n\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-14', '', '', '2010-10-11 11:04:39', '2010-10-11 15:04:39', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-14/', 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
(1433, 3, '2010-10-11 11:05:09', '2010-10-11 15:05: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\nWhat''s a Polyfill?\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\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\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\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-15', '', '', '2010-10-11 11:05:09', '2010-10-11 15:05:09', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-15/', 0, 'revision', '', 0),
(1434, 3, '2010-10-11 11:08:31', '2010-10-11 15:08:31', '', 'ie8-blog-nopf', 0, '', 'inherit', 'open', 'open', '', 'ie8-blog-nopf', '', '', '2010-10-11 11:08:31', '2010-10-11 15:08:31', '', 1416, 'http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-nopf.png', 0, 'attachment', 'image/png', 0),
(1435, 3, '2010-10-11 11:05:22', '2010-10-11 15:05:22', '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\nWhat''s a Polyfill?\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\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\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\n', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-16', '', '', '2010-10-11 11:05:22', '2010-10-11 15:05:22', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-16/', 0, 'revision', '', 0),
(1436, 3, '2010-10-11 11:08:44', '2010-10-11 15:08:44', '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\nWhat''s a Polyfill?\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>', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-17', '', '', '2010-10-11 11:08:44', '2010-10-11 15:08:44', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-17/', 0, 'revision', '', 0),
(1437, 3, '2010-10-11 11:08:48', '2010-10-11 15:08:48', '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\nWhat''s a Polyfill?\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>', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-18', '', '', '2010-10-11 11:08:48', '2010-10-11 15:08:48', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-18/', 0, 'revision', '', 0),
(1438, 3, '2010-10-11 11:13:17', '2010-10-11 15:13:17', '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.', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-19', '', '', '2010-10-11 11:13:17', '2010-10-11 15:13:17', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-19/', 0, 'revision', '', 0),
(1439, 3, '2010-10-11 11:13:21', '2010-10-11 15:13:21', '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.', 'How Polyfills "fill in the gaps" for HTML5', 0, '', 'inherit', 'open', 'open', '', '1416-revision-20', '', '', '2010-10-11 11:13:21', '2010-10-11 15:13:21', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-20/', 0, 'revision', '', 0),
(1440, 3, '2010-10-11 11:18:32', '2010-10-11 15:18:32', '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-21', '', '', '2010-10-11 11:18:32', '2010-10-11 15:18:32', '', 1416, 'http://blog.reybango.com/2010/10/11/1416-revision-21/', 0, 'revision', '', 0),
(1441, 3, '2010-10-11 11:22:03', '2010-10-11 15:22:03', '', 'ie8-blog-mod', 0, '', 'inherit', 'open', 'open', '', 'ie8-blog-mod', '', '', '2010-10-11 11:22:03', '2010-10-11 15:22:03', '', 1416, 'http://blog.reybango.com/wp-content/uploads/2010/10/ie8-blog-mod.png', 0, 'attachment', 'image/png', 0);
