Media Tutorials

  • By
    How to Create a Screen Recording with Quicktime

    Creating screen recordings is an essential skill for web developers. Screen recordings can illustrate new features, bugs, or a variety of other ideas. I'm often asked what app I use to create screen recordings and people are shocked when I tell them Quicktime!

  • By
    How to Blur Faces in a Video from Command Line

    Privacy is always incredibly important, especially with visual media where you may not have the permission of individuals in the video. If you're filming something in public, it's likely you'll catch someone's face who simply doesn't want or need to be identified. This recently...

  • By
    How to Create a Diff of Two Images

    When I was a child, I loved looking for Waldo in the "Where's Waldo?" book series. These days I'm a sucker for TMZ's "What's the Big Frigin Difference" images, where TMZ slightly changes an image and you have to spot the differences between the two.

  • By
    Create a Thumbnail From a Video with ffmpeg

    Creating a thumbnail to represent a video is a frequent task when presenting media on a website. I previously created a shell script to create a preview video from a larger video, much like many adult sites provide. Let's view how we can...

  • By
    How to Reverse an Animated GIF

    Modifying visual media via code has always been a fascination of mine. Probably because I'm not a designer and I tend to stick to what I'm good at. One visual effect I love is seeing video reversed -- it provides a sometimes hilarious perspective...

  • By
    JavaScript in SVGs

    SVGs are such an amazing tool for creating custom fonts, animations, size-reduced graphics, and more. They're part HTML, part image, and all awesome. Many websites have moved toward SVG instead of JPG, GIF, and PNG due to the flexibility that SVG provides.Whats one example...

  • By
    How to Crop Videos

    During a recent episode of the Script and Style podcast, I had noticed that the video recording had showed a bit of our internal chat that wasn't necessary for our viewers to see. While there's nothing wrong with giving viewers a peek into the show...

  • By
    Set Video Playback Speed with JavaScript

    I love that media has moved from custom plugins (Flash…gross) to basic HTML <video> and <audio> elements. Treating these media sources as just another element allows us to use CSS filters to adjust display, for example. The less we need to do with...

  • By
    AI-Backed Image Background Removal

    I've worked on dozens of eCommerce sites in my career and many of them were hamstrung by the same pain points: tax collection, payment customization, and image optimization. While tax collection and payment customization were important, image optimization was always the hardest and...

  • By
    Convert Video to Grayscale

    I'm a JavaScript fanatic but I've always been fascinated with media manipulation. Maybe it's because I've secretly always wanted to be a designer, but I'm fine with being able to manipulate art with software instead of create the art myself. One type of art I've always...