Issue #558  (ImageKit Review, JS Libs, Git/CLI, Jamstack)03/28/24

The following is a paid product review for ImageKit's Video API, a developer-friendly toolkit for real-time video optimizations and transformations, to help you build stunning visual experiences.

If you’ve been a long-time reader of this newsletter, then you might already be familiar with this week’s featured product: ImageKit is a developer platform that allows you to do real-time media transformations and optimizations. I did a full review of ImageKit’s basic features more than two years ago, which you can read in the newsletter archives here.

For this week’s review, I’m going to focus on ImageKit’s Video API. This feature is developer-friendly and can be a catalyst for your product’s engagement and conversions, providing a single source for a wide variety of transformed media files. Let’s take a look at how it can be used.

ImageKit’s Video API is based on a series of URL parameters that allow you to easily manipulate videos in real time. Note the URL structure shown in the image below.

The example URL includes a basic path along with the file name at the end of the URL. But notice the transformation parameters. The example video URL without transformations is as follows:

https://ik.imagekit.io/demo/sample-video.mp4

But with transformations, the URL will look like this if you’re using path parameters:

https://ik.imagekit.io/demo/tr:w-300,h-300/sample-video.mp4

If you’re using query string parameters, the URL is constructed like this:

https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200

This is a powerful way to transform your media content because the original video stays intact and the transformations are added optionally as you need them.

Video Resizing
The ImageKit docs have a comprehensive reference that describes all of the available video transformations, with demos and example syntax for the transformations.

To demonstrate with a live transformation, the example video from above (which is naturally 1280x720) can be modified on-the-fly by applying the following transformations:

• Crop the video to 400x300
• Maintain the aspect ratio
• Set the focus point

The transformed URL params look like this (click to view the transformed video):

tr:w-400,h-300,c-maintain_ratio,fo-left

Notice use of the fo-left parameter, which tells the cropping engine where to place the focus. In this case, I’ve chosen “left” as a relative crop, that is, the focus is on the left side of the image. Other focus settings include center, top, right, top_left, top_right, bottom_left, and bottom_right.

It should be noted that some parameters don’t work on their own; they’re designed to be used along with others. For example the fo-* (focus) parameters need to be used along with cm-pad_resize, c-maintain_ratio, or cm-extract – otherwise they won’t have any effect.

Video Overlays
Another useful transformation that ImageKit allows is the ability to do video overlays. This can be used for adding a watermark, instructional text, captions, and more.

I uploaded my own video and added my newsletter’s logo using the following URL params:

tr:l-image,i-wtwlogo_qnqiN0CWO.png,l-end

I can also change the transformation parameters to position the logo in the bottom right corner of the image using the following parameters:

tr:l-image,i-wtwlogo_qnqiN0CWO.png,lx-850,ly-530,l-end

The l-image and l-end parameters work sort of like opening and closing tags with the other parameters in between. The result is shown below.

This isn’t the most attractive example (i.e. the logo doesn’t really work well with this video as a background) but it demonstrates how simple it is to use a video and a logo to add a visual identifier that’s not intrinsically part of the original video.

In addition to adding images over videos you can also add text. Here’s a simple example where I’ve added the word “SQUIRREL” over my squirrel video:

tr:l-text,i-SQUIRREL,fs-50,co-red,l-end

Using the URL params I’ve specified the following:

• I’m overlaying text (l-text)
• What text I want to use (i-SQUIRREL)
• The font size (fs-50)
• The text color (co-red)

The docs include details on all the parameters available for overlaying text.

Other overlays that are possible using ImageKit’s Video API:

• Add video over video
• Add color blocks
• Add subtitles (e.g. using an .srt file)

When adding such overlays, you can also specify a whole slew of options on the overlays themselves, including position of the overlaid image and transformations on the image itself. This is known as layering the transformations, giving you full control over exactly what’s displayed to the user.

One thing to note is that when you’re experimenting with different transformations using a video URL, you might notice that the desired transformation doesn’t take place right away. This is due to the transformations being delivered asynchronously.

The asset is prepared when the transformation is requested and when it’s ready it will display (usually from 5 seconds up to 15 seconds, which can be changed in your settings). If the transformation isn’t ready when the video is requested, the default non-transformed version of the video will display instead.

Thumbnail Creation
Using the Video API, it’s easy to get a thumbnail or still-frame from any point in a video. To get the first frame of the video, for example, add ik-thumbnail.jpg to the end of any video URL. The end of my example video’s URL would look like this (click for full URL):

squirrel_J655PZMnK.mp4/ik-thumbnail.jpg

To get a still-frame from a certain point in a video’s duration to use as a thumbnail or for some other purpose, simply use the so (start offset) transformation parameter. Now the URL looks like this:

tr:so-20/squirrel_J655PZMnK.mp4/ik-thumbnail.jpg

My thumbnail is grabbed from the 20-second mark from the 22-second video, which you can compare to the original first-frame thumbnail. Just like any images being manipulated, you can adjust the thumbnail’s width, height, aspect ratio, etc. The full gamut of image transformations is listed in the docs.

Adaptive Bitrate Streaming
One final feature I'll discuss is the powerful way that ImageKit allows you to stream your media for different devices on different connection speeds, referred to as Adaptive Bitrate Streaming (ABS). During a stream, a client application will continuously optimize the delivered media to ensure smooth playback with minimal buffering.

For example, using the HTTP Live Streaming (HLS) protocol, the following parameters can be added to a video URL:

