Vincent Ritter

< back to projects

shoutouts.lol

A place for everything you love, like or want to shout out about on your website.

Project posts JSON/RSS Feed...

CDN and caching improvements for shoutouts.lol

If you're using shoutouts.lol, and you should be if not, I made a few nice changes that handles better image loading, and caching, no matter where you're located.

But first...

Moving away from Cloudflare

A theme for this year is to move away my dependency on Cloudflare. They know what they're doing for sure, but their support is absolutely, shockingly, terrible. That's not for me.

If you've been following along, I moved domain servers (the phone record book for the domain name) over to Bunny.net. It went without a hitch and the transition was smooth with zero downtime to the service. That's how I like to run the show.

Bunny is such a great service, and I really love it. It does a lot of things, which I'll get to in a minute, and they recently added DNS (that phone book record for the web), so I wanted to give it a try. And boy is it nice.

Better CDN handling of images

With using Bunny, I have more oversight and control of what to cache and where with their CDN. I've been using the CDN on my personal website for most part last year already, so I know I can count on it.

My task was to make all images that are served on shoutouts.lol and especially through the embeds, available throughout the globe with the least latency as possible. Images are the largest types of data coming through for embeds.

Enter Perma-cache. It basically stores all files (images in our case), across the globe. It'll load the image from the closest region to you. Go on have a read because I just can't explain it, haha.

It's all very cool to me (and maybe quite boring to you). So now images are permanently cached throughout different storage locations around the globe, with the least latency.

One more image related thing

Images are lazy loaded by your browser, because the normal embed script tells the browser to only load the image when it needs to.

Today I've added a minor tweak to this, which will preload the image, which means it'll "paint" quicker than usual, as the browser already knows about it ahead of time.

I've been doing some random testing, and "perceived" loading is much faster than without it.

If you're using a custom template, with your own markup, you can add the following snippet close to your image tag:

<link rel="preload" as="image" href="{{image}}" />

So that's it?

Yeah, so far. I am planning to play more with perma-cache and allow the embed script to cache the last result. So if shoutouts.lol would ever go down for some reason, it'll have the latest available to you as a fallback.

And what's next?

Not much. I am still planning a theme library as a third section on the site.

To be honest, I want shoutouts to be as simple as possible, so I think this is as far as I'll go... unless you have any nice suggestions?

For example, I was asked to allow ALL shoutouts to be returned, so I added an option for exactly that, so now you can add a ?all parameter at the end of your embed url.

Thank you for using shoutouts. I really appreciate every one of you that's been trying it out, and paying the small yearly ✌️❀️

I'm making Domain Name Server changes to shoutouts.lol. Moving from Cloudflare to Bunny. Hopefully it will go smoothly. If not, I'll pick up the pieces, and cry in the morning.

Added a new option to shoutouts.lol embeds, allowing you to pass in a "?all" parameter with your embed code, that passes back all of your active shoutouts in one go, instead of one random one – also works with the JSON response. So now you could do something like this:

In other shoutouts.lol news... I am trying out some T-shirts and a phone case. Enjoy ✌️❀️

Fixed a bug that prevented you from checking out on shoutouts.lol. LOL.

For accounts that signed up before I integrated billing, and that didn't use the embed in the meantime, and didn't go to the embed step, instead going straight to billing... well. Now it works 😜

And here is the new logo for shoutouts.lol ❀️

No logo for shoutouts today. Going to bed instead.

shoutouts.lol logo arrived. Now to add it 😄

Here's a quick video preview of the new markup support, using Liquid, for shoutouts.lol.

4 hours later? Custom markup support for shoutouts.lol using Liquid. Updates on the fly as you type. And yes, also need to add some sort of "code editor" view. Still a few things to tidy up but it's... LIVE.

What is happening to me? I'm thinking of live-streaming some shoutouts.lol development. Any takers?

Custom markup templates written in Liquid for shoutouts.lol anyone? Coming soon πŸ˜‹

Kept it light this evening. Just deployed a change to shoutouts.lol that allows you to get a JSON only response for a random shoutout, instead of a script. It's simple, but allows you some sort of extra customisation if you want it. Docs are here. ✌️

Zero downtime. Upgrades done. ✌️😋

There might be a little downtime to shoutouts.lol in a few minutes. Sorry for the trouble. Ruby version upgrades 😋