Skip to content

Commit

Permalink
fix bug with parsing dotfiles. new html
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulirish
paulirish committed Jan 23, 2012
1 parent dbe468a commit 1a5bdf9
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 38 deletions.
176 changes: 145 additions & 31 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,7 +436,11 @@ <h2 class="name">ECMAScript 5 </h2>
</header>
<div class="more">
<div class="recco">
<p>ECMAScript version 5 covers a large number of feature additions to what we normally call JavaScript. Excluding IE8, <a href="http://kangax.github.com/es5-compat-table/">most of ES5 is supported in browsers</a>. As it introduces no new syntax, it's possible to polyfill fairly well. The below polyfills tackle most uses of these features, but <a href="https://gist.github.com/1120592">not <em>all</em> cases</a>.</p>
<p>ECMAScript version 5 covers a large number of feature additions to what we normally call JavaScript.
Excluding IE8, <a href="http://kangax.github.com/es5-compat-table/">most of ES5 is supported in browsers</a>.
As it introduces no new syntax, it's possible to polyfill fairly well.
The below polyfills tackle most uses of these features, but <a href="https://gist.github.com/1664895">there is an unshimmable subset of ES5</a>.
Also note that some shims are known to have <a href="https://gist.github.com/1120592">edgecase compliance bugs</a>.</p>
</div>
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/kriskowal/es5-shim/">es5-shim</a>, <a href="http://augmentjs.com/">augment.js</a></p></div>

Expand Down Expand Up @@ -581,7 +585,7 @@ <h2 class="name">@font-face </h2>
</header>
<div class="more">
<div class="recco">
<p>Use the <a href="http://www.fontsquirrel.com/fontface/generator">Font Squirrel Generator</a> for fonts you have license for using as web fonts. <a href="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax">Font Squirrel @font-face syntax</a> is also the most bullet-proof way of serving web fonts. You do not need polyfills - just fonts in several formats; WOFF is preferred, followed by TTF and then EOT. </p>
<p>Use the <a href="http://www.fontsquirrel.com/fontface/generator">Font Squirrel Generator</a> for fonts you have license for using as web fonts. <a href="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax">Fontspring @font-face syntax</a> is also the most bullet-proof way of serving web fonts. You do not need polyfills - just fonts in several formats; WOFF is preferred, followed by TTF and then EOT. </p>

<p>Also, don't use sIFR or Cufon anymore.</p>
</div>
Expand All @@ -599,6 +603,30 @@ <h2 class="name">@font-face </h2>
<footer class="tags">fallback</footer>
</article>

<article class="polyfill">
<header>
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html, gtie9">html, gtie9</h4>
<h2 class="name">form validation </h2>
</header>
<div class="more">
<div class="recco">
<p>HTML5 has baked in clientside form validation, and polyfills can enable this for legacy browsers as well. Using the defined HTML5 API for constraint validation may be a more maintainable direction than using a jQuery Validation plugin, depending on your team.</p>
</div>
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="http://afarkas.github.com/webshim/demos/">webshims</a>, <a href="https://github.com/dperini/nwxforms">nwxforms</a>, <a href="https://github.com/ryanseddon/H5F">H5F</a></p></div>

<p class="links">

<a href="http://caniuse.com/form-validation">
View browser share %
</a>

<a href="https://github.com/h5bp/html5please/blob/master/posts/form-validation.md">Edit this info</a>
</p>
</div>
<footer class="tags">polyfill</footer>
</article>

<article class="fallback gtie8">
<header>
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
Expand Down Expand Up @@ -777,6 +805,114 @@ <h2 class="name">IndexedDB </h2>
<footer class="tags">polyfill, gtie8</footer>
</article>

<article class="gtie9">
<header>
<h3 class="status use">use <i></i> </h3>
<h4 class="kind html">html</h4>
<h2 class="name">input[placeholder] </h2>
</header>
<div class="more">
<div class="recco">
<p>Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the <strong>type</strong> of the input is <em>text</em>, <em>search</em>, <em>tel</em>, <em>url</em>, or <em>email</em>. Otherwise, it is ignored.</p>

<p><code>input[placeholder]</code> is commonly the first polyfill anyone writes and, as such, there are <a href="http://bit.ly/polyfills">many of them</a>. Password inputs and submit event clearing are among many of the gotchas that catch naïve implemenations; Mathias's polyfill below handles these cases very well.</p>
</div>
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/mathiasbynens/jquery-placeholder">Placeholder jQuery Plugin</a></p></div>

<p class="links">

<a href="http://caniuse.com/input-placeholder">
View browser share %
</a>

<a href="https://github.com/h5bp/html5please/blob/master/posts/input-placeholder.md">Edit this info</a>
</p>
</div>
<footer class="tags">gtie9</footer>
</article>

