67°F

Aaron Parecki

  • Articles
  • Notes
  • Projects

#javascript

  • Jeremy Keith https://adactio.com/

    Cancelling Requests with Abortable Fetch

    April 20th, 2018

    This is a really good use-case for cancelling fetch requests: making API calls while autocompleting in search.

    San Francisco, California • 60°F
    #fetch #cancelling #abortable #requests #api #javascript #code #autocomplete #frontend #development #ajax
    Fri, Apr 20, 2018 1:21pm +00:00 (liked on Fri, Apr 20, 2018 5:38pm -07:00)
  • Winamp2-js (jordaneldredge.com)
    Portland, Oregon • 56°F
    #javascript #html5 #winamp
    Tue, Mar 6, 2018 4:30pm -08:00
  • Introducing Cloudflare Workers: Run Javascript Service Workers at the Edge (blog.cloudflare.com)
    Portland, Oregon
    #cloudflare #cache #javascript #serviceworker
    Fri, Sep 29, 2017 6:45am -07:00
  • Adactio: Links—Send messages when you’re back online with Service Workers and Background Sync – Twilio Cloud Communications Blog (adactio.com)
    Portland, Oregon
    #offline #sync #serviceworkers #javascript
    Tue, Feb 21, 2017 8:23am -08:00
  • Cross-Site Request Forgery is dead! (scotthelme.co.uk)
    Portland, Oregon
    #csrf #cookie #javascript
    Mon, Feb 20, 2017 12:02pm -08:00
  • Day 61: Supporting Media Fragment URIs for Video and Audio #100DaysOfIndieWeb

    Sun, Feb 19, 2017 6:51am -08:00

    Yesterday, Marty McGuire published an audio version of the IndieWeb "This Week" newsletter, and shared the link in our chat. Aside from being a fantastic production, this also sparked some discussions about Webmentions. His podcast uses a few of of my 100Days songs, which he cites in the description. Since he included a link to my posts about those songs, his podcast now appears as a comment on those pages!

    Other mentions of Day 48

    In the chat, Tantek posed the question of how a post like Marty's podcast could link to audio it uses and indicate the range of audio that uses that piece. There is already a Media Fragments URI spec, published in 2012, but it was at first unclear as to how widely that was implemented if at all. The spec is also kind of complicated. It starts out simple, but then has a bunch of features that seem to be made up out of nowhere. The simple stuff is based off of YouTube's fragment syntax for linking to specific times of a video.

    In the Media Fragments spec, if you visit a URL of a media file with a fragment of "#t=10", the browser should immediately skip to 10 seconds into the file. There is also a syntax for specifying a range, such as "#t=10,15" which indicates the range from 10 to 15 seconds.

    Thankfully, the spec links to an implementation report, on which I was somewhat surprised to see that both Firefox and WebKit have implemented at least basic support! I quickly tried this out on Chrome, Firefox and Safari on my computer, and sure enough, all three browsers have support! If you want to check it out, click on this link, which should start playing the video at 30 seconds: https://aaronparecki.com/2017/02/17/9/video.mp4#t=30

    I was curious if there was a way to take advantage of this browser support to quickly implement the feature like YouTube has, where I could send time-offset links to my HTML pages that include the media. I figured if I could update the <video> and <audio> source attribute with Javascript, then I could make it work. This led me down a path of learning about the HTML5 tags, where I learned that changing the src attribute of the <video>'s inner <source> tag doesn't do anything. 

    Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly.

    So here's the original Javascript snippet I came up with to put this together.

    document.addEventListener("DOMContentLoaded", function(event) {
      // Apply time offset from this page's URL to any media on the page
      if(window.location.hash && window.location.hash.match(/^#t=/)) {
        document.querySelectorAll("video,audio").forEach(function(el){ 
          el.src = el.currentSrc + window.location.hash; 
        });
      }
    });
    

    Summary: If the page URL has a fragment, and that fragment starts with t=, then find all the video and audio tags on the page, and update their URL to include that fragment.

    This actually works great, but I wanted to take it further. I left this example here because it's easier to read than the snippet that follows. To round out the whole experience, I wanted a few things.

    • If you pause the video, the page URL fragment should update to the time offset at which you've paused. This makes generating these fragment URLs easier.
    • If you change the fragment URL manually, that should copy the fragment to the media again. This also makes it easier to generate these fragment URLs.

    Here is the code that accomplishes all of these.

    function cloneMediaFragment() {
      // Check that the fragment is a Media Fragment (starts with t=)
      if(window.location.hash && window.location.hash.match(/^#t=/)) {
        // Find any video and audio tags on the page
        document.querySelectorAll("video,audio").forEach(function(el){
          // Create a virtual element to use as a URI parser
          var parser = document.createElement('a');
          parser.href = el.currentSrc;
          // Replace the hash 
          parser.hash = window.location.hash;
          // Set the src of the video/audio tag to the full URL
          el.src = parser.href;
        });
      }
    }
    
    document.addEventListener("DOMContentLoaded", function() {
      cloneMediaFragment();
      // When the media is paused, update the fragment of the page
      document.querySelectorAll("video,audio").forEach(function(el) { 
        el.addEventListener("pause", function(event) {
          // Update the media fragment to the current time
          // Use replaceState to avoid triggering the "hashchange" listener above
          history.replaceState(null, null, "#t=" + Math.round(event.target.currentTime));
        });
      });
    });
    
    // If the user changes the hash manually, clone the fragment to the media URLs
    window.addEventListener("hashchange", cloneMediaFragment);
    

    As you can see, not quite as simple as the other snippet, but this accomplishes all of the goals. I've written this in plain Javascript, so you can easily drop it in to your own website! All you need to do is drop this Javascript into your site on any pages that have video or audio players, and it will do the rest!

    Now when you visit any of my pages that include audio or video, you can quickly get links to specific time offsets!

    Try it out! Jump to 36 seconds into this video: https://aaronparecki.com/2017/02/17/9/day59#t=36

    I've published this on GitHub so you can keep up with the latest version of the code there!

    Portland, Oregon
    1 like 1 reply 5 mentions
    #100daysofindieweb #html5 #media #javascript #p3k
    Sun, Feb 19, 2017 6:51am -08:00
  • Espruino - Puck.js (www.espruino.com)
    Portland, Oregon
    #bluetooth #javascript #hardware #arduino #esp8266 #electronics
    Fri, Feb 17, 2017 8:21am -08:00
  • 10 things I learned making the fastest site in the world (hackernoon.com)
    Portland, Oregon
    #web #javascript #css
    Tue, Dec 27, 2016 1:24pm -08:00
  • How Mobile Safari emulates mouse events - sitr.us (sitr.us)
    Portland, Oregon
    #ios #safari #mobile #webdevelopment #javascript
    Thu, Dec 15, 2016 12:17pm -08:00
  • You Don't Need Javascript: CSS is powerful, you can do a lot of things without js (github.com)
    Portland, Oregon
    #javascript #css
    Mon, Nov 14, 2016 11:36am -08:00
  • You Might Not Need JavaScript (youmightnotneedjs.com)
    Portland, Oregon
    #css #resources #javascript
    Wed, Oct 12, 2016 5:49am -07:00
  • How it feels to learn Javascript in 2016 (hackernoon.com)
    Portland, Oregon
    #javascript #hell
    Mon, Oct 3, 2016 4:57pm -07:00
  • Why Learning Angular 2 Was Excruciating (hackernoon.com)
    "The Java engineer in me is screaming with the frustration of this ecosystem. What sort of madness has web development devolved into?"
    Salt Lake City, Utah
    #angular #javascript
    Mon, Sep 19, 2016 2:36pm -06:00
  • Adactio: Journal—A little progress (adactio.com)
    Portland, Oregon
    #indieweb #css #javascript #ajax
    Sun, May 29, 2016 11:05am -07:00
  • Vjeux » Image Layout Algorithm – Google Plus (blog.vjeux.com)
    Düsseldorf, Nordrhein-Westfalen
    #flickr #photos #layout #javascript #justified
    Tue, May 10, 2016 1:35am +02:00
  • flickr/justified-layout at gh-pages (github.com)
    Düsseldorf, Nordrhein-Westfalen
    #flickr #photos #layout #javascript #justified
    Tue, May 10, 2016 1:35am +02:00
  • Flickr ‘Justified’ Layout in JQuery – Wackylabs.net (www.wackylabs.net)
    Düsseldorf, Nordrhein-Westfalen
    #flickr #photos #layout #javascript #justified
    Tue, May 10, 2016 1:34am +02:00
  • NPM & left-pad: Have We Forgotten How To Program? (www.haneycodes.net)
    "It feels to me as if the entire job of an NPM-participating developer is writing the smallest amount of code possible to string existing library calls together in order to create something new that functions uniquely for their personal or business need."
    Portland, Oregon
    #npm #nodejs #javascript
    Wed, Mar 23, 2016 5:39pm -07:00
  • Maybe we could tone down the JavaScript (eev.ee)
    Portland, Oregon
    #jsdr #javascript #web #websites
    Mon, Mar 7, 2016 9:02am -08:00
  • Why I No Longer Use MVC Frameworks (www.infoq.com)
    "I can assure you that you are infinitely better off writing code than metadata, be it as a template or a complex query language like GraphQL."
    Portland, Oregon
    #javascript #html #development
    Mon, Feb 15, 2016 10:47am -08:00
next

Hi, I'm Aaron Parecki, co-founder of IndieWebCamp. I maintain oauth.net, write and consult about OAuth, and am the editor of several W3C specfications. I record videos for local conferences and help run a podcast studio in Portland.

I wrote 100 songs in 100 days! I've been tracking my location since 2008, and write down everything I eat and drink. I've spoken at conferences around the world about owning your data, OAuth, quantified self, and explained why R is a vowel.

Follow
  • Okta Developer Advocate
  • IndieWebCamp Founder
  • W3C Editor
  • Stream PDX Co-Founder
  • backpedal.tv

  • W7APK
  • ⭐️ Life Stack
  • All
  • Articles
  • Bookmarks
  • Notes
  • Photos
  • Replies
  • Reviews
  • Sleep
  • Travel
  • Contact
© 1999-2018 by Aaron Parecki. Powered by p3k. This site supports Webmention.
Except where otherwise noted, text content on this site is licensed under a Creative Commons Attribution 3.0 License.
IndieWebCamp Microformats Webmention W3C HTML5 Creative Commons