Find file
Fetching contributors…
Cannot retrieve contributors at this time
183 lines (98 sloc) 9.83 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>html5please | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="More than a year ago, in my very first talk at Web Directions on Active Web Development, I had this slide: The intention was that within &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/desirable.html" title="desirable">&#x276C;</a>
<a class="next" href="/html5please-api.html" title="Html5please API">&#x276D;</a>
<time datetime="2012-01-22T17:11:00+05:30" pubdate><span class='month'>Jan</span> <span class='day'>22</span> <span class='year'>2012</span></time>
<h1 class="entry-title"><a href="/html5please.html">html5please</a></h1>
<div class="entry-content"><p><a href=""><img src="" alt="" /></a></p>
<p>More than a year ago, in my very first talk at Web Directions on <a href="">Active Web Development</a>, I had this slide:</p>
<p><img src="" alt="" /></p>
<p>The intention was that within organizations web developers would work to keep an updated list of html5 features that they would adopt or not. However, <a href="">Paul Irish</a> and I thought it would be useful if there were a global set of recommendations that web developers could consult and tap on when they are deciding on how to use features. This was the seed for the creation of <a href="">HTML5 Please</a>.</p>
<p><a href="">When can I use</a> and <a href="">Modernizr</a> do a great job in informing the users of available features and how to feature detect them. The <a href="">Modernizr polyfill wikipage</a> also does a good job of listing all the available polyfills. What we felt missing was the glue that bound all this information together, to tell the user what the best tool for the job was: either on its own, or with a polyfill or a sensible fallback.</p>
<p>With HTML5 Please, you can just search for a feature that you are looking to use and find out how to do so. If you think our recommendation is incorrect, you can edit the recommendation for each feature and send a pull request (like this <a href="">example</a>).</p>
<h3>The Setup</h3>
<p>Initially, this data was in a JSON file that was manipulated in node to generate the static html. Soon, it became obvious that JSON would be a big pile of mess when many people <em>manually</em> update it. Also, it was clear we needed a build system, which is where <a href="">Tim Branyen</a> stepped in to help creating one using node and backbone that would combine markdown posts into a single HTML page.</p>
<p>It was also obvious that we needed a good system to create these markdown posts so that each of the tags that are used in the &#8216;Explore features&#8217; section are not created accidentally (e.g. prevent creating a tag called <code>polyfill</code> instead of <code>polyfills</code>). To do this, <a href="">Deepak Jois</a> created a simple shell script that accepts a feature name, its associated tags, its kind, and then creates a markdown file with these details and opens it in your editor.</p>
<p>We also wanted a way for users to help us make the content better. I added a link to the markdown source on github for each feature which the reader only needs to fork, edit and send pull request for (all over in two clicks!).</p>
<h3>The Front End</h3>
<p>I was unsure of how to proceed with the design. This is how it appeared in the beginning:</p>
<p><img src="" alt="" /></p>
<p>Over the last month, I tweaked the design majorly to more or less match what you see today. I also wanted to use Sass more, which is why the source stylesheet is all Sass.</p>
<p>It was awesome to work with Paul, Tim, Deepak, <a href="">Connor</a>, <a href="">Brian Blakely</a>, <a href="">Addy Osmani</a> &amp; <a href="">many more</a> to create this site. Please <a href="">let us know on Github</a> if you find issues or if you have ideas on how it could be better!</p>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<time datetime="2012-01-22T17:11:00+05:30" pubdate><span class='month'>Jan</span> <span class='day'>22</span> <span class='year'>2012</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar" src="" height=48> <a href="">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
<footer role="contentinfo"><p>
Copy to your heart’s content 2013 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];