In this post I'm going to explain my recent WICG proposal for [Synthetic]MediaElement, and go into more detail about some of the use cases. In short, MediaElement is a sub-interface of HTMLMediaElement—something which can be played/paused, has a currentTime, etc.—and SyntheticMediaElement is an implementation of MediaElement, not necessarily tied to the DOM. The goal is to preempt the spread of framework-specific animation plugins.

The next generation of our CodeMirror recording plugins is here. They now support recording/replaying multiple files (e.g. index.html, style.css, and script.js), and are much easier to set up and configure. Even better, they're also compatible with other animation libraries like Remotion and GSAP!

Check out the demos:

I'm very excited to announce the release of Liqvid 2.1. The major new feature is the ability to use the Web Animations API in videos, making animation in Liqvid dramatically easier. There are also dozens of little changes making Liqvid development smoother and easier overall.

I've released a new command-line tool providing several helpful utilities for mastering projects. This replaces the older rp-master command. You can:

• 🎙️ liqvid audio Join, convert, and transcribe audio

• 📦 liqvid build Easily bundle your project for deployment

• 📺 liqvid render Render to static video

• 👀 liqvid serve Easily run a preview server for your video

• 🖼️ liqvid thumbs Generate thumbnails

I've created the package desmos-react to provide a React wrapper around the Desmos graphing calculator, making it easy to create interactive demos declaratively. I also added TypeScript typings.

Here's an example of using it in a video 👇 You can get the source for this demo from https://github.com/ysulyma/ex-desmos. This demo also shows off the upcoming captions support—you can enable captions by clicking on the gear in the bottom.

rp-codemirror 2.0 has been released, bringing support for CodeMirror 6. This has much better accessibility and touchscreen support compared to CodeMirror 5. Here's a demo; you can experiment with the code yourself in the Playground tab:

I'm delighted to announce the rp-master@liqvid/cli package, which brings two very exciting features: automatic rendering of traditional videos, and much easier thumbnail generation.

Close on the heels of ractive-player 2.0, we now have a site with documentation and tutorial! Hooray!

The launch of ractive-player.org is dedicated to my friend Joel Adria. Joel and I have known each other since kindergarten; we started coding together as part of the Webmasters at Avalon Junior High, which is where I got my start in web development. Our most successful collaboration was the wildly popular Bearbook, a timetable-sharing Facebook app for University of Alberta students which in its heyday had over 9,000 users. Today is Joel's 30th birthday. Happy birthday, Joel!