Is all I’m talking on this blag is my blag!?

Last Sunday, I had a bit of time so I decided to work a bit on my blag. Let’s see what I did and whether it’s interesting:

• Added a favicon
• Updated the delivery of the CSS
• Added one media query
• Server updates

Three commits later let’s see how it went.

Favicon

By default, Astro, the framework that I use to generate my static blag uses an SVG favicon. That sounded like a good idea. Surely, modern browsers use SVG, right? Upon checking caniuse.com, it seemed that yes, modern browsers support SVG favicons.

If you clicked that link, you might notice that Safari doesn’t support them. My personal experience as a web developer has taught me that no, Safari is not up to the standard set by Firefox and Chromium/Blink. It is unpredictable and require unspeakable hacks to get a site to look the same on Firefox/Chrome and Safari, especially on mobile (Note: All iOS browser use WebKit, Safari’s rendering engine, as such, I consider that virtually only Safari exists on iOS). Often, the mobile simulation tool of Safari will differ from Safari in the iOS simulator, which will differ from Safari in iOS.

I’m not a kid just out of school, but at the same time I’m not an elder either. I didn’t suffer through IE6. It was out of support and due to business reasons my employers at the time “only” wanted IE7 support. Working on full browser compatibility by hand, that was still leagues ahead of handling Safari support in 2023, with modern tools.

So I ended up not caring. My blag doesn’t even have JS running in the browser. The most complex CSS features that I use is one media query (that I’ll explain in the next section), and a first-of-class pseudoclass. As I fully consider that whatever short of breaking the navigation on Safari is degraded mode, I didn’t care about supporting it.

What about older browsers? I believe anything supporting TLS 1.2 should be able to handle SVG favicons or be some edge case that doesn’t use favicons like a terminal browser.

What about pin icons on mobile? I don’t believe at the moment that my blag is important enough for someone to want to pin it to their phone’s home screen. If you do, email me that’ll make me happy.

I might eventually implement all those features, as I tend to love needless optimizations and improvements, but not today.

CSS

I decided to look at Google’s PageSpeed Insights, a tool mostly aimed at web developers that want to see how much they’re shooting themselves in the foot with poorly optimized websites, but that is nonetheless useful when you’re still on the lighter and sane side of web development. I jest but I know that not everyone is satisfied with a site as spartan as mine.

I had a few accessibility issues that I’ll describe in the next section, but for now, I’ll concentrate on performance. I had a score of 100% already but there were still improvements that could be made. I deemed this unacceptable. The biggest culprit: CSS loading. And so it began.

I decided to have fun with deferring the load of my CSS. The Chrome team has a good deferring tutorial. That seemed also like a fun idea so I decided to try it out on a whim.

That was a terrible idea. You see, CSS changes fonts (or in my case font type), font size, and other fun features that might change the size and position of elements, creating… CLS! CLS, short for Cumulative Layout Shift, is that annoying effect that happens when elements of a page suddenly jump around as styles or other elements load. I had become the very thing I wanted to fight. Also, the performance score dived to 99%. Realizing that my style was so bare that there was nothing that could really be deferred, I went back and reverted the change.

In that process, I noticed that on top of my one and only file that was loaded by Astro and bundled by itself (as in the only element of the bundle) automatically, there was one component that I independently styled. That made Astro generate a second CSS file that was in fact also loaded on every page, as this was the header of my site. I simply decided to remove that style tag and add it to the main CSS file. I had saved one request.

One last minor thing that I did was move my CSS file into the public directory. My code is pretty small, doesn’t really need to be processed and minified, and I like having simple names to the files that are served. It’s minor but it’s more in line with how I want my presence on the web to feel like: warm and human.

Media query

Now, for the final point, I have added a media query! 😱 Isn’t well written CSS responsive by design and perfect !? Somewhat. My CSS prior to this point made text perfectly readable, both on mobile and desktop. However, as the result of the Page Speed test informed me my “tap targets” (the area available to tap a link on mobile) was low which could negatively impact my SEO. I couldn’t care less about SEO, especially Google’s but the advice had some merit.

A lot of people prefer reading on mobile and they should be able to click links easily. At the same time, any modification I could come with would impact negatively the appearance of my site on the desktop, and I really didn’t want to sacrifice the desktop experience in any way. As it happens, that’s what media queries are for. Let’s take a look!

@media (max-width: 767px) {
    body {
        font-size: 1.2em;
    }

   li {
      margin-top: 10px;
      margin-bottom: 10px;
    }

    li:first-of-type {
        margin-top: 0px;
    }

    li:last-of-type {
        margin-bottom: 0px;
    }
}

I stole that width as to what constitutes a mobile width to Tailwind, a very popular CSS framework, which I am far from being enthusiastic about, but that I can trust on knowing what size a mobile screen is. You might notice that I use a max-width, as this site is desktop-first. Maybe I’ll write an article on Tailwind, or on why I care about desktop-first website design in a world of mobile first apps, but that’s a problem for later.

I increased the font-size. Increasing it on both desktop and mobile, made the text quite big on desktop but still pleasant on mobile, so this was added to a media query. This change by itself was enough to make all of my links clickable and was satisfying Page Speed, which was giving me the 100% score on SEO, but it was not enough to satisfy me.

You see, I have so far one list that is made of link on every line: my article list on my home page! Wanting to make taping my links easier, and especially tapping the right link, I decided to space out the list elements on mobile only, as it once again made the spacing strange on desktop.

There are different ways, that are very valid, to achieve this result, but I decided to add space around the top and bottom of each element which are not the first or last. It can be written in less lines but this is the representation of the change that makes the most sense to me. I could have used Sass or PostCSS and nest rules to have it look even clearer and concise but honestly? My CSS file is 60 lines with spaces, and pretty empty lines.

No conclusion?

I’m not going anywhere with this article. I had fun improving my blag a little, and thought the points I worked on, how I approached and solved problems, as little as they might be, was interesting and wanted to share that.