Re^2: Mojolicious refresh

You’re killing me, Smalls.

#!/usr/bin/perl
use strict;
use warnings;
use Mojolicious::Lite;

get "/" => sub {
    my $c = shift;
    $c->clock;
    $c->render("index");
};

helper clock => sub {
    my $clock = { clock => time };
    +shift->stash( $clock );
    $clock;
};

get "/clock" => sub {
    my $c = shift;
    $c->render(json => $c->clock);
};

app->start;

__DATA__
@@ index.html.ep
<!DOCTYPE html>
<html>
<head>
  <title>MojoClock</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
          integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJ
+o="
          crossorigin="anonymous"></script>
  <style>* { font-family:"helvetica neue", helvetica }</style>
</head>
<body>
  <h1 class="clock">
     <%= $clock %>
  </h1>
  <script type="text/javascript">
    function clockMe() {
      $clock = $(".clock");
      $.ajax({ type: "GET"
              ,url: "clock"
              ,success: function(json){
                  $clock.fadeOut(10,function(){ $clock.text(json.clock
+).fadeIn() });
               }
              ,error: function(req,msg){
                   alert("Oh, noes! Errerz!!!");
               } });
    };
    setInterval(clockMe, 1000)
  </script>
</body>
</html>
[download]

I consider meta refresh an unambiguously worst UX practice except in the rare case of needing to do it *once* in a situation you want to present a message to the user before a real redirect or ensure a session timeout or something where JS is disabled… or pump up your page view stats for advertisers like certain broadsheet hacks who shall remain unnamed. :P

Comment on Re^2: Mojolicious refresh Download Code


Perl-Sensitive Sunglasses
	PerlMonks