HTML5 Tutorials

  • By
    Customizing HTML Form Validation

    Form validation has always been my least favorite part of web development. You need to duplicate validation on both client and server sides, handle loads of events, and worry about form element styling. To aid form validation, the HTML spec added some new form attributes...

  • By
    Legacy String Methods for Generating HTML

    I'm always really excited to see new methods on JavaScript primitives. These additions are acknowledgement that the language needs to evolve and that we're doing exciting new things. That being said, I somehow just discovered some legacy String methods that you probably shouldn't use...

  • By
    Lazy Load IFRAMEs

    We've known for a decade that lazy loading resources like JavaScript, CSS, and especially images is a massive performance win for web pages. At first we used tricks and JavaScript to do the lazy loading, but more recently native image lazy loading has debuted...

  • By
    JavaScript Picture-in-Picture API

    As a huge fan of media on the web, I'm always excited about enhancements to how we can control our media. Maybe I get excited about simple things like the <video> tag and its associated elements and attributes because media on the web started with custom...

  • By
    Image Lazy Loading

    Lazy loading images is a practice that's been popular for a decade and for good reason: images are usually the heaviest downloads on a given webpage and avoiding unloading images that are never seen saves the user bandwidth. There are plugins for lazy loading images in...

  • By
    Create Custom Video Player Controls with CanJS

    In this guide, you will learn how to create a custom video player using the <video> element and CanJS. The custom video player will: Have custom play and pause buttons. Show the current time and duration of the video. Have a <input type="range"> slider that can adjust the position...

  • By
    Awesome File Compression and Delivery with KeyCDN and Brotli

    I've seen the KeyCDN name around for years, mostly as a free content delivery network (CDN) for many open source JavaScript frameworks, and based on that alone I've always thought very well of them.  KeyCDN recently asked me to check out one of...

  • By
    Detect Supported Audio Formats with JavaScript

    As streaming becomes our main entertainment source and vendors fight to create the best video format, it's going to be more and more important that we detect device and browser video support before posting videos on our websites.  We think less about audio but the same...

  • By
    Detect Supported Video Formats with JavaScript

    Over the past few years we've been seeing new audio, video, and image formats take shape to challenge the legacy formats that we've used since the web's inception.  This is a great development as we have more processing power and better compression algorithms have been developed...

  • By
    Six Tiny But Awesome ES6 Features

    Everyone in the JavaScript community loves new APIs, syntax updates, and features -- they provide better, smarter, more efficient ways to accomplish important tasks.  ES6 brings forth a massive wave of new goodies and the browser vendors have worked hard over the past year to get those language updates...