Web Tools Weekly
Tools for Web Developers

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

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.

ImageKit's Video API URL Structure
ImageKit's Video API URL Structure

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.

Cropping a Video Using ImageKit's Video API
Cropping a video using ImageKit's Video API

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

A Transformed video Using ImageKit's Video API
Cropping and focusing a video using ImageKit's Video API

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

An Image Overlaid on a Video Using ImageKit's Video API
An image overlay on a video, centered (the default)

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.

A Positioned Image Overlay Using ImageKit's Video API
An image overlay on a video, positioned bottom-right

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

Text Overlay on Video Using ImageKit's Video API
A text overlay on a video

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:

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.

Setting Video Polling Duration for ImageKit's Video API
Setting video polling duration in the dashboard

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

Custom Video Thumbnail Using ImageKit's Video API
A custom still-frame from the 20s mark of the video

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.

The AHA Stack

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.

StarTrack

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

Ready to Start a Business? Your First Step is Anytime Mailbox.
Secure a physical address through Anytime Mailbox’s vast 2100 International address network. Find an address around the corner, in NY, LA, or Paris.

Anytime Mailbox

There’s plenty to choose from! For as low as $9.99 per month, you’ll have an address to use when filling in forms, receiving postal mail, business cards, returns, and more.

It’s easy, and there’s no long term commitment. The best part? You keep your home address private.

Get Started Today by Choosing Your Location →

 

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.

Caisy

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

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Backender – A no-code backend as a service solution with cloud storage, real-time error logs, NoSQL, etc.
VSCode.Email – The latest news, tips, tools, & articles on the world's most popular code editor.    AD 
DirectoryKit – A Next.js-powered template to monetize a directory-based website in different ways.
JuxtaCode – A Mac tool that offers an improvement on Git diffs and merges.
TLDR – A daily byte-sized version of Hacker News that takes just a few minutes to read.     AD 
NextStarterAI – A Next.js template that includes everything to create a monetized SaaS, AI tool, etc.
Koala UI – A design system of 900+ Figma components optimized for conversion and SEO.

An X Post for Thought

I had no idea that this was actually something they do: Storing data in a container in the arctic?
 
An X Post for Thought
 

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

Believe it or not, I did "BBSing" back in the late 1980s as a teenager. I don't know of any BBS's that still exist from my days but there is one called Darkrealms that began in 1994 and is apparently still running. And, interestingly, it's based in Toronto, Canada, where I live – so that means I could have been connected to it had I still been BBSing at that time (we only called local numbers, for obvious reasons!).

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris