browser.plp

   1 <(common.inc.plp)><:
   2 use 5.010;
   3
   4 Html({
   5         title => 'browser compatibility cheat sheet',
   6         version => 'v1.0',
   7         description =>
   8                 "caniuse.",
   9         keywords => [qw'html css browser feature'],
  10         stylesheet => [qw'light dark circus mono red'],
  11         data => ['caniuse.js'],
  12 });
  13
  14 :>
  15 <h1>Browser compatibility</h1>
  16
  17 <p>Alternate view of Fyrd's <a href="http://caniuse.com/">when can I use...</a> site.</p>
  18
  19 <:
  20 use JSON;
  21 use File::Slurp 'read_file';
  22 my $source = read_file('caniuse.js');
  23 for ($source) { # cleanup
  24         # convert seperate variables to hash keys
  25         s/\A/{/;
  26         s/^caniuse\.(\w+) = /"$1":/gm;
  27         s/;$/,/gm;
  28         s/,\s*\Z/\n}/;
  29         # fractions not supported by barekey
  30         s/(?<=[,{]) (\d*\.\d) (?=:')/"$1"/gx;
  31         # escapes not supported in singlequote
  32         s{'((?:[^\\']+|\\.)*)'}{
  33                 my $_ = $1;
  34                 s/"/\\"/g;
  35                 s/\\'/'/g;
  36                 qq("$_");
  37         }ge;
  38 }
  39 my $caniuse = from_json($source, {
  40 #       allow_singlequote => 1,
  41         allow_barekey => 1,
  42 });
  43
  44 my %CSTATS = (
  45         n => 'di-b',
  46         y => 'di-aa',
  47         a => 'di-d',
  48         j => 'di-prop',
  49         p => 'di-prop',
  50         'y x' => 'di-a',
  51 );
  52 my %CSTATUS = (
  53         unoff => 'di-rare', # unofficial
  54         wd    => 'di-b', # draft
  55         pr    => 'di-prop', # proposed
  56         cr    => 'di-d', # candidate
  57         rec   => 'di-a', # recommendation
  58         ietf  => 'di-aa', # standard
  59 );
  60 my @browsers = qw(trident gecko webkit_saf presto);
  61 my %versions;
  62 if (my ($somerow) = values %{ $caniuse->{data} }) {
  63         while (my ($browser, $row) = each %{ $somerow->{stats} }) {
  64                 $versions{$browser} = [ sort { paddedver($a) cmp paddedver($b) } keys %$row ];
  65         }
  66 }
  67
  68 print '<table class="glyphs dimap">';
  69 print '<col>' x 2;
  70 printf '<colgroup span="%d">', scalar @{ $versions{$_} } for @browsers;
  71 print "\n";
  72
  73 print '<thead><tr>';
  74 print "<th>$_" for qw(feature status);
  75 printf '<th colspan="%d">%s',
  76         scalar @{ $versions{$_} }, $caniuse->{agents}->{$_}->{browser}
  77                 for @browsers;
  78 # preceding row without any colspan to work around gecko bug
  79 print '<tr>';
  80 print '<td>' x $_ for 2, map { scalar @{ $versions{$_} } } @browsers;
  81 print "</thead>\n";
  82
  83 sub featurescore {
  84         # relative amount of support for given feature
  85         state $statspts = { y=>10, 'y x'=>9, a=>5, j=>2, p=>1 };
  86         my $rank = 0;
  87         if (my $row = shift) {
  88                 while (my ($browser, $vercols) = each %versions) {
  89                         my $div = 0;  # multiplier exponent (decreased to lower value)
  90                         my @vers = map { $row->{$browser}->{$_} } @$vercols;
  91                         if (my $current = $caniuse->{agents}->{$browser}->{versions}->[-3]) {
  92                                 my @future;  # find upcoming releases (after current)
  93                                 for (reverse @$vercols) {
  94                                         last if $_ eq $current;
  95                                         push @future, pop @vers;
  96                                         $_ eq 'u' and $_ = $vers[-1] for $future[-1];  # inherit latest value if unknown
  97                                 }
  98                                 splice @vers, -1, 0, @future;  # move ahead to decrease precedence
  99                         }
 100                         $rank += $statspts->{$_} * 2**($div--) for reverse @vers;
 101                 }
 102         }
 103         return $rank;
 104 }
 105
 106 for my $id (sort {
 107             featurescore($caniuse->{data}->{$b}->{stats})
 108         <=> featurescore($caniuse->{data}->{$a}->{stats})
 109 } keys %{ $caniuse->{data} }) {
 110         my $row = $caniuse->{data}->{$id};
 111         my $data = $row->{stats} or next;  # skip metadata [summary]
 112         printf '<tr id="%s">', $id;
 113         printf '<th title="%s">%s', $row->{description}, $row->{title};
 114         printf '<td title="%s" class="%s">%s', $caniuse->{statuses}->{$_}, $CSTATUS{$_} // '', $_ for $row->{status};
 115         for my $browser (@browsers) {
 116                 my ($prev, @span);
 117                 for my $ver (@{ $versions{$browser} }, undef) {
 118                         unless (!defined $prev
 119                         or $data->{$browser}->{$prev} ~~ $data->{$browser}->{$ver}) {
 120                                 printf '<td class="%s" colspan="%d">%s',
 121                                         $CSTATS{ $data->{$browser}->{$prev} },
 122                                         scalar @span,
 123                                         join('‒', $span[0], @span > 1 ? $span[-1] : ());
 124                                 undef $prev;
 125                                 @span = ();
 126                         }
 127                         push @span, $ver;
 128                         $prev = $ver;
 129                 }
 130         }
 131         state $maxscore = featurescore({  # yes for every possible version
 132                 map { $_ => { map {$_ => 'y'} @{$versions{$_}} } } keys %versions
 133         });
 134         print '<td>', int featurescore($caniuse->{data}->{$id}->{stats}) / $maxscore * 100;
 135 }
 136 print '</table>';
 137
 138 sub paddedver {
 139         # normalised version number comparable as string (cmp)
 140         shift =~ /^(\d*)(.*)/;
 141         return sprintf('%02d', $1) . $2;
 142 }
 143
 144 :>
 145 <hr>
 146
 147 <div class="legend">
 148         <table class="glyphs"><tr>
 149         <td class="X di-aa">supported
 150         <td class="X di-a">prefixed
 151         <td class="X di-d">partial
 152         <td class="X di-prop">external (js/plugin)
 153         <td class="X di-b">missing
 154         </table>
 155
 156         <div class="right">
 157                 <ul class="legend legend-set">
 158                 <li>default <strong>style</strong> is
 159                         <:= defined $get{style} && 'set to ' :><em><:= $style :></em>
 160                 </ul>
 161         </div>
 162 </div>
 163