browser: terse overview of caniuse.com data
authorMischa POSLAWSKY <perl@shiar.org>
Tue, 9 Nov 2010 21:46:31 +0000 (22:46 +0100)
committerMischa POSLAWSKY <perl@shiar.org>
Wed, 10 Nov 2010 21:40:55 +0000 (22:40 +0100)
browser.plp [new file with mode: 0644]

diff --git a/browser.plp b/browser.plp
new file mode 100644 (file)
index 0000000..a3068f5
--- /dev/null
@@ -0,0 +1,105 @@
+<(common.inc.plp)><:
+use 5.010;
+
+Html({
+       title => 'browser compatibility cheat sheet',
+       version => 'v1.0',
+       description =>
+               "caniuse.",
+       keywords => [qw'html css browser feature'],
+       stylesheet => [qw'light dark circus mono red'],
+       data => ['caniuse.js'],
+});
+
+:>
+<h1>Browser compatibility</h1>
+
+<p>Alternate view of Fyrd's <a href="http://caniuse.com/">when can I use...</a> site.</p>
+
+<:
+use JSON;
+use File::Slurp 'read_file';
+my $source = read_file('caniuse.js');
+for ($source) { # cleanup
+       # convert seperate variables to hash keys
+       s/\A/{/;
+       s/^caniuse\.(\w+) = /"$1":/gm;
+       s/;$/,/gm;
+       s/,\s*\Z/\n}/;
+       # fractions not supported by barekey
+       s/(?<=[,{]) (\d*\.\d) (?=:')/"$1"/gx;
+       # escapes not supported in singlequote
+       s{'((?:[^\\']+|\\.)*)'}{
+               my $_ = $1;
+               s/"/\\"/g;
+               s/\\'/'/g;
+               qq("$_");
+       }ge;
+}
+my $caniuse = from_json($source, {
+#      allow_singlequote => 1,
+       allow_barekey => 1,
+});
+
+my %CSTATS = (
+       n => 'di-b',
+       y => 'di-a',
+       a => 'di-d',
+       j => 'di-prop',
+       p => 'di-prop',
+       'y x' => 'di-a',
+);
+my %CSTATUS = (
+       unoff => 'di-rare', # unofficial
+       wd    => 'di-b', # draft
+       pr    => 'di-prop', # proposed
+       cr    => 'di-d', # candidate
+       rec   => 'di-a', # recommendation
+       ietf  => 'di-a', # standard
+);
+my @browsers = qw(trident gecko webkit_saf presto);
+unshift @{ $caniuse->{agents}->{gecko}->{versions} }, 2;
+
+print '<table class="glyphs dimap">';
+print '<col>' x 2;
+printf '<colgroup span="%d">', scalar @{ $caniuse->{agents}->{$_}->{versions} } for @browsers;
+print "\n";
+
+print '<thead><tr>';
+print "<th>$_" for qw(feature status);
+printf '<th colspan="%d">%s', scalar @{ $_->{versions} }, $_->{browser}
+       for map { $caniuse->{agents}->{$_} } @browsers;
+print "</thead>\n";
+
+for my $id (keys %{ $caniuse->{data} }) {
+       my $row = $caniuse->{data}->{$id};
+       my $data = $row->{stats} or next;  # skip metadata [summary]
+       printf '<tr id="%s">', $id;
+       printf '<th title="%s">%s', $row->{description}, $row->{title};
+       printf '<td title="%s" class="%s">%s', $caniuse->{statuses}->{$_}, $CSTATUS{$_} // '', $_ for $row->{status};
+       for my $browser (@browsers) {
+               printf '<td class="%s">%s', $CSTATS{ $data->{$browser}->{$_} }, $_
+                       for @{ $caniuse->{agents}->{$browser}->{versions} };
+       }
+}
+print '</table>';
+
+:>
+<hr>
+
+<div class="legend">
+       <table class="glyphs"><tr>
+       <td class="X di-a">yes
+       <td class="X di-d">almost
+       <td class="X di-prop">plugin or js
+       <td class="X di-b">no
+       </table>
+
+       <div class="right">
+               <ul class="legend legend-set">
+               <li>default <strong>style</strong> is
+                       <:= defined $get{style} && 'set to ' :><em><:= $style :></em>
+               </ul>
+       </div>
+</div>
+