For Your Reading Pleasure: EasyCaptions

Introducing EasyCaptions: A simple system for adding captions and an interactive transcript to online videos. EasyCaptions uses progressive enhancement to provide the best possible experience for all visitors, regardless of their browser’s JavaScript, HTML5 or Flash support. Demonstration Background I don’t produce much video these days, but as a web surfer I often encounter other … Continue reading “For Your Reading Pleasure: EasyCaptions”

Rounded corners on images using CSS3

Most browsers do not allow images to be cropped using CSS3’s border-radius. Tim Van Damme recently posted a workaround for this issue. Here’s a MooTools script that automates Tim’s workaround yet degrades gracefully when JavaScript is disabled.

HTML5 Video, minus Ogg

Mozilla, the makers of Firefox, refuse to support the MP4/H.264 standard because it isn’t open-source and free from licensing constraints. Without Ogg, Firefox’s HTML5 video is rendered useless and requires a Flash-based fallback system. However, Firefox’s handling of the video element breaks the fallback mechanism. A scripted solution is required.

Here’s a simple script that will detect whether HTML 5 video is supported in the browser, and if it is, will check to see if this is Firefox. If yes, it deletes the specified video element but leaves the Flash fallback in its place.

A new removeClasses utility for MooTools

MooTools’ removeClass utility will only work if the classes you want to remove are listed in the same order as the target element’s className property. Here’s a new removeClasses utility that fixes this shortcoming. A framework-neutral version is also provided.

CustomInput Class: Accessible, Custom-Styled Checkboxes and Radio Buttons

I’m currently working on a new quiz system at work, and decided I’d incorporate Filament’s wonderful stylized checkboxes and radio buttons into my project, which meant it was time to roll up my sleeves and code me some Moo.

Lazy loading excanvas.js

I started by developing an HTML example page that used the canvas element and had the excanvas.js file hard-coded. Everything worked as planned. I then took out the hard-coded excanvas.js file and replaced it with a JavaScript-based lazy loader. Guess what? It didn’t work. A simple modification to the excanvas.js file fixed the problem.

Image-Free Progress Bar using MooTools and Canvas

As part of my ongoing experiments with <canvas>, I decided to convert an image-based progress bar to an image-free canvas-based system. I just finished whipping up a proof-of-concept; it uses MooTools to generate the canvas and CSS code. No images were harmed in the making of this progress bar. More info later (time permitting)