Edging for Everyone

Learn what edge functions do by creating a random image loader for your static HTML website.

(♣)

My personal blog is a static site generated by Eleventy. I love 11ty, it is unopinionated JavaScript, it's simple and renders quickly. To me, coming from Github pages, its kind of like Jekyll but feels more like the younger trendy brother of Jekyll, and, lacks the madness of mister Hyde.

The site is hosted on Netlify. Why? Because it is free. That and I'm progressively moving from traditional, paid hosting to free cloud based services. There are a number of these, which I intend to cover in another post, so lets leave it at that, I chose Netlify to host my personal blog. I am a huge fan of the whole JAMstack movement, and being a front-end developer by profession I love Eleventy's emphasis on vanilla JavaScript.

In addition to a generous hosting policy, Netlify have some really interesting tools that you can use, and one in particular caught my eyes Edge function. But hang on ... what is an edge function? How are they any different to other server-less functions or lambdas?

Getting on edge

The "edge" is an event space. That is my one sentence, TLDL; explanation of a much longer idea. And now lets unpack that longer idea, by discussing this page. To read these words you asked your browser to download an HTML page.

The instruction you executed with you click was an HTTP GET, the request for the page was presented to the web server, and then the server looked around to see if it had what you asked for. Imagine someone rummaging in a filing cabinet. When the server does not find the thing you asked for, IE. the page you requested, it will tell you so, the server will respond with an error, and in this case it will be 404 error, page not found.

So from this analogy it is easy to see that there is moment in-between the request and the response. It is also clear that this interaction happens on the server. You, the reader are passive the moment your request has been made. This is what is meant by "edge".

It is the stuff that happens at the filing cabinet. That stuff, in my estimation is an event followed by an action. And that is why I have called it an event space.

Imagine if you could mess around with the clerk as they flicked through the files, and then selected one, and checked it was the right one, and then finally sent a copy of the file over to your web browser.

That is precisely what an Edge function does. It causes a side effect in between the request and the response.

imagekit asset

<!-- randomly regurgitate an image asset hosted on ImageKit -->
<img src="/.netlify/functions/random-image" />

In comparison a server-less function, or lambda function is the result of doing some work, perhaps completely isolated work, conceptually equivalent to what an API would do. So you could use an edge function to access a lambda. Not sure why you would want to do that, but you could.

canvas as PNG

Dynamically static content

The objective of this article is to get a static HTML page to behave differently every time it loads. To be clear; we will put an image tag on the page, the image source will never change, but every time the page loads the static tag will deliver a random image. An image with some magic source. It is not a novel idea, it is not an amazing achievement. No OMG to have here. The HTML image tag looks like this.

<!-- the haystack of needles -->
<a href="https://runkit.com/fliptopbox/haystack-base64-png">
<img src="https://haystack-base64-png-q9bi5bz0p4ge.runkit.sh" />
</a>

The easist way to do that is with JavaScript, but instead of running the javascript with the browser, i.e. client side we will run it on a server. And the reason to do this is to ensure our front-end static HTML page stays pure. No clientside JS. At all!

So far on this page there are two random images being served. The fist one is coming from a media server, called ImageKit.