Skip to main content

· 8 min read
Yuri Sulyma
tl;dr

MediaElement is a proposed interface for general-purpose imperative animation, patterned after HTMLMediaElement. SyntheticMediaElement is an implementation of this interface, aimed at library authors. If you've ever implemented a scrubber bar, this is for you!

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.

· 3 min read
Yuri Sulyma

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:

· 4 min read
Yuri Sulyma

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.

· One min read
Yuri Sulyma

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.

· 2 min read
Yuri Sulyma

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:

· One min read
Yuri Sulyma

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.

· One min read
Yuri Sulyma

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!