Chris Burnell · Php

Fresh pixels

2026-05-09T09:49:02-03:00

Status updates and enforcing the crispiest-possible 88x31 badges across the web

Yesterday afternoon, I spent some time creating a new 88x31 badge for my website footer.

In case you missed my last post, I’m in the midst of migrating servers, and one of the things I migrated was my status page, which pings each of my websites once per minute and reports whether the request was successful, and if so, how long the request took. Each website is represented on the front end by a graph of response times across the last hour as well as 60 red or green-coloured bloops, which represent the successes of the last hour’s pings.

So the idea was to create a dynamic 88x31 badge that relayed information from my status page by displaying some number of the most recent bloops.

I set out achieving this by first creating the 88x31 image with some blank areas that I could fill in later with green or red, depending on the status of each bloop, and the next step was to create a short PHP script to consume this image, fill in the colours of the bloops, and spit out the result.

Fortunately, generating images with PHP is one of the first things I ever learned how to do outside of HTML and CSS early on in my web development journey, nearly 20 years ago, so this was a familiar task!

And the result (blown up for clarity):

Backend code, if you’re interested

Here’s what the JSON file of minute-by-minute data looks like:

[
	{
		"timestamp": 1778260261,
		"time": 0.406,
		"response": 200,
		"http_version": "2"
	},
	{
		"timestamp": 1778260321,
		"time": 0.446,
		"response": 200,
		"http_version": "2"
	},
	{
		"timestamp": 1778260381,
		"time": 0.807,
		"response": 200,
		"http_version": "2"
	}
]

And here’s the gist of the PHP that generates the dynamic image:

<?php
$image = imagecreatefromgif("uptime.gif");

$green = imagecolorallocate($image, 102, 204, 51);

$red   = imagecolorallocate($image, 153, 0, 51);

$cacheFile  = "cache.json";

$uptimeFile = "uptime.json";

$numBloops = 9;
if (!file_exists($cacheFile) || filemtime($cacheFile) < time() - 60) {

$uptimeData = json_decode(file_get_contents($uptimeFile), true);

usort($uptimeData, fn($a, $b) => $b["timestamp"] - $a["timestamp"]);

$recent = array_slice($uptimeData, 0, $numBloops);

$cache = [

"timestamp" => $recent[0]["timestamp"],

"bloops" => array_map(

fn($item) => $item["time"] > 0 && $item["response"] >= 200 && $item["response"] <= 299,

$recent

),

];

file_put_contents($cacheFile, json_encode($cache));

} else {

$cache = json_decode(file_get_contents($cacheFile), true);

}
$bloops = array_reverse($cache["bloops"]);
foreach ($bloops as $i => $ok) {

$color = $ok ? $green : $red;

imagefilledrectangle($image, 1, 2, 3, 4, $color);

}
header("Content-type: image/gif");

header("Cache-Control: public, max-age=60");
imagegif($image);

And while we’re at it, here’s how I’m serving my PHP file as if it’s a GIF in nginx:

location = /images/uptime.gif {
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME /absolute/path/to/uptime.php;
    fastcgi_pass unix:/run/php/php8.4-fpm.sock;
}

In building this new 88x31, I was struck with another idea.

Because I so fiercely believe that (most) 88x31 badges look best on the web when they have image-rendering: pixelated; applied to them, why not enforce my belief across (almost) the entire web?

Using CSS

I use the Stylus extension in my browser (get it here) to apply my own CSS to websites and pages. My custom styles are mostly to fix bugs, improve shaky layouts, or to add little quality-of-life stuff, and this seems like an ideal place for me to throw a small chunk of CSS and have my browser apply it across every page that I visit.

The CSS I came up with is pretty minimal, and although it relies on the width and height attributes being present, many websites that I visit that do have 88x31 badges at least have the attributes present, if not the desired CSS property applied as well:

:where(img[width="88"][height="31"]) {
	image-rendering: pixelated;
}

Here’s how it looks in Stylus. Note that I’m applying this CSS to Everything, which means every webpage that you visit:

Using JavaScript

Alternatively, if you want to achieve this for all 88x31 images, whether they have the correct attributes or not, there’s the Tampermonkey extension (get it here) that works much like Stylus but with JavaScript instead of CSS. Here’s my script that checks the width and height of images whether their attributes are set or not and appropriately applies the pixelated effect to 88x31 images:

