dedicated lab with leo video page

2025-07-19 15:45:33 -04:00 · 2019-08-04 18:49:43 -04:00
parent 38ea5a0dae
commit 83a2e1e0db
15 changed files with 234 additions and 4 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -37,6 +37,7 @@ deploy:
    - aws s3 cp s3://$S3_BUCKET_NAME s3://$S3_BUCKET_NAME --exclude "*" --include "*.xml"   --content-type="text/xml"        --cache-control "max-age=3600, public"     --metadata-directive="REPLACE" --recursive
    - aws s3 cp s3://$S3_BUCKET_NAME s3://$S3_BUCKET_NAME --exclude "*" --include "*.mp4"   --content-type="video/mp4"       --cache-control "max-age=604800, public"   --metadata-directive="REPLACE" --recursive
    - aws s3 cp s3://$S3_BUCKET_NAME s3://$S3_BUCKET_NAME --exclude "*" --include "*.webm"  --content-type="video/webm"      --cache-control "max-age=604800, public"   --metadata-directive="REPLACE" --recursive
+    - aws s3 cp s3://$S3_BUCKET_NAME s3://$S3_BUCKET_NAME --exclude "*" --include "*.vtt"   --content-type="text/vtt"        --cache-control "max-age=604800, public"   --metadata-directive="REPLACE" --recursive
    - aws s3 cp s3://$S3_BUCKET_NAME s3://$S3_BUCKET_NAME --exclude "*" --include "*.docx"  --content-type="application/vnd.openxmlformats-officedocument.wordprocessingml.document" --cache-control "max-age=604800, public" --metadata-directive="REPLACE" --recursive
    - aws s3 cp s3://$S3_BUCKET_NAME s3://$S3_BUCKET_NAME --exclude "*" --include "*.pdf"   --content-type="application/pdf" --cache-control "max-age=604800, public"   --metadata-directive="REPLACE" --recursive

--- a/content/_index.md
+++ b/content/_index.md
@@ -2,5 +2,5 @@
 title = "Jake Jarvis – Web & Mobile Developer in Boston, MA"
 description = "I'm a full-stack web engineer and mobile developer based in Boston, Massachusetts specializing in modern JavaScript frameworks and iOS apps."
 type = "home"
