A place for everything you love, like or want to shout out about on your website.
Deployed some tweaks to shoutouts.lol today. Mainly around themes, which I just announced.
I've added the ability to bring in your own stylesheet for the main Themes page preview. Super useful if you want to see what it looks like on your actual site.
I am happy to announce my first little plugin for Micro.blog, which allows you to embed your shoutouts straight into your site, may it be in the actual theme or on a page or post.
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.
The next thing you need to do is actually figure out where you want to put it.
Instructions are in the plugin Read Me to get you started. For the actual repo, you can find that here.
If you want to see a real example, head on over to my social microblog and have a look in the footer.
shoutouts.lol now supports the ability to create multiple themes. This has been on the drawing board since its inception, but wanted to keep it for another time. That time is now.
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, I have a main default theme on my own website in the footer... but I also have another site, where I 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).
This feature is labeled as "Preview" for now as I'm still making changes and am gathering feedback on ways to improve it (I have ideas, but so do you).
In the long term, I want to also add the ability to share your theme with other people. Because that'll be cool.
Hope you like it and thanks for using shoutouts! (and if you're not... ahem: Sign up)
A little bit more progress on adding theme support to shoutouts.lol. Quick video: You can see random coloured loading indicators, because it's nice. Click to copy the embed url. I reckon this will work well, depending how you style your site, or just how you feel on the day.
Further progress with getting support for multiple themes into shoutouts.lol. I've been working on getting a preview to load, via an iframe, which uses the theme options you set. Pretty happy that it works.
Making a slow start to themes for shoutouts.lol 😋 My idea is to be able to use any theme by adding an extra parameter to the embed. You'll also be able to create as many as you want, to fit your needs, and as a stretch goal, the ability to share them with others.
A few minor tweaks to shoutouts.lol this evening:
I updated the homepage on shoutouts.lol a little. Tweaked the header to display a random underlined word and also an image of what embeds could look like. Not great at generating images in Sketch, so will tweak – probably should add more variety and less frogs 😅
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...
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.
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.
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}}" />
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.
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.