<article class="polyfill,gtie9">
<header>
<h3 class="status avoid">avoid <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class="name">&lt;input type=color> </h2>
</header>
<div class="more">
<div class="recco">
<p>Color inputs will fall back to a plain text input if it's not supported, but excluding Opera, no desktop browser has added support for color inputs. </p>

<p>You should probably avoid this until it has support in WebKit, Gecko or IE.</p>
</div>
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/jo/JSColor">jscolor</a>, <a href="http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/">html5widgets</a></p></div>

<p class="links">

<a href="http://caniuse.com/input-typecolor">
View browser share %
</a>

<a href="https://github.com/h5bp/html5please/blob/master/posts/input-typecolor.md">Edit this info</a>
</p>
</div>
<footer class="tags">polyfill,gtie9</footer>
</article>

<article class="polyfill,gtie9">
<header>
<h3 class="status caution">caution <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class="name">&lt;input type=date> </h2>
</header>
<div class="more">
<div class="recco">
<p>There are many date inputs: <code>datetime-local, date, time, month, week</code> that should provide a datepicker to the user. For a long time, WebKit offered a spinner UI on these inputs, but this was an incomplete implementation (and has since been removed). </p>

<p>A few polyfills offer a proper datepicker UI, if the feature is not offered natively. </p>

<p>We suggest you use Modernizr to detect this feature, as it has correctly detected these features, regardless of WebKit's partial implementation or other browser bugs.</p>
</div>
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="http://afarkas.github.com/webshim/demos/demos/webforms.html">webshims</a>, <a href="http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/">html5widgets</a>,</p></div>

<p class="links">

<a href="http://caniuse.com/input-typedate">
View browser share %
</a>

<a href="https://github.com/h5bp/html5please/blob/master/posts/input-typedate.md">Edit this info</a>
</p>
</div>
<footer class="tags">polyfill,gtie9</footer>
</article>

<article class="polyfill,gtie9">
<header>
<h3 class="status caution">caution <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class="name">&lt;input type=range> </h2>
</header>
<div class="more">
<div class="recco">
<p>Range inputs (AKA sliders) will fall back to a plain text input if it's not supported. </p>

<p>You can use freqdec's <a href="http://www.frequency-decoder.com/2010/11/18/unobtrusive-slider-control-html5-input-range-polyfill/">Input Range Polyfill</a> or for just Firefox support, Frank Yan's <a href="https://github.com/fryn/html5slider">html5slider</a>.</p>

<p>These polyfills aren't drop-in polyfills and you'll need to wire them up a little, but your markup can depend on <code>&lt;input type=range&gt;</code> creating a slider.</p>
</div>
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="http://www.frequency-decoder.com/2010/11/18/unobtrusive-slider-control-html5-input-range-polyfill/">Input Range Polyfill</a>, <a href="https://github.com/fryn/html5slider">html5slider</a></p></div>

<p class="links">

<a href="http://caniuse.com/input-typerange">
View browser share %
</a>

<a href="https://github.com/h5bp/html5please/blob/master/posts/input-typerange.md">Edit this info</a>
</p>
</div>
<footer class="tags">polyfill,gtie9</footer>
</article>

<article class="gtie7, polyfill">
<header>
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
Expand Down Expand Up @@ -1005,7 +1141,9 @@ <h2 class="name">multicolumn </h2>
</header>
<div class="more">
<div class="recco">
<p>Internet Explorer, and Opera support CSS Multiple Column without vendor prefixes, so you only need prefixed versions for <code>-webkit</code> and <code>-moz</code>. We recommend you do not polyfill this and let it fall back to single column text.</p>
<p>Internet Explorer (10+), and Opera support CSS Multiple Column without vendor prefixes, so you only need prefixed versions for <code>-webkit</code> and <code>-moz</code>. A further note, features like <code>column-break-after</code>, <code>column-break-before</code>, and <code>column-break-inside</code> which are necessary for advanced typography are webkit-only right now. </p>

<p>We recommend you do not polyfill this and let it fall back to single column text.</p>
</div>
<div class="polyfills"></div>

Expand Down Expand Up @@ -1094,30 +1232,6 @@ <h2 class="name">paged media </h2>
<footer class="tags">none</footer>
</article>

<article class="gtie9">
<header>
<h3 class="status use">use <i></i> </h3>
<h4 class="kind html">html</h4>
<h2 class="name">placeholder </h2>
</header>
<div class="more">
<div class="recco">
<p>Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the <strong>type</strong> of the input is <em>text</em>, <em>search</em>, <em>tel</em>, <em>url</em>, or <em>email</em>. Otherwise, it is ignored.</p>
</div>
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/mathiasbynens/jquery-placeholder">Placeholder jQuery Plugin</a></p></div>