// ==UserScript==
// @name         Pixelate 88x31s
// @match        *://*/*
// @run-at       document-idle
// ==/UserScript==
[...document.querySelectorAll("img")].forEach((img) => {

const pixelate = () => {

if (img.naturalWidth === 88 && img.naturalHeight === 31) {

img.style.imageRendering = "pixelated";

}

};

img.complete ? pixelate() : img.addEventListener("load", pixelate);

});

Now properly-attributed 88x31 images will always appear nice and sharp, everywhere on the web, including but not limited to the ones in the footer of my website (though they already have the correct image-rendering)!

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.

How I’m obfuscating API calls in my front end JavaScript

2024-05-09T22:43:00+08:00

I use a rudimentary Web Component on my website to pull in data from the LastFM API, but I needed a way to prevent exposing my API key. To get around this, I put a short PHP script on my server that makes the API calls for me.

On my Listening and /now pages, I’m displaying data from the LastFM API: recently-listened tracks, top artists of the week, and top albums of week. I’m pulling in that information as part of my Eleventy build using eleventy-fetch, so the contents of those pages are refreshed whenever my site builds and an hour has elapsed since the previous build. This means, for visitors without JavaScript enabled (or where it fails), those pages aren’t completely empty.

Because my website only pulls in fresh data on rebuilds, this means that the data could be up to 6 hours old, and I’d like to show as up-to-date data in those places if I can! So when JavaScript is enabled, a slap-dash Web Component that I built, <lastfm-listening>, makes the same call to the LastFM API with a client-side fetch in order to pull in fresh data.

You have to be careful here, as it’s required to include an API key as a URL parameter with any requests to the API. This isn’t an issue for the Eleventy build side of things because I store my API keys in an .env file which isn’t included in the source code on GitHub, and I’m able to read and use the values of those keys using Node’s process.env property.

Unfortunately, this isn’t possible in front end JavaScript, so anyone could look at my website’s source code, their browser’s Dev Tools, or even view the source of my website’s JavaScript to see where the fetch request comes from and grab my API key from there.

fetch("https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracksuser&api_key=njJql0lKXnotreal4x3Wmd&username=chrisburnell&format=json")

If my API key was njJql0lKXnotreal4x3Wmd (which it isn’t 😜), malicious people could abuse the LastFM API by using my key, and I would be penalised (probably by having my key revoked).

To circumvent this issue, I built a short snippet of PHP code that lives on my server to make the same API calls on my behalf:

<?php
header("Content-Type: application/json");
$api_key = "njJql0lKXnotreal4x3Wmd";
$response = file_get_contents("https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&amp;api_key=" . $api_key . "&format=json&user=" . $_GET["username"]);
echo $response;

Now I can replace the fetch request in my front end JavaScript to point at the URL of my PHP file, which makes the API request for me, obfuscating the API key, and passes on the data for me to consume as I was before.

fetch("https://chrisburnell.com/get-lastfm-recenttracks?user=chrisburnell")

I also recommend putting some security in place here, because there’s still a gap in the armour. What prevents someone from using the PHP file on my server? There are a few ways to mitigate this.

One option is to set up some rules on the server to only accept connections to this file from certain referers (i.e. your own websites), e.g. with the ngx_http_referer_module in nginx.

Another option is to do the same but inside the same chunk of PHP with something like this:

<?php
header("Content-Type: application/json");
$api_key = "njJql0lKXnotreal4x3Wmd";
$allowed_host = "example.com";

$referer_host = parse_url($_SERVER['HTTP_REFERER'], PHP_URL_HOST);
if(substr($referer_host, 0 - strlen($allowed_host)) == $allowed_host) {

$response = file_get_contents("https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&amp;api_key=" . $api_key . "&format=json&user=" . $_GET["username"]);
echo $response;

}

I’ve seen quite a bit of chatter online about pulling data like this into our websites recently, and I’ve had some great conversations with friends about it too. I hope you find this useful if you’re inclined to progressively enhance your website with fresh data from APIs you love!

This is post #9 of #WeblogPoMo2024 / Weblog Posting Month 2024, a one-month challenge to post as often as possible (daily, ideally) for the duration of May 2024!

Learn more on Anne Sturdivant’s website.

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.

Revisiting PHP-Generated Images

2024-05-04T21:02:10+08:00

Generating images using PHP was a bit like magic to me back in 2007. In this post, I’m going to revisit the technique to create an image that shows dynamically-updating information about my website content.

