Back at it

# The most important question, why?

Something important to start with: I could've just sent content to the old version of this site, and it would have been more than fine.

That said, after some unexpected fun-employment time on my hands, I decided to use it to come up with something way better, even in corners visitors wouldn't notice.

I wanted to explore a better build process, do more experimental stuff, and overall be happier with this little space on the internet I call mine.

# Having fun again

To me, personal websites are a self-expression of what the web means to you. It's your safe place, where there are no business constraints telling you a performance optimization is not worth it, or that you need to support some really old browser, or that you can't use some tool.

I like putting constraints on myself, but for other motives—decisions that I would be happy with in the end, independently of how they pan out.

Here are some of those decisions.

# Custom build pipeline

This site is statically generated using Eleventy, which always meant having to run parallel tasks for other assets like scripts and styles. I did tons of juggling in the past, like building my watch/reload listeners infrastructure to try to make an efficient development server.

What if my static generator could handle the whole pipeline? For this, I created custom Eleventy shortcodes to build assets as part of its content generation.

When a layout for a page is being put together, the shortcode runs, checks if there's a cached Promise for that resource, and for the current build, if there’s not, it builds it and stores its result.

That means if several pages in that build process request the same resource, assets will get processed only once. I could also conditionally request a resource for a specific page or layout, for example, without having to fine-tune any bundling or tooling script.

With this in place, I only run Eleventy's development server, nothing else.

You will get a post about this over-engineering soon.

# Variable fonts

I am terrible at picking fonts. I like all of them but also dislike something about each one. Overall, I am a fan of grotesque fonts and really like Apple's San Francisco system font.

Sadly, they don't distribute its latest variable version. I love Inter, but there are some aspects of its latest corrections and updates I really dislike.

After searching a lot, I found an Inter Tight family, which is the perfect balance between both to me. So this site now uses a subset of the Inter Tight Variable font.

# Only modern CSS

I always built sites with some preprocessor, but CSS has gotten pretty far recently. Of course, some of those new specs are not widely adopted by browsers, or even not available yet.

Thankfully, lightningcss exists. It’s basically a CSS bundler and transpiler that lets you write using future features and turns it into compatible CSS to use today.

It was amazing to experience what out-of-the-box CSS developer experience might look like soon. I had variables, custom media queries, nesting, scheme and color functions, just to name a few, and I didn't feel I was missing anything from preprocessors.

# Themes

Talking about styling, this site now has themes! Not just your usual system, light, and dark combo. Heavily inspired by sites like mxb.dev and aaadaaam.com’s wonderful color switcher implementations.

You can access them by clicking the circle on the top right.

The fun part: there are hidden themes too.

# Cheat codes

I was never a huge gamer, but video games were present when I was a kid. I took some inspiration from them and implemented cheat codes to this site. If you nail them, you will unlock two themes not visible by default.

There are two hidden themes at the moment of writing this.

Of course, you need a keyboard for that. I don't expect you to hit keys for hours to see if you get them, so feel free to check the script controlling that bit.

Once the cheat code detection engine was placed, I added some other useful ones. For example, you can type "top" at any time to go back to the top of the page, or you can type "random" to switch to a random theme from the available ones.

For now, I won't unveil the rest, so you people can have some fun trying them.

# Deployment and domain change

Though I explored other solutions, I ended up sticking with Netlify so I wouldn't spend a lot of time dealing with badly designed control panels and complicated configurations to serve static files and handle some redirects.

Something probably not usual for an existing site: I changed its domain. In the recent past, this project was under a .io domain, which you might have heard could disappear; additionally, there are some ethical concerns around it. Eleventy also made this change and has a short explainer about it.

At the time I was finishing the last bits of this site, I opened a Bluesky account, which allows you to use your custom domain as a handle, so I bought jeremias.codes and decided to move my personal site to it too.

Sadly, this move requires some SEO shenanigans, which I did. I am pretty sure it's going to hit my discoverability in search engines. It is what it is, folks.

Shoutout to porkbun.com for their reasonable prices and overly simplistic interface.

# Wrap-up

If you got this far, thanks for reading. I haven't written a post in a while. I hope this is the first of many to come in the short term.

And most importantly, I hope this inspired you to do something fun with a project of yours, like your blog, or to start one.