<p class="links">

<a href="http://caniuse.com/placeholder">
View browser share %
</a>

<a href="https://github.com/h5bp/html5please/blob/master/posts/placeholder.md">Edit this info</a>
</p>
</div>
<footer class="tags">gtie9</footer>
</article>

<article class="fallback noie">
<header>
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
Expand Down Expand Up @@ -1581,15 +1695,15 @@ <h2 class="name">WebGL </h2>
<header>
<h3 class="status caution">caution <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind api">api</h4>
<h2 class="name">websockets </h2>
<h2 class="name">WebSockets </h2>
</header>
<div class="more">
<div class="recco">
<p>Making your app real-time is a huge boost and <a href="http://socket.io/">Socket.io</a> is a Node+Javascript framework that helps with downlevel transports for browsers lacking native websocket support (and supports IE6+). However be prepared to tune your AJAX polling or Comet in order to meet the needs of your app.</p>
<p>Making your app real-time is a huge boost and <a href="http://socket.io/">Socket.io</a> is a Node+JavaScript framework that helps with downlevel transports for browsers lacking native WebSocket support (and supports IE6+). However be prepared to tune your AJAX polling or Comet in order to meet the needs of your app.</p>

<p><a href="https://github.com/gimite/web-socket-js">web-socket-js</a> is a natural polyfill for the Javascript WebSocket API transferring data through Flash Sockets when WebSockets aren't available.</p>
<p><a href="https://github.com/gimite/web-socket-js">web-socket-js</a> is a natural polyfill for the JavaScript WebSocket API transferring data through Flash Sockets when WebSockets aren't available.</p>

<p>As a word of caution, the protocol backing the Web Socket API has become an <a href="http://tools.ietf.org/html/rfc6455">IETF standard</a>, but Safari has not yet implemented the new version. It is recommended forcing Flash on Safari (or disabling WebSockets on Safari) for now.</p>
<p>As a word of caution, the protocol backing the Web Socket API has become an <a href="http://tools.ietf.org/html/rfc6455">IETF standard</a>, but Safari has not yet implemented the new version. It is recommended forcing Flash on Safari (if Flash is available, N/A on mobile), or disabling WebSockets on Safari for now.</p>
</div>
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="http://socket.io/">Socket.io</a>, <a href="https://github.com/gimite/web-socket-js">web-socket-js</a></p></div>

Expand Down
6 changes: 5 additions & 1 deletion lib/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ exports.Feature = Backbone.Model.extend({

if (parts.length < 2) {
console.error(lines);
throw new Error('Invalid key: val ... ' + docs);
throw new Error('Invalid key: val ... ' + obj.slug);
}

key = parts[0];
Expand Down Expand Up @@ -103,6 +103,10 @@ exports.Features = Backbone.Collection.extend({

// Slice off the file extension for each
files.forEach(function(file, i) {

// skip dotfiles
if (file.indexOf('.') == 0) return;

data.push({
contents: fs.readFileSync(paths.posts + "/" + file).toString(),
editfrag: file.slice(0, -3),
Expand Down
4 changes: 2 additions & 2 deletions posts/input-typecolor.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
feature: &lt;input type=color>
status: avoid
tags: polyfill
kind: html, gtie9
tags: polyfill,gtie9
kind: html
polyfillurls: [jscolor](https://github.com/jo/JSColor), [html5widgets](http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/)

Color inputs will fall back to a plain text input if it's not supported, but excluding Opera, no desktop browser has added support for color inputs.
Expand Down
4 changes: 2 additions & 2 deletions posts/input-typedate.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
feature: &lt;input type=date>
status: caution
tags: polyfill
kind: html, gtie9
tags: polyfill,gtie9
kind: html
polyfillurls: [webshims](http://afarkas.github.com/webshim/demos/demos/webforms.html), [html5widgets](http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/),

There are many date inputs: `datetime-local, date, time, month, week` that should provide a datepicker to the user. For a long time, WebKit offered a spinner UI on these inputs, but this was an incomplete implementation (and has since been removed).
Expand Down
4 changes: 2 additions & 2 deletions posts/input-typerange.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
feature: &lt;input type=range>
status: caution
tags: polyfill
kind: html, gtie9
tags: polyfill,gtie9
kind: html
polyfillurls: [Input Range Polyfill](http://www.frequency-decoder.com/2010/11/18/unobtrusive-slider-control-html5-input-range-polyfill/), [html5slider](https://github.com/fryn/html5slider)

Range inputs (AKA sliders) will fall back to a plain text input if it's not supported.
Expand Down

0 comments on commit 1a5bdf9

Please sign in to comment.