Jump to the code: Building a PHP image

A short history

In my teenage years, forums were all the jam. It’s a bit of a shame that their popularity has waned since social media entered the scene because forums foster slower and more thoughtful conversations, in my opinion, at least. I was a member of many forums dedicated to many topics, including Nintendo games, The Legend of Zelda, Star Wars, and pixel-art. I made some of my first online friends through these forums.

Back in 2007, around the beginning of my journey into web development, I co-founded a small community of folks passionate about video games and creating media about them, and I was in charge of our website that hosted all of our community’s content, a completely-bespoke and hand-written mish-mash of HTML, CSS, MySQL databases, and PHP.

Because me and the other founders/admins wanted an easy way for our community members to keep abreast of the latest content, the top-right of the website featured an area that listed and linked to the most-recently published videos, podcasts, and songs being made by us and our members.

Now, it’s worth mentioning that a not-insignificant part of forum life back then (and even to this day) was having a cool signature, a section underneath each member’s posts where one could put fun little quips, quotes, and even images. Many forums had graphics shops where requests could be made of talented individuals to create avatars, banners, signature images, etc. for members who asked nicely.

As a means of promoting what was going on in our video game media community, me and the other founders often had linked images going out to our website. I even went to the effort of putting a bit of text alongside the image in my signature that stated what content had been recently published on our website. Across multiple forums, this was a pretty time-consuming task that I went through whenever something new was published.

Well, I got pretty tired of manually editing my forum signatures, and that’s when I discovered that it was possible to create images with PHP code! Instead of manually editing my signatures, I could create a PHP image hosted on our website that linked up with the database of published work and automatically pulled in fresh content.

So that’s exactly what I did! Using my website’s content as an example, I’m going to walk through how to generate a PNG image using PHP.

Building a PHP image

Before we start, it’s important to know that we’ll be working with a coordinate system as we build our image, where 0, 0 is at the top-left, so X increases to the right and Y increases downwards.

Now let’s write some code.

First, we need to dictate the dimensions of the image using the imagecreatetruecolor function, and we’ll enable transparency in case we put anything in our image that isn’t completely opaque with the imagealphablending function.

$width = 300;
$height = 80;
$spacing = 6;
$image = imagecreatetruecolor($width, $height);

imagealphablending($image, true);

We’ll come back to the $spacing variable later.

If we wanted to set a solid colour as the background of our image, we could use the imagecolorallocate function, passing in a reference to our $image and represent our desired colour using RGB components. The imagefill function fills our image with our desired colour, starting from the given coordinates (0, 0 in this case).

$backgroundColor = imagecolorallocate($image, 6, 6, 6);
imagefill($image, 0, 0, $backgroundColor);

However, in my case, I want to apply a static image for the background. For that, we can use the imagecreatefrompng function to reference the static image file. We’ll use the imagecopy function to copy the static image into our PHP image.

With this function, we need to specify the destination coordinates, the coordinates of the static image to place at that destination, and the dimensions of the image. This allows us copy in only a part of a static image and stretch/shrink it if desired.

In this case, the static image I’m setting as the background has the same dimensions as my PHP image, and I want to place the top-left of my static image in the top-left of my PHP image.

$backgroundImage = imagecreatefrompng('./static-image.png');
$destinationX = 0;

$destinationY = 0;

$sourceX = 0;

$sourceY = 0;
imagecopy($image, $backgroundImage, $destinationX, $destinationY, $sourceX, $sourceY, $width, $height);

For the purpose of pulling in fresh data, I’ve created a small JSON file that my website generates whenever it builds, so I’ll grab the data from that file using the file_get_contents function and decode the JSON into usable data using the json_decode function.

$json = file_get_contents('./generated-data.json');
$data = json_decode($json);

The next step is to prepare to print out some text, so let’s set the text colour using the imagecolorallocate function again, set up a reference to a TTF font file, and decide on a font size to use.

$textColor = imagecolorallocate($image, 249, 249, 249);
$fontFile = './my-font.ttf';
$fontSize = 11;

Wow we’re ready to start using the data and print out some text on top of the image using the imagettftext function. Like with the background image above, we need to pass in some destination coordinates, and we can also print the text at an angle.

One gotcha here is that the Y coordinate of our text represents the text’s baseline, so we need to take into account the height of the text when assigning it’s Y coordinate.

