Sergi's writing

In my previous post, I said I wanted to rebuild my blog using the principles of CUBE CSS and Every Layout. But I decided to start with something smaller, my homepage, and see how that turns out.

How it looks

First, let's have a quick look at the "before and after" of the rendered site:

Screenshot of the old homepage rendered at 1920x1080. — Old homepage rendered at 1920x1080.

Screenshot of the new homepage rendered at 1920x1080. — New homepage rendered at 1920x1080.

They look very similar, though not identical, but this is fine. I was not aiming to exactly reproduce the same layout, but something similar that I liked. The change you probably noticed first is that now the content is centered vertically, and that was an intentional change. You might also notice a bigger contrast on the new website, with the default font color being darker. I decided to change that as part of declaring the site colors as global variables.

On small resolutions, they also look nearly identical:

Screenshot of the old homepage rendered at 375x667. — Old homepage rendered at 375x667, resolution that Firefox labels as "iPhone SE 2nd gen iOS 14.6".

Screenshot of the new homepage rendered at 375x667. — New homepage rendered at 375x667, resolution that Firefox labels as "iPhone SE 2nd gen iOS 14.6".

Using variables

A good "developer quality of life" improvement was using CSS variables.

I defined them for all the colors used on the page, plus ratios for harmonic sizing. Before, hexadecimal was all over the place, alongside font sizes declared in rem. Now all these properties reference variables, making it easier to keep them consistent. As mentioned before, I used the opportunity to tweak the color values to improve the contrast using a contrast calculator. I can't remember which one I used, but you can find many online that will tell you if the ratio conforms to the WCAG.

While working on font sizes, I realized that I did not have a maximum line length. On narrow screens, it would just wrap and break into new lines to not exceed the viewport's width, but on wide screens, the content would be as wide as the longest line. I was fortunate that none of the existing lines were too long, so it didn't look too bad, but that has now changed to a maximum of 65 characters — yes, I discovered that character is a unit! — for optimal legibility.

Using a CSS reset

I did not have a CSS reset before, and while that seemed to be fine, I was risking the layout being off on some current or future browsers because of some unexpected defaults. I stole the one from Piccalilli, using only the parts that would apply to the HTML elements on my site. If in the future I add new elements I might have to expand that.

The CSS feels more clean, but there is way more of it than before

I implemented the patterns for Cover, Center, Center with centered text and Stack. The HTML is clean and fully semantic with just a few divs only for layout purposes:

<body>
<div class="cover">
    <div class="center">
        <div class="stack">
            <header class="stack center-text">
                <h1>Sergi Pons&nbsp;Freixes</h1>
                <h2>Software&nbsp;Engineer&nbsp;& Solutions&nbsp;Architect</h2>
            </header>
            <main class="center">
                <section class="stack">
                    <p>Most of my open source contributions can be found on <a
                            href="https://github.com/sponsfreixes/" target="_blank"
                            rel="author external">GitHub</a>. Highlights:</p>
                    <ul>
                        <li>Creator of <a href="https://github.com/sponsfreixes/jinja2-fragments">Jinja2
                            Fragments</a>.
                        </li>
                        <li>
                            Creator of <a href="https://github.com/sponsfreixes/htmx-flask">htmx-flask</a>
                            and maintainer of <a href="https://github.com/edmondchuc/flask-htmx">Flask-htmx</a>
                            after the projects got merged.
                        </li>
                        <li>
                            Maintainer of <a
                                href="https://github.com/MongoEngine/marshmallow-mongoengine">Marshmallow-Mongoengine</a>.
                        </li>
                    </ul>
                    <p>
                        If you are interested on my career, check out my <a href="cv.html">CV</a> or
                        my <a href="https://www.linkedin.com/in/sergiponsfreixes" target="_blank"
                              rel="author external">LinkedIn</a>.
                    </p>

                    <p>Contact me on <a rel="me" target="_blank" href="https://floss.social/@sergi">Mastodon</a>,
                        <a href="https://x.com/sponsfreixes" target="_blank" rel="author external">X</a>,
                        or at <a href="mailto:sergi@cub3.net" rel="author">sergi@cub3.net</a>.</p>

                    <p>Oh, and I have a <a href="https://sergiswriting.com" rel="author external">blog</a>!</p>
                </section>
            </main>
        </div>
    </div>
</div>
</body>

With these reusable layout classes, I can picture in my head how the different blocks will be approximately rendered. The CSS for these classes makes it so that there is way more CSS than before where I just had some sprinkles of flexbox spread around. But now I feel that I can expand the site with more confidence because I have these reusable blocks to work with.

Conclusion

Was this change needed? No. The previous site had a decent layout, and I expect that I will very rarely add new content to it.

But this was a learning exercise. Doing these changes felt good. Somehow, it feels like it's a more robust composition, easier to reason about. Both the HTML and CSS are clean and legible. In summary, the vibes are good enough that I will apply it to my CV page next. After that, I will tackle this blog itself, where I expect the gains will be more quantifiable rather than just about "a good feeling".