adding a few of these polyfills.

impressivewebs · Dec 14, 2011 · cebaede · cebaede
1 parent c307a35
commit cebaede
Show file tree

Hide file tree

Showing 20 changed files with 168 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -30,25 +30,67 @@ <h4>
     <div id='main' role='main'>
       <section class="features">
 
-          <article class=" gtie8">
-            <h2 class='name'> box-shadow</h2>
+          <article class=" polyfill">
+            <h2 class='name'> audio</h2>
             <h3 class=" use"><b><i></i></b></h3>
-            <div class='recco'><p>All modern browsers support SVG. For legacy browsers, you can use <a href="http://svgweb.org">svgweb</a> as a flash-based polyfill, or develop with <a href="http://raphaeljs.com">Raphaél</a> which has a VML renderer for oldIE.</p></div>
-            <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="#">isotope</a>, <a href="#">yui transition</a>, <a href="#">scripty2</a></p></div>
+            <div class='recco'><p>As with video, you need to provide your audio file in multiple formats for these to work. jPlayer also has a jQuery dependency. Sound Manager has extensive API for further customization. </p></div>
+            <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/happyworm/jPlayer">jPlayer</a>, <a href="http://kolber.github.com/audiojs/">audio.js</a>, <a href="http://www.schillmania.com/projects/soundmanager2/">Sound Manager 2</a></p></div>
           </article>          
 
-          <article class=" gtie9 no-polyfill">
-            <h2 class='name'> CSS3 Transitions</h2>
+          <article class=" gtie8 polyfill">
+            <h2 class='name'> canvas</h2>
             <h3 class=" use"><b><i></i></b></h3>
-            <div class='recco'><p>shim layer recomendded to get hwaccel with js fallback (isotope, yui transition, scripty2) or let it degrade</p></div>
-            <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="#">isotope</a>, <a href="#">yui transitio</a>, <a href="#">scripty2</a></p></div>
+            <div class='recco'><p>Canvas is definitely good to go for modern browsers. But if you are looking to use it in IE 8 and below, use FlashCanvas. </p></div>
+            <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://flashcanvas.net/">FlashCanvas</a></p></div>
           </article>          
 
-          <article class=" nopolyfill">
+          <article class=" fallback">
+            <h2 class='name'> Eventsource</h2>
+            <h3 class=" use"><b><i></i></b></h3>
+            <div class='recco'><p>EventSource.js provides base fallback and is not dependent on jQuery.</p></div>
+            <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource.js</a>, <a href="https://github.com/rwldrn/jquery.eventsource">jQuery.eventsource</a></p></div>
+          </article>          
+
+          <article class=" polyfill">
+            <h2 class='name'> geo-location</h2>
+            <h3 class=" use"><b><i></i></b></h3>
+            <div class='recco'><p>The Geolocation shim requires jQuery to work, but if you are looking for a mobile specific script, you are better off using the geo-location-javascript.</p></div>
+            <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://gist.github.com/366184">Geolocation Shim</a>, <a href="http://code.google.com/p/geo-location-javascript/">geo-location-javascript</a></p></div>
+          </article>          
+
+          <article class=" fallback">
+            <h2 class='name'> history</h2>
+            <h3 class=" use"><b><i></i></b></h3>
+            <div class='recco'><p>History.js has cross-compatibility between HTML5 browser implementations and optional hashchange fallback for HTML4 browsers. PJax (pushState + ajax = pjax) is what is used by Github for their fallback solution.</p></div>
+            <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/balupton/history.js">History.js</a>, <a href="http://pjax.heroku.com/">pjax</a></p></div>
+          </article>          
+
+          <article class=" fallback">
+            <h2 class='name'> ruby</h2>
+            <h3 class=" use"><b><i></i></b></h3>
+            <div class='recco'><p>If you are using Ruby element you dont need a script-based fallback but you can provide a CSS based set of good defaults. </p></div>
+            <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://www.useragentman.com/blog/2010/10/29/cross-browser-html5-ruby-annotations-using-css/">Cross-browser Ruby</a>, <a href="http://sideshowbarker.net/2009/11/13/html5-ruby/#comment-3388">basic fallback</a></p></div>
+          </article>          
+
+          <article class=" gtie8 polyfill">
+            <h2 class='name'> svg</h2>
+            <h3 class=" use"><b><i></i></b></h3>
+            <div class='recco'><p>SVG has good support for several years in most browsers except IE. IE9 brings support, which means you can use a polyfill library like SVGWeb or Canvg or create SVG dynamically via RaphaelJS.</p></div>
+            <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://code.google.com/p/svgweb/">svgweb</a>, <a href="http://raphaeljs.com/">raphaeljs</a>, <a href="http://code.google.com/p/canvg/">canvg</a></p></div>
+          </article>          
+
+          <article class=" polyfill">
             <h2 class='name'> text-shadow</h2>
             <h3 class=" use"><b><i></i></b></h3>
             <div class='recco'></div>