In order to make things align nicely, we can use the imagettfbbox() function to figure out how much space the text has taken up. This function returns an array with eight values, representing the coordinates of the bottom-left, bottom-right, top-right, and top-left corners of the bounding box of our text.

In my case, I want the text to be printed horizontally and slightly-offset from the edge, so I’ll make the angle, X, and Y values explicit.

$angle = 0;
$latestBlogText = 'Latest Post Date: ' . $data->latest_post_date;
$latestBlogSpace = imagettfbbox($fontSize, $angle, $fontFile, $latestBlogText);
$x = $spacing;

$y = $spacing + $latestBlogSpace[1];
imagettftext($image, $fontSize, $angle, $x, $y, $textColor, $fontFile, $latestBlogText);

We can use the Y value of the above text to figure out what the Y value for our next line of text should be, repeating these steps for each line of text in our image.

$blogCountText = 'No. Blog Posts: ' . $data->blog_count;
$blogCountSpace = imagettfbbox($fontSize, $angle, $fontFile, $blogCountText);
$y = $y + $spacing + $blogCountSpace[1];
imagettftext($image, $fontSize, $angle, $x, $y, $textColor, $fontFile, $blogCountText);

The last step is to set the header of our PHP file so it can be interpreted as a PNG image when requested in the browser and output the image we’ve created with the imagepng function.

We’ll also use the 'imagedestroy' function to free up any memory used by referencing and creating the two images we’ve dealt with in our code. Note: this function is not required in PHP 8.0.0 and above.

header('Content-type: image/png');
imagepng($image);
imagedestroy($image);

imagedestroy($backgroundImage);

And that’s it! We can now reference our PHP image in our front end code and treat it like a PNG image.

<img src="dynamic-image.php" alt="..." width="300" height="80">

Keep in mind that the server serving the PHP image does have to do some computational work in order to output the PNG, and there are some caching considerations that have to be made if the data being presented in the image should be fresh.

The full code

<?php
// Set up some variables for later
$width = 300;
$height = 80;
$spacing = 6;
$angle = 0;
$x = $spacing;
// Create the image at our specified dimensions

$image = imagecreatetruecolor($width, $height);
// Enable transparency

imagealphablending($image, true);
// Set a solid colour as the background

$backgroundColor = imagecolorallocate($image, 6, 6, 6);

imagefill($image, 0, 0, $backgroundColor);
// Set a static image as the background

$backgroundImage = imagecreatefrompng('./static-image.png');

$destinationX = 0;

$destinationY = 0;

$sourceX = 0;

$sourceY = 0;

imagecopy($image, $backgroundImage, $destinationX, $destinationY, $sourceX, $sourceY, $width, $height);
// Grab data from a JSON file

$json = file_get_contents('./generated-data.json');

$data = json_decode($json);
// Prepare to print out some text

$textColor = imagecolorallocate($image, 249, 249, 249);

$fontFile = './my-font.ttf';

$fontSize = 11;
// Latest Post Date text

$latestBlogText = 'Latest Post Date: ' . $data->latest_post_date;

$latestBlogSpace = imagettfbbox($fontSize, $angle, $fontFile, $latestBlogText);

$x = $spacing;

$y = $spacing + $latestBlogSpace[1];

imagettftext($image, $fontSize, $angle, $x, $y, $textColor, $fontFile, $latestBlogText);
// Blog Count text

$blogCountText = 'No. Blog Posts: ' . $data->blog_count;

$blogCountSpace = imagettfbbox($fontSize, $angle, $fontFile, $blogCountText);

$y = $y + $spacing + $blogCountSpace[1];

imagettftext($image, $fontSize, $angle, $x, $y, $textColor, $fontFile, $blogCountText);
// Projects Count text

$projectsCountText = 'No. Projects: ' . $data->projects_count;

$projectsCountSpace = imagettfbbox($fontSize, $angle, $fontFile, $projectsCountText);

$y = $y + $spacing + $projectsCountSpace[1];

imagettftext($image, $fontSize, $angle, $x, $y, $textColor, $fontFile, $projectsCountText);
header('Content-type: image/png');

imagepng($image);
imagedestroy($image);

imagedestroy($backgroundImage);

This is post #4 of #WeblogPoMo2024 / Weblog Posting Month 2024, a one-month challenge to post as often as possible (daily, ideally) for the duration of May 2024!

Learn more on Anne Sturdivant’s website.

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.