-date = "2019-07-29"
+date = "2019-08-04"
 +++
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -11,7 +11,7 @@
      <p>I fell <a href="{{ "y2k/" | absURL }}" title="My Terrible, Horrible, No Good, Very Bad First Website" id="y2k">in love with front-end web development <span id="shh">(don't judge!)</span></a> back when my only source of income was <span id="fairy">the Tooth Fairy</span>.</p>
      <p>Since then, my side projects 
        <a href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/" title="&quot;Student designs iPhone JoeyTracker app&quot; on The Tufts Daily" id="news-1" target="_blank" rel="noopener noreferrer nofollow">have</a> <!-- https://archive.fo/LZ3y0 --> <!-- /daily.pdf -->
-        <a href="{{ "leo.mp4" | absURL }}" title="Powncer segment on The Lab with Leo Laporte (G4techTV)" id="news-2" target="_blank" rel="noopener">been</a> <!-- https://player.vimeo.com/video/224336631?dnt=1 -->
+        <a href="{{ "leo/" | absURL }}" title="Powncer segment on The Lab with Leo Laporte (G4techTV)" id="news-2" target="_blank" rel="noopener">been</a>
        <a href="https://money.cnn.com/2007/06/01/technology/facebookplatform.fortune/index.htm" title="&quot;The new Facebook is on a roll&quot; on CNN Money" id="news-3" target="_blank" rel="noopener noreferrer nofollow">featured</a> <!-- https://archive.fo/Juzjc -->
        <a href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/" title="&quot;Your Next Client? The CEO&#39;s Son&quot; on Advertising Age" id="news-4" target="_blank" rel="noopener noreferrer nofollow">in</a> <!-- https://archive.fo/Hzuyx -->
        <a href="https://www.wired.com/2007/04/our-web-servers/" title="&quot;Middio: A YouTube Scraper for Major Label Music Videos&quot; on Wired" id="news-5" target="_blank" rel="noopener noreferrer nofollow">various</a>
--- a/static/leo/index.html
+++ b/static/leo/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Powncer on &quot;The Lab with Leo Laporte&quot; &ndash; Jake Jarvis &#x1f468;&#x200d;&#x1f4bb;</title>
+    <link rel="canonical" href="https://jarv.is/leo/">
+    <link rel="icon" type="image/png" href="https://jarv.is/favicon-128.png" sizes="128x128">
+    <link rel="icon" type="image/png" href="https://jarv.is/favicon-96.png" sizes="96x96">
+    <link rel="icon" type="image/png" href="https://jarv.is/favicon-64.png" sizes="64x64">
+    <link rel="icon" type="image/png" href="https://jarv.is/favicon-48.png" sizes="48x48">
+    <link rel="icon" type="image/png" href="https://jarv.is/favicon-32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="https://jarv.is/favicon-16.png" sizes="16x16">
+    <link rel="shortcut icon" href="https://jarv.is/favicon.ico">
+    <link rel="dns-prefetch" href="https://stats.jarv.is">
+    <link rel="stylesheet" href="https://jarv.is/leo/plyr/plyr.css">
+    <style>
+      html, body {
+        display: table;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        color: #202020;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+          "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+          "Droid Sans", "Helvetica Neue", sans-serif,
+          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      }
+      div#container {
+        display: table-cell;
+        vertical-align: middle;
+        margin: 0 auto;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+      }
+      img#logo {
+        height: 48px;
+        width: 48px;
+        margin-top: 6px;
+      }
+
+      /* responsive embed */
+      video, .plyr {
+        width: 640px;
+        margin: 0 auto;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+          "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+          "Droid Sans", "Helvetica Neue", sans-serif,
+          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      }
+      @media screen and (max-width: 640px) {
+        video, .plyr {
+          width: 100%;
+        }
+        h1 {
+          font-size: 1.6em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <h1>Powncer App on <em>"The Lab with Leo Laporte"</em></h1>
+
+      <video id="player" poster="https://jarv.is/leo/thumb.png" controls crossorigin playsinline>
+        <!-- Video files -->
+        <source src="https://jarv.is/leo/leo.webm" type="video/webm">
+        <source src="https://jarv.is/leo/leo.mp4" type="video/mp4">
+
+        <!-- Caption files -->
+        <track src="https://jarv.is/leo/subs.en.vtt" kind="captions" label="English" srclang="en" default>
+
+        <!-- Fallback for browsers that don't support the <video> element -->
+        Your browser doesn't support HTML5 video. <a href="https://jarv.is/leo/leo.mp4">Click here to view the raw .mp4 video.</a>
+      </video>
+
+      <p><a href="https://jarv.is/"><img src="https://jarv.is/favicon-128.png" id="logo" alt="Return home" title="Return home"></a></p>
+    </div>
+
+    <script src="https://jarv.is/leo/plyr/plyr.min.js"></script>
+    <script>
+      const player = new Plyr('#player', {
+        debug: false,
+        iconUrl: "https://jarv.is/leo/plyr/plyr.svg",
+        blankVideo: "https://jarv.is/leo/plyr/blank.mp4",
+        settings: [],
+        storage: { enabled: false },
+        autoplay: false,
+        captions: { active: true, language: 'en', update: false }
+      });
+    </script>
+
+    <script>
+      var _paq = _paq || [];
+      _paq.push(['setRequestMethod', 'POST']);
+      _paq.push(['setSecureCookie', true]);
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      _paq.push(['enableHeartBeatTimer']);
+      (function() {
+        var u='https://stats.jarv.is/';
+        _paq.push(['setTrackerUrl', u+'send']);
+        _paq.push(['setSiteId', '1']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.defer=true; g.src=u+'stats.js'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+  </body>
+</html>
--- a/static/leo/leo.mp4
+++ b/static/leo/leo.mp4
--- a/static/leo/leo.webm
+++ b/static/leo/leo.webm
--- a/static/leo/plyr/blank.mp4
+++ b/static/leo/plyr/blank.mp4
--- a/static/leo/plyr/plyr.css
+++ b/static/leo/plyr/plyr.css
--- a/static/leo/plyr/plyr.js
+++ b/static/leo/plyr/plyr.js
--- a/static/leo/plyr/plyr.min.js
+++ b/static/leo/plyr/plyr.min.js
--- a/static/leo/plyr/plyr.min.js.map
+++ b/static/leo/plyr/plyr.min.js.map
--- a/static/leo/plyr/plyr.svg
+++ b/static/leo/plyr/plyr.svg
--- a/static/leo/subs.en.vtt
+++ b/static/leo/subs.en.vtt
@@ -0,0 +1,111 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.029
+["The Lab" Theme Music]
+
+00:00:05.029 --> 00:00:08.760
+Welcome back to "The Lab with Leo," I'm Kate Abraham and now it's time for our
+
+00:00:08.760 --> 00:00:13.000
+Facebook app of the day. And in honor of
+the lovely Amber – wasn't it great to see Amber?
+
+00:00:13.040 --> 00:00:16.470
+Oh, it was so nice to see her.
+She's looking so tan!
+
+00:00:16.470 --> 00:00:21.140
+Toronto weather.
+Yeah, really? I think she was at Prince Edward Island for a few days
+
+00:00:21.140 --> 00:00:26.380
+for Canada Day.
+So she's out there like this, tanning in the ocean. Good for her.
+
+00:00:26.380 --> 00:00:28.060
+She knows how to enjoy herself.
+[laughs]
+
+00:00:28.060 --> 00:00:30.740
+So in honor of Amber, our Facebook app of the day is
+
+00:00:30.740 --> 00:00:35.360
+Powncer, or Poncer or Punser
+
+00:00:35.360 --> 00:00:39.000
+However you want to say it, I say Powncer.
+So there's your Pownce page.
+
+00:00:39.000 --> 00:00:44.520
+So what you do is, basically, it literally updates your most recent post on Pownce.
+So literally I've just put here
+
+00:00:44.520 --> 00:00:49.200
+"Playing with Pownce," then if I just post this, and what will happen is it'll automatically
+
+00:00:49.200 --> 00:00:52.460
+I bet you've done this in advance, it'll
+automatically go through to my actual
+
+00:00:52.460 --> 00:00:56.420
+site on Facebook and as you can see, you can see exactly what I'm doing
+
+00:00:56.420 --> 00:00:59.000
+And then can they click that and takes
+it to your Pownce page?
+Yeah, then you can
+
+00:00:59.000 --> 00:01:02.860
+reply to me. Oh that's neat!
+Then what'll happen, you can basically send me a reply.
+
+00:01:02.860 --> 00:01:06.460
+You know who wrote that? I don't know.
+Jake Jarvis wrote that.
+
+00:01:06.479 --> 00:01:10.560
+And I know who Jake Jarvis is, he's on my
+Facebook friends list.
+
+00:01:10.560 --> 00:01:14.250
+He's a young guy, I think he's a high school kid, the son of Jeff Jarvis, who's
+
+00:01:14.250 --> 00:01:18.450
+a very well known media critic.
+These kids freak me out. Isn't it neat?
+
+00:01:18.450 --> 00:01:22.590
+Jake's written some great applications
+How old is he?
+I don't know, I think 16 or 17.
+
+00:01:22.590 --> 00:01:26.100
+That scares me.
+He's written a lot, he's one of the best Facebook developers out there.
+
+00:01:26.100 --> 00:01:29.310
+Did a nice job with that.
+That's fantastic.
+Isn't that great? I love it, that's so good.
+
+00:01:29.310 --> 00:01:31.860
+But for more details, obviously Facebook
+apps
+
+00:01:31.860 --> 00:01:37.080
+I said facebook.com/apps.
+There's lots of them, there's thousands.
+So many on there.
+
+00:01:37.080 --> 00:01:41.100
+There's a lot of bad ones but some really good ones.
+Well that's what you're here for, to tell us which ones are good.
+
+00:01:41.100 --> 00:01:44.540
+Exactly, this was a good one, I like it.
+She installs them all so that you can
+
+00:01:44.540 --> 00:01:48.220
+tell, you got like a page this long!
+You just keep scrolling, scrolling, scrolling...
+[laughs]
--- a/static/leo/thumb.png
+++ b/static/leo/thumb.png
--- a/worker.js
+++ b/worker.js
@@ -1,5 +1,5 @@
 let newHeaders = {
-  "Content-Security-Policy": "default-src 'none'; script-src 'self' 'unsafe-inline' stats.jarv.is comments.jarv.is buttons.github.io platform.twitter.com cdn.syndication.twimg.com; style-src 'self' 'unsafe-inline' comments.jarv.is platform.twitter.com; img-src 'self' data: https:; font-src 'self' comments.jarv.is; object-src 'self'; media-src 'self'; base-uri 'self' stats.jarv.is; form-action 'self' platform.twitter.com syndication.twitter.com; frame-src 'self' www.youtube.com www.youtube-nocookie.com platform.twitter.com syndication.twitter.com codepen.io; frame-ancestors 'self'; worker-src 'none'; connect-src 'self' jarvis.report-uri.com stats.jarv.is comments.jarv.is api.github.com syndication.twitter.com; upgrade-insecure-requests; report-uri https://jarvis.report-uri.com/r/d/csp/enforce; report-to default",
+  "Content-Security-Policy": "default-src 'self'; script-src 'self' 'unsafe-inline' stats.jarv.is comments.jarv.is buttons.github.io platform.twitter.com cdn.syndication.twimg.com; style-src 'self' 'unsafe-inline' comments.jarv.is platform.twitter.com; img-src 'self' data: https:; font-src 'self' comments.jarv.is; object-src 'self'; media-src 'self'; base-uri 'self' stats.jarv.is; form-action 'self' platform.twitter.com syndication.twitter.com; frame-src 'self' www.youtube.com www.youtube-nocookie.com platform.twitter.com syndication.twitter.com codepen.io; frame-ancestors 'self'; worker-src 'none'; connect-src 'self' jarvis.report-uri.com stats.jarv.is comments.jarv.is api.github.com syndication.twitter.com; upgrade-insecure-requests; report-uri https://jarvis.report-uri.com/r/d/csp/enforce; report-to default",
  "Report-To": "{\"group\":\"default\",\"max_age\":604800,\"endpoints\":[{\"url\":\"https://jarvis.report-uri.com/a/d/g\"}]}",
  "NEL": "{\"report_to\":\"default\",\"max_age\":604800}",
 //  "Strict-Transport-Security" : "max-age=1000",