shoutouts.lol

Today we’ve launched a handy little function that allows you to export your data, or specifically your shoutouts, into a super simple CSV file.

Just head on over to your account page and scroll to the bottom until you see the “Export shoutouts” button.

It creates a CSV file with all the data you have entered into shoutouts and also adds a link to the image, if present, for you to download.

We decided not to include the images in a zip file, just to keep this all simple, so I hope that works for you.

Note that when you delete a shoutout everything about it is deleted, including the image. Deleted shoutouts won’t appear in the export. Also note that image URL’s are only valid as long as the shoutout exists.

Anyway, hope this is useful for a few of you ✌️

We’re happy to announce that you can now fetch a single shoutout by it’s ID from the embed code. That means, when you use your embed code, you can now pass in extra parameter of shoutout; for example:

We want to bring back our shoutouts.lol shoutout on this webpage (have a look in the footer), so all we had to do is find the relevant ID (found on the relevant shoutout page next to the Edit button) and add it as a parameter:

<script src="https://shoutouts.lol/embed/JLkiwy1aNAnmxPv4f7y5.js?shoutout=34" defer></script>

This will check if that ID exists in your shoutouts, and if so, brings back the relevant shoutout. If it can’t find anything, it’ll bring back a random one instead, just to avoid any breakage if you ever decide to delete it.

We’ve also updated the Micro.blog Hugo plugin, you can check out instructions in the repo.

Happy to announce a little plugin for Micro.blog, which allows you to embed your shoutouts straight into your site, may it be in the actual theme, via a partial, or on a page or post using a shortcode.

It’s super easy to get started, and all you have to do is install it from here: micro.blog/account/plugins/view/92.

You will also need a shoutouts.lol account, so you can get your special embed code from the Embeds page.

Enjoy.

shoutouts.lol now supports the ability to create multiple themes.

Having different themes allows you to create a Theme for that one-off website or page you have, without affecting your other embeds.

For example, you may have a main default theme on your own website in the footer… but then you can also have another site, where you want to have it slightly different and bring across styles that I specified, without having to open up the sites code and change the stylesheet. Just let shoutouts handle that for you.

It’s super simple and intuitive, with easy controls to copy your embed code and a simple preview window (which loads it in an iFrame).

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 ✌️❤️