--- title: "Recreating the Windows Live Messenger Avatar in CSS" date: 2024-02-26T23:36:20-07:00 categories: - tech tags: - web development year: "2024" --- 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. ![](images/live-messenger.webp) At first, I was trying *really* hard to recreate the kind of [squircle](https://en.wikipedia.org/wiki/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 `` on top of everything to add the "glossy" effect. You can see the code on [CodePen](https://codepen.io/yequari/pen/zYbgmwK). ![](images/avatar-online.png) ![](images/avatar-busy.png) Next, I wanted to make it dynamic. If I haven't uploaded to my blog in a week, my avatar should show me as "away." My first attempt used JavaScript, which required me to put the date of my recent posts on my index page. I came up with the following script. ```javascript /* js/avatar.js */ let latest = document.querySelector('.dt-published'); let avatar = document.querySelector('#avatar-frame'); let latestDate = Date.parse(latest.attributes.getNamedItem('datetime').value); let threshold = new Date(); threshold.setDate(threshold.getDate() - 7); console.log(latestDate) if (latestDate < threshold) { avatar.className = 'busy'; } else { avatar.className = 'online'; } ``` It worked great on the index. But as soon as I navigated to another page, it broke. My avatar is present on every page in the sidebar, but not every page has a `