Skip to main content

Introducing Add Badge - an overlay badge plugin.

· 3 min read
Connor Tumbleson
Connor Tumbleson
Director of Engineering
Erik Perri
Erik Perri
Senior Software Engineer II

As our application pipeline elevated into ephemeral GitHub Action containers the Fastlane plugin codenamed "badge" we used was showing some age. It depended on a few native dependencies and took a bit of time to install on our runners. We saw this chance to leverage some exciting new technology and produce an alternative.

For context badging is the art of adding little ribbons around your application icon to more easily denote different builds (Beta/Alpha) during development. Thus, in late 2015 when Fastlane was exploding in popularity to automate application builds - we found success using the badge plugin.

Old Badge #1Old Badge #2

It was great for almost an entire decade, but like some software it showed some sign of decay. We noticed that as our build machines evolved packages like Librsvg and ImageMagick had compatibility issues. We got to work envisioning a new plugin to badge our applications.

We knew the power behind ImageMagick, and we wanted to stick with it, but we wanted to leverage the tool without the effort of installing binaries onto runners. Thankfully WASM (WebAssembly) had matured as a solution for this. We found an open source library called magick-wasm. It offered an elegant API to work with ImageMagick leveraging a WASM implementation for the ImageMagick binary itself.

tip

WebAssembly (WASM) is a binary code format that serves as a portable compilation target for programs, enabling high-performance applications to run on web browsers at near-native speed.

This meant we could write code familiar to us in Node.js while using the power of WASM in one common codebase.

import { readFileSync } from 'node:fs';
import { initializeImageMagick, Magick } from '@imagemagick/magick-wasm';

const wasmBytes = readFileSync(
    require.resolve('@imagemagick/magick-wasm/magick.wasm'),
);
initializeImageMagick(wasmBytes).then(() => {
    console.log(Magick.imageMagickVersion);
});

With a few short lines of code we were moving and a library was being born. We wanted to keep the behavior we were used to which allowed us to bulk edit images and modify them in place. Our use-case would be a build pipeline changing a variety of Android and iOS images to badge the Beta builds. The features our plugin offered expanded towards:

  • Changing the font size, color and font itself.
  • Controlling the background color or shadow color.
  • Controlling the position and gravity of the badge.
  • Supporting a dry run mode

With a few pull requests (#69 and #70) upstream to the magick-wasm library and a bit of development we had a good proof of concept.

New Badge #1New Badge #2

We could handle circles or squares as the logic checks the insets and width to place the ribbon correctly. We test drove a few of our client applications to confirm their specific logos worked and once we worked out a few edge cases we were happy with it.

Thus, add-badge was born. An open source package intended for build pipelines to badge applications.