-            <div class='polyfills'><b>Recommended Polyfills: </b></div>
+            <div class='polyfills'><b>Recommended Polyfills: </b><p>[]</p></div>
+          </article>          
+
+          <article class=" polyfill">
+            <h2 class='name'> video</h2>
+            <h3 class=" use"><b><i></i></b></h3>
+            <div class='recco'><p>Do note you need to supply your video in various formats to cater to all browsers and fallbacks. There is also a way to do this without any scripting as explained by Kroc Camen in his article <a href="http://camendesign.com/code/video_for_everybody">Video for Everybody</a>.</p></div>
+            <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://mediaelementjs.com/">mediaelementjs</a>, <a href="http://videojs.com/">videojs</a></p></div>
           </article>          
 
       </section>

diff --git a/new_feature.sh b/new_feature.sh
@@ -10,6 +10,7 @@ promptValue() {
 feature=
 status=
 tags=
+kind=
 
 while [ -z "$feature" ]
 do
@@ -34,13 +35,23 @@ do
       while [ $# -gt 0 ]
       do
           case "$1" in
-            gtie6|gtie7|gtie8|nopolyfill|pollyfill|fallback)  shift ;;
+            gtie6|gtie7|gtie8|nopolyfill|polyfill|fallback)  shift ;;
             *)              echo "Unknown Tag: $1" 1>&2; tags= ; break ;;
           esac
       done
     fi
 done
 
+while [ -z "$kind" ]
+do
+    kind=$(promptValue "Enter Type (css,html,js,dom or svg)")
+    case $kind in
+        css|html|dom|svg) : ;;
+        *)                 kind= ;;
+    esac
+done
+
+
 # Creating markdown file in posts folder
 POSTS_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )/posts"
 
@@ -50,6 +61,7 @@ cat > $POSTS_DIR/$feature.md <<EOF
 feature: $feature
 status: $status
 tags: $tags
+kind: $kind
 polyfillurls:
 
 …

diff --git a/posts/Eventsource.md b/posts/Eventsource.md
@@ -0,0 +1,7 @@
+feature: Eventsource
+status: use
+tags: fallback
+kind: html
+polyfillurls:[EventSource.js](https://github.com/remy/polyfills/blob/master/EventSource.js), [jQuery.eventsource](https://github.com/rwldrn/jquery.eventsource)
+
+EventSource.js provides base fallback and is not dependent on jQuery.
diff --git a/posts/audio.md b/posts/audio.md
@@ -0,0 +1,7 @@
+feature: audio
+status: use
+tags: polyfill
+kind: html
+polyfillurls: [jPlayer](https://github.com/happyworm/jPlayer), [audio.js](http://kolber.github.com/audiojs/), [Sound Manager 2](http://www.schillmania.com/projects/soundmanager2/)
+
+As with video, you need to provide your audio file in multiple formats for these to work. jPlayer also has a jQuery dependency. Sound Manager has extensive API for further customization. 
diff --git a/posts/canvas.md b/posts/canvas.md
@@ -0,0 +1,7 @@
+feature: canvas
+status: use
+tags: gtie8 polyfill
+kind: html
+polyfillurls: [FlashCanvas](http://flashcanvas.net/)
+
+Canvas is definitely good to go for modern browsers. But if you are looking to use it in IE 8 and below, use FlashCanvas. 
diff --git a/posts/datalist.md b/posts/datalist.md
@@ -0,0 +1,7 @@
+feature: datalist
+status: use
+tags: polyfill
+kind: html
+polyfillurls: [jQuery Datalist Plugin](http://miketaylr.com/code/datalist.html), [Relevant Dropdowns Polyfill](http://css-tricks.com/15346-relevant-dropdowns-polyfill-for-datalist/)
+
+Jeremy Keith has a [graceful fallback solution](http://adactio.com/journal/4272/) that does not use a script.
diff --git a/posts/dataset.md b/posts/dataset.md
@@ -0,0 +1,7 @@
+feature: dataset
+status: use
+tags: polyfill
+kind: html
+polyfillurls:[HTML5 dataset support](http://eligrey.com/blog/post/html-5-dataset-support)
+
+[More info about dataset](http://dev.opera.com/articles/view/an-introduction-to-datasets/)
diff --git a/posts/details.md b/posts/details.md
@@ -0,0 +1,7 @@
+feature: details
+status: use
+tags: polyfill
+kind: html
+polyfillurls: [Details](http://mathiasbynens.be/notes/html5-details-jquery)
+
+Use detail element if you intent to show a summary which when clicked reveals detailed information. 
diff --git a/posts/geo-location.md b/posts/geo-location.md
@@ -0,0 +1,7 @@
+feature: geo-location
+status: use
+tags: polyfill
+kind: html
+polyfillurls: [Geolocation Shim](https://gist.github.com/366184), [geo-location-javascript](http://code.google.com/p/geo-location-javascript/)
+
+The Geolocation shim requires jQuery to work, but if you are looking for a mobile specific script, you are better off using the geo-location-javascript.
diff --git a/posts/history.md b/posts/history.md
@@ -0,0 +1,7 @@
+feature: history
+status: use
+tags: fallback
+kind: dom
+polyfillurls:[History.js](https://github.com/balupton/history.js), [pjax](http://pjax.heroku.com/)
+
+History.js has cross-compatibility between HTML5 browser implementations and optional hashchange fallback for HTML4 browsers. PJax (pushState + ajax = pjax) is what is used by Github for their fallback solution.
diff --git a/posts/menu.md b/posts/menu.md
@@ -0,0 +1,7 @@
+feature: menu
+status: use
+tags: polyfill
+kind: html
+polyfillurls:[contextMenu](https://github.com/medialize/jQuery-contextMenu)
+
+Do note that this polyfill requires a jQuery dependency.
diff --git a/posts/meter.md b/posts/meter.md
@@ -0,0 +1,6 @@
+feature: meter
+status: use
+tags: polyfill
+kind: html
+polyfillurls:[meter-polyfill](https://gist.github.com/667320), [jQuery shim](https://github.com/xjamundx/HTML5-Meter-Shim)
+
diff --git a/posts/progress.md b/posts/progress.md
@@ -0,0 +1,7 @@
+feature: progress
+status: use
+tags: polyfill
+kind: html
+polyfillurls:[HTML5 Progress Polyfill](https://github.com/LeaVerou/HTML5-Progress-polyfill)
+
+
diff --git a/posts/ruby.md b/posts/ruby.md
@@ -0,0 +1,7 @@
+feature: ruby
+status: use
+tags: fallback
+kind: html
+polyfillurls: [Cross-browser Ruby](http://www.useragentman.com/blog/2010/10/29/cross-browser-html5-ruby-annotations-using-css/), [basic fallback](http://sideshowbarker.net/2009/11/13/html5-ruby/#comment-3388)
+
+If you are using Ruby element you dont need a script-based fallback but you can provide a CSS based set of good defaults. 
diff --git a/posts/svg.md b/posts/svg.md
@@ -0,0 +1,7 @@
+feature: svg
+status: use
+tags: gtie8 polyfill
+kind: svg
+polyfillurls:[svgweb](http://code.google.com/p/svgweb/), [raphaeljs](http://raphaeljs.com/), [canvg](http://code.google.com/p/canvg/)
+
+SVG has good support for several years in most browsers except IE. IE9 brings support, which means you can use a polyfill library like SVGWeb or Canvg or create SVG dynamically via RaphaelJS.
diff --git a/posts/test.md b/posts/test.md
diff --git a/posts/test2.md b/posts/test2.md
diff --git a/posts/text-shadow.md b/posts/text-shadow.md
@@ -0,0 +1,5 @@
+feature: text-shadow
+status: use
+tags: polyfill
+polyfillurls:[]
+
diff --git a/posts/video.md b/posts/video.md
@@ -0,0 +1,7 @@
+feature: video
+status: use
+tags: polyfill
+kind: html
+polyfillurls:[mediaelementjs](http://mediaelementjs.com/), [videojs](http://videojs.com/)
+
+Do note you need to supply your video in various formats to cater to all browsers and fallbacks. There is also a way to do this without any scripting as explained by Kroc Camen in his article [Video for Everybody](http://camendesign.com/code/video_for_everybody).
diff --git a/sass/style.scss b/sass/style.scss
@@ -26,7 +26,7 @@ $yes: saturate($light, 10%);
 /*
  * HTML5 ✰ Boilerplate
  */
- * What follows is the result of much research on cross-browser styling. 
+/* What follows is the result of much research on cross-browser styling. 
  * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
  * Kroc Camen, and the H5BP dev community and team.
  */