O'Reilly

Tutorials Page 4

  • WebP Images & Performance

    It’s said that a picture is worth a thousand words, but online, a picture can be worth a thousand kilobytes or more! HTTP Archive shows that images make up 64% of a Web page’s total size on average. With this in mind, image...

  • Optimize GIFs

    I've written a lot about converting different media types lately, especially GIFs, including Convert Video to GIF or GIF to VideoDetect if a GIF is Animated, and Get the First Frame of an Animated GIF with ImageMagick, but whether it's ImageMagick or ffmpeg doing the work, GIFs do not always...

  • fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • Basic AJAX Request: XMLHttpRequest

    There are a number of common front-end tasks that many of us never touched the deep, dirty APIs for because our beloved JavaScript frameworks have provided easier ways to work with them.  That's why I wrote How JavaScript Event Delegation WorksDo a Basic HTTP Request with...

  • Convert Video to GIF or GIF to Video

    I feel like GIFs are more popular now than back in the day when they were just about the only way to have moving imagery on the web.  They were so useful because crap like Real Video Player, Windows Media, and other crap formats all required a...

  • Track.js Error Reporting
  • Element matches / matchesSelector

    I was thinking about HTML elements and selectors recently.  We usually start by searching for an element(s) via querySelector/querySelectorAll, which makes sense, but what if you want to validate that an element that wasn't specifically selected matches a given selector?  For example, say you have a...

  • MutationObserver API

    One of my favorite web tricks was using CSS and JavaScript to detect insertion and removal of a DOM node, detailed in Detect DOM Node Insertions with JavaScript and CSS Animations.  The technique and blog post were published during a time when we didn't have a reasonable...

  • File API

    Working with file uploads, especially on the front end, was always a hassle.  We didn't use to be able to drag and drop files, complete AJAX uploads, provide multiple files, and hell, we couldn't get any information about the file until it hit the server; you'd...

  • Media Temple Hosting
  • Qards: How to Create an Awesome Website with Video Backgrounds

    A video is nothing else then "image in motion".  For someone, a video might represent the essence of enriching memories from childhood; for another one it might be a PR and sales instrument to showcase the latest smart device on market. No matter what's the story...

  • Measuring Performance

    Clients care deeply about web performance and they depend on us to articulate and measure how well their website is performing. If you have a service level agreement (SLA) with your client, and you should, then learning how to measure key metrics is crucial...