/ik-master.m3u8?tr=sr-240_360_480_720_1080

This generates an HLS manifest and five variants at the specified resolutions (240p, 360p, etc). This is a powerful feature for building streaming applications and similar tools that rely on smooth, uninterrupted playback.

ImageKit also supports Dynamic Adaptive Streaming over HTTP (aka "DASH"), which would look similar when represented with the API:

/ik-master.mpd?tr=sr-240_360_480_720_1080

With these streaming solutions, you can provide uninterrupted playback no matter the network conditions, bandwidth, or other constraints. You can read more about this in ImageKit's use case page covering ABS.

The docs on Video Transformations are a great place to start if you want to get familiar with all of ImageKit's Video API features. You can also check out the pricing plans. The free plan allows up to 20GB in bandwidth, 20GB of storage, unlimited requests, and unlimited image transformations. This is a great way to launch an MVP before committing to something larger.

So be sure to check out ImageKit’s Video API to see if it can fill your media transformation needs.

Now on to this week's tools!
 

JavaScript Libraries & Frameworks

Hwy — A simple, lightweight, and flexible web framework, built on Hono and HTMX, described as "a lot like NextJS or Remix, but it uses HTMX instead of React on the frontend."

Observable Framework — An open-source system for building data apps, dashboards, and reports that combines the power of JavaScript on the front-end for interactive graphics with any language you want on the back-end for data.

PixiJS — An HTML5 "creation engine" to build beautiful digital content with the fastest, most flexible 2D WebGL renderer.

Meco — Free your newsletters from the inbox. The inbox is full of distractions and too many subscriptions lead to inbox chaos. Time to liberate your inbox and move to Meco, a newsletter aggregator built for reading.    SPONSORED 

Socket Runtime — A set of APIs for building native apps for desktop and mobile using HTML, CSS, and JavaScript, with significant advantages over existing solutions (Electron, React Native, etc).

Peggy — A simple parser generator for JavaScript that produces fast parsers with excellent error reporting, to process complex data or computer languages and build transformers, interpreters, compilers, etc.

Svelte Native — Like React Native, but for Svelte. A mobile application framework to build mobile apps using the full power of Svelte and NativeScript.

The AHA Stack — Combine Astro, htmx and Alpine.js to create modern web apps sending HTML over the wire, replacing the SPA JS-heavy approach with a much simpler set of mental models and workflows.

React Server — A cutting-edge framework designed for crafting highly responsive full-stack services, leveraging the renowned syntax of React, to seamlessly merge front end familiarity with powerful server-side capabilities.

Tauri UI — Create modern desktop apps with Tauri in just a few simple steps with shadcn/ui and Radix UI.

Git, GitHub, & CLI Tools

Brand Kit — A quick lookup tool to see if a specific name is already used on well-known package/repo systems, namely GitHub, npm, PyPI, and Crates (for Rust).

Broot — A Rust-based tool to see and navigate directory trees, that provides an overview of a directory, even if it's a big one.

Pages CMS — A no-hassle CMS for GitHub that's configurable, uses a visual editor, media manager, full-text search, and more, with many extra features falling under the Pro plan.

Spin — A bash utility that improves the user-experience for teams using Docker, allowing you to replicate any environment on any machine, regardless if they are running MacOS, Windows, or Linux.

Smartr Daily — The essential newsletter for curious minds. Sourcing the smartest articles on the web. Thought-provoking ideas and insights delivered straight to your inbox daily.    SPONSORED 

StarTrack — A JavaSript-based tool and UI that lets you view a GitHub repo's star history, with support for comparisons, download to JSON/CSV, and more.

gcd — A shell tool that lets you quickly navigate to Git worktrees on your filesystem or to directories within your current worktree.

Sly CLI — A CLI tool to add components, icons, and utilities as code, not dependencies (e.g. converting SVG files to inline SVG instead of external resources).

Logdy — A multi-purpose DevOps tool, in the form of a single-binary that you add to your PATH, that enhances productivity in the terminal.

GitButler — A Git client for simultaneous branches on top of your existing workflow, featuring virtual branches, drag-and-drop branch management, and one-click commits.

Advertisement

Jamstack & CMS Tools

Eleventy Notes — A feature-rich, opinionated template for publishing your personal notes, documentation, or blog, built with Eleventy.

pgs.sh — A zero-install static site hosting service for hackers, with 25MB of asset storage in the free plan and a cheap option for upgrading to 10GB.

Hextra — A modern, responsive, batteries-included Hugo theme, styled with Tailwind, for creating beautiful static websites, inspired by a similar project called Nextra.

caisy — A headless CMS solution that features performance, speed, stability, and simplicity, with a fairly generous free tier.

Smartr Daily — The essential newsletter for curious minds. Sourcing the smartest articles on the web. Thought-provoking ideas and insights delivered straight to your inbox daily.    SPONSORED 

reveal-eleventy-template — A template that implements reveal.js (the popular slides/presentation framework) in Eleventy, for simple deployment and development.

Sveltia CMS — A Git-based, lightweight, headless CMS as a modern, quick replacement for Netlify CMS and Decap CMS.

Eleventy Photo Gallery — A starter project for creating your own photo or art gallery using Eleventy and CSS grid layout, and built for strong page speed.

Notion Next Blog — A Notion-powered blog based on Nobelium, another static blog built on Notion and Next.js.
 

Commercial Apps & Classifieds