status.cafe provides you with a JavaScript snippet to include your status on your site. I don’t update my status super often, so I don’t need to be hitting m15o’s servers on every page load. To get around this, I wanted to see if I could update my status as a build step in Hugo.
This is the script status.cafe provides:
document.writeln('<div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div>');
fetch("https://status.cafe/users/yequari/status.json")
.then( r => r.json() )
.then( r => {
if (!r.content.length) {
document.getElementById("statuscafe-content").innerHTML = "No status yet."
return
}
document.getElementById("statuscafe-username").innerHTML = '<a href="https://status.cafe/users/yequari" target="_blank">' + r.author + '</a> ' + r.face + ' ' + r.timeAgo
document.getElementById("statuscafe-content").innerHTML = r.content
})
This takes just over a second to fully load. Fetching the above script takes 478ms, then running the script fetches a json file, which takes 680ms. Now this is asynchronous, which means a user is not waiting on this for the rest of the page to load, but it is noticeable that the status pops in later than everything else. The entire page loads in 1.22s
...
JS Naked Day🔗 happened this week, and as usual, I’m fashionably late. I decided to permanently remove a significant portion of the JavaScript from my site as it was affecting load times. There wasn’t a whole lot of JavaScript to begin with, which made this pretty easy to implement. What I did have was the following:
1. A script to randomly select from an array of quotes to display in the sidebar on each page load
I just removed this as I just wasn’t finding it amusing anymore. Maybe it will return later, who knows? Certainly not me.
...
This past week I’ve been working on a big redesign of my site. I’m trying to recreate the vibe of MSN / Windows Live Messenger around 2008-2011. Today, I spent most of the day recreating the avatar frame from WL Messenger in CSS.
At first, I was trying really hard to recreate the kind of squircle🔗 shape from the login screen. It turns out this is quite difficult in CSS, and the only way I could possibly have done it is through creating an SVG path that I could use to clip the HTML element, but then I would lose access to the border and box-shadow properties. So instead I opted to just make a rounded square, using the first-radius value to round the corners with an ellipse shape rather than a circle. After all, we’re going for the vibe, not a 1:1 recreation. After hours of tinkering with just the shape, I added the gradient background, as well as a <span> on top of everything to add the “glossy” effect. You can see the code on CodePen🔗.
...
