From 1a5bdf9e2b5f1ba33c092024c66982be3f609c59 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 23 Jan 2012 11:58:21 -0800 Subject: [PATCH] fix bug with parsing dotfiles. new html --- index.html | 176 ++++++++++++++++++++++++++++++++------- lib/app.js | 6 +- posts/input-typecolor.md | 4 +- posts/input-typedate.md | 4 +- posts/input-typerange.md | 4 +- 5 files changed, 156 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index 630b6a9b..11f4c542 100644 --- a/index.html +++ b/index.html @@ -436,7 +436,11 @@

ECMAScript 5

-

ECMAScript version 5 covers a large number of feature additions to what we normally call JavaScript. Excluding IE8, most of ES5 is supported in browsers. As it introduces no new syntax, it's possible to polyfill fairly well. The below polyfills tackle most uses of these features, but not all cases.

+

ECMAScript version 5 covers a large number of feature additions to what we normally call JavaScript. +Excluding IE8, most of ES5 is supported in browsers. +As it introduces no new syntax, it's possible to polyfill fairly well. +The below polyfills tackle most uses of these features, but there is an unshimmable subset of ES5. +Also note that some shims are known to have edgecase compliance bugs.

Recommended polyfills:

es5-shim, augment.js

@@ -581,7 +585,7 @@

@font-face

-

Use the Font Squirrel Generator for fonts you have license for using as web fonts. Font Squirrel @font-face syntax 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.

+

Use the Font Squirrel Generator for fonts you have license for using as web fonts. Fontspring @font-face syntax 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.

Also, don't use sIFR or Cufon anymore.

@@ -599,6 +603,30 @@

@font-face

fallback
+
+
+

use with polyfill

+

html, gtie9

+

form validation

+
+
+
+

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.

+
+
Recommended polyfills:

webshims, nwxforms, H5F

+ +

+ + + View browser share % + + + Edit this info +

+
+
polyfill
+
+

use with fallback

@@ -777,6 +805,114 @@

IndexedDB

polyfill, gtie8
+
+
+

use

+

html

+

input[placeholder]

+
+
+
+

Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the type of the input is text, search, tel, url, or email. Otherwise, it is ignored.

+ +

input[placeholder] is commonly the first polyfill anyone writes and, as such, there are many of them. 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.

+
+
Recommended polyfills:

Placeholder jQuery Plugin

+ +

+ + + View browser share % + + + Edit this info +

+
+
gtie9
+
+ +
+
+

avoid with polyfill

+

html

+

<input type=color>

+
+
+
+

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.

+ +

You should probably avoid this until it has support in WebKit, Gecko or IE.

+
+
Recommended polyfills:

jscolor, html5widgets

+ +

+ + + View browser share % + + + Edit this info +

+
+
polyfill,gtie9
+
+ +
+
+

caution with polyfill

+

html

+

<input type=date>

+
+
+
+

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).

+ +

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

+ +

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.

+
+
Recommended polyfills:

webshims, html5widgets,

+ +

+ + + View browser share % + + + Edit this info +

+
+
polyfill,gtie9
+
+ +
+
+

caution with polyfill

+

html

+

<input type=range>

+
+
+
+

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

+ +

You can use freqdec's Input Range Polyfill or for just Firefox support, Frank Yan's html5slider.

+ +

These polyfills aren't drop-in polyfills and you'll need to wire them up a little, but your markup can depend on <input type=range> creating a slider.

+
+
Recommended polyfills:

Input Range Polyfill, html5slider

+ +

+ + + View browser share % + + + Edit this info +

+
+
polyfill,gtie9
+
+

use with polyfill

@@ -1005,7 +1141,9 @@

multicolumn

-

Internet Explorer, and Opera support CSS Multiple Column without vendor prefixes, so you only need prefixed versions for -webkit and -moz. We recommend you do not polyfill this and let it fall back to single column text.

+

Internet Explorer (10+), and Opera support CSS Multiple Column without vendor prefixes, so you only need prefixed versions for -webkit and -moz. A further note, features like column-break-after, column-break-before, and column-break-inside which are necessary for advanced typography are webkit-only right now.

+ +

We recommend you do not polyfill this and let it fall back to single column text.

@@ -1094,30 +1232,6 @@

paged media

none
-
-
-

use

-

html

-

placeholder

-
-
-
-

Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the type of the input is text, search, tel, url, or email. Otherwise, it is ignored.

-
-
Recommended polyfills:

Placeholder jQuery Plugin

- -

- - - View browser share % - - - Edit this info -

-
-
gtie9
-
-

use with fallback

@@ -1581,15 +1695,15 @@

WebGL

caution with polyfill

api

-

websockets

+

WebSockets

-

Making your app real-time is a huge boost and Socket.io 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.

+

Making your app real-time is a huge boost and Socket.io 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.

-

web-socket-js is a natural polyfill for the Javascript WebSocket API transferring data through Flash Sockets when WebSockets aren't available.

+

web-socket-js is a natural polyfill for the JavaScript WebSocket API transferring data through Flash Sockets when WebSockets aren't available.

-

As a word of caution, the protocol backing the Web Socket API has become an IETF standard, but Safari has not yet implemented the new version. It is recommended forcing Flash on Safari (or disabling WebSockets on Safari) for now.

+

As a word of caution, the protocol backing the Web Socket API has become an IETF standard, 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.

Recommended polyfills:

Socket.io, web-socket-js

diff --git a/lib/app.js b/lib/app.js index 982df3d9..bd1e58ad 100644 --- a/lib/app.js +++ b/lib/app.js @@ -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]; @@ -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), diff --git a/posts/input-typecolor.md b/posts/input-typecolor.md index c989c3ee..4c793b26 100644 --- a/posts/input-typecolor.md +++ b/posts/input-typecolor.md @@ -1,7 +1,7 @@ feature: <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. diff --git a/posts/input-typedate.md b/posts/input-typedate.md index e7183e4d..1c89c8bd 100644 --- a/posts/input-typedate.md +++ b/posts/input-typedate.md @@ -1,7 +1,7 @@ feature: <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). diff --git a/posts/input-typerange.md b/posts/input-typerange.md index 644805f4..81a2f42f 100644 --- a/posts/input-typerange.md +++ b/posts/input-typerange.md @@ -1,7 +1,7 @@ feature: <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.