Photo taken on Sunday, 01 Mar 2026

Taken in Lecco, Italy.

Photo taken on Saturday, 28 Feb 2026

Miss the feeling if watching TV as a kid? This site allows you to surf channels on a retro TV, and you can even choose the decade you want!

Unfortunately it seems it only has US TV, so I can’t really relate to anything there. Would love a Brazilian version of this!

Hey there! February is over, which means I survived my first winter in the Northern Hemisphere, and my second winter of the year! I moved from Brazil to Italy in September, which means I survived the winter there and came straight to autumn again…

I gotta say, it was way milder than I expected. I know Italy is not really known for harsh winters (even if I am near the Alps), but I was surprised to find out that winters in (southern) Brazil are way tougher.

Anyway, February is gone but it has brought over 7 Cool Links which have been posted here throughout the month. But for convenience, here’s a neat monthly digest for you!

Fun

MyRetroTVs, by Joey Cato

Miss the feeling if watching TV as a kid? This site allows you to surf channels on a retro TV, and you can even choose the decade you want!

Unfortunately it seems it only has US TV, so I can’t really relate to anything there. Would love a Brazilian version of this!

Sandboxels - Experiment with Pixels, by Neal Agarwhal / R74n

This is amazing! This is a pixelated sandbox that allows you to experiment with all kinds of materials and elements, and see how they interact with each other. Each material interacts with others differently, as they would in real life. For example, oil won’t mix with water, but ink will.

A lot of time-consuming potential here, so don’t open it if you have something else to do 😅

Dev

More invoker commands, and more reasons not to use JavaScript please, by Paweł Grzybek

HTML is getting more powerful! Now you can add some predefined commands to HTML elements that can do things like open (or close) modals, for example, without a single line of JS. This article explains really succinctly how that works. The custom commands thing is neat as well.

AI

Stop generating, start thinking, by Sophie Koonin

Fantastic piece wielding the power of common sense and highlighting all the struggles that software engineers have with using generative AI on our jobs.

I also use LLMs as a spicy autocomplete (or even a spicy search) and they can be very useful at times. But I can’t replace my thinking with machines, because machines don’t think.

An AI Agent Published a Hit Piece on Me, by Scott Shambaugh

This is both funny and incredibly infuriating. A PR was declined on GitHub for an open-source project because it was made by an AI agent and… the AI agent (or the anonymous person behind it) wrote up a defamatory blog post targeted specifically at the project’s maintainer.

If being an open-source maintainer was already a thankless job, now there’s one more hell to endure.

App

Current, by Terry Godier

This is pretty cool! Terry built a RSS reader that rethinks how to approach a continuous feed — or rather, a current — of articles and links. I particularly love how it aims to solve the noisy feed problem, where a source that posts 20 news items a day might drown a really cool article from someone who doesn’t post often, which is a problem I’ve had on every single RSS reader I’ve used (and that I “solved” by unsubscribing from noisy feeds).

It’s a one-time-purchase and on iOS/iPadOS/macOS only, and I haven’t tried it out yet because I just renewed the annual plan for another RSS reader 😅

Deep Read

The Future is an Empty Room (video), by Jacob Geller

Fantastic video essay about loneliness, technology, and the loss of our ability to do.

Beware that there’s some (I assume mild?) spoilers of Death Stranding 1 & 2 in there.

Wrapping up

Thanks for reading and clicking on the links! I get really happy whenever I see people finding out about cool stuff because of me. See you next month!

Fantastic video essay about loneliness, technology, and the loss of our ability to do.

Beware that there’s some (I assume mild?) spoilers of Death Stranding 1 & 2 in there.

My rating: Decent

There’s a great movie in here but I feel the pacing is really off. Each act takes waaaay too long to get going, and by the time they got there I was tired of it already, and ended up not caring as much. Good ending though.

This is amazing! This is a pixelated sandbox that allows you to experiment with all kinds of materials and elements, and see how they interact with each other. Each material interacts with others differently, as they would in real life. For example, oil won’t mix with water, but ink will.

A lot of time-consuming potential here, so don’t open it if you have something else to do 😅

This is pretty cool! Terry built a RSS reader that rethinks how to approach a continuous feed — or rather, a current — of articles and links. I particularly love how it aims to solve the noisy feed problem, where a source that posts 20 news items a day might drown a really cool article from someone who doesn’t post often, which is a problem I’ve had on every single RSS reader I’ve used (and that I “solved” by unsubscribing from noisy feeds).

It’s a one-time-purchase and on iOS/iPadOS/macOS only, and I haven’t tried it out yet because I just renewed the annual plan for another RSS reader 😅

This is both funny and incredibly infuriating. A PR was declined on GitHub for an open-source project because it was made by an AI agent and… the AI agent (or the anonymous person behind it) wrote up a defamatory blog post targeted specifically at the project’s maintainer.

If being an open-source maintainer was already a thankless job, now there’s one more hell to endure.

My rating: Decent

One more for the “it’s good but I’ll never watch it again” group. The movie is great at portraying negative emotions and Rose’s acting is top notch. What it chooses not to show is just as important as what it does.

Fantastic piece wielding the power of common sense and highlighting all the struggles that software engineers have with using generative AI on our jobs.

I also use LLMs as a spicy autocomplete (or even a spicy search) and they can be very useful at times. But I can’t replace my thinking with machines, because machines don’t think.

Last week I came across a post on Mastodon mentioning Maple Mono, a monospaced font. We don’t really have a shortage of fonts, there’s a lot out there (MonoLisa and Monaspace being my other favorites), but I’d never found one that manages to be so easy to read while also being incredibly cute.

Its main appeal is how rounded the characters are — monospaced fonts are usually blocky due to the constraint of all characters having to have the same width. It also has amazing italics-specific styles and some custom glyphs for commonly-used characters in programming. Seriously, just look at those:

I already swapped my code editor and terminal fonts to Maple Mono, and even changed the monospace font on this website to it already! It pairs greatly with the Catppuccin colors.

Live example

Unless you’re reading on an RSS reader, here’s two examples of the font being used. On the heading above ☝️ and on the code block below 👇

<script>
	$('#example').on('click', (e) => {
		alert('clicked!');
	});
</script>

<div class="pixel-flux">
	<button id="example">Click @ me</button>
</div>

<style>
/* Look at those sweet, sweet italics */
.pixel-flux {
	background: peachpuff;
	/* And this gorgeous ampersand */
	& #example {
		color: goldenrod;
	}
}
</style>

My rating: Loved it!

While the movie takes its time to get going, it is so well worth it. It keeps reinventing itself every few minutes and just keeps getting better and better.

The soundtrack, though, is just on another level. It is so good. One particular scene is gonna stick in my mind for a while, it was freaking amazing. If you watched it, you know which one it is.

Taken in Piani Resinelli, Lecco, Italy.

Photos taken on Saturday, 07 Feb 2026

HTML is getting more powerful! Now you can add some predefined commands to HTML elements that can do things like open (or close) modals, for example, without a single line of JS. This article explains really succinctly how that works. The custom commands thing is neat as well.

My rating: Loved it!

Gosh I loved this movie. A thriller that managed to make me both really tense and laugh out loud in the same scene without any of these reactions contradicting each other. It’s absolutely ridiculous in the best way.

My rating: I like it

As a Brazilian I’m extremely proud of this movie, and it’s extremely good in pretty much all regards. Trying to avoid spoilers here, but… it feels like it’s missing a huge part though? With the historical context I have I can kind of imagine why it’s missing, but it felt frustrating, unlike the rest of the movie that’s actually there.

Hey there, welcome to the first Cool Links digest of 2026!

Before I start with the links, I want to just mention that I just launched my first app on the App Store! It’s not something I built from scratch, but I took my favorite Mastodon client and wrapped it around nicely into an iOS app that plays along better with the system. I wrote about it on this other blog post from today!

Fun

Wallpaper Theme Converter

You might have read before that I love the Catppuccin color theme. It’s the same one I use on this website! I also love using that theme on the apps that allow me to, like Obsidian, VS Code and Vivaldi.

To match all of that, I need some wallpapers that fit the palette too. And I just came across this tool that automatically adapts the color palette of any image you upload to a theme of your choice! I’ve had good results with it so far. Definitely makes my desktop look way nicer :)

Ian’s Shoelace Site

This is awesome: an entire site dedicated to shoelaces, how to lace, tie or simply learn about them. It even includes the “world’s fastest shoelace knot”, created by the website’s author himself! I gotta try it out.

The Truth About Lying (and why we do it) (video), by Miss Chalice

Excuse me, I’m in a Lies of P obsession right now. This video (which contains some light spoilers) talks about the Truth/Lie choices in the game, which are an incredible narrative device, and how that relates to what makes us human.

It’s not surprising that a game based on the story of Pinocchio would have Lies and “becoming human” as parts of its theme, but I really like how they made it all make sense organically and not just like something they tacked in there because they had to.

Dev

jQuery 4.0.0

I definitely didn’t expect seeing a new major jQuery release in 2026, but here it is! This is the first major release in 10 years and it doesn’t bring a lot of new things on the surface, but seems to have been a major overhaul behind the scenes. Looks like a future v5 will bring in bigger changes.

jQuery might be old by JS framework standards, but it’s still very useful, and I actually still use it almost daily at my job.

Case Study: lynnandtonic.com 2025 refresh, by Lynn Fisher

Lynn talks through a really neat effect added to the latest refresh of their website: a “squishy” animation on the content whenever the window gets resized!

This means you won’t get to see the effect live on your phone, but there’s videos of the effect on the article just in case.

Love the paper-like aesthetic of the website, too.

Deep Read

A Website To End All Websites, by Henry Desroches

This is a very interesting read that compares the internet’s development to that of the automobile, but I also want to highlight the design of the article itself. So good 🤌

Wrapping up

Thanks for following along, and see you next month!

Download

TL;DR: I’ve just released an iOS version of Phanpy on the App Store and AltStore. It provides better performance and a Liquid Glass icon compared to the installed web app.

Now, if you want some more context…

Context

If you’re reading this, chances are you already know what Mastodon (or the Fediverse) is. If you don’t, the gist of it is that they’re people-owned social media; a bunch of different websites that talk to each other as if they were all the same thing. It’s really nice, and has garnered a lot of interesting people over the years.

One of the best perks of Mastodon is that there’s a bazillion ways to use it. Even though there are official apps (and they’re pretty good), there’s also a ton of 3rd party ones that do an excellent job of satisfying many usage niches. I’ve used a few, but one of them has always stood out: Phanpy.

Phanpy is a web client for Mastodon developed by Chee Aun, and it’s easily become my favorite way to use it. It’s not only pretty and kinda soothing, but it packs a bunch of UX touches that actually make a difference.

It is a web client though, and while on desktop it provides a top-notch experience (and probably on Android too), on iOS the experience was less than ideal, because Apple hates web apps (and the web in general). While you can install Phanpy as a full-screen web app via Safari, it has significant performance limitations, keeps reloading when in the background, and now with iOS 26, can’t have adaptive icons to fit in with other apps.

Which is why I decided to take advantage of Phanpy’s open source code, wrap it in a native package for iOS, and distribute it as an iOS app!

[!info] Launching iOS apps costs money, but my developer license was fully covered by the good folks at AltStore! AltStore has been around for a while as a way to sideload apps into an iPhone, but now it’s a proper alternative marketplace for iOS in the EU and Japan! Meaning that it’s the only way to install apps that Apple won’t allow you to. iPhanpy is available on both the AltStore and the Apple App Store, but I highly recommend checking out the AltStore version if you’re able, so you can also check out the other apps in there 😊

About Phanpy

Phanpy is a web client for Mastodon developed by Chee Aun, and it’s easily become my favorite way to use it. It’s not only pretty and kinda soothing, but it packs a bunch of UX touches that actually make a difference.

These touches can be small, but make all the difference. For example, whenever your timeline includes a reply to another post, Phanpy will show a preview of the post being replied to (something that is challenging to do on chronological feeds):

Some can be also small, but very opinionated, like the fact that Alt text is automatically displayed below an image (if it’s short enough to fit in there). This highlights how alt text is not just for vision-impaired users; it’s also a way to provide context to the images, or draw attention to the thing you specifically wanted to highlight.

But the UX touches can also be big: one of my favorites is “Catch-up”, perfect for when you haven’t opened the app in a while and want to see if you’ve missed anything important or want to quickly check posts by the people you care about the most. You choose a period of time and Phanpy will grab all the posts from that period and display them in a highly filterable view.

In the screenshot below, I’m seeing the posts from my timeline from the past 8 hours:

These are definitely not all the nice touches in there, just my favorites. Definitely check out the main Phanpy website to learn about the rest.

Since Phanpy is open source and under the MIT license, this means I could create a fork of it and add whatever changes are necessary to get it to work as an installable iOS app (I did get Chee Aun’s blessing for doing this, though, as I felt it was polite to ask). Why is what I did: this is iPhanpy’s source code, which I try to keep as up-to-date as possible with the main one.

The repo explains the technical side of the implementation in case you’re curious.

Download links

FAQs

Why not just use the web app?

While the installed web app (PWA) on iOS is perfectly usable, in my experience it has a few annoyances:

• It almost always fully reloaded when I opened it, meaning opening the web app would usually result in a blank screen for a couple seconds. This happens because iOS doesn’t keep websites in memory as long as it keeps apps;
• Scrolling would sometimes get stuttery, even on a recent iPhone. iOS limits how much juice web apps get, so Phanpy wasn’t as smooth as it could be;
• Visual glitches: I use my phone on an auto light/dark mode depending on time of day, and the status bar (the bar behind the clock/battery icon) would often get stuck in the wrong color;
• The home screen icon doesn’t adapt to the light/dark/clear modes, meaning Phanpy always stood out in a bad way.

As I said, these were mostly annoyances, not dealbreakers. Still, iPhanpy fixes all of those.

Android version?

Technically, it’s possible to make one, yes. It wasn’t a priority for me because I don’t use Android (and don’t have a device to test with), but I’m not saying it won’t happen. I just need time and volition to work on it. Maybe once I get a bit more comfortable with keeping the iOS one up-to-date.

If you know a little about Capacitor and how to build/test Android apps, feel free to try it and open a PR with your findings!

I can’t log in to my instance!

I’m aware that logging in to some specific instances is not working on the iOS app, even though it works on the web app. I’m looking into it. What I know so far is that it seems to be related to either an older Mastodon version (< 4.3.0) or to some specific security settings being enabled/disabled. It will be fixed in a future update.

Update: this issue has been resolved in version 1.5.2. Make sure you’re running the latest version!

Who do I report issues to?

If you’re using the installed version, iPhanpy, then probably to me. You can do it either on the GitHub repo if you have an account there, or just shoot me a message on my Mastodon account.

For feature requests, it’s better to do it on the original project’s repo.

Keep in mind that Phanpy and iPhanpy are hobby projects to both of us and we have no obligation to work on your issue. Be sensible.

Lynn talks through a really neat effect added to the latest refresh of their website: a “squishy” animation on the content whenever the window gets resized!

This means you won’t get to see the effect live on your phone, but there’s videos of the effect on the article just in case.

Love the paper-like aesthetic of the website, too.

Last weekend I quietly launched another section in this website: a chronological feed that aggregates everything I post here, e.g. blog posts, quick reviews, photographies and cool links, all in one place.

I’ve struggled to think of a good name for it. I felt like “Timeline” could mean something else, as people usually use “Timeline” on their websites to talk about their life timeline or something like that. So, for now, I just went with “Feed”. I like it because it’s very creative.

The reasoning behind it is that I found it a bit annoying that you had to open 4 pages to see if I had posted anything new (unless you use RSS, which makes you awesome 🫶). Now, you only need to open one! I am sure everyone will make good use of these precious seconds that are being saved!

This is something I had designed quite a while ago, but always postponed building for some unknown reason. I took huge inspiration from the way Phanpy groups notifications by date, and did the same here. The initial idea was to have some fancy filtering, but I chose to skip it just so that I could get it out there. Maybe someday.

Dealing with the data fetching was also quite easy: even though Astro handles each post type as a separate collection, the fact that my website is static means I don’t have to worry much about performance: I just query for everything, sort by date, then only get the posts I need (12-ish per page). It’s only gonna run once anyway, so I don’t have to do anything fancy for that query. Simplicity is awesome.

I also wanted to make sure days don’t get cut off on pagination. i.e. if I’m showing 12 items per page but the 13th item is in the same day as the 12th one, they’re gonna show up together. Again, easily doable because I load all posts before building the pages. It’d probably be very annoying to do otherwise.

jQuery might be old by JS framework standards, but it’s still very useful, and I actually still use it almost daily at my job.

Excuse me, I’m in a Lies of P obsession right now. This video (which contains some light spoilers) talks about the Truth/Lie choices in the game, which are an incredible narrative device, and how that relates to what makes us human.

It’s not surprising that a game based on the story of Pinocchio would have Lies and “becoming human” as parts of its theme, but I really like how they made it all make sense organically and not just like something they tacked in there because they had to.

My rating: Loved it!

This prequel to Lies of P is everything that was good about the base game, but elevated into a 12-hour long campaign of pure awesomeness.

The story, level design, bosses and weapons are just state of the art. The final chapter had my eyes all teared up all the time.

Each chapter even has self-contained small side quests that don’t give much of a challenge but are great pieces of world-building to make Krat an even cooler setting.

This is a very interesting read that compares the internet’s development to that of the automobile, but I also want to highlight the design of the article itself. So good 🤌

My rating: I like it

Raw and gut-wrenching are perfect adjectives for this one. It wants to get its message across and pulls no punches in doing so: nobody wins a nuclear war.

To match all of that, I need some wallpapers that fit the palette too. And I just came across this tool that automatically adapts the color palette of any image you upload to a theme of your choice! I’ve had good results with it so far. Definitely makes my desktop look way nicer :)

My rating: Loved it!

While this is probably my least favorite of the trilogy, it’s still one of the best movies ever made. An outstanding achievement in all regards. I can’t believe these movies exist.

The extra scenes for the extended edition are also pretty neat, and add some extra context that is very welcome for a fan like me. The overall movie pacing gets a bit worse which is why it’s totally understandable why they were cut from the theatrical release. And another reason I’m glad the extended editions exist!

I just wish the final Saruman scene was in this movie instead of the next one. I feel like it’d wrap around this movie’s story a bit more nicely.

Taken in Gramado, RS, Brazil.

Photo taken on Friday, 20 Jun 2025

Taken in Nova Petrópolis, RS, Brazil.

Photo taken on Friday, 20 Jun 2025

Photo taken on Sunday, 17 Aug 2025

Taken in Arroio do Sal, RS, Brazil.

Photo taken on Friday, 21 Feb 2025

(I did see real mountain goats around there, but the ones in the picture are just props)

Photo taken on Tuesday, 30 Dec 2025

Hey there! It’s time for the last post of 2025. I posted my yearly retrospective last week, and with this latest digest of Cool Links, I’m officially wrapping up the year.

Not many links this months as I’ve been quite busy, but the ones in here are extra cool.

Fun

The greatest in-camera effect of all time (video), by Corridor Crew

Ok, this video is amazing. Corridor Crew recreates the amazing practical effects from the first Lord of the Rings movie (the forced perspective ones with Gandalf and the hobbits), but not only that, there’s amazing storytelling on how it was made, all the cinema history before it, and why it has never been done again since then.

Clues by Sam

Neat little daily browser puzzle game where you use clues to find out who’s a criminal and who’s innocent.

PostHog Website

This website is so cool! It’s the kind of thing that you’d imagine was a personal website, but it’s actually a marketing page! A marketing team actually sat down and planned this out! I thought no such thing as fun marketing existed. Glad to be proven wrong.

Size of Life, by Neal Agarwal

Another great page by Neal Agarwal; this one lets you see life in all its different sizes.

Dev / Design

The f* off contact page, by Nic Chan

Great post about how clients hire experts to solve a problem, then completely ignore their expertise and try to copy what the big ones do. But they’re not big.

The “f*** off contact page” concept is amazing, too. It’s 100% real and out there, with more and more companies doing it (either intentionally or by just wanting to copy what others do).

Also, Nic Chan’s website is a treasure. It’s already been featured as a cool link here before but I wanted to point it out again. So cool!

CSS Wrapped 2025, by The Chrome DevRel Team

CSS is my favorite language and 2025 was amazing for it! The Chrome team built this page highlighting all the new exciting stuff that happened to CSS this year. I’ve used some of it but sadly still have to wait for other browsers to catch up before doing it on any serious work 😭

I recommend opening this in a Chromium-based browser so you can try it out firsthand, but there are video recordings of the features in case you’re unable to.

Tech

I shrunk down into an M5 chip (video), by Marques Brownlee

I usually love these videos that deal with the scale of things, and getting one from MKBHD was a surprise for sure, but a welcome one.

It’s incredible how far technology has come, and it’s a testament of how humans can achieve incredible things when we want to.

Wrapping up (the year)

And with that, 2025 is wrapped up for this blog! I don’t know how your 2025 was, but I hope 2026 is better in every single way! Thanks for reading!

My rating: Decent

There’s a lot of quality in this show, but the glacial pacing (and how long it takes for the main character to develop any semblance of likeability) made me really struggle to care about anything that happened.

Might be better when binge-watched, but the weekly episode releases really did it a disservice.

I usually love these videos that deal with the scale of things, and getting one from MKBHD was a surprise for sure, but a welcome one.

It’s incredible how far technology has come, and it’s a testament of how humans can achieve incredible things when we want to.

I can say without any shadow of a doubt that 2025 has been the craziest year of my life. There were many changes for me, and those changes were huge. Like, ocean-sized huge.

For the past 6 years, I’ve been writing retrospectives about what I did, learned, felt, watched, played or listened to. It’s a great way to reflect on things and figure out ways to make the next year better.

If you’d like, you can read my posts for 2019, 2020, 2021, 2022, 2023 and 2024.

Last Year’s Predictions

First, let’s have a look at how I thought this year was gonna be like a year ago, when I wrote last year’s post.

Well, first of all the plan for 2025 is to move. We’re moving out of Brazil to give living abroad another chance.

✅ Yep, that happened alright.

Another not-as-big-but-still-big goal is to actually go ahead with my website’s redesign.

✅ One more I got right! This year I finally worked on the big redesign, which I’ve been refining ever since.

I definitely want to continue with the monthly links and adding some non-blog content to the site (like the movie quick reviews).

✅ That’s 3 for 3! While I actually wrote less articles on the blog compared to last year, I now have so much more stuff in here, with dedicated sections for Quick Reviews, Cool Links and even Photography.

Who would’ve thought that the secret to getting new year predictions right is to predict easier stuff?

Personal Life

Half the World Away

This September, my wife, my dog and I moved from my hometown in the south of Brazil to Italy. It had been something on our minds for a while (I even mentioned it being the plan on last year’s retrospective), but I don’t think any kind of planning we had back them would do justice to the amount of work and stress it is to move across the globe.

First, the moment you start planning such a big change, your life already changes significantly. When you go out and see a cool piece of decor, furniture or anything that takes up space, you start remembering that you’re not gonna make use of it, and everything you have is one extra thing you gotta get rid of soon.

Then, you start going around the area you live and see all sorts of nice things. But you have in mind that it might as well be the last time you check out that place, at least for a while.

Friends and family make plans for next year. They include you out of habit, and you wonder if it’s a good idea to remind them you won’t be there, or if it’s better to just nod. You wonder if you’ll be able to stay in contact with those people.

And as the move date draws closer, you gotta actually do stuff. You gotta figure out what to do with all the things, clothes, furniture, apartment you have. What should you bring with you? What do you wanna keep safe at your parents’? What can you sell? What can you donate?

You also gotta start figuring out what to do once you get to your destination. Luckily for me, my brother was already here, so I didn’t have to worry about finding a place before even getting into the plane.

It is a long, taxing process. At least it was for me. The week before the move was also very bittersweet; seeing everyone once more before the move is nice, having no idea when you’re seeing them again is not.

Getting to Italy, I was finally able to see my brother after 3 years. He’s moved to Italy back in 2022 and has been enjoying life here. We’ve always been extremely close, so these past 3 years apart have definitely been hard. We stayed at his place for a little over a month, while we looked for a place of our own to live.

And we found it! We moved to an apartment (which we actually found the online posting for while we were still in Brazil) in the city of Lecco. It’s a very scenic city situated right between the Alps and Lake Como, so you have an amazing view no matter where you are in it.

Lake Como held some meaning to my wife and I because we spent our honeymoon in Bellagio, also around the same lake. So the fact that we live in a place that amazed us so much a few years ago is dreamy, actually. I love walking around here.

There’s definitely been some hard moments, but they were hard, not bad. We are settled now, slowly rebuilding our home and experiencing firsthand what life halfway across the world is like. The idea was never for this to be a definitive move - it was always about having this experience. And if we like it better here, then yeah, it might be definitive. But it’s too early to tell.

Travel

Besides the move, we did some traveling this year as well.

Rio de Janeiro

We lived in Brazil all our lives, but we had never been to Rio! It was fantastic to live the “genuine” Brazilian experience. The incredible natural beauty, friendly people, great food, sunny weather and good music - it was all there!

We went with two friends for the legendary free Lady Gaga concert in Copacabana. We were somewhere amidst those 2 million+ people!

Our trip was unfortunately too short to see everything we wanted to. Pão de Açúcar (Sugarloaf) and Cristo Redentor (Christ the Redeemer) were definitely highlights though.

Northern Italy

Kind of cheating, I guess, but now that we live in northern Italy, we have a lot of amazing places nearby to sightsee in.

The cover image of this post was taken in Varenna, just 30 minutes away from here by train. A beautiful medieval-like Italian village right by the lake.

Another highlight is the city of Breuil-Cervinia, which is a mountain town right next to the Matterhorn mountain. The famous pictures of the Matterhorn are taken from the Swiss side of it, but the whole area on the Italian side is also breathtaking!

Blog

This was another good year for the blog! In total I only had 9 non-cool-link posts but added a bunch of new stuff to it.

First of all, it finally got a new coat of paint in June, with v5 being launched! I’m really proud of the result and I’ve been tweaking it ever since, adding new sections and moving the menu to the left (on desktop) to accommodate those.

• Quick Reviews are something I had been doing since last year, using this web app by Matt Birchler. I decided I wanted to make them my own and add them so the site, so I recreated the design here and think it turned out pretty great;
• Cool Links is a central for all the stuff I’ve shared on the monthly Cool Link posts here. They show up in there in real time as I save them, so chances are you can see something in that page before it pops up on the blog;
• And finally, the Photography page was added last month, just for me to share the photos I’m most proud of. Lots of beautiful landscapes where I am now, so why not have a place to share it? It’s better than social media!

The fact that there’s posts in 4 different sections also means you gotta open 4 different pages to see if there’s anything new (unless you use a RSS reader). Which is why my plan next year is to add a unified timeline feed around here.

Work

I still happily work at Useful Group, where I launched a couple of big projects this year and worked on a bunch more. I’m still incredibly grateful to be able to work with such amazing people, both professionally and individually.

No side projects this year except for one I’m working on right now: an iOS version of Phanpy, the best Mastodon client, which is originally a web app. I’m not doing any real development here, mainly just wrapping the existing web app into something that works better on iOS, but it’s still taxing to go through the App Store process. The app is currently in review and should be available sometime soon. I’ll definitely write about it here.

Fun

[!info] This year, I’ve started writing Quick Reviews for a lot of the things below, so definitely check those out for more context.

Lots of things were good for distracting from the overwhelming responsibilities this year. These were the best of them:

TV and Movies

• Watching Mother! feels like being in a nightmare, and it was a haunting experience. I absolute loved it, but never want to watch it again (kinda like the Last of Us Part II game). Quick Review link;
• The Taking of Deborah Logan is the perfect kind of horror movie: it builds up a good mystery and doesn’t ruin it by giving you all the answers. Quick Review link;
• Nosferatu also deserves a mention. Its horror aspect comes more from tension and not mystery; but it’s at the same time a very beautiful movie. Quick Review link;
• Flow was able to make me connect so much with the characters, without a single line of dialogue. It totally deserved the Oscar for best animation it got! Quick Review link

Games

• Lies of P is a game I’d been wanting to play for 2 years and I’m really glad I finally did. An amazing game that is very inspired by Bloodborne, my favorite game ever, which of course invites all kinds of comparisons. But it can actually stand on its own; the gameplay is amazing, the atmosphere is very well done, and the setting helps keeping things interesting. Quick Review link;
• No Man’s Sky has been one of my favorite ways to unwind this year. It’s appeared here before (this is far from my first time playing it), but the more I play it, the more I like it. It’s a dream come true of a game, honestly. Quick Review link;

Music

This year, we went to two Lady Gaga concerts! The first was in May, at her legendary concert in Copacabana. It was right on the beach and free for everyone. There were over 2 million people there! The concert was amazing and the energy of the audience was incredible, but we mostly watched it through the big screens since we were far from the stage.

So, back in October, we went to another concert, in Milan! It was largely the same concert but with a larger setlist, but we were able to stay right in front of the stage and saw everything up close! Both experiences were amazing.

• Mayhem by Lady Gaga was obviously a very important album this year, then. My wife has been a Little Monster since she was a kid, so I became a fan by indirectly listening to it many times 😅 And after also listening to the album live two times, I can say it’s pretty great - with the first 3 songs being the highlights for me;
• Skeletá by Ghost was the one I listened the most to - an amazing album from start to finish, with some of my favorite songs ever in it. Ghost gets better at every release and this is no exception. Quick Review link;
• Sylvaine is an artist I discovered by accident but loved everything I heard so far. Her sound is heavy, but also very dreamy and ethereal. I love how she can swap between gutural vocals and the soft voice multiple times during the same song. “A Ghost Trapped in Limbo” and “Mørklagt” are my favorites;

What to expect from 2026

I want 2026 to be a very chill year; I definitely need a break after so much happening in 2025. But I don’t think that will happen. Firstly because we’re still getting settled here and there’s still so much stuff to get sorted. Bureaucracy is never fun or relaxing. Secondly, because we are right in the middle of a lot of cool places. We definitely want to take advantage of that and sightsee a lot. And we most definitely will.

For this blog, I envision 2026 being a year I write a lot more, probably more personal stuff than usual. Which is something I’ve been wanting to do for years and only partially succeeded.

I’ll definitely launch the iOS version of Phanpy too. Though that’s probably happening in January already, which means it’s an easy guess to make!

And since I already have the Developer License for the year… maybe I could come up with some other interesting app idea to launch? We’ll see.

Wrapping up

One thing I’m grateful for every year are the people out there who write about cool stuff and share their knowledge for free, for everyone, here on the internet. I learned so much on both professional and individual levels from them, and it’s always been a goal of mine to do the same for others with this blog.

So, thank you for reading this and giving me this opportunity. This kind of human connection is what made the web great years ago and it’s what still makes it great now.

See you next year!

Photo taken on Saturday, 06 Dec 2025

Another great page by Neal Agarwal; this one lets you see life in all its different sizes.

CSS is my favorite language and 2025 was amazing for it! The Chrome team built this page highlighting all the new exciting stuff that happened to CSS this year. I’ve used some of it but sadly still have to wait for other browsers to catch up before doing it on any serious work 😭

I recommend opening this in a Chromium-based browser so you can try it out firsthand, but there are video recordings of the features in case you’re unable to.

Ok, this video is amazing. Corridor Crew recreates the amazing practical effects from the first Lord of the Rings movie (the forced perspective ones with Gandalf and the hobbits), but not only that, there’s amazing storytelling on how it was made, all the cinema history before it, and why it has never been done again since then.

Great post about how clients hire experts to solve a problem, then completely ignore their expertise and try to copy what the big ones do. But they’re not big.

The “f*** off contact page” concept is amazing, too. It’s 100% real and out there, with more and more companies doing it (either intentionally or by just wanting to copy what others do).

Also, Nic Chan’s website is a treasure. It’s already been featured as a cool link here before but I wanted to point it out again. So cool!

My rating: Decent

It’s still a fun movie, but it’s basically the same thing as the first one but with worse pacing and felt a bit too forced.

My rating: I like it

Pretty fun watch all around. I would have loved this movie as a child, but somehow never got to watch it.

Photo taken on Saturday, 06 Dec 2025

Photo taken on Saturday, 20 Sep 2025

Hey there! Winter has arrived here in Italy. We’ve had our first snow, not enough to paint the city white yet but the mountains are already very picturesque.

As I try to get used to this kind of temperature at this part of the year (I was in Brazil until September, where it’s summer right now), I took some time to do some website expansions!

First, I gave Cool Links a new home and wrote about it here. Basically there’s now a feed of links that show up as I save them during the month. And you can filter them too!

Second, I launched a new page for photos I take. I’ve been posting a few of the ones I’m the most proud of. No professional work here - just me with a smartphone and landscapes that do all the work.

Third, I redesigned the navigation on the site itself (at least on desktop). I moved the header navbar to the left, since the top bar was getting too crowded. I like side navs and am pretty happy with the result.

Fourth, I posted my Default Apps update for 2025! Had way more changes this year compared to the last.

Oh, and for the cool links of the month… a lot of CSS-related ones, but not only that. Enjoy!

Fun

The perils of doors in gamedev, by Tom Forsyth

This Mastodon thread is an amazing tale about game development, physics and time-traveling bugs.

Tech

Introducing SlopStop: Community-driven AI slop detection, by Kagi Search

This is a really cool initiative! Kagi has been my search engine of choice for over a year and I’m really happy with how they’re aiming to stop AI slop from taking over their (still great) search results.

In my experience, their results are miles ahead of Google’s, Bing’s or whatever other search engine out there, partly because of their algorithm prioritizes good sites, partly because they allow you to prioritize/deprioritize/block the sites you want.

But a good algorithm only goes so far and with the amount of AI slop hitting the web every day, it’s gonna be harder and harder to avoid them. Now Kagi users can report certain articles as AI-generated so other users can know that beforehand and not click on them, or even block their domains.

LLMs are bullshitters. But that doesn’t mean they’re not useful , by Vladimir Prelovac

… wow. This is an amazing article that goes a bit into how LLMs work (is an easy-to-understand way), how flawed they are, and how useful they can be. Or dangerous.

Plus, the nurse and surgeon examples are hilarious.

The birth & death of search engine optimization, by Xe Iaso

This article walks through how the concept of SEO (Search Engine Optimization) was born, how it inevitably became broken and how easy it is to “win” it, as long as your content is made up and not actual real information.

Dev

Conditional Border Radius In CSS, by Ahmad Shadeed

This is a really cool trick. Turns out that it’s possible, with pure CSS, to have border-radius be applied conditionally.

The given example is a perfect one: sometimes we have cards with rounded corners that look good on their own, but if you’re on mobile and have less space and want the cards to take up the full page width, the rounded corners look awful. You can technically write breakpoints for that, but with clamp you can make the border-radius disappear if the card is too close to the viewport edges!

Brand New Layouts with CSS Subgrid, by Josh Comeau

This is the first article that made me actually understand the use cases for CSS subgrid. I’m still not fully convinced I’m gonna use them often, but it’s nice to understand what problems they solve.

Solved By Modern CSS: Section Layout, by Ahmad Shadeed

In this awesome post, Ahmad walks through all the possibilities modern CSS offers when building a section layout.

I knew about and have used some of those in the past, but that tip about display: contents was amazing! Never thought of using it like that.

You Don’t Need Animations, by Emil Kowalski

Great and to-the-point article with practical examples of when to use (or not use) animations properly in UIs.

I love me some whooshy animations, but they can be a pain in the ass when overused or when used in the wrong moment.

Just use a button, by Chris Ferdinandi

The “div vs button” debate was never really a debate because one of the sides is objectively wrong, but this is still a good post to remind you of why it was never a debate in the first place.

Is software getting worse? - Stack Overflow, by Isaac Lyman

This article has been sitting in my “Read Later” queue for almost 2 years 😳

It is an interesting article for sure, speaking about why speed and optimization has become such a rare thing in software development.

The second part of it, though, has kinda aged like milk, sadly. Developers no longer have a lot of leverage on their jobs, and we now live in a world where the thought of having no human developers involved at all in the code I’m running is real and frankly terrifying.

I’m hopeful companies will eventually figure out that AI-generated crap is still crap when the bubble bursts, but until then, there’s a lot of damage to be done.

Wrapping up

Thanks for reading once again, and see you next month!

My rating: Loved it!

Can’t believe I’d never watched the extended editions before. This movie is just timeless, a perfect introduction to a wonderful world, amazing pacing, acting, environments and practical effects.

It’s almost 4 hours long but I wanted to start the next one immediately after it finished.

This is the first article that made me actually understand the use cases for CSS subgrid. I’m still not fully convinced I’m gonna use them often, but it’s nice to understand what problems they solve.

My rating: I like it

Amazing game, probably the best souslike that’s not made by From Software.

Lies of P is a dark retelling of Pinocchio, and the Belle Epoque with Puppets setting really grows on you. At some point it goes bonkers with that and it’s awesome. The Bloodborne inspiration is obvious and very welcome.

The final third of the game suffers from a steep difficulty wall, but doesn’t ruin it. There’s a difficulty setting that can help if a boss gets too difficult.

Following the end-of-year tradition, here is an updated list of the apps I choose to use for the vast majority of my daily activities on my Mac and iPhone.

Other years: 2024, 2023.

Apps that are new compared to last year are marked with the ✨ emoji.

• 📧 Mail service: Fastmail
• 📬 Mail client: Fastmail✨
  • I used to use Apple Mail but got tired of its unreliability. Fastmail’s iOS app and web client on desktop are close to perfect, really.
• 📆 Calendar: BusyCal✨
  • More reliable than Apple Calendar and I love the “Current & Upcoming” widget on iOS. I don’t use a lot of the features, but since it’s included in Setapp, it’s a no-brainer.
• ✅ Tasks: TickTick
• 📝 Notes: Obsidian
• 🌐 Web browser: Vivaldi✨ on Mac, a mix of Vivaldi✨ and Orion✨ on iPhone
  • I wrote extensively about my migration from Arc to Vivaldi on the desktop. On mobile, Vivaldi is not as appealing. Orion scratches my need for simpler navigation when I just need to do a quick search.
• 📰 RSS Reader: Reeder✨
  • Readwise Reader was great but too expensive. Reeder works pretty well and it’s a one-time purchase that I’m pretty happy with.
• 🧮 Code Editor: Windsurf✨
  • It’s VS Code, but with better integrated AI features. It’s very powerful if used correctly, which I like to believe I’m doing.
• 👨🏻‍💻 Terminal: iTerm 2
• 🔎 Search: Kagi
• ⌨️ Launcher: Raycast
• ☁️ Cloud storage: iCloud
• 🌅 Photo library: iCloud
• 🌤️ Weather: Apple Weather
• 🎙️ Podcasts: Apple Podcasts / YouTube
• 🎶 Music: Apple Music
• 🛹 Clipboard manager: Maccy
• 🔐 Passwords: 1Password
• 💸 Budgeting: YNAB
• 💁🏻‍♂️ Social: Mastodon
• 🐘 Mastodon: Phanpy✨
  • Simply the best social media client ever. Everything is so thoughtfully put together. It’s a web app which is great on desktop, slightly less so on mobile (mainly Apple’s fault). I made an iOS version of it, which should be launched somewhere soon (just maybe not the App Store).
• 🎮 Gaming: PS5 and Switch
• 🖼️ Screenshots: CleanShot X

Photo taken on Friday, 21 Nov 2025

… wow. This is an amazing article that goes a bit into how LLMs work (is an easy-to-understand way), how flawed they are, and how useful they can be. Or dangerous.

Plus, the nurse and surgeon examples are hilarious.

This article walks through how the concept of SEO (Search Engine Optimization) was born, how it inevitably became broken and how easy it is to “win” it, as long as your content is made up and not actual real information.

This Mastodon thread is an amazing tale about game development, physics and time-traveling bugs.

Photo taken on Saturday, 22 Nov 2025

This is a really cool trick. Turns out that it’s possible, with pure CSS, to have border-radius be applied conditionally.

The given example is a perfect one: sometimes we have cards with rounded corners that look good on their own, but if you’re on mobile and have less space and want the cards to take up the full page width, the rounded corners look awful. You can technically write breakpoints for that, but with clamp you can make the border-radius disappear if the card is too close to the viewport edges!

In this awesome post, Ahmad walks through all the possibilities modern CSS offers when building a section layout.

I knew about and have used some of those in the past, but that tip about display: contents was amazing! Never thought of using it like that.

This article has been sitting in my “Read Later” queue for almost 2 years 😳

It is an interesting article for sure, speaking about why speed and optimization has become such a rare thing in software development.

The second part of it, though, has kinda aged like milk, sadly. Developers no longer have a lot of leverage on their jobs, and we now live in a world where the thought of having no human developers involved at all in the code I’m running is real and frankly terrifying.

I’m hopeful companies will eventually figure out that AI-generated crap is still crap when the bubble bursts, but until then, there’s a lot of damage to be done.

Great and to-the-point article with practical examples of when to use (or not use) animations properly in UIs.

I love me some whooshy animations, but they can be a pain in the ass when overused or when used in the wrong moment.

This is a really cool initiative! Kagi has been my search engine of choice for over a year and I’m really happy with how they’re aiming to stop AI slop from taking over their (still great) search results.

In my experience, their results are miles ahead of Google’s, Bing’s or whatever other search engine out there, partly because of their algorithm prioritizes good sites, partly because they allow you to prioritize/deprioritize/block the sites you want.

But a good algorithm only goes so far and with the amount of AI slop hitting the web every day, it’s gonna be harder and harder to avoid them. Now Kagi users can report certain articles as AI-generated so other users can know that beforehand and not click on them, or even block their domains.

My rating: I like it

Cute with a hint of sadness, I love the combination. The art style and character designs are amazing!

Photo taken on Saturday, 01 Nov 2025

Photo taken on Saturday, 08 Nov 2025

In July 2024, I started gathering cool links from around the web, with the best stuff I’ve read or watched during each month. Since then, I’ve been posting them monthly, always at the last day of the month.

I’ve been really enjoying doing that, it’s the perfect opportunity to write a few words about stuff without having to commit to a full blog post. Plus, it keeps the spirit of the web alive!

The process of saving links and organizing them was always very manual and it still is to some extent, but a couple months ago I did the responsible thing and started organizing my archive of links. Which means I can reference them, sort, filter, and whatever else I want.

The next logical evolution of that was making that archive available on this very website — and it is now, on the new Cool Links page !

Links are added there automatically as I save them, which means they’ll be added throughout the entire month. I’ve even added them to the RSS feed, if you’re into that.

Of course, the monthly posts (and newsletters) with Cool Links will still exist. I feel like a compilation of multiple links is still the best way to read them. But now you can also find them on their own little room, too.

There’s already some there that haven’t been posted on the blog yet. So if you’re too impatient you can go check it out!

The “div vs button” debate was never really a debate because one of the sides is objectively wrong, but this is still a good post to remind you of why it was never a debate in the first place.

My rating: I like it

I had no idea what to expect from this movie and it kept surprising me over and over. It’s already pretty long but I wish it kept going for a bit longer.

Hey there, Happy Halloween 🎃 ! As I enjoy my favorite season and prepare for my first winter in the northern hemisphere, I gathered just treats, no tricks, for you this month.

Cool Apps

Edit Photo, by Pintura Labs

Okay, this is pretty cool. This lil’ website allows you to do quick image edits right on your browser. Nothing new there - except for the fact that it actually works with no account, no ads, no popups, no upsell. Truly a marvel!

Edit Video, by Pintura Labs

The same as Edit Photo, but for Videos!

Squoosh

Another cool little web utility. This one lets you squoosh your image files to greatly reduce their file size without any significant loss in quality. Especially useful if you have a website of your own and want to optimize your images.

Notebook Navigator - Modern File Explorer for Obsidian, by Johan Sandberg

This is beautiful. This Obsidian plugin completely overhauls the file navigation and makes it actually usable. It fixes one of the app’s biggest problems for me: navigation. I’ve been using it pretty much everyday since finding it and it just made Obsidian exponentially better to use.

You can add custom icons to folders as well, which I used to need a separate plugin for.

Fun

A cartoonist’s review of AI art, by The Oatmeal

A really fun web comic of an artist explaining his thoughts about AI art. I think I agree with all the points there.

Dev

CSS HDR Gradients, by Adam Argyle

A really cool CSS gradient generator that supports all the new CSS color stuff that’s been coming out in the past years (and that I honestly don’t know much about).

Aside from the cool UI and easy-to-understand code it generates, it can generate HDR and SDR gradients; which means that on supported browsers and devices, your gradient might pop out with higher dynamic range (and have the SDR as a fallback). Great if you really want the colors to pop.

Write Code That Runs in the Browser, or Write Code the Browser Runs, by Jim Nielsen

Really cool thoughts on the tradeoffs between control and performance in web development, and how whatever you build will never outperform the browser’s built-in APIs.

AI can code, but it can’t build software, by Matias Heikkilä

Yes! Any good developer will tell you that coding is the easiest part of the job. Making software actually go beyond a feature demo is what’s really hard. It’s something I’ve been taught ever since I began working on the field, actually. Learning to code is essential, but learning where to put the code and how to foresee all the hundreds of complexities is my actual job.

Expectations, feature scalability and security are very much human components of the job and can’t be properly done by something that’s not human.

Wrapping up

Thanks for reading once again, and see you next month!

My rating: Didn't like it

I can totally see this being decent if they stripped away at least half of it and made 3 or 4 decent episodes, but in true Netflix fashion they opted for 8 bad ones instead.

A show that doesn’t really know what it wants to say, with a pacing so awful that often killed any sort of interest in what was going on.

Last Sunday I went to a small town in the foot of the italian Alps called Civiasco, with my wife and my brother. Last week we saw a poster for an event that was going to happen there while going out for a walk, and it looked interesting. It was called “Colma D’Autunno”, which in my understanding means “Peak of Autumn”.

My wife and I always loved autumn, but the yellow and red leaves were not that common back in Brazil, so we never experienced the autumn aesthetic in real life. It was only an hour away from where we are so we figured it’d be cool.

As we arrived there, they were serving polenta with cheese and a sauce with donkey meat (!) called Tapelucco, which I’d never had before. The polenta and cheese were good as always, but I didn’t enjoy the meat that much. Sadly, I forgot to take a pic of the plate, but the portion was very generous.

After lunch, we went for a guided tour around the woods, going up the mountain a bit. Even though it took a while (the “guided” part was mostly a biology class on plants), it was fun to walk around in that environment. It’s the kind of woods we’ve always seen in movies but had never been to before.

One of the most common trees in these woods is the Castagno, or Chestnut tree. Which means the ground was full of chestnuts! We had a couple of them raw (which I only later learned you shouldn’t eat raw…), and after the walk they started serving Castagnata (roasted chestnuts) for free for everyone. We had it with some Vin Brulé.

After the walk, we stayed for around 40min for a concert by a guy named Nick Hart, from the UK. He sang old English folksongs and it was a pretty cool experience!

My rating: I like it

I know, I know. It’s EA. But I love football and there’s enough good here to let me live the fantasy of a career mode.

The menus are a complete mess and half of them don’t work most of the time, but the gameplay is cool. I’ve founded Polenta FC and have had a blast managing the club.

My rating: Loved it!

I’ve played this game on and off since 2021, and surprisingly never stopped to give it a review.

It’s a dream come true, honestly. Space exploration at its finest, exploring worlds is always fun, there’s so much to do and still the best thing to do is nothing. I love just walking around a pretty planet and taking screenshots of the amazing views. Whatever problems it has just fade away in the vastness of space.

I absolutely adore the dialogues, too. So many existential quotes that just hit the right spot.

Hi there! As of today, Cool Links has been officially written from both sides of the Atlantic! Last month I mentioned how tired my wife and I were of packing and now we’re still tired, but we’re finally in Italy!

This move has been a huge undertaking and honestly we still haven’t gotten used to it. We’re staying at my brother’s and looking for a place of our own. Hopefully, we’ll find one soon!

This doesn’t mean I couldn’t grab some cool stuff from around the web, though. I even discovered Chris Ferdinandi’s blog which is amazing. There’s 3 links from him here and I had to try real hard to not put even more. Definitely worth a follow/subscription/whatever if you like what he writes!

Fun

🌟 Every Noise at Once, by Glenn McDonald

Grab your headphones and get ready to lose some hours. This website compiles every subgenre of music and algorithmically sorts them out in relation to one another. It’s great to learn about new genres you might like or to find something similar to what you already know!

Adrift

Adrift is a quiet space where doubts become paper boats and drift together across a shared sea.

What a neat lil’ website. You can write your own doubts or self-care notes and let them float out in a virtual sea, alongside the notes of many others. There’s some background music too.

Deep Reads

The meaning of life…, by Chris Ferdinandi

… is just to be alive.

Beautiful reminder of why chasing goals and meaning only leads us away from them. A bit related to my longterm goals post from last year.

Means of Production, by Chris Ferdinandi

One of capitalism’s greatest successes is that it’s robbed us of imagination. (…) We struggle to imagine what life could look like under a different system. How it would be better. How it would be worse. How it would be different. (…) Utopias don’t exist. They never will. But I refuse to accept this system we toil under—while better than monarchies and fiefdoms—is as good as it gets.

Wallet voting, by Cory Doctorow

Make individual choices that make your life better. Take collective action to make society better.

Cory has such a nice way with words — he can express complex thoughts so simply.

This one is a banger. It’s both encouragement to do more against evil and reassurance for when you feel like giving up.

Dev

Accented, by Pavel Pomerantsev

This tool looks pretty cool! It’s a two-liner solution for web apps that automatically highlights accessibility issues on whatever you’re working on.

I haven’t tested it myself yet (busy month), but will definitely look into it soon.

npm: How did we get here?, by Kevin Roleke

I think it’s widely known that the JS dev community relies too much on dependencies, especially through npm packages, and that it’s really hard to avoid this problem (I use as few packages as possible, but each dependency has its own hundreds of dependencies which also have hundreds more…).

But I think I never stopped to think of how easy it is to publish a package there. Which also means, it’s too easy to publish a malicious or compromised package, that gets downloaded and executed on our computers with no proper vetting. Scary.

Why I still prefer ems over rems, by Chris Ferdinandi

Neat short article that goes over a bit of the differences between ems and rems in CSS, with nice examples.

Wrapping up

Thanks for reading it all the way here! Hope to see you next month as well! ;)

[!info] The ramblings below are from my personal journal where I jot down whatever’s going through my mind. I felt like this one could resonate with other people so I’m sharing it here with some minor edits.

I’m thinking of trying out Craft as my note-taking/second brain app again.

Truth is, Obsidian resonates so much with me on a lot of things. Principles, extendability, markdown, the file-over-app philosophy, and all the geekiness of it.

It is also truth that Obsidian is not convenient at all.

It’s hard to jot things down quickly — except maybe on the laptop, where I can have the daily note open and just jot things on the Scratch Pad section of daily notes.

But on the phone it’s just cumbersome — I feel like I actively try to avoid opening Obsidian on the phone altogether. And most of it comes from the fact that ==dealing with text on a phone just plainly sucks==. It was the main problem of Notion too.

Craft excels at it (at least I haven’t seen anything as good) because it doesn’t assume you’re trying to select text, and is instead dealing with paragraphs/whatever as blocks. This just makes it easier to work with on the phone.

There’s plenty of downsides too. Treating everything as a block and not as text is good on mobile, but not so much on a laptop. There’s some bugs here and there (example: I can’t apply the Daily Note Template reliably, it always glitches out with a different outcome).

Plus, Obsidian has a lot of qualities too. The wikilinks are amazing, and the network you can build with them is great. Being able to link to terms even if their pages don’t exist yet, for example, is a fantastic example of the philosophy behind Obsidian — links, everywhere. You don’t have to know in advance what will be important, you just do some basic prepping (that honestly becomes second nature after a while) and, if those things eventually become important, you’ll already have a network of mentions to that thing.

And then there’s the last thing, which is quite major: migrating things from my Obsidian vault to Craft. Looks like that’s a pain. While Markdown gets converted automatically, wikilinks conversion is not reliable. And without wikilinks, the whole structure falls apart.

This piece started as a quick way to jot down what I was doing, but it eventually became the whole reasoning as to why I think Obsidian is still the right choice for me, mobile difficulties and all. There’s some things I wish it had though; and probably there are ways to do it, I just need to do some research:

1. A quick way (probably an iOS/macOS shortcut to quickly jot things to the Journal section of my daily notes;
   • Added difficulty: if the daily note does not exist yet, it needs to be created and have the daily note template applied to it.
2. Same as above, but on the Scratch Pad section.
3. I like the idea of having a local AI analyze the files in my vault and be able to ask questions. Example: the other day I wanted to find something I knew I had written down some months ago, but couldn’t remember where. Having a local AI model look it up is a good use case in my book.
   • ✨Update: well, since it’s all just .md files on a folder, I can actually use Windsurf (a VS Code fork with built-in AI models I use) to do that. Works well, and speaks volumes about the file-over-app philosophy!

My rating: Loved it!

Watching this movie feels like a nightmare. Things happen and you really don’t have much say in it, then they start spiraling out of control and you’re completely unable to do anything. You can’t run, yell or fight.

The religious allegories are quite obvious and are great, but that nightmarish feeling was really something I hadn’t felt with a movie before.

Hi there! This month’s Cool Links are coming in a little bit later because I’m in the middle of moving. Which means, this is the last issue of Cool Links written in Brazil, at least for a while!

As I write this, my wife and I are resting a bit after 4 days of packing, selling, donating, and moving stuff over from the apartment we used to rent and into my parents’ house. We’re staying here until the 12th, when we actually depart to our next home, in Italy!

Without further ado, let’s check out the links of the month:

Fun

GAMER CHURCH

What exactly is this site? I don’t know. But it looks awesome.

Tech

uBlock Origin Lite for (iOS) Safari

Finally! I’ve been using uBlock Origin on my desktop browsers since it’s existed, and it makes the commercial web usable. Now it’s finally available for iOS Safari (maybe on the Mac too?)

Safari has had some ad blockers for a while, but none were as good as this one. This one blocks ads, trackers, and even allows hiding some page elements you select, just like the desktop version.

A must-have in all my web browsers.

Obsidian Bases

Obsidian, my note-taking, second-brain and CMS app just got a huge feature: Notion-like databases, here simply called Bases. You can use them with any files in your vault and in my initial testing, it’s pretty powerful!

I’m already using it to manage Cool Links, and looking forward to use it for more of my stuff in the future.

Are people’s bosses really making them use AI tools?, by Andy Bell

Time and time again, we’ve been seeing companies that go all-in on AI in hopes of not falling behind or standing out while the bubble doesn’t burst. This article has some real life testimonies of employees that are being forced to use AI in their work - even if it makes things harder and makes the results worse.

Dev

Better CSS layouts: Time.com Hero Section, by Ahmad Shadeed

Sharing Ahmad Shadeed’s posts here kinda feel like cheating at this point. They’re always a gem!

This one goes extremely in-depth into redesigning the hero layout of Time.com. Ahmad explains his thought process on every step of the way, and dives into a lot of fun, new-ish CSS principles like container and style queries, :has, grid and even text wrapping!

A masterclass, really.

5 Useful CSS functions using the new @function rule, by Una Kravets

CSS is finally getting functions! And if you’re struggling to think of good use cases for them or thinks they don’t make sense at all Una will change your mind real quick.

Too bad they’re still only supported in Chromium and are probably ways off from being usable in production. But it’s nice to get a glimpse of what the future holds.

An Interactive Guide to SVG Paths, by Josh Comeau

I always have trouble understanding SVGs, but thanks to this article, I will have teensy bit less trouble than before. Josh’s articles are always a gem with all the interactivity and this is no exception.

Wrapping up

Hope you enjoyed the cool links from this month, and see you on the next!

I’ve been a happy Arc user since 2022. It’s well-designed, significantly improved how I use a web browser, works well, and has (had) a team of passionate and talented people behind it that frequently pumped out some nice, weird, fun ideas. However, lately I’ve been trying to find a good replacement for it and got reminded of how hard it is to find a good option for a browser.

Why do I need a replacement?

Well, Arc has gathered a considerably big user base, and more importantly, a user base that loves the product. However, it’s always been free. You know what that means, right? It means the company operates at a loss, surviving off of VC money. And they have to pay that debt off eventually.

Personally, I’d be very happy to pay a subscription for Arc, and I know a lot of people would do so too. It’d be a far healthier business model, even if it meant the product would evolve more slowly. But you see, once VC money comes in, everything scales considerably. A loyal paying user base is not enough; you need to shoot for the stars or you fail.

Most tech companies go through this exact same route; and when they need to start paying off that debt, they enshittify; their product becomes a shadow of what it once was because it now needs to squeeze as much money as possible at every opportunity.

With Arc though, that never happened. They did some experiments with “Arc Max”, the AI offerings inside the browser, but the browser itself never got enshittified. Thankfully, I guess, it only got put aside. Arc is now no longer under active development, and is instead just receiving Chromium updates and security fixes.

My theory is that they figured out that they’d never be able to monetize a niche web browser as much as they needed, and just gave up on the product. And started working on Dia, an “AI-first browser” (that’s pretty much dead on arrival because everything it does is already being done by the big ones).

So, while Arc is still as good as it ever was, I know it’s not gonna be long before it’s sunsetted and stops getting Chromium updates. I’m trying to get a bit ahead and find a replacement to dip my toes in before I’m forced to make the jump.

Most options are just a no-no

Yes, I am especially picky with the software I use. But hey, I make a living on web browsers (and a lot of my hobbies also take place inside one), so I’m allowed to care this much about it, mkay?

When we’re talking web browsers, we have three “families”, defined by the three major browser engines available on the market:

• Chromium-based browsers, that use the same engine as Chrome. Lots of options here, with main examples being Arc, Edge, Brave, Vivaldi, Opera;
• Firefox-based browsers, which surprisingly use the Firefox engine. Not a lot of variety, but Zen is the standout;
• Webkit-based browsers, which use the same engine as Safari. Besides Safari, I only know about Orion using this engine (on the Mac);
• 🎗️ Reminder: on iOS and iPadOS, every browser uses the Safari engine, because Apple doesn’t want you to be happy (they don’t allow alternative browser engines in their App Store).

As a web developer and just someone that likes the web, I have a strong dislike for the WebKit engine, so using it willingly is just not for me.

Firefox has a really cool mission in theory (Mozilla sucks as a company though), but has been notoriously slow at adopting new web standards and has been behind even Safari lately (perhaps it has something to do with Mozilla forgetting what a web browser is for?). I love learning new things and implementing them on my work (with Progressive Enhancement, always), so it’d suck to be unable to learn new things because they don’t work on my browser of choice.

[!info] If the browser engine isn’t a dealbreaker for you, Zen browser is aiming to be pretty much a carbon copy of Arc, and it’s open source!

Which leaves me with Chromium-based browsers. Chrome, Edge and Opera are spyware (Edge has some cool features though) and Brave is owned by a bigot; leaving Vivaldi as the only real option in there.

Vivaldi (not the composer)

Vivaldi was founded by the same people who worked in the original Opera browser, back in the 90s. Since Opera was sold and became a shadow of its former self, Vivaldi was created to try and fill in the power-user-shaped gap in the browser space.

It’s Chromium-based, built in Europe, and seems to be very privacy-friendly, with a “make the web better” mission similar to Mozilla. Sadly, it’s not open source, so these claims are not verifiable.

It’s main selling feature is being extremely customizable, both visually and in how you use it.

I had already tried Vivaldi out in the past, but it never stuck the landing for me. I don’t really need extreme customizability, I prefer a thoughtfully designed UX instead. Which is why Arc appealed to me in the first place. But since no other options feel like they’d appeal to that preference, I wanted to figure out if I could either mimic my Arc workflow in Vivaldi or maybe settle for a middle ground that I could adapt to.

I figured I’d start by thinking exactly what I liked about Arc:

1. It looks good;
2. The Command palette-thing (cmd+t) flow is wonderful. Opening an empty new tab makes zero sense, lemme use my keyboard and get straight to what I wanna do!
3. The vertical tabs on the side and being able to swipe between spaces is great to keep tabs from getting out of control.

With that in mind, let’s analyse Vivaldi on three criteria: The Looks, The Clacks, and The Tabs.

Criteria One: The Looks

This is the Achilles’ heel of Vivaldi, in my opinion. It doesn’t look bad, but it’s far from being as good-looking as Arc is. Some of what Arc does is just not doable (since Vivaldi doesn’t use macOS’ native technologies to build its UI), and the focus on customization means a lot of compromises have to be made. That being said, some tweaks here are there made it look kinda good.

I’m using a Catppuccin theme because I like the color palette (it’s the same as this website) and used the sliders in the Theme editor to tweak colors, radii, and spacing a little bit.

Criteria Two: The Clacks

(as in the sound a keyboard makes)

After thinking about it, the command-palette-thing as a replacement for the new tab is Arc’s unsung hero:

It’s so elegant; it works well, it’s fast, it doesn’t get in your way, it keeps your current context in view, and it’s keyboard-centric. After three years of using it every day I barely paid any mind to it, but trying to use a browser without it was a revelation. I didn’t know how good it was until it was gone.

You wanna know something cool? Vivaldi has it, too! It’s not as elegant visually, but it works just as well! It’s called “Quick Commands”, and by default is accessed with cmd+e (on a Mac).

My muscle memory was using cmd+t (new tab) to open the command palette though, so I remapped it to that shortcut. A small issue was that, by default it opens URLs in the same tab you’re currently in, but hey, Vivaldi has a toggle for everything! A quick look into the Quick Command settings presented me with a beautiful “Open Links in New Tab” checkbox.

Criteria Three: The Tabs

The main thing you notice when you start using Arc: the tabs are on the left! And they’re displayed vertically!

Vivaldi, of course, allows you to do just that. You can keep your tabs on the top, like all the boring kids do; you can put them on the left or right if you’re cool, or you can even put them in the bottom of the window if you’re all about breaking society’s expectations.

Putting them on the left was the first thing I did. Here’s how it looks:

You immediately notice that while the tabs are now indeed on the left, they don’t look right (hah!). The address bar and bookmarks are still on the top and take up a lot of space, and there’s just… something missing in there. No folders, no spaces, they don’t feel as clickable, I’m not sure how to explain it. It’s not fully collapsible like Arc’s, but you can drag it to make it small enough that it only shows the favicons.

This annoyed me because I couldn’t build an exact replica of my Arc workflow, initially. The lack of spaces so I could properly separate my work and personal tabs was almost enough to make me give up on using it. But I found out about the Tab Stacks.

Tab Stacks (and the portable rabbit holes)

Tab Stacks are available in Chromium and have existed for a while now. It basically allows you to group tabs together manually, assign them a color, and collapse/expand that stack like an accordion. However, in Vivaldi they have a (optional) much better UI. Instead of expanding to the sides, they just expand into a second level of tabs.

Surprisingly, this approach aligns much better with how I like to manage my tabs than Arc’s ever did! Very often at work I have to put whatever I’m working on on hold and quickly jump into something else for a few minutes. Being able to just stack relevant tabs together and hide the irrelevant ones makes tab management much less overwhelming.

With Arc, if I had to context switch like this, I’d often get the tabs mixed up (creating a separate space for it meant I lost the important tabs pinned to my general “Work” space). With Tab Stacks, going back to that context is just a click away, and the tabs reappear at the second level of tabs.

Something that makes Tab Stacks even better though: a checkbox in Vivaldi Settings that makes all tabs opened from within other tabs to spawn in a stack. Or, as I’d like to call it, the Portable Rabbit Hole setting.

Let’s say you’re enjoying a short break and reading the latest post of Cool Links on a beautiful website. There are so many links to click on and so many tabs to open, but you need to get back to work in 10 minutes and those tabs will get lost amidst the Jira tickets. Well, with your Portable Rabbit Hole, you no longer have that problem!

All the tabs you’ve opened by clicking on those cool links will be neatly stacked together so you can come back to them later. You can even add some color and a name to that stack if you want.

So, did I make the move?

Yes… and no.

I’ve been using Vivaldi pretty much daily for about a month now, and using Arc less and less. But I still miss it sometimes. So I’ve had a few days where I “relapsed” and went back to Arc for a bit.

And then something weird happened. The Arc workflow became weird to me again. Something about having bookmarks mixed together with open tabs started feeling weird. The loss of Tab Stacks also felt like a downgrade.

It’s funny how I was so afraid of not being able to get used to a “normal” browser after so much time using Arc, and now I got so used to Vivaldi that Arc became weird again. It’s still nice to use though, and I might use it as my main browser again if I feel like it.

In the end this just makes me feel better that when Arc inevitably dies, I’ll just handle it and everything will be fine. No point in not enjoying it now while I still have it.

Hi there! This month’s Cool Links are all about the web.

Fun

Draw a Fish Dot Com, by fifteen.games

This is what the web was made for. Just draw a fish. Then watch your creation swim with fishes from all over the world. Beautiful.

Deep Reads

Netstuck, by Mark Pitblado

This article talks a bit about the Netstuck effect, when you feel forced to use a service or platform just because everyone is there, and how that’s different from a monopoly.

As someone with no commercial social media accounts, I relate to this a lot. And even though I can live without a Facebook or Instagram account, I tried not using WhatsApp in Brazil for a couple years and just had to concede at some point, because there’s just no way of getting in contact with anyone (especially businesses) in here without it.

Dev

new Date(“wtf”)

This game tests your knowledge on JavaScript’s Date class. It’s funny because it’s sad.

Don’t animate height!, by Jim Fisher

Neat article in which Jim explains why a seemingly harmless CSS transition property (using height) was spiking up CPU usage. It goes through the thought process of identifying the issue, understanding it, and solving it. (spoiler: animating transform is much cheaper!)

A Friendly Introduction to SVG, by Josh W. Comeau

I know SVGs are amazing, and I’ve done some cool things with them. But I never really knew what I was doing. This fantastic post by Josh Comeau goes over the basics and focuses on SVGs you can create yourself through code, instead of relying on vector editing softwares like Figma or Illustrator.

I haven’t tried these tips in practice yet, but hopefully I’ll have a neat idea I can use them on soon 👀

Tech

(pt-br) Como eu salvo links e preservo conteúdos no mundo pós-Pocket, by Augusto Campos

This article (in Brazilian Portuguese) was a huge inspiration to me in reworking how I save my Cool Links, starting this month. I’m using the Obsidian Web Clipper instead of the custom solution the author had, but the principles are still the same.

Building up a weekly routine to organize things has also been a good change, as I don’t have a lot to do at the end of the month when I’m putting this post together.

Wrapping up

I hope you enjoyed the links this month! Life’s been busy with all the move preppin’, but I’m glad I was still able to grab some links.

I’ve changed how I save the links to make it easier to organize them at the end of the month, and I’m planning to build an archive of all links I’ve posted so far, in a single page. No promises as to when though; my August looks really busy already 😵

Anyway, see you next month!

My rating: Loved it!

Every single Ghost album improves on the last, and this is no exception. Every single song in this is a banger, with special mentions to Lachryma, Satanized, De Profundis Borealis and Umbra. These might just be the top 4 Ghost songs ever for me.

I gotta say though, the album as a whole is not as cohesive as IMPERA was. It has better songs individually, but IMPERA felt like a better album (at least on first listen) because every song complements each other. Skeletá doesn’t have a single musical identity like that, but whatever it’s doing, every song works individually.

For a little over a year, I’ve been writing quick reviews of movies and TV shows I’ve watched. I was inspired by Matt Birchler on Mastodon and his own Quick Reviews web app, and while I initially used his app to write my own and post to social media, I decided to give my reviews a home in here.

So, after gathering my reviews as Markdown files in Obsidian, they’re now in a new section here. Meet Quick Reviews!

The review cards are not images, but just web elements like everything else. Which means they are responsive and lightweight. I made it as easy as possible to publish them on my side, and there’s even a download button to allow me to quickly post them to social media!

The Technical Part

If you’re interested in how I made it work, it’s actually not that complicated.

This website already uses Markdown files for the blog posts, and since it uses Astro, fetching data for the Quick Reviews was as easy as declaring a new Content Collection, pointing to the right folder, and declaring its schema. It will all make sense in a bit.

Data Schema

First of all, I needed to define what a review would look like. Its main pieces of information are the movie/show’s name, the rating, and the content of my review. Some metadata is also nice to help tidy things up, like the date I reviewed it, the year the movie came out, and who the director was.

In Markdown, this kind of data is all part of the file’s Frontmatter, a special section at the top of the file. The only exception would be the review’s content, which is just pure Markdown, right below the frontmatter. It looks like this:

---
type: (movie/tv show)
metadata: (year, director, etc)
image: (movie poster)
rating: (my rating)
date: (when I reviewed it)
---

(what I have to say about it)

With just that, I’m able to display it however I want on my site. I added two extra properties that are specific to how I want to display them on my website: theme, with a light an dark option that mainly control the color of the text, and customBg, which allows me to set any color I want as the background.

On the Astro side of things, I declared this same schema, so Astro knows what data to look for:

import { z } from 'astro:content';
import { QuickReviewRating, QuickReviewType } from './quick-review-types'; // These are enums that match to what's in Obsidian

export const quickReviewSchema = z.object({
	type: z.enum([QuickReviewType.Movie, QuickReviewType.TvShow, QuickReviewType.Game, QuickReviewType.Album]),
	metadata: z.string().optional().nullable(),
	image: z.string().optional().nullable(),
	rating: z.enum([QuickReviewRating.DidntLikeIt, QuickReviewRating.Decent, QuickReviewRating.LikeIt, QuickReviewRating.LovedIt]),
	date: z.coerce.date(),
	theme: z.enum(['dark', 'light']),
	customBg: z.string().optional().nullable()
});

And then, on content.config.ts, I used that schema in my new Content Collection:

~filename content.config.ts

import { quickReviewSchema } from "@schemas/quick-review";

const quickReviews = defineCollection({
	loader: glob({ pattern: "**/*.md", base: "./public/cms/quick-reviews" }),
	schema: quickReviewSchema
});

export const collections = { quickReviews };

And with that, I can already use Astro’s getCollection to fetch and use that data however I want!

Saving reviews

This system is only as good as its ease of adding new reviews to. If adding reviews is too much of a hassle, then my lazy self will just stop doing it.

Obsidian has a built-in Template feature that allows you to quickly add a pre-set structure to a file, like the Frontmatter above. That already makes it better, since I can just create a file, apply the template, and just fill the missing fields. However, some steps were particularly annoying.

Finding a movie’s image, year and director usually required either a web search or opening its page in IMDB. That’s not really a big deal, but it’s still annoying to have to make that trip every time I want to write something.

Luckily, Obsidian has a gigantic ecosystem of plugins that can fill any possible niche. There is a community plugin called QuickAdd that adds a bunch of possibilities to templates. And, guess what, the plugin author even has an example of how to setup a template that automatically grabs info from IMDB into a note! I just followed the guide for the Movie & Series script and, voilà, I could have that info in my Quick Reviews in seconds!

I didn’t need all that data on my quick reviews, so I just added the ones I needed to my template. The end result looks like this:

~filename quick-review-template.md

---
type: "{{VALUE:type}}"
metadata: "{{VALUE:Year}}, {{VALUE:director}}"
image: "{{VALUE:Poster}}"
rating: 
date: ""
theme: dark
customBg:
---

And this is what the flow looks like:

Future Plans

Honestly, I don’t want this section to be complicated at all. It is above all a place to dump my thoughts about specific pieces of media on. I added some quick filtering for media type, but that’s it. I might revisit the layout of the reviews at some point and maybe add a special RSS feed for them, but besides that, I think I’m done.

Let me know if there’s anything you think would be cool, though. As long as it’s fun, I’m not opposed to it!

Hey there! Happy Pride 🏳️‍🌈!

I hope you’re comfortable and keeping chill/warm depending on which side of the world you are. This month, aside from finally launching v5 of my website, I’ve gathered up a few cool links for you to read.

Fun

Nic Chan’s Website

Came across this website on Mastodon and oh wow, it’s so nice! I’ve seen a bunch of websites trying to mimic the old Windows vibes, but this one did it in a way that makes sense. Content is well laid-out and it doesn’t go too far into the “mimicking Windows” aspect.

Deep Reads

The Internet Used to Be a Place, by Sarah Davis Baker (video)

Amazing video about the internet we’ve lost (or rather, was taken from us), and how we can rebuild it.

Absolute fan of Sarah’s storytelling here, the way she weaves through the topics and links (hah!) them to that Hypnospace game is amazing!

Dev

The New Separation of Concerns, by Brad Frost

I learned about separation of concerns over a decade ago, when I was still learning how to code. On the web side, it would very often be related to what language you were using; HTML is for markup, CSS for styles, JS for interactivity, whatever-backend-language-you-use for business logic. That made sense back then but now the lines have become much blurrier.

Brad Frost goes a bit into what a more modern version of that separation of concerns might look like. I haven’t tried out his course, so I can’t comment on how good it is. But I’m a big fan of his atomic design principles so I’d say it might be a good one!

Web Weekly newsletter, by Stefan Judis

I’ve been subscribed to this newsletter for over a year and it never occurred to me to recommend it here. Stefan Judis does a weekly roundup of web dev-related things and puts them out in a nice, easy-to-read, lighthearted newsletter. It’s been one of my favorites for a while and if you’re reading this, chances are you’ll enjoy his content too!

Wrapping up

This is volume 12 of Cool Links, which means I’ve been gathering links like this for a year!

It was the first step in my plan to write more. I figured that by commenting on what other people wrote, I’d feel more comfortable with writing myself. Even though I haven’t actually written more posts here during the last year, I feel like it’s working. I have a few drafts that I haven’t developed enough to post, and some that I just discarded after a bit. But what matters is that I actually wrote something; posting it is just a consequence. 😅

Overall it’s been fun collecting links like these every month, and it’s a way of keeping the spirit of the web alive. It is, after all, a bunch of sites that link to each other. And if at least one person discovers a neat website because of posts like these, then it’s mission accomplished. 🫡

See you next month!

My rating: Loved it!

A beautiful movie about innocence during a time that wanted nothing but to prey on it. I’d love to say it’s all in the past.

If you’re reading this and you’re not from a distant future, this means that you are right now on version 5 of fantinel.dev!

Over a year ago, after posting about my blog’s 5th anniversary, I posted about my wish to redesign it. First of all: time flies! I hadn’t realized it was over a year ago. Secondly, it’s finally here! That means it’s been a year of me working on the new design, building it, refining it, and above all, procrastinating!

How I got here

Of course, I didn’t actually work on it for a year. It’s been a very on-and-off process, mostly off. A lot of things happened during this year and I got busy with work, travel and prepping for a big move (that still didn’t happen). A lot of the free time I had also went into other things I like - mostly videogames. That’s fine! I never want any personal project to be anything more than a hobby. So I don’t feel bad at all for how long it took.

So the biggest chunks of my work on the new website were in short burst of hyperfocusing on it. Focusing can be my superpower quite often. For one or two weeks at a time, I’d wake up thinking about it, have breakfast thinking about it, work thinking about it, and then finally work on it while thinking about it, usually during the evenings. I don’t recall any dreams about the website but I wouldn’t be surprised if that happened.

Design

I think I started working on the design itself right after that blog post, at the end of March/beginning of April, 2024. I started out with something much more similar to what I had before. My initial plan was to use Figma to rebuild what I had, then start experimenting inside the tool.

However, after working on this for a bit, I reflected on what I said on that redesign post:

I want my personal website to reflect a bit of who I am. Am I the same person I was 3-4 years ago?

And the answer is: not really. While I’ve not completely changed as a person, I like to think I’ve improved quite a bit since then. Some tastes changed, a lot of opinions evolved, the hair got whiter, and the back pains are now an almost daily visitor. And more importantly, I got bored of the old design. It was fun for a while but I eventually got tired and felt restricted by it.

As I became an even bigger fan of pastel colors since then, I decided I’d take the colors of my favorite code theme, Catppuccin, and take them for a spin on my new design. I liked it so much that I just decided to use that color palette for everything!

The previous design was built with light mode in mind and then adapted to dark mode. However, I like the dark Catppuccin palette so much that this time I did the opposite: it was designed entirely in dark mode and I only got to work on the light mode after I already started building it. I still want to respect the user’s theme preference above everything, so I don’t default to the dark mode.

Overall, that worked, but to me it’s clear that the dark mode looks much better than the light one. To me, at least. But I’m continuing to tweak light mode here and there whenever I see things I can improve.

I decided to start with just the basics: the home page, the blog archive and the blog post pages. Once I got those to a place I liked, the rest would come naturally.

Development

Once I was satisfied with the design, I let it simmer in my mind for a few months before I started building anything. After coming back to the new design a few months later, I still liked what I saw. Good sign! So it was time to start building it.

However… I’m a web developer. Not just that, web development is my hobby too. So I couldn’t simply implement the new design in the existing project. The horror! Why would I keep using the code that was working well, decently organized and that would save me time?

That’s why @@I rebuilt it from scratch!@@

Astro

I had been eyeing Astro for a while, and decided it was worth a shot to at least experiment. I could still reuse the code for my components, since Astro is fully compatible with Svelte. I’d just have to rework the part that did the routing, endpoints, build and data handling. Good thing that was really easy! Astro works similarly to SvelteKit (what I used before) and other popular ones like NextJS. So if you’ve worked with any of them, most of the principles stay the same. Just need a few implementation tweaks here and there.

You see, there was nothing wrong with SvelteKit, which I used before. It is very easy to understand, does a lot of things automatically and builds a really performant website. The thing that drew me to Astro is that it shares a lot of the same principles, but is framework-agnostic. That means I could bring over my Svelte components, which is great, but also that the knowledge I get from using it might be useful if I ever need to build a website that uses React, Vue or, I don’t know, even PHP components. Astro doesn’t care.

Something I noticed while developing is that I imported my Theme Toggle, a Svelte component that uses JavaScript to toggle the current theme into a page. It rendered correctly, but clicking on it wasn’t doing anything.

Turns out, ==Astro does not ship any JavaScript by default==, even from your JS framework components! That is an amazing default behavior, as it encourages progressive enhancement, decreases the size of the website (have you ever seen those 10MB+ NextJS landing pages???) and is just overall a good development pattern. If I really need JavaScript for this component, I have to explicitly add the client directive to it.

In my case, that theme toggle does actually need JS to work. Which is why it hides itself if JS is not available, only showing up if it has what it needs to work. But some components don’t need JS, they’re just better with JS. The Table of Contents in this blog post is dynamic. As you scroll down it will highlight the current chapter you’re in, and if you’re on mobile it will stick to the bottom of the screen and do its best to get out of your way.

However, at the end of the day it’s still just a table of contents, a collection of anchor links that link to sections of this page. If JS is not available, it shouldn’t break, it shouldn’t hide. It just doesn’t do the dynamic stuff, but it’s still useful by letting you click on it. This is the kind of thought that I always have in mind when building something, and that Astro seems to encourage.

Svelte 5

I’ve used Svelte since v3 and loved it. It just made a lot of sense to me, I always vibed with its goals and principles, the performance gains it offered were awesome, and it was always a breath of fresh air to work with it. My previous site was using Svelte 4, which was a refinement over Svelte 3. I loved it.

On this rebuild, I naturally upgraded to Svelte 5, which came out recently. Svelte 5 is a big update, bringing some syntax changes, performance gains, and big things under the hood.

… I’m not sure I like it.

You see, to me what was magical about Svelte is that its syntax was just some sugar on top of JS and HTML. Add a $ character here and there for reactivity, a {#each} over there for looping over a list of items, and you’re done. Svelte 5 still supports that syntax and it seems to me they will keep supporting it for a while, but they’ve introduced a new syntax in the form of “Runes”. I wanted to give the new stuff I try so I built everything with the new syntax.

After the initial learning curve I got used to it so it’s not a big deal anymore, but the fact that there was a learning curve was a letdown. I still like it better than working with other frameworks, though.

Some notes I took during development:

• The runes stuff in Svelte 5 takes a while getting used to;
• Dealing with slots is way more complicated now; Have to use “snippets” instead, which might be more flexible but it’s way harder to understand. I really miss <slot>s 😭;
• The new $props syntax is way more intuitive than the previous export let one, although more verbose;
• Feels like Svelte 3-4 were sprinkles on top of the web, while Svelte 5 is a framework like others are.

Storybook

I used to use Histoire for developing components in isolation, but it doesn’t seem they support Svelte 5 and development is quite slow for my taste. So, begrudgingly, I started using Storybook for that.

I always have issues setting up Storybook, and it was no different this time. I wrote up an article about my journey to getting it to work.

What’s next

So, with the redesign now live, what’s next for this website? Hopefully a lot, actually!

You might notice there’s a big “Under construction” banner on the home page, and for good reason: I’m not even close to finishing everything I want to do with it. Honestly, I never will. This is, after all, my playground to experiment with things and do whatever I feel like.

If you want some spoilers, here’s what I think I’ll work on next:

• Quick Reviews: I’ve been writing small reviews for movies and TV shows I’ve watched for a while now, and I want to set up a section on the website just for those;
• A /now page: kind of a trendy thing among bloggers, the idea is a page that shows the things I’m doing currently, like what I’m working on, games I’m playing, music I’m listening, etc.
• A /uses page: a centralized version of my yearly Default Apps posts, possibly including hardware as well.

To be honest, I’ll probably come up with something else before I’m done with those three. Who knows?

Wrapping up

Thanks for reading it all the way down here! If you’re interested in seeing the code to see how everything works, everything is open source and available on GitHub.

My rating: Decent

Breaks my heart because I love the game, but this adaptation just didn’t do it for me. Season 1 was pretty good, but I feel like none of the changes on Season 2 worked. Ellie is just a completely different character, and I feel like none of her actions are justified in the show. I gotta say some of the heaviest moments hit really hard on the show too. Episodes 2 and 6 were standouts though. Really enjoyed those.

My rating: Loved it!

Holy crap, now this is a good horror movie. A slow burn that really pays off. Its found footage structure makes perfect sense in the story and also reflects a lot on what you think and feel during the entire movie. It finds the perfect balance of explaining things enough to be satisfying but not enough to break the horror aspect (something that most movies just suck at).

My rating: Didn't like it

Okay, first of all I think this is an amazing movie, it looks and sounds amazing, all the characters are extremely creative, it’s a beautiful coming-of-age story and it’s a major pop culture icon. But watching it felt like a bit of a chore, I can’t really explain why. Good thing the ratings here are about my enjoyment of the movies, not their “objective” quality 😅

Hey there!

Winter has started to settle in where I live, and my hands are already freezing all the time. The cold and humid weather means more time inside, which means more links!

Fun

I Don’t Have Spotify

Sharing links to albums or songs in streaming apps sucks because not everyone uses the same one. This neat website takes in a link (although named after Spotify, it works with others as well) and spits out the link for the same music on whatever other platform you want.

Great for when you share a link with others too!

Pong Wars, by Koen van Gilst

This is a hypnotizing endless battle between two squares, pong-style. All built with JS, HTML and CSS! The source code surprisingly simple and a fun read too, if you’re into that sort of thing.

Tech

Test Ad Block - Toolz

If you use any adblockers (you should!), this website is a neat way to test how effective your setup is. The higher, the better, but if you get a green result you should already feel safe browsing online. I got 98% with my NextDNS + UBlock Origin combo!

Kagi Search Stats

Kagi has been my search engine of choice for over a year now, and I just found out about their public stats page. Pretty cool they have this info open out there!

The most interesting part is the Domain Insights, that ranks the domains that get most blocked/prioritized on Kagi (Kagi allows you to prioritize results from specific domains, or simply block some altogether). It seems people really hate getting Pinterest results 😅

The Internet Archive opt out itch, by Stefan Judis

In this article, Stefan ponders the ethics of the Internet Archive’s opt-out behavior. The work they do is really good for the web in general — but, on an individual level, it kinda sucks that someone is archiving your website without asking?

He also raises the point that while you can ask for your website to be excluded from being archived, doing so might make you (or your company) look shady and untrustworthy. Like, what are you trying to hide so much?

Don’t Guess My Language, by Robert Vitonsky

As a bilingual person that’s soon moving to another country I really struggle with websites and apps that keep trying to serve you content in a specific language instead of the one you choose. Google is one of the worst in this regard.

Even worse is when the content is translated automatically. It sucks! Google again sucks at this. It keeps reverting things to Portuguese and even re-enabling automatic dubbing (gross, I know) on videos, even though I explicitly have my device, browser, and Google account set to English.

Moving from Notion to Obsidian, by Dave Rupert

I love Obsidian, and have been using it for over a year for taking notes about everything. The thing about his kind of app though is that you’re always looking for ways to tweak and improve your system. This article is great at explaining how Dave uses Obsidian for himself and as usual has a list of neat plugins.

One day, maybe, I’ll write my own post about how I use it. I’m just not confident enough on my system yet, probably…

Dev

Programming is a feeling, and AI is changing it, by Sean Voisen

Programming is an activity, but it’s also a feeling. For those of us who actually enjoy programming, there is a deep satisfaction that comes from solving problems through well-written code, a kind of ineffable joy found in the elegant expression of a system through our favorite syntax. It is akin to the same satisfaction a craftsperson might find at the end of the day after toiling away on well-made piece of furniture, the culmination of small dopamine hits that come from sweating the details on something and getting them just right. Maybe nobody will notice those details, but it doesn’t matter. We care, we notice, we get joy from the aesthetics of the craft.

AI / LLMs / Slightly Depressing

The Who Cares Era, by Dan Sinker

If you don’t care, it’s miraculous.

I’ve had this talk with my wife a few times already. Around us, it just feels that nobody cares about anything. Everything is hastily produced so it can be ignored by other people. It’s just disheartening to be the only ones noticing AI slop everywhere and see people not only believing it’s real, but also not really caring if it’s real or not.

This article also reminded of this one that I posted back in December: Care Doesn’t Scale.

In a moment where machines churn out mediocrity, make something yourself. Make it imperfect. Make it rough. Just make it.

The promise that wasn’t kept, by Salma Alam-Naylor

Fantastic piece that highlights how much of a distraction AI has become to creating value, simply because everyone is too focused on the tools and not on the work.

But we can’t rely on tools as a shortcut to gain valuable experience. Experience takes time to develop, and your tools are only as good as your fundamental knowledge and skills. If you skip the knowledge and skills part, and if you fail to learn about what you’re doing and the implications of how you’re doing it and the human value you have the potential to deliver, then you have little hope of building human value into your software.

The Everything App is a symptom of Nothing Management (part 1)

This is a spot on overview of how pretty much every tech company now has no clear direction besides making more money. No vision, no goals, no passion, except for making the number go up.

Yea, every company needs to make money because workers need money to survive, but when a system only ever rewards those that seek money above everything else, that system has failed and will continue to fail unless a big shift happens.

The passionate, skilled, full-of-ideas people that could solve real problems and/or improve the lives of others have been crushed by the weight of big companies looking for one more way to exploit you.

Wrapping up

Thanks for tuning in, and see you next month!

My rating: I like it

Pretty solid body horror movie. Some real memorable scenes with really good acting, with a solid story that builds on top of the classic Cinderella. Can’t go wrong with this one!

My rating: Loved it!

What an incredibly beautiful movie 🥺

Without any dialogue, it was able to make me connect to every character much more than most movies do. Cute and heartwarming, it totally deserved the Oscar for best animation it got!

My rating: Loved it!

A real punch in the gut and a must-watch. Not much more that can be said.

Fuck nazis.

Hey there! We’re a quarter of the way through 2025 already, can you believe it? This weekend (May 3rd) I’ll be in Rio de Janeiro trying to watch a free Lady Gaga concert in Copacabana beach. Fingers crossed I can actually see anything 🤞

For the Cool Links this month, we have a couple of “fun” ones, some web-dev related that were on my Read Later queue for a while, and some nuggets of wisdom on chaotic times.

Enjoy the reads!

Fun

Hypertext TV

This website simulates a TV schedule (with CRT-style filters!) with multiple channels, each featuring an interesting indie website. The programming changes often (just like shows on a tv channel), so it’s an interesting site to keep on your bookmarks and visit a few times a day.

A Reddit Bot Drove Me Insane

The author here worries that so many people on Reddit are interacting with posters that are nothing more than robots, without any idea of that being the case. Even worse, some people are aware of that, but don’t care.

I saw a comment in a brazilian forum that deeply resonated: “Maybe the biggest pain this realization causes is that, deep down, almost nobody cares about anything. We’re the ones who are wrong for searching for meaning in environments dominated by chaos”.

Dev

Faster Rendering with the content-visibility CSS Property, by Umar Hansa

It’s like image lazy loading, but for page elements! I’ve got to try this out sometime and measure the effectiveness of this technique. Depending on the results, this might end up as its own blog post ;)

Cards, by Inclusive Components

Amazing step-by-step explanation on building Card components, with a special focus on accessibility. I love this kind of articles that explain the thinking behind every step and every line of code!

Card elements are everywhere and we all do them a bit differently. I’ll pay much more attention to the things mentioned here to ensure they’re as accessible as possible.

404s — gallery of error 404 page designs

This site collects all kinds of designs for 404 pages found in the wild. Pretty cool source for inspiration or to admire other people’s creativity!

Misc

European alternatives for digital products

We rely too much on software companies nowadays, and most of the popular ones are USA-based. With the USA becoming increasingly less trustworthy on an almost daily basis, people have started gathering EU-based alternatives to the most popular services.

This is interesting even if you’re not based in Europe, as companies there are forced to respect your data and privacy by law.

On TikTok, YouTube, X, and everywhere, “views” are a meaningless number, by David Pierce

Great article pointing out that “Views” are an useless metric and that the platforms that count it have zero incentive to not lie about them.

Wrapping up

Thanks for tuning in, and see you next month!

I really, really thought this was gonna be easy. But with front-end development, are things ever simple?

I’ve dropped a few hints here and there that I’m redesigning my website and blog. I’m also rewriting it from scratch, with Astro! It’s a meta-framework, which means it takes care of the part that handles routing and data-fetching, but stays out of component and reactivity. It’s like NextJS or SvelteKit.

The main appeal of Astro, though, is that it is framework-agnostic. You can use it as the base and then build all your components with React, Svelte, Vue, Vanilla JS, or even JQuery if that makes sense for you. It’s one of the main appeals of Astro alongside active development, a clear project direction, and the whole zero client-side JS by default philosophy.

My soon-to-be-website uses Astro as its foundation, but keeps Svelte as the framework used for the components, to handle reactivity and just the overall template niceties. It also allows me to just port over existing components from my current SvelteKit website, and it’s plug-and-play on Astro. Sweet!

Previously, I’ve used Histoire, a Vite-based simpler alternative to Storybook. It’s fast and really easy to set up, which was the main reason I used it. It’s not a fully-featured but I didn’t need all the extra features of Storybook anyway. The thing is, development on that one is quite slow and it apparently doesn’t work well with Svelte 5 yet. So, I figured I’d set up Storybook itself on my project. It’s just a simple collection of Svelte components, right? How hard could it be?

Significantly.

[!info] The post below was written from my experience getting frustrated with the lack of proper documentation and a lot of trial and error. I was only able to get things working after a few hours digging into Storybook (and its plugins)‘s documentation and source code, and a good deal of arguing with ChatGPT. I’m writing this guide so you don’t have to go through all the hoops I did.

Also, I’m using Svelte on my examples as it’s the framework I use, but I think the vast majority of this guide could apply to you if you use React, Vue, or none at all.

Understanding the layers

There are a lot of layers to the tech stack here. Astro uses Vite as a build tool to handle dependencies, dev servers, compiling, and whatever else it does. You might have heard of Webpack, which does the same. Vite is basically a newer, leaner version of that.

When you install Svelte (or React, or Vue) on an Astro project, you’re actually just installing the Vite integration for that specific framework. Astro doesn’t need to know what the client-side framework is because they’re pretty much separated.

When you use Storybook, you likely don’t want to interact with anything on the Astro side of things. You write stories for your components, and they will all be Svelte/React/Vue files that don’t need Astro to work. Which is why there’s no “Astro package” for Storybook, or any starting template.

Which means in this case, we want to setup Storybook for a Svelte + Vite project.

Step-by-step

So, with my Astro + Svelte project in hands, these are the first steps I did:

1. Following the official guide, I ran npm create storybook@latest
2. Selected “Documentation” as the main use
3. Even when selecting Documentation, Storybook still installed a lot of unit and visual testing packages that I did not want. So I ran the command below to get rid of all that bloat. You might want to double-check if you actually need one of these packages.

   npm uninstall @chromatic-com/storybook @storybook/experimental-addon-test @storybook/test @vitest/browser @vitest/coverage-v8 playwright vitest

4. Deleted the built-in “stories” folder that Storybook adds by default. You can keep this one if you want some pre-built examples.

This looks like it should be it, right? But if you run npm run storybook, you’ll see that it gives out an error. The error on the browser is a bit generic but on the terminal you’ll see something like:

Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. Plugin: vite:import-analysis File:(…)/node_modules/@storybook/svelte/dist/components/SlotDecorator.svelte

Vite is trying to compile the Storybook code but is erroneously identifying a closing </script> tag as JSX syntax, even though it’s a Svelte file. This hints to the fact that the Vite code that is running is not loading the plugin needed to make Svelte work (vite-plugin-svelte). Astro does that automatically, but Storybook does not, as it just assumes a Svelte + Vite project would have that plugin installed as a dependency. So, to fix it, I:

1. Installed the plugin with npm install --save-dev @sveltejs/vite-plugin-svelte
2. Added the plugin to the Vite config in my .storybook/main.ts file:

~filename .storybook/main.ts
import type { StorybookConfig } from '@storybook/svelte-vite';

const config: StorybookConfig = {
	"stories": [
		"../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
	],
	"addons": [
		"@storybook/addon-essentials",
		"@storybook/addon-svelte-csf",
	],
	"framework": {
		"name": "@storybook/svelte-vite",
		"options": {}
	},
	"viteFinal": async (config) => {
		// Needs to be dynamically imported
		const { svelte } = await import('@sveltejs/vite-plugin-svelte');
		
		config.plugins = config.plugins || [];
		config.plugins.push(
			svelte({
				exclude: ["node_modules/@storybook/**"],
			})
		);
		
		return config;
	}
};

export default config;

And that should be enough for your stories to work!

Example Story syntax with Svelte 5

If, like me, you’re struggling a bit to find a good example of the latest syntax for Svelte stories (the older still works though), I found some good ones in the addon-svelte-csf project on GitHub.

Other useful things

Load your global CSS styles on stories

If you have a global SCSS file that your components rely on, you can just add a line to .storybook/preview.ts:

~filename .storybook/preview.ts
import '../src/styles/global.scss'; // Or whatever your file path is

{...}

Use tsconfig aliases in Stories

If you use aliases set up in tsconfig.json in your components, for example so you can use @components/button instead of src/components/button, you either need to re-configure them for Storybook, or you can reuse the ones from tsconfig instead. To do that, you’ll need:

1. Install this package to allow Vite to understand tsconfig paths: npm install --save-dev vite-tsconfig-paths
2. Add this to your Storybook’s main.ts file:

~filename .storybook/main.ts
import type { StorybookConfig } from '@storybook/svelte-vite';

const config: StorybookConfig = {
	{...}
	"viteFinal": async (config) => {
		// Needs to be dynamically imported
		const tsconfigPaths = await import('vite-tsconfig-paths').then(m => m.default);
		{...}
		config.plugins.push(
			{...}
			tsconfigPaths({
				projects: ['./tsconfig.json'],
			})
		);
		
		return config;
	}
	{...}
};

export default config;

Support SASS aliases on Storybook

If your project uses aliases for SASS as well, you can alter the viteFinal section of your .storybook/main.ts file to make Vite resolve those aliases as well:

~filename .storybook/main.ts
import path from 'path';

{...}

"viteFinal": async (config) => {

	{...}
	
	// Add alias for SCSS @styles
	config.resolve = config.resolve || {};
	const stylesPath = path.resolve(process.cwd(), 'src/styles');
	if (Array.isArray(config.resolve.alias)) {
		config.resolve.alias.push({
		find: '@styles',
		replacement: stylesPath
		});
	} else {
		config.resolve.alias = {
		...(config.resolve.alias || {}),
		'@styles': stylesPath
	};
}

Wrapping up

Looking back, it’s not really a lot of steps to get it working. But it was a journey to get to this point. Hopefully I’m saving you some time on this!

Both parts of the stack are actually working as they should - Astro does the website part and stays out of the rest, Vite builds the tools, Svelte handles the components, and Storybook renders them. It was just a lack of either clear documentation or better error messages that kept me in the dark for a while. Hopefully there’s more effort in improving this in the future!

I don’t have comments on my blog, but feel free to shoot me an email if you have questions or suggestions. I’ll be glad to help out (or be helped)!

My rating: Didn't like it

This one was a tough watch. After the good surprise that Season 6 was, this one never really stuck the landing. It gives up the plot that Season 6 sets in like 15 minutes and then just drags on for 23 episodes. I never really knew if I should take a scene seriously or if it was meant to be a comic relief - and to be honest, if feels like the show didn’t know either.

I gotta say the Bobby arc on the second half of the season was pretty good, though.

My rating: I like it

Has some pretty amazing moments and is overall very good, but just like the first one, it overdoes the action scenes, with one after another. So it ends up feeling bloated. Not enough to make it a bad movie, far from it! I never understood why the Hobbit movies are so underrated.

My rating: Loved it!

The first time I watched this one back in 2013, I remember not enjoying it as much as I enjoyed the first. But now, I think it’s much better.

I think it could be a bit goofier overall, but I pretty much enjoyed everything in this rewatch (except for the out-of-place romance). Smaug’s scenes are simply amazing, too.

My rating: Decent

An overall disappointing season, but the ending was fantastic.

It feels like they had enough story for 4 episodes but were forced to make 10. So the good things are stretched out between a lot of plots that don’t really go anywhere (and that I honestly didn’t care about).

Hey there! Autumn is here in Brazil and the leaves have started to go yellow, which means it’s my favorite season of the year! Mainly because it’s neither too hot nor too cold, but also because it’s very pretty.

I’ve prepped a selection of links to read through while you drink your coffee, tea, or whatever’s your choice of beverage. The last one is a quite long video, but I highly recommend watching it!

Fun

It is as if you were on your phone

pretend to be on your phone so that you pass as human, but actually do essentially nothing instead

Do you feel pressured to be on your phone all the time, so you can pass as a human? This neat web app allows you to do just that, but while doing absolutely nothing instead.

(honestly, it’s a better use of your phone than scrolling through social media…)

Dev

The select element can now be customized with CSS 🎉

Customizing <select> elements is something every web developer has had to do, probably. And the thing about that is that… you really can’t customize it. Or couldn’t, until now.

Having to implement a custom look on this field was always, to me, the perfect definition of “reinventing the wheel”. You gotta pick up this element that works reliably, is accessible, natively supported by all browsers, and users have been using for 30+ years, and then… build it from scratch, with JavaScript (which already kills the accessibility for some people).

Now, as of Chromium 135, you can finally customize them as you always expected you could! This will probably take a while to get to Safari and Firefox, but here’s the cool thing: if those browsers don’t support this new thing, the <select> will just look like a normal field and work just as well. A perfect example of progressive enhancement!

CSS Relative Colors, by Ahmad Shadeed

Ahmad’s blog has been featured here a few times already, and here’s another gem! A fully interactive, well-written and just a plain joy to read article explaining different strategies to handle colors in CSS, focusing on all those little color variations we need to handle when building something.

In Loving Memory of Square Checkbox, by Nikita Prokopov

In times where software “needs” to stand out rather than be familiar, we lose our heroes. Rest in peace, square checkboxes!

patch-package on npm

Sooo many times I’ve had to debug something in a npm package dependency of a project I’m working on, only to realize I need to change some of the code to make it work.

That’s usually a pain though, since you either have to open a pull request with a fix and wait for it to be merged, or setup your own fork of the package and host it somewhere.

This package aims to avoid that. It applies patches to other packages in your project, so you don’t have to go through the process of setting up a fork.

Tech

The iPad’s “Sweet” Solution, by Federico Viticci

Really nice article that pretty much sums up the iPad situation: it is interesting hardware but that has pretty much no software that showcases what it does best.

The best iPad apps are… web apps. And the iPad’s only available browser being Safari doesn’t make things better.

Deep Reads (or watch, in this case)

Algorithms are breaking how we think, by Technology Connections

This is an incredibly well-articulated rant about how recommendation algorithms are changing how our brains work. Automation is good for us and it’s everywhere, but what about when thinking, the very thing that makes us human, starts being automated?

Letting recommendation algorithms (that, as we all know, prioritize revenue) decide the information we get, the tone of that information, and the context of every social interaction is pretty much giving up on our autonomy.

The entire video is worth watching, but this part about context collapse was one of the most interesting bits. It makes perfect sense, but I had never thought of it this way:

Algorithmic feeds on social media are unfortunately quite good at fostering something known as context collapse. To understand this, imagine you’re dining in a restaurant and you’re close enough to a table of people to hear snippets of their conversation. You don’t know who any of the people at that table are, but if you manage to overhear them talk about something you’re really interested in, you might feel tempted to join their conversation. But in the context of a restaurant setting, that’s considered very rude, so it rarely ever happens.

On social media, though, the same kinds of quasi-private conversations between parties who know each other are happening all the time, but since the platform is just one big space and it might decide to put that conversation in front of random people, that social boundary of etiquette which is normally respected is just not there. And lots of conflicts happen as a result.

A really common one you might accidentally step into on social media happens when you stumble across a conversation among friends making sarcastic jokes with each other, but since you don’t know who those people are, you don’t have the context you need to recognize they’re joking. And so, if you reply with a serious critique, well, that’s a social misfire which some will react poorly to.

And that’s a pretty mild form of context collapse. It can be much, much worse when people want to discuss things like politics. And unless we realize recommendation algorithms are what’s fostering these reactionary conflicts, they’re going to continue so long as we use platforms in the ways that we do. It’s for all these reasons that I believe algorithmic complacency is creating a crisis of both curiosity and human connection.

Wrapping up

Thanks for tuning in another month, and I hope to see (write to? Be read by?) you again next month!

My rating: I like it

Judge me, but I actually like The Hobbit movies. This is my first rewatch since it came out in 2012, and while this one has a few too many action scenes (which are fun, just get tiresome after 3 hours), it’s still a really good movie in an universe I love.

Sure, its quality never matches the Lord of the Rings trilogy, but to be honest I don’t think anything else ever will.

My rating: I like it

Binge-watched this in one sitting. Very powerful, all its 4 episodes are shot on a single take and that really brings you into the room with the characters.

The final montage is beautiful, too. Bonus points for having one of my favorite songs.

My rating: I like it

An overall decent movie until the Armenians come in. Then it gets amazing! For a drama film, the comedy is what steals the show.

My rating: Loved it!

Such a good movie! It touches on very sensitive topics in a very heartwarming way. It’s fun, serious and uplifting at the same time.

Hey there! This month I brought a ton of links, probably a result of me trying to make a habit of checking my RSS reader every morning during breakfast. Let’s get started!

Fun

XScreenSaver’s Privacy Policy, by Jamie Zawinski

Apparently when your indie app does not collect any amount of data, the data reapers get confused.

My Life in Weeks, by Gina Trapani

This is such a cool idea that I definitely want to copy in the future. I’m a bit wary of making so much private information public (especially dates), so I might not ever make this public anywhere. But still, a nice personal exercise and a perfect memento mori.

noclip.website

This is so cool! This website allows you to explore the 3D models of maps from a variety of old-ish games from the Wii, GameCube, DS and PS2 eras. If you’ve played any of them, it might be worth having a look. My favorite ones to explore like this were the maps from Pokémon HeartGold/SoulSilver and Platinum.

I recommend opening the site on a computer though. The touch controls aren’t great.

How To Lose Brain Fat With This Programming Language!

I love those joke programming languages. They’re perfect examples that sometimes the only reason you need to build something is that you can.

Dev

View transitions: Handling aspect ratio changes, by Jake Archibald

Jake gives a really thorough explanation on view transitions, showing some of its shortcomings when animating some specific elements and how to fix them. View transitions are so nice 🤩

Faux Containers in CSS Grids, by Tyler Sticka

A fun exercise about making elements “pop out” of their containers with CSS without altering markup. Might not be useful if you can change the markup (as there are easier ways to do that), but learning this kind of approach is always good for expanding your repertoire.

Naming Things In CSS Grid Layout, by Rachel Andrew

That article about the faux containers lead me to this one. I knew about naming CSS grid areas, but I had no idea about the [area-start/end] pattern! You can set those explicitly or have them be automatically added by CSS. This is pretty cool!

Who’s Afraid of a Hard Page Load?, by Unplanned Obsolescence

The smoothness of a web application is an anti-indicator of its reliability and predictability as a web page.

your team almost certainly doesn’t have what it takes to out-engineer the browser. The browser will continuously improve the experience of plain HTML, at no cost to you, using a rendering engine that is orders of magnitude more efficient than JavaScript.

I remember when I first learned about SPAs and how amazing it seemed like to be able to have smooth transitions between pages. Then, as I started building and using them, it became apparent that those benefits also brought a lot of issues that took a lot of dev work to fix.

Luckily, with View Transitions, lazy loading, and predictive pre-rendering (start loading a page before you click on its link) that a lot of frameworks have now, we can have most of the SPA benefits without having to reinvent the wheel.

Container Queries Unleashed, by Josh Comeau

I’ve written about Container Queries before, but this article by Josh Comeau is great at giving even more examples of its utility. It’s always nice to see what use cases other developers find for it.

Learning HTML is the best investment I ever did, by Chris Heilmann

HTML and CSS are my favorite parts of web development, and this article gives some great examples of why. Learning HTML is one of the best things you can do for your (web development) career, as it’s the most foundational block of a website and by itself can do most of the functionality you need. From HTML, you can progressively enhance the rest.

Getting stuck: all the ways position:sticky can fail, by Polypane

position: sticky is incredibly useful but I’ve had issues implementing it more than once. This article goes over some of the most common issues we can face with it and how we can fix them.

How to pick a font (or is it a typeface?), by Saron from Not A Designer

Cool article explaining a little bit about fonts and choosing them for your website/app. I’m still overwhelmed by the options, but I found the info in there to be interesting.

Deep Reads

In the Kingdom of the Bored, the One-Armed Bandit Is King, by Nicholas Carr

Abundance breeds boredom. When there’s no end of choices, each choice feels disappointing.

It was once assumed that digitization would liberate cultural artifacts from their physical containers. We’d be able to enjoy the wine without the bottles. What’s actually happened is different. We’ve come, as Goldsmith says, “to prefer the bottles to the wine.”

Worth a read if you use any kind of computer technology, really. It’s so weird how our ancient brain has adapted to the digital world - or maybe hasn’t adapted at all?

I’ve missed Sam for a long time (or: Pick Your Battles), by Keenan

What a powerful read. Not really tech-related, but as someone who’s seen loved ones go down the same route as Sam did, it’s a very relatable, sad, albeit weirdly comforting, read.

Wrapping up

Phew, that was a lot! Some of them were in my “Read later” queue for a while. I’ll keep working on clearing up that queue and let’s see how next month goes.

See you then!

My rating: I like it

For a movie with pretty much no action, it is incredibly good at keeping you hooked. Everything is well made, and I loved the ending too!

Bonus points for being the first time I see my favorite dish on a movie 😋

Easily one of the best parts of my atypical brain is its ability to dive deeply into subjects I find interesting. Throughout my life these subjects have been quite varied, with music, movies, art, history, and games all sucking me in at some point in my life.

With the internet it’s always been quite easy for me to find stuff to read or watch about what I like. This allowed me to have a pretty in-depth knowledge about a lot of things.

Then, something changed. A change that started happening subtly but that’s now pretty hard to ignore. People used to gather online in communities centered about things they liked. They’d be similarly excited about similar things, and discussing those things would usually be a joy.

Now it seems like people only go out of their way if it’s to talk about things they hate. Communities centered around something remotely popular are gonna be filled with people complaining and pointing out every single flaw about it.

Why is that? I’m not sure. Maybe because people are so angry all the time? Digital drugs (a.k.a. social media) monetize your anger, so we’re naturally more angry if we don’t actively fight against it.

It’s just something I realized and that made me stop and think about how I approach my interests now. If something brings me joy and I want to keep things that way, then it’s just better to avoid online communities about that interest altogether. It just sucks that enjoying something with others is getting increasingly hard.

My rating: I like it

Amazing drama with great acting by Brendan Fraser and some good thought-provoking messages. Got really emotional by the end.

Hey there! I hope your 2025 has started on a high note. What about some cool links to read during this weekend?

Fun

Henry Desroches’ Website

Henry’s personal website is absolutely stunning! It has an unique design that is, above all, fun to explore. I miss exploring websites, instead of being guided through them.

Stimulation Clicker, by Neal Agarwal

Most of what Neal makes is pure gold and this is no exception. This game is no different than most of what you can find on your App Store, it’s just more honest about it…

Dev

Balancing Text In CSS, by Ahmad Shadeed

Incredible article that not only explains the new-ish text-wrap: balance and text-wrap: pretty CSS properties in-depth, it also goes into the caveats those properties have. It’s well-written, well illustrated, and interactive. What else could you want?

Overflow Clip, by Ahmad Shadeed

Ahmad once again writing the articles I wish I did. Another well-written and interactive article going in-depth on the also new-ish overflow: clip CSS property. clip has helped me implement designs more than once and it’s so nice to have something that works just like I always expected overflow: hidden to work.

Wrapping up

This month was also a bit short on links as I have been mostly focused on work rather than learning. Here’s hoping I can get back to finding more good links soon! 🤞

My rating: I like it

I had watched this one many years ago and remember not liking it very much. After rewatching it, I was surprised… it’s actually pretty good!

It’s kind of a soft reboot after the series’ story ending in Season 5, so it’s understandable that most people didn’t like it back then. But when you’re not expecting a continuation and instead understand it’s a reboot, it’s actually pretty enjoyable.

Fun episodes and interesting arcs (that honestly could have lasted a bit longer). I might even say it’s better than seasons 2 and 3.

My rating: Loved it!

Holy shit, what an incredible movie.

Tense, intense, beautiful, terrifying.

My rating: I like it

A surprisingly good show, a far cry from The Big Bang Theory. Sheldon is in the title, but the supporting characters are what really steal the show. They’re varied, complex, and above all, funny. It ended at the right time and in a beautiful way.

My rating: I like it

The idea of this being a “Poker Roguelike”, two things I don’t really like, kept me off the game for a while. Luckily, it being included on Apple Arcade gave me the nudge to try it out. And I’m glad I did!

It’s so easy to start, and hard to stop. Addictive, satisfying, and overall so fun to play.

Happy Holidays! I have four new links to read while you recharge your batteries from dealing with end-of-year stress or recovering from overeating.

They’re either introspective or retrospective, as is the theme this time of year.

Deep Reads

Care Doesn’t Scale, by Steven Scrawls

This is such a good article that resonated very deeply with me. As someone who wished could do more to help the world and as a software developer who thinks about scalability, it’s a hard realization when you get older and don’t see yourself as someone who’s made a big difference.

But turns out that caring for someone or something doesn’t scale. It can’t, otherwise it’s not care anymore.

Self-guaranteeing promises, by Steph Ango

A self-guaranteeing promise does not require you to trust anyone.

Steph Ango is the lead developer behind Obsidian, and I’ve mentioned him before on my Owning your stuff is pretty cool, actually post earlier this year. On this article he talks about how the only way to guarantee ownership of your data is if the service can never access it in the first place. Terms of service guarantees are based on trust that the company’s priorities will never change, and that trust has been broken again and again.

Dev

State of JavaScript 2024

It’s always fun to see these “State of…” surveys. Noteworthy thing being Astro completely dominating the framework numbers (except for usage, but I can totally see it becoming #1 soon).

CSS Wrapped 2024

A really well-designed post from the Chrome team showing the coolest new things that were introduced to CSS in 2024. A lot of the things in there are really cool! The sad part is that, unless you’re running an up-to-date Chromium browser, you might not be able to see them in action. I initially saw this blog post on my iPhone (which only has access to Safari) and almost none of them worked.

Wrapping up

With 2024 over and done, I want to thank you for following me along over here, and I hope you stick around for 2025.

See you next year!

My rating: Didn't like it

Whatever this movie had working on its favor on the first half is completely lost on the latter half. A lot of disjointed narratives that don’t seem to go anywhere.

Last year, I jumped on the trend back then of posting my default apps i.e. the apps I use on a daily basis for most of my activities, both on the computer and phone.

I had kinda forgotten about it this year, until I saw some people posting their updated list of apps before the end of the year. So I decided to do the same! It’ll be nice to look back at this list in ~5 years and see how much I’ve changed.

But, as I updated the list, it looks like… almost nothing changed. I think my time of hopping between apps all the time has ended (or is slowly fading away). I don’t see many reasons to change something that works well, so thankfully most of them stayed the same.

I highlighted the services/apps that are new with the ✨ emoji.

• 📧 Mail service: Fastmail
• 📬 Mail client: Apple Mail
• 📆 Calendar: Apple Calendar
• ✅ Tasks: TickTick (in 2023, I used Notion as well)
• 📝 Notes: Obsidian ✨
  • I wrote some of my reasoning for using Obsidian on this post.
• 🌐 Web browser: Arc on Mac, Arc Search ✨ on iPhone (in 2023, I used Safari on iPhone)
• 📰 RSS service: Readwise Reader
• 📖 Reading: Readwise Reader
• 🧮 Code Editor: Visual Studio Code
• 👨🏻‍💻 Terminal: iTerm 2
• 🔎 Search: Kagi
• ⌨️ Launcher: Raycast
• ☁️ Cloud storage: iCloud
• 🌅 Photo library: iCloud
• 🌤️ Weather: Apple Weather
• 🎙️ Podcasts: Apple Podcasts / YouTube
• 🎶 Music: Apple Music
• 🛹 Clipboard manager: Maccy
• 🔐 Passwords: 1Password
• 💸 Budgeting: YNAB ✨
• 💁🏻‍♂️ Social: Mastodon
• 🐘 Mastodon: Ivory (Mac and iPhone)
• 🎮 Gaming: PS5
• 🖼️ Screenshots: CleanShot X

At the end of every year, I write a retrospective of what I did, learned, felt, watched, played or listened to. It’s the perfect way to reflect on everything, figure out what was good, bad and what could be better!

If you’d like, you can read my posts for 2019, 2020, 2021, 2022, and 2023.

Last Year’s Predictions

Last year I made some predictions (or hopes) of what would happen this year. Did I get anything right?

I expect to take big steps towards owning my own house. I really want to stop paying rent and hopefully get a house instead of an apartment. It’s more work, but it’s more fulfilling and freeing.

Eh, partially, I guess? I did save money towards that end, but a change of plans made me not look into buying anything for now. More on that later.

I expect to write even more on this blog, and continue to expand on the topics I post about. Dev articles aren’t going anywhere, but I don’t always have something to post about in that regard.

✅ I got this one right! I did write more this year, and while the topics didn’t get as varied as I’d liked, I’m still happy with what came out of the blog in 2024.

Also, I want to add proper support for categories and filtering, as well as search. As I post more, even I am starting to struggle finding something I wrote in the past to reference. Additionally, some code refactoring is always welcome.

❌ Nope, I did not do that. Not this year at least. I wrote about my desire to redesign my website and all that work has been moved to that redesign. It did not get ready (or started) in time, so that was a wrong prediction.

I also want to travel a bit next year too - either to the US to meet my work colleagues or to Italy to see my brother. And of course, do some sightseeing!

✅ I did travel this year! I traveled to New York and Chicago. More on those trips later.

Personal Life

Not much happened on my personal life this year, now that I think about it. In a good way. I feel like I’ve been able to mature a lot in the past couple years, after the autism diagnosis, therapy, and coming to terms with who I am and who I can be. Turns out everything gets easier when you learn not only that you should be kind to yourself, but how to be kind to yourself.

Travel

Last year, I said I was hoping to either going to the US to meet my work colleagues or to go to Italy to see my brother. Since I already had been to Italy, I chose to go to the US, and it was pretty fun! My wife and I traveled there in August, near the end of summer. We spent ~5 days in New York and ~5 in the Chicago area.

New York

New York City is, no other way of saying it, complete and utter chaos. But in a (mostly) good way! Being so big and having so many people from everywhere in the world, there’s just no shortage of things to do and to see.

We went with a mentality that we’d rather do less and have a great time than to try and do everything and get stressed about it. But turns out we were able to do pretty much everything we wanted! We got a lot of tips of the best times to go to each place and were able to plan some of our days accordingly.

We went to some of the most famous places like Rockefeller Center (and went to the Top of the Rock at sunset), the Empire State Building, the Statue of Liberty and Times Square. Also the Natural History museum and The MET.

Some of the nicer surprises were the experiences based on pop culture stuff. We went to The Friends Experience, an entire place dedicated to the Friends sitcom, with original items used in the show and really faithful recreations of Monica’s and Joey’s apartments, as well as the Central Perk coffee shop. It was a weird feeling being in that place that I’d never been before, but knew every corner. I was worried it’d be just a shameless cash grab, but it was actually pretty cool.

Being a big Nintendo nerd, we also went to the Nintendo Store. It was, honestly, a bit underwhelming, but still great to see so many things based on games I love.

But nothing we did there can even compare to the experience of going to a Broadway show! We went to see The Great Gatsby, and wow… just wow. It was honestly the most incredible thing I’ve ever seen, and I don’t say that lightly. The music, the scenarios, the performances, and how well all that transitioned in front of your eyes, it’s just mind-blowing. I’d never watched a musical play (only movies, which I hated), but it’s now one of my favorite things. Too bad there’s nothing like that where I live, but whenever I get back to NYC, I’m definitely watching more musicals.

Chicago and Aurora

On my birthday, we took a plane to Chicago. We celebrated by having a famous deep-dish pizza at Gino’s East. It’s pretty good, but I’d kinda classify it as a pie and not pizza 😅

The main reason we went to Chicago was because I wanted to finally get to meet my work colleagues in person. Most of them live in the city of Aurora, which is around an hour from Chicago by train.

Meeting them was one of the highlights of the whole trip. It’s nice (and weird) to finally meet people you’ve only spoken to online for the first time. They were really lovely as usual and made us feel very welcome there.

Since we were in Chicago anyway, we did some sightseeing there too. We went to the Field Museum, Shedd Aquarium, the Bean and even went to the top of Willis Tower, which was literally shaking from the wind.

Downtown Chicago is really pretty, way prettier than NY, but understandably there’s a lot less going on. Oh, and it was hot in there. I’ve never felt so hot in my life. It was around 38ºC during the day, but felt like it was over 40ºC. 🥵

Tragedy

2024 unfortunately was the year where the state I live in got hit by a big tragedy, with a lot of consequences to everyone who lives here.

At the beginning of May, the state of Rio Grande do Sul was hit by absurd amounts of rain in the matter of days, which put almost the entire state quite literally underwater. So many people lost their houses, belongings, and even their lives. Entire cities were lost, and so much of our infrastructure was damaged and is still far from being rebuilt.

Luckily, I wasn’t personally affected by it (besides the comparatively trivial shipping delays and/or being unable to travel to neighboring cities). My city stands in a mountain range and even though we had a lot of rain, the water naturally flows away down the mountains (and sadly flooded the cities in the valleys or in the river deltas). But it was still heartbreaking to see people suffer so much because of it. And it does hit much harder when these things happen so close to you.

The bright side of it all is how many people came together to help the ones in need, from all over the country. Brazil is enormous and it felt like everyone did their best to help us pull ourselves around. It does help you restore a bit of faith in humanity.

Blog

Another good year for the blog! I’ve published a total of 18 posts so far, not counting this one. It’s my record, though 5 of them were the new Cool Links series, which is not really original content. Even if we don’t count those, we still have 13, one more than last year!

The big thing this year was the creation of the Cool Links series, a monthly blog post where I put all the best links I’ve saved during each month. It’s a natural evolution of the Reading Recs I started posting last year, and I’m happy with how they’re turning out. It’s always good to have a chance to link to other websites and comment on them, without having to spin up a blog post for each one of them.

Another new thing is my newsletter, which, to be fair, is more of an email feed of the blog instead of a newsletter. I’ve started it in October, and it’s not being a huge hit but I didn’t expect it to. It’s meant to be an additional way to subscribe to what I write.

My favorite posts of the year were, once again, the more personal ones: Best longterm goal? Not having one and JOMO is a Beautiful Thing.

Work

Since last year I’ve been working at Useful Group, a lovely agency in Aurora, Illinois, USA. I’ve been pretty happy with my job there, working on nice projects and most importantly with amazing people. It’s so refreshing to find people in the software development industry that are nice and actually care about other people and about doing good work.

On the side projects front, I didn’t do much this year. I worked on the redesign of my website in Figma, but didn’t get to coding it yet. I learned a lot of cool CSS stuff and leaned into Progressive Enhancement as much as possible at work. Wanting to improve our sliders at work, I ended up developing a web component called enhanced-css-slider, which I’ve been using at work for almost a year.

Fun

The best part of the year – the fun things I’ve watched, listened to or played this year.

TV and Movies

This year I haven’t watched any “serious” TV shows. I haven’t really felt like starting to watch something new and instead just re-watched some sitcoms as my “lunch show”. What I did watch was a bunch of movies, for which I started writing some quick reviews using the QuickReviews web app. I plan on putting all those quick reviews up on my website eventually, but for now, here’s some of the best ones:

• The Office US was the only new (for me) show that I watched in 2024. It took my wife and I a few tries before it actually clicked for us, but once it did, it’s so much fun! The dead-pan, slightly awkward (or very awkward) humor is my jam. We watched the entire 9 seasons once, then re-watched it up to season 7 right after;
• Inside Out 2: You can feel all sorts of emotions on this one (hah!), but the main one is joy. Amazing movie, funny, relatable, touches on very important topics with good humor and a lot of sensibility. Props to the Brazilian dubbing and localization which was amazing and probably made the movie even better than it originally was!
• Bacurau: It took me way too long to watch this movie, but I’m so glad I was finally able to watch it. Absolutely incredible, raw, weird and full of symbolisms that will keep me thinking about the movie for days. Another masterpiece in Brazilian cinema.
• Grave of the Fireflies: Just as beautiful as it is sad. What a movie. 🥺
• I’m Still Here (Ainda Estou Aqui): This one hits hard. It’s a brilliantly told true story of just one of the thousands of families destroyed the military dictatorship in Brazil. Its depiction of Rio de Janeiro in the 70s is very on point. The details make everything much more relatable. It’s a powerful reminder of why we must celebrate and fight to keep the rights we have today.

Games

• World of Warcraft is undoubtedly the game I’ve played the most in my life, being a big part of my teenage years. I had been on and off the game since 2013 and then off since 2015, but this year I started playing it again. Its new expansion, The War Within, has been a blast. It’s just a world I love being in and I’ve finally had the time to play it again. Where else can I be a humanoid cow that shoots lightning bolts?

• Last year I played Disco Elysium for the first time and it was genuinely one of the best artistic experiences I’ve ever had in my life. So, this year I watched my wife play it for the first time, to try and have the experience of playing through it all over again. Seeing everything again just made the game even better for me. It’s so powerful, funny and sad, with so many glimpses of hope. It’s an emotional rollercoaster and I get emotional just thinking about it.

Music

• What Happened to the Heart? is the new album by Aurora and my most-listened to album of the year. I’ll admit I didn’t like it on first listen, but after the second one it just grew on me and it’s one of my favorites ever now. It starts by being what you expect from her, then it gets weirder and weirder in the best way possible. I’m just sad I wasn’t able to see her live again this year.

• The Mandrake Project was the first solo album by Bruce Dickinson since 2005. It’s full of great songs and is amongst the best of his career (Iron Maiden included). I was lucky enough to be able to see him live in Porto Alegre in April of this year. The concert was amazing, his singing is still fantastic, his band was great and the crowd just makes everything better.
• Ordinary Corrupt Human Love is my new favorite album from Deafheaven. Last year I mentioned how it was growing up on me and this year I listened to it even more. I just love the mix of the melodic parts and the heavier ones.

What Awaits in 2025

Well, first of all the plan for 2025 is to move. We’re moving out of Brazil to give living abroad another chance. After the bad experience in 2022 we want to give it a fair try by going to an actual city with actual things to do. The idea is to try Italy and Austria, but we’ll see, nothing is set in stone.

Another not-as-big-but-still-big goal is to actually go ahead with my website’s redesign. The new design has grown up on me and so I think it is the right choice. The only thing I’m still undecided about is if I should go ahead and do a full rewrite (possibly with Astro) or just update the visuals. 2025 Matt will be wiser and more capable of making that decision.

As for writing more on the blog, I’m not sure this time. Of course I want to, but I think I had a good cadence this year. I definitely want to continue with the monthly links and adding some non-blog content to the site (like the movie quick reviews).

Wrapping Up

Overall, 2024 was a great year for me. After the chaotic 2022, its two following years were definitely calmer. I think now that 2025 will have a lot more going on, but hopefully I’m better prepared to handle all that now.

See you next year!

Adding an automatic ellipsis to some text if it overflows its content is simple enough. You just set overflow: hidden to make sure the container doesn’t scroll, and then text-overflow: ellipsis to add the ellipsis to the edge of the text.

.example {
	text-overflow: ellipsis;
	overflow: hidden;
}

But what if you want your text to have multiple lines, but still cut off if it’s too big? For example, you want to show the excerpt of a blog post on a blog post card (just like the ones on this blog). You want it to go up to 4 lines, but if the excerpt is bigger than that, you want to add the ellipsis at the end of the 4th line.

Turns out there’s a neat little trick, using some -webkit prefixed properties. Don’t worry, it works on all modern browsers, including Firefox and Safari.

.example {
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	/* Set this to the max number of lines you want */
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

Here’s how it looks like:

Taken from this StackOverflow answer.

November has come and gone, and another year is nearing its end. Temperatures are getting higher and higher here, and my city’s started to get empty during the weekends, with everyone taking a trip to the coast to enjoy the ocean.

How about some cool links to kick off this holiday season?

Apps and Fun

Horse Browser

(No, it’s not something you use to browse horses. Unless that’s what you want to use an internet browser for.)

I love highly-specialized software that tries to solve a problem without worrying about the “regular” use cases. The Horse Browser seems like a pretty neat thing for people doing researches - it remembers, organizes and allows you to export all the links you click when doing research (or just going down rabbit holes).

I can see it being useful when writing papers or even when trying to look for a solution to a nasty bug. It’s definitely not something you’d want for regular browsing, but that’s fine. There are plenty of other browsers to use for that end.

There’s a neat review of this browser up on MacStories if you’re interested.

Sill

The best part about Mastodon is the lack of a “For You” algorithm. That means nobody controls what you see (except for Time, I guess, since it’s chronological).

That is also the worst part of it. Sometimes I just can’t keep up with all the posts in there.

Sill is a neat little service that checks your timeline daily and sends you an email with the most shared links in your timeline. It works really well and it’s a neat way to make sure you didn’t miss a really cool project or article from your timeline even if you have skipped social media for a day (which you should really try). And, at least for now, it’s free!

Oh, it also works with BlueSky, though I haven’t tried it with that.

kirby vs. this blog post

Just a cute, fun and short blog post. What’s not to love?

Tech

Selfishness in AI, by Rodrigo Ghedin

Great analysis of how most uses of generative AIs (or at least what companies are trying to sell as use cases) are primarily selfish.

If you can’t bother to do something yourself and instead ask a computer to do it, why should you expect someone to bother reading/watching it?

The corporate use cases for this are somewhat understandable - most content on the web is written for robots, not for people, for example (I know, sad). But Apple has been recently trying to sell it as a way to have a complete emotional detachment from your family as well. We truly live in the worst timeline.

Bluesky and enshittification, by Cory Doctorow

As Bluesky is gaining millions of users, this is an important reminder that, while it sells itself as something different, it hasn’t proven itself to be yet, and is at a high risk of having the same issues every other commercial platform has - just like the one its new users are coming from.

Dev

A Framework for Evaluating Browser Support, by Josh Comeau

Josh has always been one of my favorite bloggers, and this blog post is awesome. You’ve probably seen me talking about Progressive Enhancement before, and this article talks about browser support and figuring out how and where to progressively enhance things.

CSS Popover + Anchor Positioning is Magical (video), by Kevin Powell

This is the best explanation of the new HTML/CSS popover API that I’ve seen. It still looks overly complex, mind you, and I’m not sure I like that API. But if you wanna find out about what it is and possible use cases, this video is a nice start!

Optimize resource loading with the Fetch Priority API

Optimizing the resources your website loads is the best way of making sure it loads faster for everyone. I’ve talked before about ways of doing that, but turns out there’s a new, better way of telling browsers what they should load first!

The article has many examples of use cases, but these are my favorites:

• Hero images: “Images inside the viewport typically start at a Low priority. After the layout is complete, Chrome discovers that they’re in the viewport and boosts their priority. This usually adds a significant delay to loading the critical images, like hero images.”
• Image Carousels: “For example, in an image carousel, only the first visible image needs a higher priority, and the others, typically offscreen initially can be set to have lower priority.”

Importing a frontend Javascript library without a build system, by Julian Evans

Nowadays it seems most packages and developers expect you to use a build system like Vite, Webpack, or anything with NodeJS to build websites.

That shouldn’t be true, but if you’re ever building a simple buildless website and want to use packages, Julia Evans explain how to do that and also a bit of how the different kinds of JS modules work.

Carving your space, by Heather Buchel

Great article reflecting on how job descriptions usually suck and how hard it is to find a job working with the things you want to work on, especially if your expertise is in the gap between two different job descriptions. Turns out the easiest way is to try and carve out a way into the work you do best.

baseline-status web component

A neat little web component that displays Baseline status of any web feature, that you can quickly add to any web page you want.

I might use this in future blog posts here!

Wrapping up

Phew, that was a bunch of links for this month! I’m assuming December won’t have many, since I’m winding down a bit for the end of the year.

I’m starting to prep up my year-in-review post for 2024. These are always my favorite ones to write, as they make me reflect on everything I’ve seen and done this year. It was a good year, so hopefully that will turn into a good post!

My rating: I like it

Despite being a musical, this is pretty good! Interesting story, right amount of nostalgia, and honestly l even enjoyed some of the musical parts around the halfway point of the movie.

I just thought the final sequence was a bit drawn out so the landing wasn’t perfect. But overall, way better than I expected.

My rating: Loved it!

This one hits hard. It’s a brilliantly told true story of just one of the thousands of families destroyed the military dictatorship in Brazil.

Its depiction of Rio de Janeiro in the 70s is very on point. The details make everything much more relatable. It’s a powerful reminder of why we must celebrate and fight to keep the rights we have today.

One of the greatest weapons modern social platforms have against us is something called FOMO - the Fear of Missing Out. We are inherently social creatures and we want to belong to a group, and to do so we feel like we need to be aware of everything that is going on. We fear we’ll miss out on something important and will be left out of a social context because of that.

That instinct makes sense in an evolutionary context. Our ability to form groups and a society is what made us survive. But our ancient reptilian brain was never ready for the sheer amount of context we have access to on the internet. We can’t keep up, realistically. So that Fear turns into Anxiety.

If our brains can’t handle it, what can we do about it? Well, we can try to be rational.

How much of what you see in social media everyday is actually good for you? How much of it actually helps you build relationships with others? I don’t know about you, but to me it seems like the vast majority of it is actually harmful to both you individually and to your relationships.

There’s no shortage of people suffering from anxiety caused by seeing so many bad news all the time. And no shortage of stories of people saying they stopped talking to their relatives or friends because of something dumb someone posted online. Everyone is so angry all the time and there’s just no way of building a healthy relationship when you’re in that state.

[!info] To them, your anger is the goal

It’s always worth remembering that, for commercial social platforms like Facebook, Instagram or Twitter, making you angry is the main goal. Angry people are much more likely to engage with content, which translates to bigger numbers for them, which means more ads and more money.

That means that if you’re fuming with anger at the end of a 15 minute session of scrolling through your feed, you’re not using it wrong. That is exactly what’s intended.

If bad things are most of what you see, and that erodes both your trust in humanity and your personal relationships, then shouldn’t you be happy if you miss out on it?

The Joy of Missing Out

What if we try to exercise the opposite emotion when thinking about all that? I’ll give some personal examples.

Recently, in Brazil, there’s been a lot of public discussion around labor laws because the congress is discussing prohibiting making people work on a 6:1 schedule. There’s been so many awful, borderline criminal takes being posted online that it can truly make you lose all your hope in people (I do think most of them are rage baiting, saying something so absurd to make people engage more).

I’m not in any commercial social media platform, and only got exposed to some of the bad takes that burst out of their bubbles. My mind could definitely steer towards the thought that I’m missing out on that discussion, and I could be there to tell these people they’re stupid. But wait… those people are awful and are saying some awful things, and I’m missing out on that! I’m glad I’m missing out, because I really don’t wanna see it.

Even if you’re part of a bubble somewhere that aligns with your own thinking, sometimes it’s good to be able to identify when something’s not good for you too. After the US presidential elections, my Mastodon feed got overwhelmingly negative. I totally empathize with the feeling, but at the same time it was dragging my mood down, and there’s not really anything I could do about it. So I just… muted the topic and tuned down my usage of Mastodon. I chose to miss out on it and my brain was glad I did.

I recognize that ==being able to miss out and just turning off from news and social media like this is a privilege. My right to be myself is not under constant threat.== A lot of the people I interact with can’t say the same, and staying ahead of the news or even just being able to vent is a necessity for them.

But, if you can, I highly recommend trying it out. You don’t have to stay on top of everything that’s happening. In fact, it’s better if you don’t. Keep some space in your mind for things you can learn from other people in an anger-free context. It’s much easier to understand their point of view and have healthy discussions without all that noise.

My rating: I like it

Probably my favorite show from my childhood, I was wondering if itwould survive a rewatch.

Honestly, it’s not amazing, but it’s fun. It is at its peak in the first two seasons, when the stakes were lower. It gets worse once the story gets too big for its budget. Still, that ending was amazing.

🎃 Happy Halloween! 🎃 As the spirits prepare to walk among the living, I bring you some Cool Links to read while enjoying your candy. Or, if you’re in the Southern Hemisphere like me, to read while taking your allergy pills because Spring is in full throttle.

This month’s links are pretty much all web-related, but some are not specific to devs. It’s been a busy month, so I haven’t really had the time to read about more varied topics 😅. Maybe next month!

Tech

You should be using an RSS reader, by Cory Doctorow

There’s really nothing else I can add to this argument that Cory hasn’t already said. But really, RSS is the best way to follow a publication or a person there can be. It’s the best way for you to actually have control of what you read and decide when to do so.

Nothing Left to Solve, by Louie Mantia

I don’t know if you’ve heard, but The Browser Company, the company behind the Arc Browser (which I’ve been using for a couple years as my main browser) has announced that they’ve pretty much given up on monetizing it and will just keep it working as-is in the future, with no new development.

This article reflects a bit on how it seems that tech companies seem to be running out of problems to solve, which results in great products that can’t find their footing (outside of small niches) due to not really changing much about their user’s lives.

Dev

The Static Site Paradox

The web is, at its core, just links to HTML files with some CSS and JS on top. That’s how it was years ago and how it technically still is.

Over the years, things became more complex and many layers of abstraction were introduced. A lot of web developers have never had any real contact with the core of the web.

So we ended up on a place where it’s much easier to find and use an overly-complex, bloated solution for websites than just having the bare minimum (that usually works better).

Isn’t that wild? In the author’s words:

“the web doesn’t belong just to software engineers. The more we make the web complex, the more we push normal users into the enclosures that we like to call social networks.”

I’ve been a web developer for over 10 years now and I can afford the luxury of building my own website - a static, simple, lean one. People with less or no coding knowledge can’t have that. They need to use tooling that ships so much code and complexity if they want to have their own. Or, even worse - they’ll stick to social media platforms instead. 😱

HTML for People, by Blake Watson

Building on the previous paradox: did you know that HTML was originally meant to be understandable and writable by anyone?

Before us web devs came along and scared people off, HTML was actually seen as a very simple way of structuring and linking data.

And it still is! This course aims to teach HTML to people with no technical knowledge, so they’re able to build their own simple web pages (or just mess around with existing ones, which is really fun).

nvm Desktop

nvm (Node Version Manager) is one of the best tools in my web dev toolkit. It allows you to keep multiple versions of NodeJS installed, which is usually a must if you swap between different projects all day. I’d even say it’s worth it even if you only have one version, since installing NodeJS via nvm is way easier than the official way.

This is a way of using nvm with a graphical interface, in case you’re not too fond of CLIs (or simply prefer a simple GUI instead).

State of CSS 2024

These “State of” results are always fun, if only for the graphics alone. This one has pretty good data though, as 2024 was one of CSS’s best years, with Container Queries, :has() (which allows for Quantity Queries), native nesting, native page transitions, and more.

Svelte 5 is alive

I’ve been growing increasingly unhappy with JavaScript frameworks as of late, but I still have a soft spot for Svelte. Svelte is what my blog is built with, and it’s always been a pleasure to use. Version 5 significantly changes some of its core features, apparently for the better. I’m excited to upgrade eventually (and really glad that they kept backwards compatibility).

Wrapping up

This post is going to be on the first edition of my new newsletter! I set it up as a mirror of this blog, at least initially, so people can get notified whenever I write something new.

If you’re interested, you can subscribe to it. There’s not gonna be any exclusive content in there, so you’re not missing anything if you don’t. The blog is still going to be my main way of publishing.

My rating: I like it

What the fuck?

My rating: I like it

One of the best horror movie setups I’ve ever seen. Its premise of being footage of a 70s talk show works really well and it draws you in really quickly.

No ending could have lived up to the quality of that setup, though. Which made me feel a bit confused and disappointed when it ended. Still a great watch though!

Hi there! As September ends, it’s time to wake up for a new edition of Cool Links!

This month’s links are mostly web development related, with a couple ideas on how to build some fun components, a brilliant jab at the current state of commercial web, a jab at React and a jab at Safari. Honestly, it’s a pack of somewhat negative opinions, but presented in a fun way. 😅

Fun

Is my blue your blue?

I don’t know about you, but I’ve argued with a lot of people in the past over if a specific color was blue or green. This quick test makes you categorize some colors into blue or green, and then how “green” you are compared to the rest of population. I’m not sure if there’s any scientific data to back any of that up, but it’s still a fun test to take.

For the record, my boundary is at hue 171, which makes me greener than 75% of the population.

How to monetize a blog, by Modem.io

This one is absolutely brilliant and nothing I can say about it will make it justice. Open it on desktop for the full effect.

Dev

An Abridged History of Safari Showstoppers, by Roderick E.J.H. Gadellaa

I’ve complained about Safari multiple times in my posts and social media, and I’m not alone. This document pretty much aggregates all the issues Safari has been causing for years and how users (and devs) often have no choice of browser to run to when Safari decides it doesn’t want something to work.

I am 100% in favor of browser engine diversity, and definitely don’t want Chromium to be the only option out there. But Safari (and WebKit, its “heart”) is not a fair competitor because the majority of its users (on iOS and iPadOS) don’t have the option of using something else. And when Safari has time and time again had issues with the implementation of new APIs and, even worse, had issues with having old APIs working in a completely different way from other browsers, we have a problem.

And to make it all worse, Apple clearly has financial incentives to make Safari lag behind. A limited web experience means the only way to provide your service to users on iOS is by releasing an app… on Apple’s App Store. They can’t monetize web browsing, so why make it work well?

What is React.JS?, by Heydon Pickering

A semi-serious, semi-satire, but fully incredible short video that talks about ReactJS and how and why it became the most popular web framework. Definitely worth the watch, especially if you don’t like React. Make sure to read the transcript for some added Director’s notes.

On being a “Javascript Framework Developer”… by Stefan Judis

I feel like more and more web developers are becoming “Framework Developers”, which means they only really develop with one specific (or maybe two) JS frameworks. This is a problem because these frameworks often change how you interact with web technology. In the end, everything gets compiled to HTML, CSS and JS, but when your dev environment is so different from that, it’s hard to understand exactly what you’re building.

If you already know HTML, CSS and JS, then you can make that association while you’re learning the framework, and things happen naturally. When the opposite happens, though, the path is more difficult.

A HTML, CSS and JS developer can learn any framework (and jump between them) with relative ease, while a React developer might have a hard time working with Vanilla JS or Svelte, for example, because they only learned the React way of thinking instead of how browsers interpret the code.

I do use a JavaScript framework (Svelte) on my website and personal projects, but I’m glad I learned the underlying technologies before diving into any framework. Having that foundation has allowed me to work professionally with a lot of different stacks (Vanilla, React, Vue, Angular, Svelte) while still keeping my foundational skills intact.

Responsive app switcher or carousel UI with CSS view()

This CodePen uses pure CSS and its new-ish features to create a really neat card stacking effect! It uses Scroll Snapping (widely available) and Scroll-based animation (Chromium only for now) to both style the card stack and make sure they behave correctly.

Building the Perfect Logo Strip, by Nils Binder

This article dives into how the author built a logo strip (i.e. a grid of company logos with varying widths and heights) and the techniques they used to make their weight nicely distributed, way beyond what most people have done in the past (including me). I’ll definitely be using that next time!

Wrapping Up

I hope you enjoyed this month’s selection of Cool Links. See you next month!

My rating: I like it

It’s one of those movies where you spend a good chunk of its duration wondering if it’s going anywhere. But you can’t look away, it draws you in. And then things click.

Amazing acting, photography, and sound. Not easy to understand but worth the effort.

My rating: I like it

I never watched the first one, but this sequel is a very good time! It’s never afraid to be fun and never takes itself seriously, which is a breath of fresh air nowadays.

It’s far from being a cinema masterpiece, but it’s 105 minutes of pure entertainment. Great soundtrack too!

My rating: Loved it!

Just as beautiful as it is sad. What a movie. 🥺

My rating: I like it

Wow, a horror movie that’s actually good! Really knows how to build up tension, keeping you on the edge of your seat for most of it.

Story is good enough to keep you interested, and it doesn’t feel like it needs to explain everything, which to me is really important to make horror work.

Welcome to the second ever edition of Cool Links!

This was kind of a half-month for me, as I went on vacation on the 18th and didn’t really read anything worthwhile after that. Still, I was able to find some cool reads below.

As a reminder, Cool Links contains the best things that I’ve read during the month, not things that were published in the current month. Some of these articles were actually in my “Read Later” list for a while, actually, and I finally got to them.

So, with no further ado, here they are:

Dev

Engineering for slow internet, by brr

In case you don’t know this blog, I highly recommend checking other posts out. “brr” is a blog made by an IT worker that worked for a few months in Antarctica, and regularly blogged about some of the unique situations and challenges faced there. They are back home now, and published a post about the challenges faced due to Antarctica’s very limited internet access, and how a lot of stuff we take for granted just wasn’t usable there.

Makes us think about how much code we ship on our apps and websites. Surely there are ways to make our websites work with less and require less resources to run? We never know who, how and where our users might be.

Dynamic text color contrast based on background lightness with CSS/SVG filters, by miunau

If you’ve ever worked with CSS variables on a project, you know one of the main challenges is getting color contrast to work correctly. When the background color changes, the text color (which should have high contrast) might not work as well. Often we handle this by having a --color-contrast variable, but this added complexity builds up quickly.

This article goes into an alternative way that uses CSS and SVG filters to let the browser apply the contrast automatically. The CSS-only alternative has a problem with fringing, but the SVG one seems straightforward enough and gets rid of that issue. That’s pretty clever!

I assume the main drawback of that approach is that you don’t have full control over the text color, so if having an exact color is crucial to you, then you’re still stuck with hardcoding color variables.

GitHub Profile Roaster

Generative AI has a lot of problems, but it’s really good at creating some fun stuff. This tool asks for a GitHub profile handle and roasts it, using public data from your profile and your public repos. It’s surprisingly good at it… and it might get your feelings hurt.

Here’s a bit of what it says about mine:

Your website might be “lightweight,” but it seems like the only thing lighter is the impact of your contributions. If I wanted to stumble upon such “high-quality” work, I’d check out my toddler’s finger painting. Keep swinging that magic wand, maybe one day you’ll code something that doesn’t make people cringe!

I’m okay, I promise 🥲 …

Tech

Is this the slow decline of the Apple “cult”?, by Matt Birchler

This great article goes into how Apple went from being kind of an underdog to becoming the biggest company in the world, and how that made its loyal fans from back in the 2000s kinda loathe the company nowadays, with its greedy actions and overall abuse of market power.

I never had access to any Apple products until ~4 years ago, so I never really got caught in the Apple hype train. Still, that’s what I mostly use nowadays and while I like their products, it’s really hard to have any kind of sympathy for them (which is honestly okay; companies should never be your friends). So, it’s nice reading what someone that was in that hype train feels about all the negative Apple news that are all around us all the time.

Mental Health

The Baseline: How to Create Long-Term Happiness, by Jason Lengstorf

This fantastic article talks about how we’re often chasing down big goals as a form of reaching happiness, but those big highs often come with big lows right after. What if we aim to make the baseline higher instead of reaching higher highs all the time?

It kinda goes along with what I wrote about longterm goals a few months ago. Not to brag, but I think that article came out really great ;)

Why we should embrace being average, by Matthew Syed

I read the Brazilian Portuguese version of this article, and it kind of goes into the same idea as the last one. It talks about how perfectionism can be harmful to one’s self-esteem and how accepting being average allows us to try more things and to live life to the fullest. Perfectionism has nothing to do with achieving success, only with avoiding doing things we’re afraid of not being good at.

Wrapping Up

I hope you enjoyed this month’s selection of Cool Links. See you next month!

While in Chicago and during a massive heat wave, I ended up going inside an Apple Store, mostly looking at a place with A/C to chill for a bit.

In there, a guy was giving out a quick presentation on the Vision Pro and mentioned there being demo slots available, so I thought why not? The demos usually take 30 minutes and it’d be cool to try out this device I’ve heard about but never had the chance to try.

For the record, the Apple Vision Pro is not currently available where I live (Brazil), and its price point ($3500) is a major turn off anyway, so I was never interested in buying it. Still, I like gadgets and was really interested in checking it out.

And… yeah, the wow factor is definitely there! The demo is fully guided and of course they take you through its most impressive features. The immersive videos and “interactive” experiences are really something - it really felt like things were right in front of me, in a not-3D-glasses way. The brain was really struggling to understand some of the things were not real.

Controls

The Vision Pro has no controller or anything similar, so you basically control and navigate the UI just using your eyes and your hands. You look at something and it will get highlighted (kinda like hovering a mouse cursor over something), and then you pinch 👌with any hand to “click” on stuff.

For me, it worked really well! I’ve seen some people saying it can be hit and miss sometimes, but I felt it quite responsive in my short time using it.

One thing that would probably be an issue though: you have to be looking exactly at where you’re clicking. Which means your eyes have to stay in sync with your hands all the time. This seems natural at first, but once you start trying to do things more quickly, you realize that’s not how you usually do things in other devices.

Try, for example, resizing or moving a window on your computer. Your eyes go to the corner of the window as you drag the mouse cursor there, but before you click, the eyes are already moving to where you want the window to be dragged to. That’s natural, as our eyes are looking for the next thing to do while our hands are still doing the action.

With the Vision Pro, that doesn’t work. Your eyes can’t be faster than your hand, they have to be the exact same speed, otherwise you will be interacting with the wrong thing.

Hardware

The headset itself is pretty well made and is built with premium materials, as you’d expect from Apple. Nothing new there. But the first thing you notice when putting it on is that it is heavy. Not heavy enough to stop your head from staying straight, of course, but heavy enough for it to start to weigh down after a while.

After 30 minutes wearing it, I started to feel the weight on my neck, and I had a pretty clear “headset mark” on my face. I didn’t get any problem with my eyes, though I imagine they would get irritated more easily than with regular screens, since they’re pretty much glued to your face.

Which means, I don’t seriously think you can wear the Vision Pro for long periods of time. And I think Apple knows this, since they went for a 2h battery only. Good for a movie maybe, bad for a work session. And speaking of work…

Use Cases

Apple did showcase some hypothetical work situations in their Vision Pro videos, but it’s very hard to imagine someone using it for work seriously. It is technically impressive, sure, and some “what ifs” are really exciting to think about.

But when doing actual work, you want reliability, speed and flexibility. I don’t think it provides any of those.

It’s not reliable or fast because of the control issues I mentioned before. It feels like your mind has to slow down to catch up with the Vision Pro, whereas it feels like computers have caught up in speed with our minds (or did we just get used to them?).

It’s not flexible because, in the end, it runs another closed-down platform, VisionOS, which faces the same issues the iPadOS has. Great if all you do is use App Store stuff, but whenever you need something else that Apple doesn’t allow for any reason (like a clipboard manager or any tweaks to the OS itself), then you’re out of luck. There’s a reason the Mac is still the work OS for most.

Speaking of Mac, you can actually sync it with the Vision Pro and use it as an external monitor, in which you can make the screen as big as you want. I wasn’t able to see that on the demo, but honestly, even if it’s good I doubt it’s $3500 good.

Wrapping up

To sum up my first impressions, I think it’s technically amazing, and the nerd side of me was pretty excited using it. It’s a great entertainment device (as long as you’re ok only watching what’s available), although a lonely one.

But yeah, that price point just makes it hard to be positive about it 😬

Last night, I spent a few hours playing World of Warcraft with my wife. It’s an old game, so it has a lot of things to do and content to experience.

Still, we spent a lot of time just sitting around Orgrimmar, chatting with other players. We play on a Roleplaying server, which means that in some specific spots of the world, people actually do the roleplaying part of a roleplaying game.

And it’s so fun! While not as flashy as the big combat encounters and epic story bits, it feels like these little social interactions while pretending to be your character are way more fun and personal.

In the 20 years since the game’s release, the social aspects of this social game have been reduced considerably, and you can pretty much do everything without having to talk to a single soul in the game.

That makes sense if you consider the game’s audience has grown up and doesn’t have a lot of time to play and interact, and/or our increasingly shorter attention spans can’t handle spending hours looking for people to do something with us.

Still, I’m glad there’s still opportunity for players that want to dive into the game a bit more to do that and find each other. I’m a huge lore nerd and love any opportunity to feel like I’m a part of that world. Thanks to Braldov, the Tauren, and Moralus, the Zandalari, for a fun night!

My rating: Decent

As a longtime Warcraft fan, I watched this back when it came out, and finally rewatched it now. I remember being fascinated by seeing the Azeroth I knew so well on the big screen, but once that feeling goes away, it’s just an okay film.

It feels rushed and gives the feeling that whoever was involved in making it wasn’t a fan of the games.

My rating: Didn't like it

Everything about this movie is great. Atmosphere, acting, sounds, and how it plays with historical context. It’s meant to make you uncomfortable, and it succeeds in doing so.

Too bad it just didn’t hit me the way I think it should have. I get why it should have been great, it just wasn’t for me.

Welcome to the first edition of Cool Links™! (not really trademarked)

The idea here is to post links to cool stuff I’ve read or watched every month. It is part of an effort I’m making into writing more and more often. Posting these links gives me the opportunity to comment on them, which feels less intimidating than writing a full blog post. Plus, it’s an opportunity to link to the work of other writers and keep the spirit of the IndieWeb going.

This year I’ve also started posting some articles with the “Reading Recs” category to be able to comment on them. These Cool Links will replace some of those, but might still show up in cases where I have a lot to say about them.

So, let’s go to this month’s Cool Links:

Design

Different Gets Ignored, by Luke Wroblewski

This article talks about how users are growing increasingly indifferent to elements that “pop” on websites and apps. Because “⁠if a pop-up or any element of a user interface for that matter looks too different from the rest of the design, people will often perceive it as something that doesn’t belong (like an ad) and dismiss it.”.

Instead, making the important elements feel like the core flow tends to yield better results.

Why users are ignoring your features, by Built for Mars

This case study (in the form of a slide presentation) has amazing insight into how having too many features can backfire. It goes through many design concepts and practical examples onto how you can make users take notice and actually use the features you work so hard to build.

How small UI delighters have a huge impact on UX, by Growth Design

Another case study; this one shows how apps that are great ideas can become a disappointment when they don’t know how to display those good ideas correctly. And how good (and fun) design can make all the difference on getting users on board.

AI

AI Companies Need to Be Regulated: An Open Letter to the U.S. Congress and European Parliament, by MacStories

The MacStories team was able to put into words what a lot of people (including me) are feeling. AI companies that scrape content on the web (ignoring its licenses) pose a big threat to websites that need the pageviews to keep the lights on. Right now, that is all done under the claim that they’re using the data to train their models and not reproducing the content directly, which would fit into “fair use”. But there are good arguments that it’s not true.

AI models collapse when trained on recursively generated data

This study shows that, predictably, generative AIs or LLMs tend to decline in quality as they start feeding on content that was generated by other LLMs instead of humans.

Considering much of the web is now getting polluted by this LLM-generated slop and the web is a big source of data for their training, it seems that future models will likely regress in quality. Doesn’t seem like a very sustainable model, does it?

My rating: Decent

The conclusion to the trilogy that started with ‘X’, this one now takes place in the 80s and has a lot of the tropes of the movies of that era.

The ambiance, references and (again) Mia Goth’s acting really bring you into the movie. It’s a shame the climax is unable to match the same level of quality, leading to a quite confusing ending.

My rating: I like it

Amazing movie from start to finish. Pearl is an incredible character and even though you already have an idea of what’s going to happen (because this is a prequel to ‘X’), the way the story is told just keeps your eyes glued to the screen.

Mia Goth’s acting is nothing short of amazing, too. It might actually be the best part of the movie!

My rating: Decent

I think this movie might be much more enjoyable for people who love cinema history, based on the amount of references in it and how much it goes for the 1970s slasher horror movie vibes.

For me, it was entertaining enough to keep me watching, but nothing really memorable.

My rating: Loved it!

It took me way too long to watch this movie, but I’m so glad I was finally able to watch it.

Absolutely incredible, raw, weird and full of symbolisms that will keep me thinking about the movie for days. Another masterpiece in Brazilian cinema. Have you watched Bacurau?

My rating: Loved it!

You can feel all sorts of emotions on this one (hah!), but the main one is joy. Amazing movie, funny, relatable, touches on very important topics with good humor and a lot of sensibility.

Props to the Brazilian dubbing and localization which was amazing and probably made the movie even better than it originally was! 😉

I was recently working on some form styling for a project and the design had this example of a group of checkboxes that spread out in 3 columns:

That’s pretty simple to do, right? Just add display: grid to the parent and set grid-template-columns: 1fr 1fr 1fr.

However, things don’t look so good when there’s only 3 checkboxes:

When there’s only a few choices, they look better and are easier to read if displayed vertically. So, if there are only 3 items, ideally grid-template-columns would only define one column. But how can we hot-swap between these rules without doing some hacky server-side/JS tweak?

:has() to the rescue

The :has() CSS selector has been available on all major browsers since December 2023 (Firefox was the last to implement it), and is often called the “Parent selector”. With it, you’re able to select an element based on what it contains. For example, you can select every p element with some bold text (strong) inside by doing p:has(strong). That’s already quite useful, but the neat thing is that you can use more complex selectors inside it as well.

We have the :nth-child selector that usually allows us to select every nth element and then do something with it. So, let’s say that in our checkbox example above, we want to make the color of the fifth checkbox red. We could do something like:

.group .checkbox:nth-child(5) {
	color: red;
}

But what if we could mix both? That :nth-child selector would only return something if there is an element at index 5… so, if we put that inside a :has selector, we could select the parent of that 5th item instead… Eureka!

.group:has(.checkbox:nth-child(5)) {
	/*
		Styles here will only apply if a 5th checkbox exists inside .group
		i.e. there are > 5 checkboxes
	*/
}

Amazing! So, with that, we’re able to do something like:

.group {
	display: grid;
	grid-template-columns: 1fr
}

.group:has(.checkbox:nth-child(5)) {
	/*
		If it has at least 5 checkboxes, make it 2 columns
	*/
	grid-template-columns: 1fr 1fr;
}

.group:has(.checkbox:nth-child(7)) {
	/*
		And 3 columns if there's at least 7 checkboxes
	*/
	grid-template-columns: 1fr 1fr 1fr;
}

Progressive Enhancement

(I really like talking about progressive enhancement)

So, there’s a very real possibility that some of your users won’t be able to see it as you intended because their browser does not support :has yet. It’s sad, but it’s true. This is where you have to make a decision. In those cases where :has isn’t supported, what do you want to happen?

• Do things look broken? Is the UX greatly affected? If yes, then you will have to figure out an alternative for those specific users. You can use @supports selector(:has(*)) (for when browser supports it) and @supports not selector(:has(*)) (for when it doesn’t), and apply fallback styles accordingly. In that checkbox columns example, perhaps a good fallback would be just default to 2 columns instead.
• If nothing looks broken, just not ideal, then you can safely leave it as is. No errors will be thrown if you use :has and the browser doesn’t know what it is. In that checkbox example, I believe nothing would look broken if I just kept it at 1 column. Then, if a user’s browser supports it, the website gets enhanced.

Wrapping up

So, just to wrap up that checkboxes example, you can also sprinkle some container queries in there to make everything responsive! Here was my end result (you can check it out on CodePen as well:

.group {
	display: grid;
	grid-template-columns: 1fr
}

.group:has(.checkbox:nth-child(5)) {
	/*
		If it has at least 5 checkboxes, make it 2 columns
  
	    But only if there's enough space for it
	*/
  @container (min-width: 350px) {
	  grid-template-columns: 1fr 1fr;
  }
}

.group:has(.checkbox:nth-child(7)) {
	/*
		And 3 columns if there's at least 7 checkboxes
	*/
  
    @container (min-width: 600px) {
    	grid-template-columns: 1fr 1fr 1fr;
    }
}

My website has been open source since the beginning. Being open was the most important goal for me back when I built it (and still is now), for many reasons:

• Open source websites and projects were/are crucial for me when learning how to build things;
• I wanted my website to do the same for other devs (it has!);
• It’s good as a personal project for a portfolio; You can see its code to see how I work and maybe understand a bit of how my coding brain works.

Pretty much since its inception some people have taken interest on the website, forked it, made changes to it, or maybe just dug through the code to see how I did things. That’s great!

Unfortunately, there are some people that clone the website and then just remove my name, while keeping all the content on it. That’s not very nice.

I’m not particularly knowledgeable (or interested, to be honest) in how all that works legally. Technically that content was part of the code, right? So it’s probably not illegal or anything, just not nice.

Which is why I decided to remove the content (blog posts, work experience, resume) out of the main website repo and into a different (and private) one.

Git submodules

To do that, I figured the simplest way would be to make use of Git submodules, so that the main repo would point to this separate repo, and then use some custom CI code that would automatically fetch updates in that content repo and update my website whenever something new was published.

I started by creating a new private repo that I aptly called FantinelCMS, with just an empty README.

Then, on the main website repo, I ran this git command to add a new submodule in the “static/cms” folder:

git submodule add git@github.com/org-name/repo-name static/cms -b main

[!info] I use SvelteKit, and I am putting the “cms” folder inside the “static” folder because it will contain images (the ones used on blog posts), which need to be inside the “static” folder in order to be publicly accessible.

This set up a new git repo inside that folder and pulled down that empty README. So far, so good. Then, I copied over the content that was in the website repo into that newly created folder and committed it. I ran the project locally, and it was finding all the posts and stuff. Neat!

Deploying somewhere

Now, this part might vary depending on where you host your website. I host it on Vercel, and I unfortunately found out that it does not support private git submodules by default. Bummer, but fortunately I found a 3rd-party project that provides a quick command to fix for that. You just need to call that script on the “Install Command” field in the settings for your project in Vercel, and it does the magic for you.

Automating updates

Today, whenever I commit something to my website repo, it automatically gets deployed to Vercel in less than 2 minutes. However, with the content on a separate repo, that’s no longer the case. Since the updates themselves are on a different repo, the website one does not know that it should update the content.

I solved this by setting up a new GitHub Action on my content repo that runs whenever the content gets updated. It will then update the website repo and commit changes to it, firing the previously-existing CI process. It worked pretty well!

How well does it work?

Well, if you’re seeing this post, it means @@it worked well!@@ I actually wrote this post on Obsidian, a separate app that only handles Markdown (.md) files, and is totally detached from the website code. (I intend to write about this setup in the near future).

Hopefully this makes it easier for people to fork the website (though, if you do, I highly recommend using this separate template instead) without having the work to take out my stuff from it. There’s still some content here and there that’s not being fed from the cms folder (like the home page), but I also plan on tackling that soon.

My rating: Loved it!

Mesmerizing movie that hooked me from start to finish. Might not be for everyone, but I just love when movies don’t give you all the answers and make you think about what happened. It makes you part of the story in away.

I have recently watched this video by Jason Lengstorf where he chats with Maggie Appleton and she talks a lot about how she never had any clear longterm goals in her career, and how that actually was a good thing and possibly the key to her happiness. That got me thinking…

I’ve never been someone who plans ahead a lot. I had no idea what to do for a living when I finished high school. I never really made any plans of “getting married before I’m 25” or “owning a house before I’m 30”. After I began working as a developer, I never really followed a roadmap or knew what kind of developer I wanted to be 5 years down the road. I mostly went with my gut and focused on the things I enjoyed doing.

I started my career mainly as a backend developer, and everything was fun to me back then. As I had to touch the frontend more and more during my work, I realized I really liked that. So I decided to get into it! Not long after I was a primarily frontend developer, working on big web apps and making important architectural decisions. Fast-forward a few years, I got really into the “front of the frontend” side of things, and now I build websites (not web apps) for a living! I even do some designing every once in a while.

Looking from outside, that may look like I wasted the first years of my career learning things I don’t use anymore. If I had planned ahead and had a set goal in mind, surely I could have achieved so much more by now, right?

The thing is, back then I had very little idea of what I liked. Backend was fun to me because it was new, but quickly it became clear that what I enjoyed was something else. And I knew next to nothing about frontend development because every other developer I knew was backend-focused. So, how was I supposed to know I’d enjoy working on the frontend more? Right, I wouldn’t.

So, maybe, probably, I’d have spent years focusing on my goal of becoming the best backend developer, while not really enjoying it that much. And knowing myself, I just know that I could never do my best work if I didn’t enjoy what I was doing. I’d have sacrificed all the fun I had along the way, and probably still feel not good enough by now.

This anecdote was focused on web development, but it really could apply to most longterm goals in life.

My wife and I always wanted to live abroad. We thought of Canada, but eventually decided we were going to live in Germany instead. The first step was getting our EU citizenship, which would then be followed by us leaving everything in Brazil behind and diving into the unknown in a different continent. It was our longterm goal for many years.

Eventually we figured out that we weren’t living our life in Brazil to the fullest because of that. We weren’t trying to find a better apartment because we’d move abroad. We didn’t get better furniture because we’d move abroad. We didn’t start studying what we wanted because we’d move abroad. Essentially we were making some of the best years of our lives worse just because we had a set idea in mind since many years before.

We changed that, and started actually doing what we could to enjoy our lives here more. The end result? We realized we really liked living here and that longterm goal of moving to another country was not that important, or at least not that urgent. It was such a relief to get that pressure off our shoulders. It even played a huge part in giving me a feeling of belonging somewhere.

I consider myself a pretty happy person. I do think a lot of it comes from me never really expecting much from myself, and from internalizing the phrase “the journey is the reward” pretty early in life. Not expecting much from myself is not necessarily a lack of self-confidence, it might actually be the opposite: ==I trust myself to become a better, wiser person with time.== And that wiser Matt is way more well-informed to make life decisions than dumb old me.

So much is expected of us by other people already that I feel that often the kindest thing you can do to yourself is to not expect anything. Future you has a way better idea of what they want than present you does. The best thing you can do for future you is to keep chasing what you like. Make your brain happy. ==It usually makes good life decisions when you’re happy.==

Goals are not inherently a bad thing. They keep us moving forward. But while dreaming of the treasure at the end of the rainbow, don’t miss the breathtaking beauty of the rainbow itself.

Social media preview images (or open graph images, or og images) are very useful if you want to attract people to your website. Displaying that neat blog post featured image on the link preview might be the difference between someone scrolling past your link or clicking on it. Plus, it looks neat.

Problem is, not all blog posts have an image. Maybe it’s just a quick thought, or something so abstract you just can’t figure out a good image to put in there. Your blog layout is fine if you don’t add an image, but what happens when that link is shared? Maybe nothing will show up and people will miss it? Or maybe the more generic fall-back image of your website will show up in there. And how will people mindlessly scrolling on social media know what your link is about?

Luckily for us lazy people, there’s a way of automating them!

Generating images from HTML using Satori

This is kind of an old problem that has had a few solutions in the past, but none of them were really great. Depending on how long you’ve been coding, you might have used packages like html2png or something similar, and if you did, you probably remember it never really worked well and had plenty of limitations.

Enter Satori. It’s a library developed by Vercel that actually converts HTML and CSS to SVG. SVGs are way easier to convert to images than HTML, so that’s why they decided to go down this route. They then provide their own solution for converting to a PNG, but honestly, that’s not a big deal and you can roll your own quite easily (I did!).

Why not just screenshot a page? Some sites do that!

If you’re searching for this topic, you’ve probably found some articles talking about a method of generating these images by creating a page on your website that looks the way you want, and then using a serverless function to spin up an instance of Chromium, load your site, and take a screenshot of it.

That approach makes a lot of sense - I even used it briefly! - but it has three main problems:

1. It’s slow! Spinning up Chromium on a server, waiting for the page to load, taking the screenshot and downloading it are a lot of considerably large steps.
2. It’s inefficient! Spinning up an entire browser just to grab a screenshot sounds really wasteful. If you’re in a paid plan, it’s expensive too.
3. It probably won’t work. Which might actually be the #1 reason not to use it. ==Most of those articles were written years ago==, when the headless version of Chromium that’s used on those serverless functions was smaller. Nowadays, ==it takes up more than 50MB==, which is the maximum limit of serverless functions! There are technically still some ways of working around that limit, but those break often and are not guaranteed to work in the long run. Chromium is likely to keep growing.

So, with that out of the way, we can now talk about how Satori works.

The more efficient, albeit slightly limited way

In their announcement blog post, Vercel explains that they built Satori to counter the problems of the previous approach. In order to avoid running into the same speed and inefficiency problems, they wanted to avoid using any browser engine. So, they use the same layout engine as React Native, which, while not a complete CSS implementation, still has good parity in results for most cases.

The nice thing about that is that it’s lightweight and reliable. The bad things is that it has some caveats:

• It only supports a subset of CSS. So, no Grid support, for example. But considering you’re using this for generating preview images and not really something complex, it’s a fair tradeoff. Their GitHub page details what it does and does not support;
• It expects JSX syntax for elements. If you’re working on a project that doesn’t use it, that’d require another dependency and a build step. Additionally, you can also pass JS objects that have type, props.children and props.style. It’s good for not needing another dependency, but it’s really hard to read. Or you can use satori-html, a package that translates HTML and CSS into JSX so you can just write good ol’ web code.

Where to run it

In case it’s not yet clear, you need to have some sort of backend in order to run this. That way, you can make your backend return an image file instead of a page or something else.

Luckily, a bunch of frameworks include that nowadays. SvelteKit, Next JS, Astro, and others, all allow you to create some endpoints inside your web app. And, if you host things on platforms like Vercel or Netlify, you can probably have all that working for free (or included in the plan you already have).

On SvelteKit, you can just create a route with a server file (+server.js). On Next JS, you can add a new route to the /api folder. Other frameworks may vary, but it shouldn’t be that hard!

If you have a static site or something else and can’t run it, I haven’t really done much research into how it can be done. But I believe you can still use the free tier of Vercel Functions, for example, to get that working.

My implementation

[!info] In order to set it up on my site, I followed this post from Geoff Rich that goes deep into how things work and how to build things. I’m not gonna try to rewrite his post because there’s really no need - his is already amazing, so if you’re looking into a tutorial, definitely follow his instead of mine.

Since I use SvelteKit, I created a new /opengraph route with a +server.js file that does the magic. It receives some params via query string (like the text of the image) and then returns back the generated image.

Since I don’t use JSX and didn’t wanna add that to my project, I used satori-html to convert HTML and CSS to it. Additionally, I used resvg-js to convert the SVG that Satori generates into a PNG.

To make things even nicer, I moved the HTML and CSS code into a Svelte component, added the text variable, and then imported that on the server file. In the end, the code goes through this entire flow: Svelte -> HTML -> SVG -> PNG! It looks roughly like this:

~filename +server.js

const componentResult = component.render();  
const htmlString = satoriHtml(componentResult.html);  
const svg = await satori(htmlString, satoriConfig);  
const image = new Resvg(svg, resvgConfig).render();  
return new Response(image.asPng(), {  
	headers: {  
		'content-type': 'image/png'  
	}  
};

After that, I can just make my og:image meta tag point to that endpoint:

<meta property="og:image" content={`https://fantinel.dev/opengraph?text={encodeURIComponent(post.title)}`} />

And… that’s it! All my posts that don’t have an explicitly set cover image will now have at least a good looking related image that shows up on social media.

I recently wrote about my website’s 5th anniversary, and made a little retrospective of its past layouts. Which made me realize it has looked pretty much the same for the last 3 or 4 years.

Which is… really not that long? In the grand scheme of things it’s still quite recent. You can also argue that this consistency is good for my “personal brand”. You see green waves, you’re on my website (or in some of the many forks around the web). And people seem to like it. A lot of people forked, copied, or rebuilt something similar for their websites. I even got hired to branch it out into a separate template. That makes me really happy, not only because it shows that people like what I built, but because my work is helping them like many other people’s work helped me (and still do).

On the other hand, I’m a person, not a brand. I want my personal website to reflect a bit of who I am. Am I the same person I was 3-4 years ago? Yes, but not really. I changed a lot, hopefully for the better, and maybe it’s time for my website to do the same.

There’s this fear of ending up with something I don’t like as much as I like the current one. Fear that I’ll waste time or that I’ll regret the changes a year from now.

But I think that if it does actually end up objectively worse, it just means I haven’t changed enough to express myself differently, which I guess will make me happier with what it is right now. Plus, I’ll have the experience of knowing I tried. Worst case scenario, it’ll end up exactly like it is now, but with me a little wiser.

Best case scenario, the 10-years retrospective will be more interesting ;)

On this day, 5 years ago, I launched my blog alongside its first post! Back then, I had little idea if I was gonna keep writing or maintaining it. Well… turns out I did!

The First Days

This blog actually began as a Ghost blog, using its default theme. Ghost was great as a starting point as it provided a quick way to get up and running, and most importantly, a quick way to start writing. Back then I had a couple ideas for blog posts related to stuff I was doing at work - I believe they were the two posts about PWAs (How to transform your Angular app into a PWA and What are PWAs). So, back then, to me, it was more important to get started with writing than to have the perfect blog setup.

Unfortunately, I don’t have a screenshot of what it looked like back then, but since it used the default Ghost theme (Casper), I guess it doesn’t matter much.

Five months later (October, 2019), I released the first version of this blog built by my own hands. It was built with Jekyll, a Ruby-based static site generator that I chose because it was fully supported by GitHub Pages (GitHub’s own static website hosting service - it’s free!). All posts were stored in Markdown files (that’s still true to this day!), and building it was quite fun!

I didn’t have the skills or courage to design something from scratch yet, so I opted to almost completely clone Ghost’s default theme. Here’s what it looked like:

Although I think it’s definitely evolved since then, it still has its charm. The big hero with my name had a typing effect that thankfully you can still check out thanks to the Wayback Machine.

Even back then, I had some main goals for the website, that I had written on the project’s README:

It was built with a few goals in mind:

• Responsive design: the website looks and behaves well on screens of all sizes; • Fast: it only loads what’s needed for it to work. No external JS or CSS libraries: • Adaptive: it supports dark mode from most operating systems by default (desktop and mobile); • Pretty: use a simple and organized layout with simple animations to provide a pleasant experience to all visitors.

That’s still what I strive for nowadays with the website, so I’m glad 2019 me set the path to where it is right now 😊.

Version 2.0

For Version 2.0, I decided to do a big redesign of the website, and add a bit more of me into it, instead of it being a carbon copy of a theme. It’s the first time I added the “waves” effect on the homepage, and since I wanted to design everything myself BUT don’t have much design skills, I relied heavily on cards to organize content (I still rely on cards often). Unfortunately, there’s no (working) snapshot of this version of the website on the Wayback Machine, so unless I run it locally (I’m too lazy to do it), all we have is this screenshot:

Overall, I think this is my least favorite version of it. I really like the waves effect (I still have it today), but I feel like the content didn’t have enough weight. Still, it set the precedent for what the website would look like today, with the colors and overall layout.

Version 3.0

This was a big rewrite, and brought it really close to what it’s like today. It was a complete rebuild from the ground up, now using Svelte and SvelteKit, replacing Jekyll. I wrote about how I built it, and it became my most read post of all time!

If you open it on the Wayback Machine and compare to the current site, it mostly looks the same. I still think the layout is not perfect, but I haven’t found a better way of displaying information about me yet.

I guess the main difference is that I lost the glasses.

Version 4.0 (current)

On February, 2023, I released the current version of the website, aptly named v4. Visually, it really wasn’t much of a change, but it included big changes under the hood, with me adopting atomic design for components, TypeScript, and some interactive stuff like the theme toggle. There were still some visual tweaks, like better positioning of some elements in the home page, but nothing major.

Looking back at it all

On my first ever post, I wrote that the purpose of this blog was to help myself learn about the topics I write here. And it certainly helped with that. A lot of posts here feel like guides because they are - initially a guide to myself that I decided to publish for everyone. And I’m glad I did! I don’t have the numbers since the beginning, but at least since January 2021, ==this site was visited by 43.4k people==! 🤯 That’s a lot. I never expected so many people to drop in and read something I wrote. And considering most of the visitors got here from Google and into one of the guide/help articles, I hope I helped them somehow. Blog posts have been a huge source of help to me over the past years, and I’m happy to be giving back to the dev community.

(by the way, all my blog’s analytics data is fully anonymized and public. You can check it out on Plausible)

But most of all, this website has been by itself a source of learning for me. More than writing, I think I learned more from building and experimenting on it, and I really don’t plan on stopping. It’s my testing grounds, a way to reflect a bit of who I am, and most of all, have fun.

Next steps

On the dev side, I want to keep experimenting. I have some small redesigns planned that I just need time to work on. More importantly, I’m trying really hard to simplify the writing process so I can write more, and more often, from anywhere.

And on the writing side, I really wanna expand the topics I write about. The “blogging renaissance” that’s been going on lately has really inspired me to have this blog be less of a content repository and more of… Matt’s blog. Last year I already started with some purely personal posts and I’m thinking of doubling down on that. But, that’s only good if it comes naturally, I won’t force myself to write stuff I don’t want to. We’ll see.

The only thing I’m certain of is that I want to keep it going.

If you want to create digital artifacts that last, they must be files you can control, in formats that are easy to retrieve and read. Use tools that give you this freedom.   – Steph Ango, in Files over apps

This week I re-read Steph Ango’s post about why we should prefer files over apps. The context over which it was reposted was because Notion bought Skiff, an email client, which was quickly followed by an announcement that the service is being sunset in 6 months (and its source code got moved to another repo with no warning; which made many people think it got pulled completely).

There’s a ton of things to like about this idea of using open format files for everything. It’s pretty much the most guaranteed way to make sure your data belongs to you, because it’s as close as you can get to physically owning something digital.

Nowadays, most of what we use has databases hosted somewhere we don’t own, and that data can only be read by that service. Some integrate with others, some allow you to export your data to other services (or even to files), but the truth is that you don’t have the same level of control. If that service runs out of money and goes down suddenly, or some stakeholder decides letting people export their data is bad for business, you’re at their mercy. Especially if it’s a VC-funded company, which are encouraged to either go big or go broke.

Sure, there’s a reason those apps exist and we use them: dealing with files can be hard. It becomes our responsibility to manage them, keep them safe, and if you want to access them on multiple devices (your laptop and your phone, for example), then it gets a lot more complicated. So, is there a happy medium somewhere? I think so.

File-based apps

Steph Ango is one of the people behind Obsidian, a note-taking app that writes everything into Markdown (.md) files. It is a pretty powerful app, capable of linking and organizing notes in pretty complex ways. But still, all the data in there is stored in files that can be read by any program in any system. Even though Obsidian has come unique features (and even plugins that add even more features), you can use it with the peace of mind that, if anything ever happens to Obsidian, you’ll still have 100% of your data with you.

Obsidian is far from the only app that works like this, which is great. It means that if you find another app that better suits your needs, you can easily take your data in there too. Off the top of my head, you could easily migrate to Logseq, Notable, or even VS Code without having to do anything.

And what conveniences do you lose with this kind of approach?

Well, syncing files between devices is not as straightforward (or at least not free). In Obsidian’s case, you can pay for Obsidian Sync, which is actually what funds development. If you don’t want to pay, it can still be done in a lot of ways. Some people use iCloud or Dropbox folders, others use Git, or other solutions. But yeah, definitely not as easy, especially nowadays where we expect these things to be free. Which leads us to another topic…

Sustainable apps

Software costs money to build. A lot. Even if it doesn’t cost money to keep it up (i.e. there are no servers or support), there’s still all of the dev work that went into it.

What we’ve been seeing happen a lot in the past decade (or even further back) is that startups receive huge investments, with the goal of growing as much as possible, as quickly as possible, to grab a good market share. So these startups operate at huge losses in order to gather a large user base. Then, eventually, the investors want their money back, and now startups need to figure out ways of generating revenue from all these users.

What happens then is… a lot of the things that brought users into those apps start being taken away. The things that caused financial losses to the startup aren’t really feasible anymore, and they need to either start charging for stuff that was free or hike up prices that were low. Or even worse, start making money off user data. The term “enshittification” was coined the word of the year in 2023 for a reason.

This is because, as I’ve written before, VC-funded companies are encouraged to either go big or go broke. There’s no middle ground. They can’t grow steadily at a sustainable rate because they got a big chunk of money that they’ve gotta pay back in a few years, and they gotta hurry. So, there’s even more reason to really consider not having all your important data on a server they own, with no easy way of backing it up somewhere else.

Which is why I have a big appreciation for companies that aim to build software (or anything, really) in a sustainable way. They start with products that are good and appealing, yes, but also with well defined monetization strategies. Companies like Plausible, the brazilian news blog Manual do Usuário and the previously mentioned Obsidian come to mind. I’m sure there are more.

My next steps

I have a confession to make: I talked a lot about Obsidian here, but I don’t actually use it. I use Notion, a VC-funded note taking app that keeps all my notes on a database on their server somewhere. I also use some other VC-funded apps. So this post was written for myself, too. Often as I read some tech news I get a bit worried that I might lose some things. Eventually something will happen with Notion that will force me to change my workflow or make me migrate somewhere else (this migration, again, isn’t easy, because my notes are not just files).

So, I’m planning on changing some things. All my blog posts here are already just Markdown files, and I’m testing editing them in Obsidian for kicks (and maybe to eventually be able to post from a phone or tablet). This will be my first step into getting used to it and bringing over my important personal notes to Markdown files too.

Beyond the peace of mind of actually owning my stuff, it’ll be nice to be able to admire everyone who builds the software I use, instead of being slightly concerned that they’ll turn on me someday.

Talking about the newly released Arc Search, Ben Werdmuller says:

A world where everyone uses an app like this is a death spiral to an information desert.

We built the world’s most incredible communication and knowledge-sharing medium, rich with diverse perspectives and alternative ideas; let’s not sanitize it through a banal filter that is designed to strip it of its humanity.

– Ben Werdmuller, in Stripping the web of its humanity

I agree with Ben’s sentiment here. As flashy and interesting on surface as these AI tools are, they usually bring their own bunch of problems. And they’re also symptoms of even bigger problems: the apparent need to summarize web content is a result of how much filler content there is, usually just as a manner of improving SEO and being able to show more ads to more people. It’s content written by robots for robots (search engine bots), now being read by robots and summarized in a few bullet points. Where’s the human in that?

I am a user of GitHub Copilot and love the tool, so I’m not totally against this latest wave of AI tools. But as of now, there are only a few use cases where I see a net positive for us in the end.

Today, I limited a bunch of AI bots’ access to my website’s content. Probably won’t do any difference, as there’s a lot of similar content to scrap out there. And the thing that makes my content mine, the human part of this, wasn’t going to be used by them anyway. I guess it’s just a way of me yelling at the clouds that the internet I want to see is not the one they’re trying to build.

I’ve mentioned Progressive Enhancement on this blog once before, when explaining how my blog was built and how Svelte has that concept as one of its main appeals. Since then, it’s something that has stuck with me on everything I’ve built, and as such has shaped the way I work both on personal projects and professionally as well.

This article talks about Progressive Enhancement focusing mainly on websites and web apps, but it’s a concept that may carry over to other areas of development (client-side, at least), though the specifics might differ.

What is Progressive Enhancement?

If you really think about it, Progressive Enhancement is all about accessibility. It’s about making sure people of all kinds and with all kinds of devices and connections are able to access your software in at least some capacity.

Just like you can’t expect all users to have perfect eyesight and motor skills, you can’t expect them to have the latest hardware and software, or to have perfect network connections to load everything as intended. Of course that the experience of someone whose spotty 3G connection wasn’t able to load your JS files to be as good as someone in a fast stable Wi-Fi, but what if both could use your website/app either way?

Sounds hard, right? But it really isn’t.

Why and when it matters

When talking about Progressive Enhancement, there’s three main reasons a user may be facing a non-ideal version of your website:

1. The JavaScript files couldn’t be downloaded;
2. The CSS couldn’t be downloaded;
3. The user’s browser/device doesn’t support a feature your code uses;

For number 3, this can be dealt with with some clever feature-checking (more on this below) and using websites like [caniuse.com](https://caniuse.com) before using newer features.

As for 1 and 2, there are numerous reasons it can happen. I like to refer to this website whenever I want to reference why someone might not have JavaScript loaded (and the same reasons apply for CSS), but to summarize:

• A faulty connection may make the JS/CSS file requests fail, even though the page itself loaded;
• A lot of corporate firewalls and ISPs block domains, which might affect requests, especially 3rd-party files your code might depend on;
• The user might have disabled JavaScript (a lot of people do);
• Browser extensions (especially adblockers) might block your scripts from running;

It’s hard to know exactly how many people this affects, and the number will greatly vary depending on who your audience is. A 2013 study by the UK Government showed that 1 in 93 people won’t get your JavaScript code running correctly. 11 years later, while in general connections have gotten faster and more stable, users have also become more likely to use ad-blockers or similar tools. So I’d wager the rate hasn’t changed much.

How to Progressively Enhance Your Website

I’m gonna be honest: Progressive Enhancement is easy, as long as you’re building something new. There’s no quick way of going back to old JS-dependent features and make them work without it, as it will require a refactor. Beyond that, while Progressive Enhancement is a always good thing to keep in mind when developing, a fully working website with JS disabled might not be achievable if you have an app that uses JS to build its entire UI - a SPA (Single Page Application).

With that out of the way, these are my main tips for building websites that get progressively better the more resources the user has:

Start with the basics

Instead of building a fully-featured UI and then stripping it down, we’re doing the opposite: start with the bare minimum. It helps to disable JS for your website (can be done in the browser’s DevTools), so you’re 100% sure everything will work without it. It doesn’t need to be pretty or smooth, it just needs to function. Once that’s done, you can re-enable JavaScript and start adding the charming bits.

There’s not much you can do to prepare for a case where your CSS didn’t load, but you can mitigate one of the main issues when that happens: add height/width to your images and SVGs. That way, they won’t be absurdly big and won’t break the layout as much. And, if you want to style your images with more complex rules, you can add the styles in CSS and they’ll overwrite the height/width attributes. For example:

<img src="example.jpg" width="500" height="500" />

~filename styles.css
/* These will only be applied if 
the CSS file loads successfully */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

And, if you want your images to be scale responsively when your CSS actually loads, just overwrite the height/width there! Fun fact: adding height/width properties to the img element also helps many frameworks load correctly-sized images to make them more lightweight.

Think inside the box 📦

There’s a lot of talk about thinking outside the box when developing - and indeed it’s one of the best skills a developer can have! But often the inside of the box is really useful too. Whatever you’re thinking of building, there’s probably an HTML element that behaves similarly. Why not expand on that instead of just adding more events to a div?

• For hyperlinks, use <a> (please);
• For accordions, use the
  element;
• Need to send data to a server? Just use a <form>! No need for onClicks or onSubmits;
• Any element that has a toggleable state - for example, a hamburger menu or even a modal dialog - can be controlled by a checkbox instead. Yes, really! Check out the mobile hamburger menu of this website;
• In fact, add MDN’s list of HTML elements to your bookmarks. Use divs only as a last resort. Chances are, using a proper HTML element is going to make your code simpler, more readable and more accessible.

Use feature queries

In the past few years, CSS has been getting a ton of new features, making web development easier in general. Things like container queries, parent selectors (:has), and many more.

However, even when all browsers adopt the new features quickly, users still might keep using older versions of a browser for a while. But it the feature you want to use has been available for a bit, you can use feature queries to check if a feature is available or not. I’ve briefly mentioned this in my conditional hover styles post, but to sum it up, you can use the @supports keyword to check if a property is available or not. Take this example of a feature check for container queries:

@supports (container-type: inline-size) {
	/* container queries styles */
}

@supports not (container-type: inline-size) {
	/* fallback styles */
}

And what if the feature isn’t supported, do I need to write my CSS rules twice? No, not really. I mean, it’s your choice how much effort you want to have in supporting the older browsers in this case, but I’d recommend you to at least do something that’s good enough. In the example above (common for creating responsive elements), the older browser could be served some media queries that might not be as pixel-perfect or smooth, but still good enough to not serve a broken experience.

Wrapping Up

I hope this article has been at least a bit enlightening as to how important and easy it can be to start adopting Progressive Enhancement. I feel like as web frameworks got more advanced and decoupled from the basic web development experience, we also started to forget using what the platform gives us, and began reinventing wheels, often in less accessible and less performant ways.

That was a response to a stagnant web platform, more than a decade ago. But that time is past, and the web platform has been progressing greatly in the past few years. By consequence, there has been a change in web frameworks that seem to be adopting more of the native web and depending less on client-side JavaScript. That can be seen in newer frameworks like Svelte and Solid when compared to older ones like React and Angular. But most of all it can be seen in meta-frameworks like Astro or NextJS, that are trying to make the JS-dependent frameworks all produce markup in the server and serving the user a complete page even with JavaScript disabled.

Web development is changing again (has it ever stopped?), and this time it’s hard to see a downside.

Last Year’s Predictions

Last year, I hoped 2023 would be a less exciting year, compared to how 2022 was. And I got that right. Nothing major happened to me in 2023 and I feel like I needed that. It was a year to put my head in its right place and prepare for the next couple of years.

I also mentioned I was planning on refactoring my website, and releasing at least one of the side projects I had planned. I did refactor a huge chunk of my website, but… at this point, I don’t even remember what side project I had in mind when I said that 😅.

I also said I wanted 2023 to be cozy. Eeeh… kinda?

Personal Life

As for my personal life, nothing really big happened this year. Last year I got married and lived in Italy for 3 months, but this year I just moved from one apartment to another in the same city and that’s it. There were a bunch of smaller, but still amazing moments, though!

Travel

My wife and I took some time to discover more of the region we live in (Serra Gaúcha - Brazil). We found out a cool buddhist temple, a random place on a country road filled with mannequins of horror movie characters (!), some really nice parks and places to eat at nearby cities, and, for our 1-year anniversary, we went to a nice retreat in the mountains, and even watched the sunrise atop a hot air balloon!

We also took a trip to São Paulo in August. São Paulo is the biggest city in Brazil (and the biggest in the American continent), and I’d never been anywhere even comparably as big. I consider the city I live in big (with 500k people), but São Paulo’s 22 million people is just something else.

Being such a big city, it’s also a boiling pot of different cultures from all around the country (and neighboring countries as well). Which makes it really fun! We spent a few days there and came across so many different cultures, often on the same street, side by side, resulting in a sight you can’t really see anywhere else.

On Sundays, one of the city’s main avenues (Avenida Paulista) is closed for cars, which turns it into a public space where everything happens, all at once. Just as we got there, we saw a zumba class happening, while a guy dressed up as Batman was singing karaoke in the middle of the street. Wolverine was calmly watching that happen, while African-based religious groups were grouping up across the street to sing and praise their deities. Walking up the street for a couple minutes, you’d find a samba school rehearsing for the carnival and a bit further a DJ in their booth playing some hardcore dubstep. Everything everywhere all at once. It was great.

São Paulo also has an immense amount of museums, including modern art, african art, a museum of Japanese Immigration, and even one of the story of football (soccer) in Brazil. There’s no shortage of culture to be absorbed there, and most of it was either free or really cheap.

Blog

I’m pretty sure this was the best year for the blog, at least considering the amount of posts published. Not counting this one, I’ve published 12 posts, up from the 3 from last year.

I feel like what made me motivated to post more is the fact that I’m now following personal blogs much more than I was in the past - with the death of Twitter, I’ve moved to Mastodon and this pivot towards a more open web has made me start using RSS seriously. Seeing so many people write on their own blogs and experiment with their own websites made me want to work on mine more. It’s a win-win!

I think my favorite post was “Belonging Somewhere”, which was the first post that’s purely personal, no tech involved. My other highlights were the new Zelda game review and me trying to explain why I think “Killers” by Iron Maiden is a concept album. I enjoyed diversifying the subjects I post about, even if those posts don’t do big numbers (which is honestly fine, that’s not why I write).

Speaking of numbers, I joined the blogging trend of posting about my default apps, and after Matt Birchler reposted it on his Mastodon account, I got a huge traffic spike (compared to the regular traffic I get), from 35-50 to 270 visitors on a single day!

As a reminder, all my website’s analytics are privacy-respecting and public, you can see them here.

Something else I’ve tried is shorter articles that are usually reading recommendations of other great articles I’ve read. I’m grouping them under the “Reading Recs” tag and plan to add some filtering in the future.

On the development side, I’ve done a bunch of changes to the website, though none are too visually impactful:

• Added a new Table of Contents component to the longer articles I have. It is auto-generated, responsive, and I think it’s working great! There’s one right here on this post 😁.
• Significantly refactored how blog posts are stored and loaded. I went full steam on Markdown, with all blog posts having their content and metadata stored in Markdown files, and managed inside VS Code with FrontMatter;
  • This included extending Markdown to be able to use some custom elements inside it! Which means that even if I choose to manage posts differently in the future (like using a CMS), I won’t need to change anything in the posts themselves;
• I started using my own image-transmutation package to optimize the images of the website, making sure their quality is good and their size is the smallest possible;
• Swapped the font I use to MacPaw’s Fixel font, a delightful variable font that’s as easy to use as it is to read;
• Added view transitions so that navigating between pages now animates smoothly (Chromium-only, for now);
• Added pagination to posts and a hamburger menu for mobile;

Work Life

This year, I’ve started working full-time for Useful Group, a lovely agency from Illinois, USA, as a web developer building mainly WordPress websites. This was a very interesting development, as previously I was mainly a “web app guy” instead of working on websites, and me having zero experience handling WordPress or PHP. It still felt as a natural step, as I had started to focus more on “the front of the frontend” in recent years, and working with websites allows me to focus on that.

I learned quickly though, and really enjoy the way they work there, and was able to fit in nicely. I particularly enjoyed seeing how you can adapt older, battle-hardened technologies to newer, more modern concepts (like atomic design), and how well everything fits in. It also made me realize how much of what’s “new” in web frameworks nowadays is mainly us going back from SPAs to older concepts.

That might sound bad, but I think it’s actually good when tech comes full circle and goes back to concepts that have worked well in the past, because it means that it has matured. Static/multi-page websites had their issues years ago, which is why SPAs became a popular thing. Of course, SPAs brought their own set of issues and now we’re transitioning back to multi-page websites, but with more mature tooling and with a lot of the original issues solved.

Speaking of static websites, I was contacted by a company that was interested in using my personal website as a template for their own. My website is open source and can be modified by anyone, but they would like me to do the needed modifications, since I was already used to the codebase.

I ended up making a generic blog template instead, based on what my website looked like in that specific point in time. I strongly recommend using that code instead of this in case you’re interested in forking it!

I internally debated for a while if I wanted to keep my website as a fork of that template, or keep them separate. I opted for the latter after realizing that I didn’t want my personal website to be tied up to a template meant to help others. I like being able to experiment here, and didn’t want the onus of having to maintain compatibility and/or having to backport anything there.

Fun

Now the best part: the things I enjoyed watching, playing or listening the most in 2023!

TV and Movies

• Succession is a show that I’ve been recommended for a while, but its synopsis had never struck a chord with me. However, I was bored one day and decided to start watching it. And it’s amazing! The show doesn’t take itself seriously, so it’s as much of a comedy as it is a family drama. It follows the lives of a wealthy family that owns a big media conglomerate, and the patriarch’s health is deteriorating and his children start fighting to be his successors. They’re so out of touch with reality, though, that even mundane situations reach absurd conclusions. Available on HBO/Max.
• Bojack Horseman speaks to me on a really deep level, even more on my 2nd rewatch of the show. It starts deceptively simple, and you think it’s going to be a really funny, albeit kinda generic cartoon. And then it hits you. And hits again. It’s an incredibly emotional show that gives you tears of joy and sadness in equal amounts. It’s a must-watch for anyone that has ever gone through any mental health issues and/or would like to understand them better. Plus, it has one of the best autistic representations on TV! Available on Netflix.
• Severance was a surprise hit for me. It’s a show about a company where its employees have their mind severed in half, with one “personality” that only exists in the workplace, while the regular personality doesn’t remember anything from work and only ever experiences the “good parts” of life. As you can imagine, it goes really wrong really fast. It masterfully keeps you hooked with an ever-increasing amount of mystery, but then the bad part comes: season 1 ends in a cliffhanger, and there’s still no word on when season 2 is coming. So I recommend waiting a bit before watching it. Available on Apple TV+.
• Ted Lasso was one of my favorite shows when I watched seasons 1 and 2 last year, and this year I rewatched it all in preparation for the final season 3. It is the most heartwarming show I’ve ever seen, and even the sadder parts hit you just hard enough to make the heartwarming moments even better. Season 3 was not as high quality as the first two, but it still provided me a lot of joy and the ending was really satisfying. Available on Apple TV+.
• The Last of Us was an absolutely incredible experience - a gut punch every episode, but in a good way. I had played the game before, and while I knew the major plot points before they happened, I was absolutely floored when they happened on the show. Incredible writing, acting, and with just enough tweaks to make it feel like a real TV show and not just a game adaptation. The game’s story was already really good, and I feel like it was greatly improved for TV. Doesn’t mean the show’s story is better than the game’s, but it definitely is better for TV.

Games

• Disco Elysium is one of the most unique games I’ve ever played. It has by far the best dialogue of any game I know, and there are so many branching paths that I think it can be replayed multiple times and still provide an unique experience each time. It is basically an investigation RPG, where you play as a cop with an alcohol-induced amnesia, trying to figure out who you are and who’s responsible for a murder. There’s a lot of dialogue and the majority of it is with other voices in your head (fragments of your psyche). It’s nuts. It takes place in a unique world with a ton of lore, it’s incredibly political and it hits really heavy at some points.

• The Legend of Zelda: Tears of the Kingdom is my game of the year - an incredible step up from what was already one of my favorite games of all time. I wrote an in-depth review of it here!
• Hogwarts Legacy was a pretty good game that unfortunately didn’t seem to understand its own appeal. It does an incredible job of bringing Hogwarts to life, making the entire castle explorable and full of secrets. Every part of it carefully designed and decorated, with so much attention to detail to praise even the most hardcore book fans. And then… it keeps sending you outside the castle to do generic action adventure game things. And compared to all the other games that do that, it’s just okay.
• Bloodborne again. I’ve written about it last year, and I’ve played it again (twice!) this year, to get the Platinum trophy and… I just love this game so much. It’s become my favorite game of all time and just writing this I feel like playing it again. Masterpiece.

Music

• Last year I discovered the album Infinite Granite by Deafheaven, and it’s also been my most listened to album (by far) in 2023. However, I also started listening to other albums by the band and I love them so much. Sunbather and Ordinary Corrupt Human Love especially are gems.
• Shoegazing has become my favorite genre. Wanting to listen to more stuff that sounded like Infinite Granite, I found out about this genre and started building up a playlist on Apple Music, and it’s become my go-to whenever I need to relax, focus or simply listen to great music. If you have Apple Music, you can listen to it too:

Concerts

This year, my wife and I went to 3 amazing concerts! They were all in Porto Alegre, the capital of our state, which is a 2-hour drive from here. They were:

• Bruce Dickinson + Band + Orchestra playing a concert piece composed by Jon Lord from Deep Purple, back in April. They also played some Deep Purple classics and a couple of Bruce Dickinson’s solo songs. Admittedly, I didn’t know the concert piece nor some of the Deep Purple songs, so I went mostly to see Bruce, my favorite singer. It was in a smaller theatre and it was a fantastic experience. I’ll see him again next year, this time on a full solo concert!
• Roger Water’s “This Is Not A Drill” tour, back in November. Absolutely incredible show, a mix of Pink Floyd classics and his own solo work (which I like), and most of all a very clear political statement. I also saw him back in 2018, which was also incredible, and I have no idea which one I’ve liked best. The production value of his shows are simply unmatched and I cried like a baby multiple times.
• Blind Guardian’s “The God Machine” tour, also in November. A smaller venue, but the audience in Blind Guardian’s concerts makes you feel like there are thousands of people with you there. The band is just fantastic and I felt they played extra hard to match the energy of the audience!

2024 Expectations

Time for the predictions - hopefully I’ll get more right this time!

I expect to take big steps towards owning my own house. I really want to stop paying rent and hopefully get a house instead of an apartment. It’s more work, but it’s more fulfilling and freeing.

I expect to write even more on this blog, and continue to expand on the topics I post about. Dev articles aren’t going anywhere, but I don’t always have something to post about in that regard.

Also, I want to add proper support for categories and filtering, as well as search. As I post more, even I am starting to struggle finding something I wrote in the past to reference. Additionally, some code refactoring is always welcome.

I also want to travel a bit next year too - either to the US to meet my work colleagues or to Italy to see my brother. And of course, do some sightseeing!

Wrapping Up

Starting this post, I didn’t think there was much to write about 2023, but I ended up talking about it quite a bit. That’s great! I guess it’s the main point of these kinds of retrospectives - remembering what was noteworthy about the year and reflecting on it. I hope you enjoyed the read and see you next year!

isolation is a special property whose sole and unique purpose is to create a new stacking context on the element it is applied to, with no other side-effects. 😄

– Francesco Vetere, in The CSS property you didn’t know you needed

You learn something new everyday! Today, I learned about CSS’s isolation property. I learned it through this Francesco Vetere post, which I highly recommend you to read, as he explains it way better than I do.

Basically, isolation: isolate is a very simple way of creating a stacking context in CSS. Stacking context is basically a “reset” of how z-index works, so you can manage indexes in a smaller scope.

Francesco gives a perfect example of a card element with a decorative element in its background. To make that element appear below the text, you’d naturally add z-index: -1;, but that means the element would show below the card as well! By creating a new stacking context on the card, you can safely manage z-index without worrying about any child element appearing below/outside its parent.

I saw this on Matt Birchler’s blog, and then saw the multitude of people posting about their default apps in their own blogs. I’ve never jumped on a trend like this before, so I figured this would be a fun first one to do 😅.

I guess you can say my choices are pretty vanilla; I’ve been through my phase of trying a specific app for everything, but nowadays I’m settling down on things that actually work.

• 📧 Mail service: Fastmail
• 📬 Mail client: Apple Mail (Mac and iPhone)
• ✅ Tasks: Notion/TickTick
• 📰 RSS service: Readwise Reader
• ⌨️ Launcher: Raycast
• ☁️ Cloud storage: iCloud
• 🌅 Photo library: iCloud
• 🌐 Web browser: Arc on Mac, Safari on iPhone
• 📆 Calendar: Apple Calendar
• 📖 Reading: Readwise Reader
• 🌤️ Weather: Apple Weather
• 🎙️ Podcasts: I barely listen to any, but when I do, Apple Podcasts
• 🎶 Music: Apple Music
• 🛹 Clipboard manager: Maccy
• 🔐 Passwords: 1Password
• 💸 Budgeting: Apple Numbers
• 🐘 Mastodon: Ivory (Mac and iPhone)
• 💁🏻‍♂️ Social: Mastodon and Lemmy (sporadically)
• 🎮 Gaming: PS5
• 🖼️ Screenshots: CleanShot X
• 📝 Notes: Notion
• 🧮 Code Editor: Visual Studio Code
• 👨🏻‍💻 Terminal: iTerm 2
• 🔎 Search: Kagi

Throughout my life, I’ve never really felt like I belonged somewhere. I could see parts of myself belonging to some groups or places, but never really felt like I was truly a part of anything.

During my childhood, I had some friends, and there was a group of kids/teens in my street that I would often hang out with, but to me it was always because of the activities we’d do, and not because I enjoyed being around them, or thought I was similar to them. We’d play football (soccer) in the street, play with our Beyblades or maybe play some Winning Eleven on our PS1s, but whenever the activity wasn’t one of these things, I just didn’t want to be there. I felt like an outsider that was just part of that group temporarily.

Now, this probably (certainly) is related to me being on the Autism spectrum (something I didn’t know back then), which does literally mean I wasn’t like them. The thing is, that feeling has kind of followed me through my whole life.

Local Culture

I live in the southernmost state of Brazil, a state that is known to have a local culture that’s very different from the rest of the country. Nowadays, I know that there’s no such thing as an homogeneous Brazilian culture. Brazil is pretty much an amalgamation of thousands of different cultures, indigenous, african, european, asian, and the results of all of those meeting together. That’s what makes it great. But back then, to me, Brazilian culture was whatever was shown on national TV (I didn’t have access to local channels). And honestly, nothing shown there looked like anything we had here. So, it was hard to see myself as part of this country.

Around 10 years ago, I started a long-distance relationship with a girl that lived about 700km (430 miles) from me. Against all odds we made it work and we’re now happily married! Anyway, I remember when her parents came to visit my city for the first time. Her dad loved the “gaúcho” culture, and was looking forward to coming to my state and seeing firsthand what it was like, and to eat an authentic gaúcho barbecue. Little did he know… that’s not what it’s like here either.

[!info] “Gaúcho” is how the people born in the state of Rio Grande do Sul (like me) are called. The name is also used a lot in Uruguay and Argentina, since those countries share a border with my state and also share a lot of the same culture.

You see, I do live in the state known for all that stuff, but the region I live in was populated waaaay later in history, by…. italian immigrants.

Historical Context

Back in the 1800s, the Empire of Brazil wanted to populate some areas of the south, partly to protect the land from neighboring countries, partly to push away the indigenous people. But what they also wanted was to “whiten the population”, so they started the process of bringing europeans from countries currently going through economic crisis, and bringing people that wanted to start over here. In this region, the majority came from Germany (in the 1820s), and Italy (in the 1870s).

This region was unpopulated before because it was hard to do so - it is very mountainous and with really dense forestation, so nobody wanted the trouble of building things here - not when they had better (easier) options still. When the immigrants came, they didn’t have much of a choice. They didn’t speak Portuguese, and all the best pieces of land were already taken. The Serra was the only place they could build on and own a piece of land. From what I’ve heard from my grandparents (and they heard from theirs), the government didn’t do much to help, so they pretty much grew here in a partially isolated manner - with their own culture brought from their origin countries and the life they built here.

So, when my in-laws came here for the first time, they were surprised (and somewhat disappointed) that it was nothing like what they thought it would be. Instead of barbecue everywhere, we eat pasta and polenta. The accent was different. The architecture was different. Of course, since I live in the biggest city of the region we did eventually start getting drops of culture from everywhere, most of it being from the gaúcho culture, since it’s the nearest, but still it’s definitely not as native as they had expected.

I’m not really a fan of going out and seeing all of this culture firsthand (at least I wasn’t; as I’m getting older I’m starting to enjoy it more), but I did have my fair share of family gatherings and events that definitely had italian roots. So, whenever I saw people talk about Brazil or my state, I could never see myself or the people around me in any of it. My logical conclusion is that I didn’t belong to my country or state at all, and maybe, since I was an “internet citizen” since I was a kid and had a lot of (virtual) contact with cultures from around the world that felt more like me, maybe my place in the world would be somewhere else!

During my late teen years and early 20s, this idea of leaving the country was always present, and I’ve tried dipping my toes a couple times. I tried going to Canada to study English for a month to see how I’d like there, but unfortunately my visa was denied twice, and I gave up. Then I went to Europe for tourism, which was really fun! I thought that since my family came from there, then naturally that’d be the place I’d belong to.

Last year, I moved to Italy for 3 months, in order to get my italian citizenship recognized. The original idea was to stay there after those 3 months, find a place to live, and leave Brazil behind. But, as the date approached, my wife and I realized we weren’t really comfortable with the idea of leaving everything behind and jumping into the unknown. So, we decided to use those 3 months as a test to see how much we liked it, and if we missed Brazil at all. We were wise.

Those 3 months were… tough. Of course, I was naturally uncomfortable with all the changes involved in moving across the Atlantic, but we moved into a really, really small town (with around 300 people), stayed in a house that had at least 300 years and we were in the middle of nowhere. Now, I’m really trying to not be unfair and judge an entire country by just a small town, and I do believe Italy is a great place to live. But, after all that, I think the biggest feeling my wife and I had was not that we hated where we were - but that we missed our home so much.

Suddenly, it all became clear. Even though we lived in an italian-brazilian place, it still was brazilian. That mix of different people might be more subtle than in other parts of the country, but it’s still there. And it’s still amazing. The people, the weather, the food, the music, it’s all unique to this small, very special part of the world. Special because it’s mine.

As a recently diagnosed autistic person, I’m now learning a lot about myself, and I’ve realized I’ve always struggled with my sense of identity. How can I learn who I am if I never see much of myself anywhere? It’s not an easy journey, and honestly I don’t think it has an end. Our identity changes all the time and is molded by what’s around us. This feeling of belonging is unique to each person, some find it at an early age, some never do. I always thought I’d be the latter.

Today, I was watching local TV and they were covering a festival celebrating local culture. More specifically, the italian-brazilian culture that developed here after all these years. I watched that and thought: “Yeah, I belong here”.

Likewise, I suspect most people on opposing sides of the Tailwind debate actually completely agree on Tailwind itself. I don’t think our divide centers on atomic CSS, or utility classes; I think the contention comes from valuations we made long before we ever chose our tools. Where one of us sees a selling point, the other sees a flaw.– Josh Collinsworth, in Classic rock, Mario Kart, and why we can’t agree on Tailwind

I’ve found this gem of an article a while ago, and have been thinking constantly about it ever since. I think its idea of things being good and bad for the same reasons is spot on - and also the reason why we’ll never agree on them.

I also dislike the idea of Tailwind, which made me never interested in using it. I prefer having total control of my styles and enjoy a clear separation between templates and styles. This, I guess, makes me a “crafter”.

Back when I started using the internet, most of its content was split between millions of different websites and platforms. They were all accessible via search engines, and there were plenty of websites that existed only to aggregate content from others. There were social networks (Orkut was a huge hit in Brazil), but their scale never reached the levels we see today, and overall, if you wanted to see anything, you’d have to look for it.

Cut to today, most of the content is either hosted on a handful of platforms or at least found inside them. Large scale social networks and search engines that are increasingly displaying information without requiring you to open another website have made it incredibly easy to find content you’d never find otherwise.

This convenience has led to a boom in internet usage. Before, you had to be a “tech person” or at least slightly interested in tech to be able to understand how the internet worked, and then be able to find the good stuff. This transformation in how we find and see things would be great, if not for a huge, non-obvious problem: we are now locked in to those platforms.

Ideally, that wouldn’t be a big deal. Most of those platforms are free, right? Well, not really. You pay with your data, with being the subject of psychological experiments, and with the price of becoming dependent on it. If you don’t know what I’m talking about, I highly recommend watching The Social Dilemma documentary on Netflix (I know, another locked-in platform. But there’s some nice content on the website itself).

To many people, deleting a Facebook/Instagram/Twitter account would mean they will no longer see updates from things they care about (mixed with things they don’t). To many journalists/writers/brands, deleting an account would mean losing the majority of their traffic. Some companies even base their entire business on a single platform, as can be often seen in Brazil where WhatsApp is often the only way to contact/hire/buy something.

So, can we really call the web open, or free? If we are virtually obligated to sign up and* *accept the terms and conditions of at least one overly powerful corporation to be able to have a “normal life”, can we really say we have a choice?

Maybe.

Swimming Against The Tide

There’s been quite a resurgence of some technologies and concepts that go against all that. Mostly, in the form of personal blogs and them being accessed via RSS readers. Plus, decentralized social media is now a thing and has gathered a relatively significant audience, especially since Twitter’s destruction.

If you don’t know what RSS readers and decentralized social media are, yeah, that’s their main issue. They are systems that aim to give you some of the convenience of social media feeds back, but without the downsides!

• RSS is a method of sharing content in a standardized way. A lot of websites have RSS feeds (including mine), which are files that hold the content of, for example, all the blog posts. This means that if you use a RSS reader app, you can read whatever I write, and all the new posts will be automatically delivered to you! You just have to subscribe.
  • RSS has existed for a long time, and most websites had a feed. When social media got popular, however, the number of websites with a RSS feed started getting smaller. Nowadays, it seems that the number of websites offering them has started growing again.
  • There are a bunch of RSS reader apps, in all shapes and forms. Some of the ones I know are Feedly (free, for all platforms), NetNewsWire (free, for iPhone, iPad and Mac), Feedbin (subcription, for Web, iPhone and iPad) and the one I use is Readwise Reader (subscription, for Web, iPhone and Android)
• Decentralized Social Media are, as implied, social media services that communicate with one another. I wrote a few months ago about my migration from Twitter to Mastodon, and Mastodon is only one of many in an universe of projects that can talk with one another. What does this mean?
  • It means that, even if I have my profile on a specific Mastodon server, I can still follow and interact with people that created their account on a different social media. So, nobody is virtually obligated to have an account in a specific place;
  • It also means that I can take all my connections with me in case I wanna move from one service to another. I’m never stuck using a service I don’t like just because my friends or followers are there;

My use of the internet is now heavily based on both of these systems; I follow some news websites’ RSS feeds so I can read the news in a single place while drinking a cup of coffee; I follow cool people’s blogs via RSS so I can read all the cool stuff they’re writing about; and I can also follow the same cool people on Mastodon (even though some use something else) to see they complain about the heat or make bad jokes in their social media.

This is very nice! And the best thing is - if I ever wanna start using another app, or change devices, I can do that without losing anything. It’s liberating. It’s the Open Web.

But how feasible is it?

Most of the previous section was spent explaining concepts. They’re not really that complex, but the fact that they need any explanation at all is already a sign that they’re not feasible for “the masses”.

You see, if you are still reading this, you’re probably in a small group of people that actually cares about their online experience. For most people, being locked in a service isn’t really a concern, which is why those services grow so big. It’s unfortunate, but the convenience those services provide is (or was, at some point, when they got us hooked) so big that I can’t think of anything that could create any kind of mass exodus from them. The closest we’ve ever got to it was the Twitter → Mastodon migration, and that was around what, 10 million people? 10 million is a lot for Mastodon, but only a fraction of Twitter’s userbase.

But honestly, that’s fine. As I’ve recently started to realize more and more, it really doesn’t matter if what I’m using or doing is popular or not. If I do things a certain way, the only person it needs to work for is me. And honestly, the social bubble I’m in is really fond of the Open Web too! There are nice discussions, and it never feels like a small group. In fact, there’s always new people around!

I think I’m gonna create a page with suggestions of nice RSS feeds to follow. One more thing to my to-do list, I guess 😅

[!success] This review is spoiler-free, so you can safely read it even if you haven’t played or finished the game yet.

The Legend of Zelda is my favorite game series of all time. Understandably, I was pretty excited for Tears of the Kingdom to come out. And it took its time! Announced in 2019, two years after the release of its predecessor (Breath of the Wild), a lot of people thought it would have a shorter development cycle, considering it seemed to feature the same world as Breath of the Wild’s, the graphics were the same, and the engine was already done. How wrong we were!

Instead, Tears of the Kingdom (which I’m gonna call “TOTK” from here on for brevity) had at least a 5-year development cycle, almost as long as BOTW’s. We had a global pandemic in the meantime, which definitely slowed things down. Still, it was a lot of time for “just a sequel”. And, to be honest, while the first trailers were exciting because they pointed to a return to BOTW’s world, they also were a bit lackluster, as they didn’t show much new.

You see, Breath of the Wild’s release was a pivotal moment in the gaming industry. In theory, it didn’t introduce a lot of new things - open world games have existed for a while, even the first Legend of Zelda from 1986 was like that! But in practice, it brought a world that was so fun to explore, so seamless to traverse, and its gameplay had so many possibilities, that there was nothing quite like it. It also reinvented the series, which had been stagnant for some years, with games of high quality but that weren’t really hitting the mark.

That was in 2017, though, and games have evolved since then. With BOTW’s relevance and success, a lot of games started taking it as an inspiration (and almost every open world game was compared to it somehow). So, when TOTK was shown and it didn’t seem to offer a lot new, I was a bit worried it’d be more of the same.

And then BAM! that final trailer shows up.

It is incredible! It shows new story bits, but more importantly, a lot of new gameplay mechanics, abilities, and some of them are so unique that I don’t think anyone could have imagined they’d be in a Zelda game. And so, after years of waiting for the game to come out and an extra month of waiting for my copy to be delivered, I finally played it.

The New Abilities

The game begins quite differently than it did in BOTW. In this game, the idea of being able to go anywhere anytime is still present, but not taken to extremes (no, you can’t go straight to the final boss right after the tutorial). We have a linear story-focused tutorial, where the main plot begins, and then we are introduced to Link’s new abilities in this game. They are a huge step up from BOTW’s abilities, which were fun but feel very limited now.

There are 4 main abilities:

• Ultrahand, which lets you manipulate most objects in the game, and then stick them on other objects. It’s an improved version of Magnesis from BOTW, and probably the one you use the most;
• Recall, which lets you make an object go back in time (and space). You can make some really great combos with this and Ultrahand, like using Ultrahand to hold a platform up high, then let it fall, and use Recall to have it go back up with you on top of it;
• Fuse, which lets you fuse any material to your weapon/shield/arrows, improving its attack power or giving some status effects;
• Ascend, which lets you swim through any solid material, as long as its right on top of you. Honestly, I thought this one was going to be the lamest one, but it was the biggest surprise! I used it so much and always felt smart when I did;

The abilities are less specialized, but more powerful, which gives you so much freedom to use them! 80h into the game, I was still figuring out new ways to use and combine them.

Improvements over BOTW

I believe TOTK fixes or remediates all of BOTW’s problems. The story isn’t told only through a series of flashbacks (though flashbacks are still a thing); the world feels much more alive (which makes sense after BOTW); the soundtrack is more varied; and weapon durability is fixed.

Weapon durability is fixed? Does that mean they don’t break anymore? No, actually they break much faster now 😅. You see, the main problem with BOTW’s weapon durability system is that it was very frustrating. Fighting monsters was often not worth it because it’d make your weapons break, and there was a big chance that whatever new weapons you’d get from fighting them would be worse.

In TOTK, all weapons are now “decayed”, which means their durability is even lower. But, remember the Fuse ability? Whenever you fuse a material to your weapons, they become stronger and more durable. And most of the better materials are obtained from… killing monsters! So, chances are, if you fight monsters you’ll probably end up with better materials that make your weapons stronger than before! It’s as it should be.

I admire that, after all the backlash this system had in BOTW, they didn’t simply remove it, and instead figured out a way to make that game system enjoyable and unique. Mix-and-matching weapons and materials was a fun part of the game, and made it a lot more varied.

Hylian Engineering

Ultrahand lets you attach objects to each other, and there are a ton of objects in the world, including new Zonai devices, which include things like motorized wheels, steering sticks, and fans. They could have half-assed this mechanic and limit how you can attach things to each other, or the number of objects you can use. But nope, they went all the way. That final trailer gives you a taste of just how flexible it is, with Link riding a tank made of stone, with wheels and arms (at the 2:33 mark), and that only scratches the surface.

I had a lot of fun building things! Honestly, most of the stuff I built either didn’t work or was a car that was slower than walking, but the fun of experimenting was worth it. By the end of the game, I was already building flying machines to cross Hyrule with.

Story

It’s hard to talk about the story without spoiling, but I just want to say: it is very good. Even with all the freedom and gameplay possibilities of the game, it doesn’t feel like the story takes a backseat this time. It has incredible moments, great pacing, and honestly one of the best endings I’ve ever seen in a game. It brings back some Zelda conventions but also has some unexpected twists that keep it from being predictable. Zelda games were never known for having a super complex and nuanced story, but as far as heroic adventure games go, this is one of the best.

Problems

This review has been very positive so far, which doesn’t mean the game doesn’t have problems. But honestly, they are a bit hard to identify now because they’re very minor and they don’t stain the overall experience. You might notice them while playing, but they don’t stick out in your memory after you play, if that makes sense.

The main issue of the game might be a huge deal to some people, but less so to others. The thing is, this game has so much of everything! There are so many mechanics, sidequests, places to explore, things to find and collect, stories to see, people to save. And honestly, besides some of the collectibles, which are understandably many because the world is so big, all of them are pretty high quality. I never found a sidequest that I just didn’t want to do.

The problem is, it can become quite overwhelming. If you’re one of those people that feel overwhelmed by having many (optional) things to do, you will feel overwhelmed with this game. When I first started playing I felt like that, and I wanted to do everything, because it was so good. Of course, eventually the feeling of having to do everything made it a bit of a chore to play. I realized this and also realized that the game was not making me do any of those things at all. It was just giving me the freedom of choosing what I liked best. So, I started focusing on some of my favorite things and decided to progress the main story until I got to the ending.

Not everyone will be able to do that, though. And I can totally see those people giving up on the game because it’s just too much.

Verdict

Tears of the Kingdom is the ultimate Zelda game - and to me, also the ultimate open-world game. I finished the main story and did a lot of side content, but after 95 hours, I only played a fraction of what the game has to offer.

I believe its impact is not as big as Breath of the Wild’s was, though, at least not to me personally. That was a rebirth of the series, and it came at a moment of big changes in my life. TOTK, in comparison, doesn’t fully reinvent anything, but instead improves (greatly) all the reinventions that BOTW did. It’s not fair to judge a game by its impact alone though. If every single game reinvented everything, then reinvention wouldn’t matter.

If BOTW was a 10/10 to me, because of its impact and just how good it was, then there’s no way TOTK, which improves on BOTW in every single way, could be anything less than that.

So, yeah, @@Tears of the Kingdom is a 10/10@@. It is a masterpiece, one of the best games I’ve ever played, and I’ll remember it fondly for years to come. It will be very hard for the Zelda team to ever top this game, but if anyone can do it, it’s them.

If you’re like me, you’re constantly jumping between projects, and often those projects need different versions of NodeJS. Ideally, all of them would be using (or compatible with) the latest version, but in reality a lot of those projects are old and you just don’t have the time to update them and make sure all dependencies play nice.

When jumping between them, it’s usually a pain to remember which Node version to use and have to switch to that version. Tools like nvm make it easy to switch, but it’s still a manual task that we often forget to do.

Turns out, you can use nvm to automatically switch the NodeJS version when you cd into a folder! All you need is a file in your project and a few lines of magic in your bash/zsh profile.

Configuring your shell profile to change Node versions

The first step is to edit your shell profile file, so that every time you cd into a folder, it checks if there’s a .nvmrc file and if so, it switches to that Node version.

If using zsh

If you’re using zsh, you can add the following to your .zshrc file:

~filename .zshrc

# Automatically use Node version specified via .nvmrc file

# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

If using bash

With bash, you can add the following to your .bash_profile file:

~filename .bash_profile

# Automatically use Node version specified via .nvmrc file

# place this after nvm initialization!
load_nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}

if [ -n "$BASH_VERSION" ]; then
  PROMPT_COMMAND="load_nvmrc; $PROMPT_COMMAND"
fi

Creating a .nvmrc file

Inside your project folder, create a file called .nvmrc and add the Node version you want to use. For example, if you want to use Node 14.18.0, you’d add the following to the file:

v14.18.0

You need to do this for every project that needs a specific NodeJS version. If you don’t add a .nvmrc file, nvm will use the default.

So, today I was doing the dishes and decided to listen to some music on my headphones. I was in the mood for some Iron Maiden, so I shuffled my playlist of my favorites from them (which includes almost every one of their songs 😆). The first track to play was Drifter, the last song from their second album, Killers. It’s a really good song so I decided to play the entire album instead.

I’ve listened to this album countless times, but I’d never really paid attention to the lyrics. So, as the album played, I was surprised by the small plot twist at the end of Murders In The Rue Morgue, which was one of the songs I never really paid much attention to the lyrics. I was like “wait, what?!” and decided to pay more attention to the lyrics of the rest of the album. And then it hit me: @@Killers is a concept album@@, with all songs being sung by the same character!

[!warning] The album touches on the subjects of murder, suicide and drugs, so be wary of proceeding if this is a sensitive topic for you.

So, let’s go through each song and see how they fit together. Feel free to follow along with the music:

The Ides Of March

This song is instrumental, so there’s not much to analyse here (the music is awesome though!). All we have is the name of the song, which refers to the fate of Julius Caesar, most famously retold by Shakespeare, after he was warned to “beware the Ides of March”; he was brutely murdered on that date.

So, yeah, the album starts with a warning of what’s to come. It’s no secret that a concept album called “Killers” is going to be about murder, right?

Wrathchild

Here we get introduced to the narrator (which we’ll call “Wrathchild” from now on). He seems to have had a very troubled childhood, as seen below:

I was born into a scene of angriness and greed Dominance and persecution My mother was a queen, my dad I’ve never seen I was never meant to be

This obviously isn’t good and a child that goes through that kind of trauma will likely have issues in the future - as seen in the next verse, where the Wrathchild talks about an obsessive wish to meet his father.

And now I spend my time looking all around For a man that’s nowhere to be found Until I find him, I’m never gonna stop searching I’m gonna find my man, gonna travel around (…) Say it doesn’t matter, ain’t nothin’ gonna alter The course of my destination know I’ve got to find some serious peace of mind Or I know I’ll just go crazy

Already feeling the consequences of a troubled childhood, the Wrathchild starts traveling around in search of his father. Which leads us to…

Murders In The Rue Morgue

Honestly the lyrics of this song are much more straightforward since it’s a more direct narration of what’s going on. I’m gonna bring over only the most relevant parts:

I was strolling through the streets of Paris And then I heard a piercing scream And I rushed to the scene of the crime But all I found was the butchered remains Of two girls layin’ side by side

The Wrathchild (who was traveling around in search of their father) is now in Paris and suddenly finds the scene of a murder in the street.

There’s some people coming down the street At last someone heard my call Can’t understand why they’re pointing at me I never done nothing at all But I got some blood on my hands Because everybody’s shouting at me I can’t speak French so I couldn’t explain And like a fool I started running away

People start accusing the Wrathchild as the murderer, and he can’t defend himself since he doesn’t speak the local language. He starts running away out of panic, and then starts being persecuted by the law, which makes him flee France through the southern border, to Italy.

If I could go to somebody for help To get me out of trouble for sure But I know that it’s on my mind That my doctor said I’ve done it before

… Ooooh! That last line is a big plot twist! This means that the Wrathchild might actually be the murderer, he just doesn’t remember it, and his doctor has told him something similar has happened before. To me, this strongly implies Dissociative Identity Disorder (DID), which often originates from trauma (the troubled childhood), and would explain how the Wrathchild could have murdered someone and not remember it. It also explains the “I got some blood on my hands” line earlier in the song, which apparently wasn’t a metaphor…

It’s also worth noting that it seems that the killer personality might be the one that’s causing the urge to run away, as that personality knows what it’s done.

Another Life

As I lay here lying on my bed Sweet voices come into my head (…) There’s a feeling that’s inside me Telling me to get away, yeah But I’m so tired of living I might as well end today

This song’s lyrics and pretty short. Here, the Wrathchild talks about hearing voices in his head, and these voices are telling him to “get away”. It’s probably the voice of the killer personality from the previous song. The Wrathchild is tired of living and contemplates suicide.

Genghis Khan

This is another instrumental song and doesn’t really tie in to the rest of the album’s theme - except for the fact the Genghis Khan killed a lot of people, I guess?

Innocent Exile

My life is so empty, nothing to live for My mind is all confusion, ‘cos I defied the law When you weren’t there to help me, I lost my mind and ran I never had no trouble before this all began, yeah

In this song, the Wrathchild is still suffering the consequences of the Murder in the Rue Morgue. They claim their mind is confused (which makes sense because of DID).

Another really interesting line is when he says he “never had no trouble before this all began”. Usually cases of DID occur because the mind is trying to protect itself from the trauma. So, it makes sense that this personality feels like it never had any trouble before, as it ==doesn’t remember any of the trauma==. All the bottled up anger was instead channeled into the killer personality.

They say I killed a woman, they know it isn’t true They’re just trying to frame me, and all because of you, yeah

This last line feels like one personality talking to another. The Wrathchild appears to be aware that the Killer exists, and is talking directly to it. However, it doesn’t seem like he realizes that they are in fact the same person.

Killers

In the title track, the lines between the personalities start to blur. Think about it - so far there has been only one killer in the album, but the track is called Killers, plural.

The first verse of the song is narrated by the Wrathchild:

You walk through the subway, his eyes burn a hole in your back A footstep behind you, he lunges prepared for attack Scream for mercy, he laughs as he’s watching you bleed Killer behind you, his blood lust defies all his needs

While the second verse is narrated by the Killer personality, but pay attention to the last line:

My innocent victims are slaughtered with wrath and despise The mocking religion of hatred that burns in the night I have no one, I’m bound to destroy all this greed A voice inside me compelling to satisfy me

The other 3 lines are sang by the Killer, but that last one seems to be sang by the Wrathchild, since the voice inside him is the Killer.

At the end of the song, the line between the two personalities seem to have disappeared completely. It’s really similar to the first verse of the song, but the pronouns are all mixed up now, and we don’t really know who is talking anymore.

You walk through the subway, my eyes burn a hole in your back A footstep behind you, he lunges prepared for attack Scream for mercy, he laughs as he’s watching you bleed Killer behind you, my blood lust defies all my needs Ooh look out, I’m coming for you!

🤯

Prodigal Son

This song was the hardest to make sense of, but I think I figured out how it fits overall. In this song, the Wrathchild seems to be back in control, but has become aware of the Killer personality, and aware that they are the same person.

A “Prodigal Son” is a person that leaves home to live a reckless life, and then makes a repentant return. This is exactly what the Wrathchild is doing in this song. He is repenting for the murders he committed, and is scared of his inner urges and scared of ending his own life.

Listen to me, Lamia, listen to what I’ve got to say I’ve got these feelings and they won’t go away I’ve got these fears inside that’ll bring me to my knees Oh, help me, Lamia, or I’m sure I’ll die, oh, please I feel unsettled, now I know that I’ve done wrong I’ve messed around with mystic things and magic for far too long I feel I’m being paid with this nightmare inside me The devil’s got a hold on my soul and he just won’t let me be

Here it becomes clear that the Wrathchild now understands better what’s been going on, and starts asking Lamia for help. He mentions “mystic things and magic” which could be a reference to the uncommon and unknown nature of his disorder (which could be seen as some sort of “magic” or “pact with the devil”). Maybe he sees the Killer as the devil taking hold of his soul.

But who is Lamia? I’ve found some info about her being a monster in Greek Mythology. But what caught my attention was this line from the Wikipedia article:

The “Lamia” was a bogeyman or bugbear term, invoked by a mother or a nanny to frighten children into good behavior.

It makes sense for a traumatized person to recall his childhood and think of the “bogeyman” that used to be used to scare him into behaving. The Wrathchild definitely feels like he deserves some sort of punishment in order to atone for his sins.

Purgatory

This absolute banger of a song has some cryptic lyrics, but I’m confident they are about the Wrathchild trying to get away from his pain by resorting to drugs, possibly LSD.

I split my brain, melt through the floor Over clouds my mind will fly Forever now I can’t think why My body tries to leave my soul Is it me, I just don’t know

“Split my brain” could be a reference to the DID, and “melt through the floor” could be a reference to the effects of LSD. The sensation of the soul leaving the body is a commonly reported effect of the drug.

Oh, another time, another place Oh, another smile on another face Please take me away, take me away, so far away

These effects, while confusing, appear to be a welcome escape from the Wrathchild’s pain. He seems to be able to picture a different life where he is actually happy, and wants to be taken to that place. The name of the song, Purgatory, makes a lot of sense in this context, as he seems to be in a state that’s not really good, but it’s at least better than the life he’s had.

Drifter

The last song of the album depicts the Wrathchild after being severely affected by the drugs. He is now a drifter, and seems to be wanting to “cure” other people of their pain by bringing them over to the same “purgatory” he’s been living in.

Gonna get you feeling so secure Listen, child, don’t you see there’s a cure? Anyway, got to get you away Feels so good, think it’s gonna be a new day

The song (and the album) then ends with the Wrathchild fading out “singing his song”. It’s not really a happy ending, but one that makes a lot of sense, doesn’t it?

Wrapping up

So… that’s it. I hope you enjoyed going down this rabbit hole with me. I’m pretty sure a lot of this wasn’t intended by the band, but it’s my interpretation and that’s good enough for me.

Up the Irons! 🤘

With the release of Firefox 110, CSS container queries are now supported in all major browsers! It has joined Chromium (since v105) and Safari (since v16) in adding support to what I consider a revolution on responsive web development, especially to people who build UIs in a component-driven way.

What are container queries?

Usually when we do responsive development, we use media queries to change the layout of our components based on the viewport/screen/window size. So, for example, we can have a card component that’s displayed like this on a laptop:

And, if the window size is smaller (for example on mobile), we can use a media query to change how the card is displayed:

This can be done with code like this:

<style>
	.card {
		display: flex;
		flex-direction: row;
	}

	@media (max-width: 600px) {
		.card {
			flex-direction: column;
		}
	}
</style>

<div class="card">
	<!-- card content -->
</div>

So far, so good. But what if the card doesn’t take up the entire width of the screen? We might want to display it in a sidebar with much less horizontal space, and have another card in the main content area, taking up the rest of the screen width. Here’s how we want it to look:

But how can we do this, if the screen is not small enough to trigger our media query and display the card’s contents vertically? Previously, the ways of doing this were either to use JavaScript (by checking the window width every time it changes and then toggling a class in the card component) or using flex-wrap: wrap, which is better than using JavaScript, but really hard to get right.

This is where container queries come in. With container queries, we can change the layout of our components based on the size of the container they’re in. So, instead of using the viewport size to control how the card is displayed, we can use the size of the card’s container.

How to use container queries

Starting from the problem described above, we can use container queries to fix it like this:

<style>
	.container {
		/* A containment context needs to be declared on the container element */
		container-type: inline-size;
	}

	.card {
		display: flex;
		flex-direction: row;
	}

	/* 
    Instead of @media, we use @container to use its size instead
  */
	@container (max-width: 600px) {
		.card {
			flex-direction: column;
		}
	}
</style>

<div class="container">
	<div class="card">
		<!-- card content -->
	</div>
</div>
<div class="container">
	<div class="card">
		<!-- card content -->
	</div>
</div>

Now, if the card’s container is smaller than 600px, the card will display its contents vertically. If it’s larger, it will display its contents horizontally.

Nested Containers

In situations where we would have nested containers, things can get a bit messy. That’s why you can also name a container, using the container-name property, and then use that name in the @container rule. In this example, we want the card to use the .outer-container’s size as a base, instead of its immediate parent container’s size:

<style>
	.outer-container {
		container-type: inline-size;
		container-name: outer-container;
	}

	.inner-container {
		container-type: inline-size;
		container-name: inner-container;
	}

	.card {
		display: flex;
		flex-direction: row;
	}

	@container outer-container (max-width: 600px) {
		.card {
			flex-direction: column;
		}
	}
</style>

<div class="outer-container">
	<div class="inner-container">
		<div class="card">
			<!-- card content -->
		</div>
	</div>
	<div class="inner-container">
		<div class="card">
			<!-- card content -->
		</div>
	</div>
</div>

Easy, right?

Fallback for older browsers

As mentioned before, the latest versions of all major browsers support this feature. However, some users might take a while to update their browsers and your site might look broken in the meantime. To avoid this, you can add a feature check in your CSS that checks for container queries support and only apply the styles if the browser supports it:

@supports (container-type: inline-size) {
	/* container queries styles */
}

@supports not (container-type: inline-size) {
	/* fallback styles */
}

As for fallback styles, I recommend giving flex-wrap: wrap a try. It’s not that easy to use, but you can emulate the behavior of container queries in a way that’s good enough for the users who haven’t updated their browsers yet.

Wrapping Up

Years ago, when I started learning about responsive development and working with components, I eventually hit a barrier when I couldn’t find a good way of making components adapt to their size like this. Which is why I’m so excited this is finally happening! It’s an exciting time to be a web developer and I can’t wait to see what’s next.

Have you ever crafted a nice hover effect for an element in your website, then opened it on mobile and saw that effect erroneously appear when that element is tapped on? That’d be nice perhaps, if it weren’t for the fact that the effect just… stays there.

That happens because touch-based browsers apply the hover effect to an element when it’s tapped on regardless of hover capabilities and keep that effect active until you tap something else. Why do they do this? My guess is backwards compatibility, as many websites built with a mouse cursor in mind can hide important information behind a hover action, like for example displaying a tooltip.

Luckily, if you want to avoid having the hover effect applied when it shouldn’t be (and instead using :focus and :active selectors properly), there’s a CSS media query to help with that:

@media (hover: hover) {
	.my-component {
		/* Styles here */
	}
}

If you wanna do the opposite (add styles only to devices that do not support hover), you can use hover: none instead:

@media (hover: none) {
	.my-component {
		/* Styles here */
	}
}

And there you go! This is a nice thing to keep in mind whether you build mobile-first or desktop-first, as adding that media query to hover styles at the same time you’re developing the styles themselves will avoid any unintended effects.

In a world with tons of business requirements, conversion metrics, and a stampede of new technologies, front-end development can easily become oblivious of one thing: where our code runs.

[!info] When I say front-end developer, I don’t just mean those who work on the web. I mean everyone who writes code that runs directly on a user’s machine - be it a website, a mobile app, a desktop program, or even an IoT driver.

Software development is hard. And not just because of coding itself (which might be the easiest part sometimes), but mostly because in the end, developing commercial software is a great balancing act. We need to balance time, quality, features and expectations all the time.

In an ideal situation, we should have all the time we need to make sure all our components are bug-free, testable, accessible, generic, performant and intuitive. The main problem is, developers are often the only ones who read the code, and therefore the only ones in a company that care about more than 2 of the items above.

Still, it’s valid to take a shot every once in a while and try to push for higher standards. ==In a way you’re borrowing the user’s machine to run your code==, and if you care about your user you wanna make sure that code is the best it could be.

I’m one of the many people that stopped using Twitter after the latest… 💩 developments since it was purchased by Elon Musk. My account still exists, but I’ve deleted all of my tweets and uninstalled the mobile app, and haven’t opened the website in a good while.

Like many, I’ve moved to Mastodon, and so did ~90% of the people I used to follow. Initially it did feel a bit rough! This forced change required me to adapt and learn how the platform works. But I’m glad I did it!

Nowadays my Mastodon community is almost the same as my previous Twitter one, with a few added people, but it feels tighter. It’s hard to explain, but it seems like I feel much closer to them. I guess the lack of a recommendation algorithm (timeline is always in reverse chronological order) makes people actually see each others’ posts, and liking/replying/boosting(retweeting) is way more common.

There’s one category of Twitter account that hasn’t really moved to Mastodon yet: brands. I used to follow some brands on Twitter just to keep up to date on stuff, and brands like Notion and Arc do a great job with their accounts! But I’m not sure I wanna see that on Mastodon, at least not on that level. The best part of it is how it’s built and used by real people, and not brands or influencers simply seeking engagement. You know, kinda like Twitter in its early days.

If you wanna follow me in there, feel free to do so! I’m on hachyderm.io/fantinel , or you can search me in there by @fantinel@hachyderm.io. Happy tooting!

2022 is ending and it brought a lot of changes to the lives of many - me included. I’m not able to say all of them were good, but they also bring opportunities of personal and societal growth, and for me at least, a little glimpse of hope.

Last Year’s Predictions

Last year I wrote about a few things that were hopefully gonna happen this year and I got half of them right:

• 💍 I did get married! The love of my life and I did make it official. We had a nice, somewhat small ceremony and reception for family and friends, and everything was very emotional and beautiful. We already had been living together for 4 years, so the wedding did not represent a big change in our lives, but as a celebration of love it did it’s job of being fun and keeping hearts and bellies full and warm.
• 🇮🇹 I did move temporarily to Italy, and lived there for 3 months. It was an interesting experience, I got to know a different culture, learn another language, and experience what life can be on another corner of the world. I also was able to get an Italian citizenship since my family is originally from there. That being said, those 3 months made me miss my home so much! It was one of those “you never miss it ‘til it’s gone away” type of situations. I missed the culture, the people, the food and the weather, not to mention the improved political situation after the elections gave me a bit of hope for the country. Ironically, I came back from Italy with an Italian citizenship but more Brazilian than ever 🇧🇷.
• 🚫📝 I did not write more on this blog, compared to last year. I only released 2 blog posts (about Plausible and GitHub Copilot) and updated my SvelteKit post this year. I thought the big changes were gonna bring me inspiration, but what they did was really suck all my energy away 😮‍💨.
• 🚫🚀 I did not release or develop any personal projects this year either. I had ideas and even toyed with some proofs-of-concept, but nothing concrete came out of it. They were pushed back to 2023!

Personal Changes

This was a really busy year personally. The first few months I was busy planning my wedding, then later planning my trip to Italy, while working multiple projects at the same time to be able to finance all that. And while handling the anxiety of those things, I was also struggling a bit to get used to seeing people again after quarantine, and re-learning to socialize was being mentally draining as well. This difficulty socializing made me pursue another big thing: my ASD diagnosis. It was confirmed and I think that helped me understand myself much better. Things are improving 😊.

World Changes

Coming from two years of pandemic and big changes due to that, the world seems to be entering a new phase now, getting used to handling Covid (which is still a very real threat) and starting to see the more lasting effects it has caused on society, with the psychological effects of isolation and loss, and with the bursting of economic bubbles that were formed during the pandemic.

The big boom some industries had when the quarantine started (mostly related to e-commerce and digital work tools) seems to have winded down, which is causing a lot of companies to downsize or shut down completely, causing mass layoffs. This is awful, of course, but my hope is that this serves as a wake-up call to make companies start considering more sustainable models of business instead of just seeking exponential growth over everything else.

Something else that’s been coming for years, but seem to have reached a new milestone in 2022: AI-generated content. Both art-focused AI (like this blog post’s cover image), through services like Dall-E, Midjourney and Stable Diffusion, or text-based AIs like ChatGPT and GitHub Copilot have been the center of a lot of discussions regarding the ethics and potential of such technology. On one hand, artists, writers and programmers might be worried that the AIs will make them obsolete. Plus, the potentials of spreading AI-generated content as truth could have (even more) devastating effects to democracy. On the other hand, some of them can really have a positive effect on our daily jobs, as I wrote about in the post where I shared my thoughts about GitHub Copilot. I do believe their use will have to be regulated sooner rather than later, so we can minimize the downsides without halting their progress, which is really mindblowing.

Professional Life

With such a busy and tiresome year, I haven’t got to learning many new things, and instead focused on becoming better at what I already work with. I’ve worked a lot with React and NextJS this year. I’ve covered my opinions on both of them last year, and they haven’t really changed.

WordPress is something I’d worked a little bit with in the past, but now I’ve started working more with it as well. It’s definitely a different way of working compared to modern JS stacks, but it’s kind of refreshing in a way. Plus, I believe seeing firsthand how this kind of stack works brings a new perspective and maybe even ways of improving how we build with the newer ones.

One of the things I get excited the most learning about is Atomic Design - not a tech stack, but instead an architectural concept. Seeing it being implemented in different kinds of projects make me really admire the pattern and I’m hoping I can apply it to other projects - including this website - and writing about it soon.

Fun

My favorite part of these “Year In Review” posts - the entertainment content I enjoyed the most in 2022!

TV and Movies

Not much new on this section, as I’ve mostly rewatched stuff I liked this year (including Mr. Robot for the third time - still my favorite series!)

• Superstore was the best sitcom I’ve watched this year. I think it nails the comedy while also touching on important subjects, like fighting for workers rights and unionizing. Plus, I think it’s the only series I’ve watched that acknowledged the pandemic and added it to its plot really well.
• Better Call Saul was already mentioned here last year when I watched seasons 1-5, but this year I’ve watched season 6, which was the last one. It was entrancing, exciting and bleak - exactly what you’d expect from the Breaking Bad universe. The finale was a perfect ending not just to this particular series but to the whole Breaking Bad universe. I highly recommend watching it after Breaking Bad though, as it spoils some of that series, even though it’s mostly a prequel.

Games

• Bloodborne… wow. I had never played a From Software game before, and it was such a journey. Hard, yes, but fair. I always knew what I did wrong when I died. I always wanted to try again and do a bit better every time. But the star in this game is the setting and atmosphere. It starts in a somber Victorian-era city, where you face some beastly humans and werewolves. Soon you’re facing creatures that are a bit different but still fit in the same world. Eventually, though, the game descends into full-on Eldritch/Cosmic Horror and it’s awesome. I’ve never seen a game capture that vibe so well. Every new enemy or boss you encounter is accompanied by a “what the heck is this?!?” and fighting them is always a box of surprises. Best game I’ve played in 2022 and one of the best I’ve ever played.

• Elden Ring was the game I was the most excited to play after playing Bloodborne, as it’s made by the same company. I was not disappointed. It delivered great combat, exploration, soundtrack and lore, which combined into another one of the best games I’ve ever played. I wrote a more in-depth review of the game where I talk about what I enjoyed the most.
• Red Dead Redemption 2 is SO GOOD. You can play it many ways: as an old-west life simulator, a cowboy shootout action game, a hunting and fishing game, or even just explore and photograph the scenery. It has so much content, even after 50+ hours I still kept finding events and secrets totally unlike what I’d seen before. You can get completely lost in this game without even progressing the story. But you really should progress the story, as it’s one of the best written ones I’ve ever experienced. The characters are the real focus here, as they’re all masterfully written and you get really attached to them and care for what happens to them. I cried like a baby in the ending.
• The Last of Us Part II is a bleak, brutal sequel to what was already a pretty brutal game. The story is the focus once again, but the gameplay was vastly improved over the first game. They took a creative route when telling this game’s story, making you experience it through two completely different points of view. This plays with your emotions, as the game’s brutal nature may bring out strong emotions in you, just to invert those feelings completely by showing you the other side of the situation. I loved this game, but I’m not sure I wanna play it again, because I feel like it takes a toll on your mind. Still, I recommend experiencing it at least once.
• Rocket League is, year after year, my favorite game to just have fun. The formula is just so good and it never gets old.

Music

New category! I wanted to write a bit about music since it’s really important in my life.

• The Gods We Can Touch by AURORA is a fantastic album by a one-of-a-kind artist. It’s a pop album, but dips a lot into many genres and sounds really fresh and unique. The lyrics are beautiful as always, plus I got to see a lot of these songs played live! Aurora is one of my favorite artists and this is her best album yet.
• IMPERA by Ghost is a monumental album from start to finish. It’s incredible how Ghost is able to make each album sound like a completely different era, and coming from the disco-ish Prequelle, IMPERA is a punch in the face with golden era metal. A lot of it sounds like Ozzy’s “No More Tears” era, with acoustic guitar riffs morphing into heavy guitar riffs. But it still sounds unmistakingly Ghost. Plus, it has a metal reggaeton song! That’s awesome.
• Infinite Granite by Deafheaven was a lucky find. I knew a couple songs by Deafheaven and while I enjoyed them, the gutural vocals never really pleased me. In Infinite Granite, they were replaced by soft vocals, while keeping the hypnotic, multi-layered instrumentals that I fell in love with immediatelly. I still listen to it on repeat because it’s just so pleasant to listen to.

What to Expect in 2023

I am hoping for 2023 to be a less exciting year, honestly. With so many changes this year, I want next year to be a good, chill year to recover and build up on what my life is right now. Hopefully, that means more time and energy to build nice things, and consequently write more.

I’m planning on refactoring the code structure on this website, adopting Atomic Design, and publishing that alongside a nice article explaining all about it. Plus, releasing at least one of the side projects that I’ve built the proof-of-concept for this year.

Above all, I want 2023 to be @@C O Z Y@@. That’s a good word.

Wrapping up

Thank you for reading all of this! I hope you’ve had a great 2022, but more than that, I wish you a very cozy 2023!

I started using GitHub Copilot around May this year as part of its free beta, and my opinion on it has changed a bit during this time. I was initially skeptical about it, but I’ve come to appreciate it more and more as I use it.

What it is

First off, let’s see what Copilot has to say about itself:

So, yeah, it’s a code completion tool. You can think of it as Intellisense on steroids, but really it’s much more than that. It is much smarter and is capable of detecting your code style, the context of what you’re writing, and even the intent of what you’re trying to do. So, if you’ve just created a form input for a phone number and start writing a function on a related file, you’ll see it automatically suggest some phone number validation logic.

I think what surprises me the most on a daily basis is how it interacts with code comments. You see, I often write comments detailing the next steps my code should take. In the example below, I’ve only written the comment, Copilot did the rest:

// Check if a task with same title already exists
// Throw error if yes
const checkDuplicate = (task: Task) => {
	const duplicate = tasks.find((t) => t.title === task.title);
	if (duplicate) {
		throw new Error(`Task with title ${task.title} already exists`);
	}
};

The opposite can also happen. Sometimes I write some complex functions and Copilot helps me make comments to explain what’s going on. It’s not perfect, but it’s pretty good!

What it isn’t

==Copilot is not something that’s going to take away your job==. At least not soon. The reason is in its name itself: it is a Copilot, meant to be by your side while you’re coding and help you out with busy work, not completely replace you. It’s really not capable of doing that.

You’re still responsible for the code it writes, and for the code you ship. Whatever code it suggests you’ll still have to review, as it may contain flaws that are either obvious or really hidden.

It’s also not a replacement for a good IDE. It’s a tool that works on top of your IDE, and it’s not going to replace it. It’s not going to help you debug your code, or refactor it, or do anything that requires you to think. It’s just a tool to help you write code faster, and perhaps save you some time Googling for the correct syntax.

I also found it kinda useless when writing HTML or CSS. It wouldn’t suggest more than the absolute obvious and was more often than not wrong about what I intended to write, so it almost always got in the way. I only started enjoying it more after using it for more logic-heavy code.

Licensing issues

The main controversy around GitHub Copilot is related to the licensing of the code used to train it. You see, Copilot is trained on open source code uploaded to GitHub, and a lot of that code is under the GPL license. This means that if any code under that license is used on your project, you’re obligated to release your code under the GPL license as well. This is kind of a big deal, but GitHub’s CEO has claimed that training machine learning systems on public data falls under “fair use”.

I’m not knowledgeable enough on the subject to have a well-formed opinion on this, but I’m inclined to disagree with him. If a developer using Copilot is still responsible for the generated code, the GPL license should still apply. Plus, I’m really fond of Free Software and the more shared knowledge we have, the merrier.

Until a consensus is reached, GitHub has added the option to disable public code suggestions on Copilot Settings, so you can disable them if you’re worried about licensing issues.

Is it worth the price?

I started using Copilot on the free beta, and after it ended I decided to keep using it, even for $10/month. It all depends on how much time it saves you. After using it for a good while I figured out that the time it saves me every month makes Copilot pay for itself. It has a free trial, so you can try it out and see if it’s the same for you.

You can check out all the details on the official GitHub Copilot website.

[!info] TL;DR: It’s incredible and worth all the praise it’s got. Not perfect, but really close to it.

Elden Ring was probably the most hyped up game of the past couple of years, and its release in February (2022) was met with a lot of media coverage and players raving about how incredible it was.

I wasn’t hyped at all about the game, mainly because I had never played a From Software (the game’s developer) game before. Dark Souls was a big hit when it came out, but I was never into difficult games, and I didn’t have a console to play it on (I was one of the 6 people that owned a Wii U, but not a PlayStation or Xbox). However, with all that talk surrounding Elden Ring I couldn’t just ignore its existence. The game was really expensive though, and I didn’t feel like spending R$300 to play something I thought I wouldn’t enjoy. So, I downloaded Bloodborne (free on PS Plus), another From Software game with good reviews, which I figured would give me a taste if I liked this kind of game or not.

I was completely amazed by that game, and it became one of my all-time favorites. After finishing that one and immediatelly tweeting about wanting a sequel, I had no choice but to play Elden Ring next.

The Game

A few minutes into the game and you’re presented with its selling point: you open a door and you’re now free to explore an entire world, full of mysteries and dangers. Right in front of you is a boss that @@will totally destroy you@@ if you try to beat it, and it’s an important lesson of what to expect in the game: you need to be prepared. You circle around that boss and make a note on the map to come back to it later. Then you proceed into a forest and find some soldiers that you can defeat. You’re not sure why you’re fighting them or why they wanna kill you, but it’s fun, so you do it. Then you find an entire camp full of them, including one with a more menacing armor, a big shield and a spear. You try to face it and it kills you once. Twice. Three times. You get really close to beating it, your hands start sweating with anticipation, and you finally do it! Metaphorical tears of joy roll down your face and you feel really good about what you just accomplished. Then you realize that was just a regular enemy, that will respawn every time you rest. There’s so much more to uncover.

That’s the main hook of all games in the “Soulsborne” series, and it works really well. It uses frustration to build up an extremely satisfying reward when you win. Elden Ring did not change that, instead it mixed that feeling with an open world that gives you more ways to cool down between tough fights, or multiple ways to get stronger to prepare. It took me over 30 hours to have my character strong enough to tackle that boss right after the first door of the game. That was like 1/3 of my play time, and it was probably the best part of it. Every discovery was something brand new, and many encounters provided a fair challenge.

However, I feel that the feeling of challenge was really uneven throughout the game. When both my character and I were not well prepared or strong enough, it felt more rewarding when I got a win. Later in the game, I was so overleveled for some bosses that I didn’t get that feeling of adrenaline during a big fight, nor the big endorphine release when I defeated them. And that did not come from me grinding XP somewhere. I was just enjoying the game, exploring every nook and cranny I could find, and getting stronger as I did that.

To be fair, I do think making a game like this completely balanced is nigh impossible. Not only there are dozens of different builds you can make for your character, but also every player will have a different journey, ending up with more or less Runes (the currency you use to buy levels and improve your character) than others. So, on a technical level, I truly understand the complexity of balancing this and still think they did a good job overall. It just was a bit underwhelming on my specific case.

The Story

Elden Ring, just like other From Software games, has almost no story. It has a huge and rich lore, though. For most of the game, you simply have no idea what’s going on. It’s by hearing some cryptic dialogue, reading item descriptions, and observing the world around you that you can start to put together the puzzle surrounding the game. Or, you can watch some really good YouTube videos explaining the lore behind the game, which make you finally understand why things are the way they are.

I like this.

It has a bit of a more realistic approach to storytelling - your character is part of that world, and as such you’d probably be acquainted to some of the more common stories and myths in there, and definitely not be aware at all of the secrets and twists of the royal family of demigods. Having to go out of your way to figure things out makes you more attached to the game in a way, and makes you care more. Old games used to do this for technical reasons, but there’s definitely an appeal here. I do understand it’s not very accessible though.

The lore itself is great. It’s a more common fantasy setting, with dragons, wizards, gods, but it feels unique by adding a lot of nuance to it, and making it centered on a family of very unique characters that you either befriend or fight during the game. These characters are well-written and have a lot of depth, and looking into how they got to be what they are now is a really cool way to spend time when you’re not playing the game.

Had I not played this immediately after playing Bloodborne, I think I’d have enjoyed it more. Bloodborne was just so unique and atmospherically perfect, this one didn’t really get to the same level. But it’s still one of the best game worlds I’ve ever adventured in.

The World

The Lands Between (the name of the in-game world) is a beautiful place, and all of its areas tell a bit of the story surrounding everything. You have vast green areas, a huge lake surrounded by mist, a mountain around a volcano, icy peaks, a golden city, and an area that’s almost literal hell and that will kill you so many times you’ll kinda start to like it. Almost everything is fully explorable from the start of the game, though you might face some “natural barriers” in the form of enemies you’re still not ready to face.

==The world is fully realized, and there are rewards in every corner.== However, it’s not the best part of the game.

In some parts of the world are places called Legacy Dungeons - they’re areas that work just like the older games (like Dark Souls or Bloodborne) did: smaller, more linear areas, with great level design and that offer a more curated, if limited, experience. Those are still the best parts of the game, not its open world. I really hope they continue to be a thing in future games.

The Bad

The sidequests, really. They’re kinda bullshit. Not their content per se, but they rely so much on “randomly coming across a character on a very random part of a gigantic open world” that it’s nearly impossible to complete one of them without following an online guide. Quest markers would make this better and still keep the same level of immersion.

Verdict

I think the best thing I can say about this game is that after I’ve beat it (which took me 92 hours), I immediately started the game over again, to play with a different character. Even after so many hours, I was still wanting more. Though not my favorite game ever, it was still one of the best.

I hereby give this game a sparkling @@10/10@@ score!

Analytics have become intrinsic to software development in the past decade. On the marketing side, analytics allow us to measure the success of marketing campaigns, optimize the wording, measure ad results, or simply keep track of the growth of the audience. On the development side, it allows to more easily detect points of failure, bad patterns or UX hiccups.

These benefits however, usually come at a price: ==in-depth analytics tend to store way too much information about the user==, and the user is often unaware of how much is being collected. It’s a decision the user doesn’t really make; we make it for them. (Yes, I know, legally the user often accepts cookies or terms of service… but the reality is that almost nobody reads or understands that.)

On platforms like Google Analytics, there is a lot of information we can see, however none of them personally identifies the user. That’s good, right? Well, not really: Google can personally identify (and does through its Ads business) them, and by using Google Analytics or similar products on your site, you’re feeding them your user’s information for a really low price - otherwise, why would these analytics be free?

Luckily, there are ways to get most of the needed metrics without compromising anybody’s privacy, and even get a better experience in the end.

Ethical Analytics

Recently increasing concerns about online privacy have sprouted a lot of ethical analytics services, that aim to collect only necessary, anonymous data. Services like Matomo and Fathom provide an experience that is simple and to-the-point, and I’ve heard nothing but praise about both services. For myself though, I’ve picked Plausible Analytics, which I use on this website and in some of my side projects.

It’s important to point out, though, that none of those are free. Since they don’t collect personal data and don’t monetize it, they must charge for their service. The prices are pretty low though, and unless it’s a hobby project you have no intention of monetizing, that cost will be absorbed really quickly and the gains will make it worth it.

Plausible

Plausible is a small company from Europe that makes Plausible Analytics, a privacy-friendly alternative to Google Analytics. The reasons I’ve picked Plausible instead of others are that:

• It’s open source;
• It can be self-hosted in case you already have your own server;
• It’s intuitive: a quick glance through the dashboard and you’re already able to understand everything that’s in there. Check out mine;
• It’s sustainable: their business model allows them to grow organically and the project is already profitable without any kind of external funding (and they have no plans of accepting it);
• They offer ways of bypassing adblockers;
• It’s simply a great product.

Custom Goals

The data that Plausible collects by default should be enough for most use cases. However, there is still some information that is not gathered that you might want to have. For cases like that, Plausible offers the Custom Event Goals API.

With a simple function call, you can send data to the Plausible API and track some behaviors or extra information. For example, if you want to track the percentage of your users that click on “Sign up”, you can fire a custom event for that. These are also filterable in the dashboard, which means you can compare where most of the users that sign up come from.

In my case, I wanted to know the percentage of users that use light/dark mode in their browser or system. There is an open Feature Request to add this functionality to Plausible that has received some interest, but while that isn’t implemented, I built my own detection using the Custom Events API:

// Use Plausible to track the % of people that have a dark/light mode preference
if (plausible) {
	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
		plausible('Dark Mode Enabled');
	} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
		plausible('Light Mode Enabled');
	} else {
		plausible('No Dark/Light Preference');
	}
}

Note: tracking Custom Events without user interaction like this breaks the “Bounce Rate” metric. By firing an event, Plausible interprets that the user has interacted with your site, and therefore the Bounce Rate goes to zero. If the Bounce Rate metric is important to you, this might not be a good idea.

Wrapping Up

I apologize if this post felt like an ad. It is not. Web Analytics is such a morally ambiguous area that I’ve avoided it for years, and now I can finally grab some metrics with a peace of mind. Regardless of what service you choose and prefer, having privacy-friendly alternatives is good for everyone. With Plausible being one of my favorite pieces of software at the moment, I felt it was right to write a bit about it and spread the word.

Thanks for reading!

Another year, another yearly review post. 2021 felt like pretty much 2020 part II for a lot of people, me included. The ongoing pandemic still affected our lives, and even though most people in my country are now vaccinated (including me), the danger still exists and preventive measures are still necessary. But it’s nice to be able to start doing things and going places we haven’t been able to for a while. I personally think this situation is still going to drag on for a while, but we’ll adapt to it with time.

Mental Health

Last year, I wrote a bit about doomscrolling, and how it started affecting me until I decided to avoid this behavior. I tried to keep avoiding it this year, and I think I succeeded. I’m not blind to what’s going on - I still know @@the world is a dumpster fire@@ at the moment and in many ways it was even worse than 2020 - but I think I was successful in not dwelling on the bad news and the daily absurdities going on.

That doesn’t mean my mental health didn’t take a hit though. The year started with the loss of a person I held dear - a victim of the inexcusable vaccination delays and genocidal actions of our leaders - and I felt like I lost a bit of control over my work-life-balance for a portion of the year.

This year I also started therapy though, which I feel is a good way to deal with the growing anxiety from the past few years. I’ve been able to know more about myself and how my brain works, so I can focus on what I found out to improve my life, one day at a time.

Work Life

Early this year I changed jobs, and started working as a contractor. This has given me more freedom to make my own hours and allowed me to work with a more diverse set of people. It took me a while to use this freedom the right way, though. For a few months I felt like my work-life balance was off, and I felt like my energy was being drained fast. Luckily I was able to notice the early signs of a burnout and took a step back to avoid it. I am now working on my 2nd project as a contractor and I feel that getting the work hours under control allowed me to do my work better, since my mind gets the time to rest.

Learning and Comparing

Most of the learning I did this year was on my day job, and not personal projects. Last year, I worked a lot with Angular and Vue 2. This year, I worked with Vue 3, React and PHP (😩), and on my personal time I started to practice my Svelte skills. That’s a lot of frameworks!

Although every project is different, working with components makes you solve similar problems all the time. And after having worked with basically all mainstream frameworks for a bit, I feel like I can see pros and cons to each of them:

Angular

• Pros: it’s very opinionated, which means there are always recommended ways of doing something. This makes the code consistent, and using TypeScript by default makes it much easier to maintain big projects. I like the template syntax and the separation between HTML, CSS and TS. I also can definitely see why it’s a choice in many enterprise environments: the majority of Angular projects I’ve seen have similar structure, which makes devs productive really quickly after being hired.
• Cons: it’s very opinionated, which means it’s not as flexible as other options. The focus on clear separation of concerns and TypeScript can also be a burden for smaller apps. Sometimes you want to make a quick prototype or just build something simpler, and it’s easy to find Angular overkill.

Vue

• Pros: I really like the premise of Vue being “incrementally adoptable”. This makes Vue really simple on the surface and hides many of its complexities. The template syntax is similar to Angular and it’s easy to keep concerns separated if you want to.
• Cons: In my personal experience I felt like the Composition API, introduced in Vue 3, goes against my favorite things in Vue previously. Instead of being an extension to HTML/JS, it makes you completely rethink how to build the components, and I feel like it makes things more complicated than they should be. Also, the ecosystem around it (plugins, components, etc) took a big hit with the transition from v2 to v3, because it had many breaking changes.

React

My experience with React has not been as extensive as the other ones here, so I think I’m still not past the point of “initial impressions”. Still, here are my thoughts:

• Pros: Super flexible, and with a ginormous ecosystem to back it up. You can write a React app in so many ways and there’s always an open-source plugin or component for what you want to do. The existence of NextJS makes using React a better experience.
• Cons: Ok, I really don’t like JSX. I usually like to keep concerns separated and using JS to build the HTML like this is not my cup of tea. I find it hard to understand at a glance, and feel like it overrides the default web stack too much. Unlike the other frameworks, when I use React I feel like I’m developing a React app instead of a web app. Also, in contrast to Angular, the flexibility of React makes it so that React projects can be so different from one another you’d have a difficult time adapting, even though they use the same framework (this is mitigated by meta-frameworks like NextJS, which are very opinionated, thankfully).

Svelte

I have a clear favorite here, but I feel that Svelte hits the sweet spot in many ways.

• Pros: I like the template syntax (not as clean as Vue’s or Angular’s, but similar enough), the clear separation of concerns, and how it likes to stay out of your way. Most of all though, I love how Svelte makes me just feel like I’m building a “vanilla” web page, but with added goodies. ==It extends the web instead of replacing it.==
• The fact that it is a compiler frees it from the need for a Virtual DOM, which then makes the code you need to write much simpler. No need for useState, useEffect, or keeping track of two-way binding to maintain state between components - you just have to set the variables and Svelte does the rest. I just think about my logic, not about how the framework works.
• Its official meta-framework, SvelteKit, also has great defaults. It works by using native HTML tags instead of trying to emulate them. Instead of a <Link>, just use <a>. Instead of using JS to post data, just use a <form>. This makes the app leaner, more accessible, and work with JS disabled by default.
• Cons: Svelte is relatively new, and therefore its ecosystem is still lacking. I’ve had trouble properly integrating a SvelteKit project with Storybook or Jest, for example, since Kit is still in Beta. There are also many components that don’t have a Svelte version yet, and while some of them have a “Vanilla JS” option that usually works, it’s still not as seamless as it could be.

Personal Projects

I didn’t work on many personal projects this year, as I was already learning a lot on my day job. I did, however, ==completely rewrite my website!==

I really liked the previous one, but I wanted to change some things about it and use something more flexible than Jekyll. So I completely redesigned it using Figma - while retaining some design elements from before - and rewrote it with SvelteKit. I wrote a blog post talking more about the experience, which also became my most-read post of all time. Nice!

Speaking of blog posts, @@I doubled the amount of posts published compared to last year!@@ Which means I wrote… 4 (excluding this one). I wanted to write more, but compared to the 2 posts from last year, it’s still an improvement, right?

Fun

Not everything is code and gloom - I also do some fun things every once in a while.

TV and Movies

• Ted Lasso is the TV equivalent of a hug. I’ve never seen a show that can balance comedy, wholesomeness and an enthralling story and characters so well. It touches on delicate subjects in a way that still makes you feel good, and yet is capable of sending the intended message. Honestly can’t find anything I dislike about it.
• Better Call Saul was surprisingly good. I initially dismissed it as being just a spin-off of a popular show, but it slowly evolved into a tightly-woven drama that keeps me at the edge of my seat. The stakes are lower here than they are in Breaking Bad, but I feel like I care more about the characters on this one.

Games

• The Last of Us was surprisingly surprising for me. I am 8 years late to the party here, but I didn’t have a PlayStation since the PS1, and not only I hadn’t played this game, I never felt like doing so. I usually favor creative gameplay instead of a complex story, but finally gave it a go this year. Wow. It was an amazing experience from start to finish, though I admit it felt more like a more immersive movie than a game. That being said, I don’t think any movie can match the immersion that a game with a good story can provide.
• No Man’s Sky is a mix of exploration and existential crisis. There are a lot of things to do (though not all of them have much depth), but the main gameplay loop of exploring planets and seamlessly traversing between them is addictive. Plus, the main story was surprisingly good, with a lot of amazing quotes from the Travellers in that universe. A bit of existential crisis was the icing on the cake.

• Metroid Dread was a lot of fun! I never liked games of this genre (Metroidvania) until I played Hollow Knight, last year. I felt like finally giving Metroid a chance since it was the first main entry in 19 years and the reviews were stellar. I was not disappointed. I feel like it doesn’t match Hollow Knight in its worldbuilding and ambientation, but the gameplay in Metroid Dread felt much more fluid, making almost everything in it a joy.
• Dungeons & Dragons has continued to be one of the highlights of my weeks. My party still played online this year, but it was a lot of fun. We finally finished the Curse of Strahd campaign after 502 days. The finale was so epic we decided to have it illustrated by the amazing Guilherme Holz.

What to Expect in 2022

First of all, @@I’m getting married! 💍@@ The love of my life and I are finally making it official.

Later in the year I’m also temporarily moving to Italy for a few months with my (soon-to-be) wife. It’s going to be some sort of test drive - we’ll return to Brazil before the year ends and then decide if living abroad is something we want or not.

As for this blog, I hope to again write more than I did this year. I have a few ideas in the oven, but have been struggling to write them down. Hopefully the big life changes are the inspiration I need.

I also have some ideas for some personal projects that may or may not see the light of day. Let’s see how it goes.

Wrapping Up

2021 was overall a weird year, but I feel 2022 is going to have more going on. I wish you happy holidays and that you have a memorable 2022. See you then!

I’ve recently re-launched my personal website and blog, that’s now reached its 3rd version. There was nothing wrong with the previous one, but I wanted to both give it a small visual refresh and learn something new. So, after a month or so of working on it on my free time, @@voilà@@, you’re seeing it right now!

[!info] While the code for this website is open-source, it has a lot of content that’s very specific to myself. So, if you want to use it as a template to get your own website started, I’ve created a public template that you can use as a starting point!

Check out the starting template here!

About Svelte and SvelteKit

Svelte is a new cool kid on the JS block - it was launched in 2016, but it really started getting traction when its 3.0 version was launched in 2019. It is a competitor to the big JS frameworks - React, Vue, Angular - but, instead of simply being an alternative way of doing things, it differentiates itself on a fundamental level: ==it is a compiler, not a framework.==

This means that it does its job at build time, not at runtime. While other frameworks (React, for example) need JavaScript code that runs on the client in order for your components to work properly, Svelte does not, because it interprets your code on build time, and only ships exactly what it needs to run. This means websites made with Svelte can be much smaller in size and faster because it has less code to run.

SvelteKit is a framework built on top of that. It is an opinionated set of rules that helps you get a Svelte app built pretty quickly. You can compare it to NextJS (for React) or Nuxt (for Vue). It has great defaults and encourages good practices, like server-side rendering, for example. At the time of building this website, SvelteKit was still in Beta. However, progress is steady and its API seems to be already stable, so it’s unlikely there will be any breaking changes before 1.0 arrives.

Using both of the above allowed my website to have two important characteristics:

• Every single page is rendered at build time (server-side rendering). This means that as long as the HTML and CSS files are downloaded, it will look as it was meant to be;
• JavaScript is not needed. Try disabling JavaScript on your browser. You’ll still be able to read this blog post and everything will look the same.

Progressive Enhancement

One of the concepts that really caught my eye with Svelte is the idea of Progressive Enhancement: ==making sure your app runs for everyone, and making it progressively more featureful if the user’s device supports it==. My website is a pretty simple project, but still there are instances of this:

If there’s no JavaScript, the website uses the browser’s native navigation API. Which means you can navigate between pages normally without any client-side code. However, if JavaScript is available, a client-side router will be used to make the transition between pages smoother and faster. This means that even if the user’s device doesn’t support JS for any reason, the site will still be completely functional.

[!info] We tend to think of JavaScript being disabled as a user choice, but that is usually not the case. Think of someone using their phone on a weak 3G connection that fails to load the .js files, or someone in the subway that lost signal while loading the page. It happens often and being able to show your content even in these conditions is a great way of not losing a visitor.

And you know what I had to do to support this? Nothing. Just using <a> elements is enough, as SvelteKit will intercept those if needed (JS enabled), or simply leave it to the browser otherwise.

Design

I’m not a designer, but I like to pretend I am. So, instead of designing-as-I-go when developing the website, I decided to fully design it on Figma before starting development. I figured that using it to design stuff is the best way to learn the platform, and I really finished this design much better at Figma than I was before. Auto-layout is fantastic since it works so much like CSS Flexbox, so I was able to approach it with a similar thought-process as I have when developing stuff.

The design itself was something I came up with, and it’s an amalgamation of ideas and inspirations that were stored in my head. When building it, I wasn’t entirely sure where the inspiration came from, but now it is apparent to me that most of it comes from some websites I love: Josh Comeau’s and George Francis’.

After the design was complete, I finally began developing it. Since there are some things that you can only find out while developing it and giving it more attention, I made some small tweaks to the design while implementing it. Still, the final result was really similar to the initial design. I count that as a success!

Routing

[!info] Initially, SvelteKit used a file-based routing, as opposed to the current folder-based routing. This article has been updated to reflect those changes. If you were familiar with the previous system, this comment by the SvelteKit team might help you understand the changes.

SvelteKit uses a folder-based routing system. This means that your routes are dictated by the folder structure inside routes in your project. Every route must have a folder, except for the root (’/’).

Inside each folder, you can add files that build up your page. Typically, in other frameworks, you would have a index.{html/js/jsx} file where everything the page needed would be loaded from. In SvelteKit, you can have multiple files, each representing a different part of the page.

The only required file is +page.svelte. This is where you can add your markup, components, styles and logic. However, it’s likely that your page might need to load some data to be displayed. This can be done on another file, +page.js, in the same folder. There, you can add a load function where you’ll have access to query params and other things and be able to load all the data your page needs.

The cool thing about that is that SvelteKit will use the content of the +page.js file both server-side and client-side, depending on the situation. However, if the data you need can only be loaded on the server (like for example querying a database or using a secret key), you can name it +page.server.js instead. Both would do the same thing, however ==the naming difference makes it much easier on a quick glance to identify what runs where.==

So, an example of what the basic file structure for my website would look like:

└── routes
	├── +layout.svelte
	├── +page.svelte # / (root page)
	├── resume
		└── +page.svelte # /resume
	├── blog
		├── +page.svelte # /blog
		└── +page.js # Loads data to show on /blog
	├── blog-post-name
		└── +page.md # Blog post content (Markdown file)

Having multiple files in a folder might look a bit cumbersome at first, but it makes their purpose much clearer. The great reasoning behind this pattern is that it gives you a single way of doing routing instead of multiple, which makes things more standardized and easier to understand later on. Remember, SvelteKit is opinionated on purpose, and I think folder-based routing is more readable and I’d say more flexible than other file-based routing solutions, although it is a bit more verbose.

The +layout.svelte file is a base layout for all the pages inside the route. Which means that I can have shared code for all pages in there. See the example below, where I added the header and footer components to the layout, and load the content of the route itself in the <slot> element:

~filename +layout.svelte
<Header />

<main>
	<slot />
</main>

<Footer />

Layout Groups

Having a +layout.svelte file is a great way to avoid re-writing the same base layout multiple times. However, sometimes you might want to have a different layout for a group of pages. For example, I wanted the blog posts to have some extra elements that the rest of the pages didn’t have, like a title and related posts at the bottom.

For that, I used a layout group, defining that the post page shouldn’t use the main layout, but instead have its own.

To create a layout group, I’ve created a folder inside of routes with the name of the new layout blog-article, wrapped in parentheses to indicate it uses its own layout. The routes directory ended up like this:

└── routes
	├── +layout.svelte
	├── +page.svelte # / (root page)
	├── resume
		└── +page.svelte # /resume
	├── blog
		├── +page.svelte # /blog
		└── +page.js # Loads data to show on /blog
	├── (blog-article)
		├── +layout.svelte # This layout applies only to this folder
		├── +layout.js # Loads data to show on the layout file
		├── [slug]
			├── +page.md # Blog post content (Markdown file)

Keep in mind that, just like pages, layout files can also have their data-loading counterparts: +layout.js and +layout.server.js.

The blog

The main challenge for me was in processing Markdown (.md) files of the blog posts into actual Svelte code. Unlike Jekyll, which I was using previously for this blog, SvelteKit doesn’t have anything built-in for this (yet) and online resources are a bit scarce (which is normal, since it’s still in beta).

I had three requisites for this:

• I wanted to write blog posts in Markdown, because of its ease, and also so I wouldn’t have to rewrite all the existing posts;
• I wanted to be able to use Svelte components inside the blog posts as well, for more interactive elements;
• It has to be rendered on build time so the blog can be deployed as a static site;

I had heard about something similar to what I wanted, called MDX. It allows everything I wanted, however, it was React-based and I couldn’t use it. Luckily, I found out about MDsveX, a project with the same goal as MDX, but for Svelte!

After setting it up, having the Markdown content rendered was very straightforward. However, I need to use some of the post’s data to load stuff into the +layout.svelte file, like the title, image, date and related posts. Plus, I wanted to be able to get a list of all blog posts and be able to filter them, to show on the “Recent Posts” cards on the home page, as well as the blog page itself.

Extracting post data

I found out when searching that we can import all the .md files as modules, and process them via JS, since this code will run on the server. I ended up creating a posts.js file to centralize this logic, and did the following:

~filename posts.js
// Import the markdown files for each post
const imports = import.meta.globEager('./posts/*.md');

const posts = [];
for (const path in imports) {
	const post = imports[path];
	if (post) {
		// For each of them, MDsveX will do the heavy lifting. The "metadata"
		// is automatically recovered from the Frontmatter
		posts.push({
			...post.metadata
		});
	}
}

// Filter the post and order them by published date
const filteredPosts = posts
	.filter((post) => !post.hidden)
	.sort((a, b) =>
		new Date(a.date).getTime() > new Date(b.date).getTime()
			? -1
			: new Date(a.date).getTime() < new Date(b.date).getTime()
			? 1
			: 0
	);

// Expose this info to other files
export default filteredPosts;

With that data being exported from that file, I can reuse it in the places I need:

Blog post page

On the routes/(blog-article)/+layout.js file, I can now import the posts and look for the one I should display (by comparing slugs). After that, I’ll pass the data I need back to the +layout.svelte file.

On the routes/[slug]/+page.svelte file, I can now import the posts and look for the one I should display (by comparing slugs). After that, I’ll get its module and use the special <svelte:component> (see docs) tag to use it inside the page.

~filename (blog-article)/+layout.js
import { filteredPosts } from '$lib/data/posts';

export async function load({ url }: { url: { pathname: string } }) {
	const { pathname } = url;
	const slug = pathname.replace('/', '');
	const post = filteredPosts.find((post) => post.slug === slug);

	return {
		post
	};
}

~filename (blog-article)/+layout.svelte
<script>
	// Declare the data variable that comes from the server
	// And extract its post property
	export let data;
	$: ({ post } = data);
</script>

<!-- Here we can use the post data we need -->
<h1>{post.title}</h1>

Listing all posts

Now the post page is done, we need a way to display all the posts on the main blog page. We already have them sorted and filtered in the posts.js file, so all I have to do is fetch that data and iterate on it to display them all.

Since the posts data comes from the server, it needs to run there. I’ll use a blog/+page.server.js file to fetch that data and send it to the client-side page.

~filename blog/+page.server.js
import { error } from '@sveltejs/kit';
import posts from '$lib/posts';

export async function load() {
	const result = Object.keys(posts).map((index) => {
		const { slug, title, date, excerpt, tags, readingTime } = posts[index];
		return {
			slug,
			title,
			date,
			excerpt,
			tags,
			readingTime
		};
	});

	if (result) {
		return {
			posts: result
		};
	}

	throw error(500, `Could not load blog posts`);
}

And, on the page itself:

~filename blog/+page.svelte
<script>
	export let data;
	let { posts } = data;
</script>

{#each posts as post}
	<BlogPostCard {post} />
{/each}

RSS

Something that SvelteKit currently does not provide a solution for is a RSS feed. Previously, mine was built automatically by Jekyll and I never had to do anything to get it working. While this wasn’t the case right now, I’m sure once SvelteKit is stable and mature, solutions for this will be available so no manual work has to be done.

I made mine by taking advantage of SvelteKit’s endpoints by creating a +server.js file, and serving a XML file that is generated at build time. I import the filtered posts from the posts.js file I created earlier, and use the metadata to build the content of the RSS file. You can check out the source code for implementation details.

Sitemap

Another thing that’s still not built-in to SvelteKit is the sitemap. It’s great for SEO, especially for newer websites, so I researched a good way of adding one. Luckily, someone already built a tool to generate them automatically, and there is already a discussion to build it into SvelteKit directly. Check out svelte-sitemap for generating your own.

Wrapping Up

My first experience with Svelte and SvelteKit was, overall, fantastic. It simplifies many parts of development and having server-side-rendering as a default option really drives forward their purpose of simplifying web both for users and developers.

Though I definitely did not use all of Svelte’s strengths on this project, since it doesn’t need dynamic data and an application state, I’ll be working with that soon enough. Its ecosystem is not as big as its competitors’, since Svelte is still small compared to them, but they’re doing something right with their new approach, as Svelte is the most loved web framework according to 2021’s StackOverflow survey. Not to mention that Svelte itself doesn’t try to reinvent the wheel, and therefore is compatible with almost everything JavaScript.

The small issues I’ve had while building this will definitely be gone soon, as they were caused by SvelteKit not being on a stable version yet. I’m excited to see how much the ecosystem grows the next year; I’ll definitely be keeping an eye on it!

Don’t forget all the code for this website and blog are open source, feel free to use it and to propose changes if you’d like!

Thanks for reading!

Check out the starting template here!

Do you know how big the images displayed on your website are? When you open a page, the browser starts downloading a bunch of files in order to display it. Research shows that images are the most requested asset type and take up more bandwidth than any other resource. So, making sure they are as small as they can be can greatly improve the load times for your website. (spoiler alert: mine’s become 85% faster!)

More efficient formats

For a long time, JPGs and PNGs have been our standard image formats. However, they are not optimized for the web - their quality is often unnecessarily high and the download size is too big. Over time, many new formats have appeared, but two of them have become quite notable: WebP and AVIF.

WebP has been introduced in 2010, and has slowly gained adoption since then. Since 2020, WebP is now supported in all modern browsers. AVIF was launched in 2020, and its adoption has been faster. As of May 2023 it is supported by all major browsers except Edge. You can always check out the up-to-date support status on caniuse.com.

Browser Support

But how do we use those shiny new formats if not all browsers support them?

With the <img> element, we can make the browsers do the work for us. We can declare multiple sources for the same image, and the browser will try to load them in order. If they do not support a format, they will immediatelly jump to the next one. To do that, we use the srcset property to declare the optimal versions (avif and webp), and then use the src as usual to point to the fallback image (jpg or png).

So, what we want to do is declare those different sources in the following order:

AVIF -> WebP -> JPG (or PNG)

<img 
  srcset="my-image.avif, my-image.webp" 
  src="my-image.jpg" 
  loading="lazy" 
  decoding="async" 
/>

If you look at the resulting HTML in your website, you can see that the <img> element has a src defined, but when you hover over it, it shows what is the actual file that’s being loaded. If you’re on a supported browser, it will have loaded the AVIF file. If you’re on Safari, it will have loaded the WebP one. Otherwise, if you’re using IE or something (I’m sorry), the original JPG or PNG file will be loaded.

Load smaller images

You can optimize even further than that. See, in my example, I am loading an image with a width of 1200px, however, the size it’s being displayed is only 319px wide. The srcset property supports different widths to load, depending on the screen size.

<img
	srcset="my-image-380w.avif 380w, my-image-640w.avif 640w, my-image-960w.avif 960w"
	sizes="(max-width: 979px) 100vw, 640px"
	src="my-image.jpg"
	loading="lazy"
	decoding="async"
/>

The srcset property is smart. As the name implies, it is a set of sources, not just a single one. When we declare multiple file paths and add a width unit besides it, the browser looks at this data and tries to display the smallest possible image.

On the code snippet above, the browser will follow this: ==If the size of the displayed image (on the page) is smaller or equal to 380px, it will load the file with 380px of width. Otherwise, it will try to load the next declared path (640px).==

However, not all parts of this process are smarty. The browser cannot know what is the final size of the image on the page before it actually loads it. Which is why the sizes property exists. Let’s see how it works:

The sizes property defines what rule the browser will use to get the width it uses to choose the correct file in srcset. The default value is 100vw. That means that, to check what width the image will have, the browser just gets the width of the browser window. If we know the exact size the image will have on load, we can declare it here, or if we don’t know the exact size, we can estimate. We can use media queries to help us specify the sizes better as well.

Check out the value on the example: (max-width: 979px) 100vw, 640px. What that code does is: if the width of the viewport is equal or smaller than 979px, use 100vw. Else, use 640px.

It is easier to understand if we visualize it like this:

Of course, different websites have different needs and situations. Make sure to adapt the code to your specific need.

It’s also worth noting that most phones use a HiDPI mode. This means that ==even though the reported width for the phone above is 375px, the browser will likely use a higher resolution to load the images== (usually 2x), in order to serve a higher quality image.

Lazy Loading and Async Decoding

You might have noticed the loading="lazy" and decoding="async" attributes in the code above. Those are relatively new options that are part of an ongoing effort to make the web faster.

decoding="async" tells your browser it can try to parallelize loading your image. When your page is loading, it tries to decode both text and images at the same time. On lower-end devices though, decoding heavy images can take a while, and this might block the rendering of the rest of the content. With this option, the browser will try to proceed rendering the rest of the content and render the image later. This can be a great improvement to perceived performance.

loading="lazy" is probably the most important of the two. It is an easy way of telling the browser to ==only load the images when they get close to appearing in the viewport==. There is a threshold that is defined by the browser that controls how close it needs to be before it gets loaded, so you don’t have to worry about them not showing up if the user scrolls fast. ==This ensures that the initial load of the website is as lean as it can get, improving perceived performance and also saving you some money on server requests.==

Results In Practice

Since I like using my own website and blog as a testbed for new stuff that I learn, I have applied these optimizations to it. The results were incredible!

Note: after doing some tests, I have decided that the benefits of serving differently-sized images on my website were too small to justify the extra effort of handling all these extra images. So, the only optimizations I have really applied were the optimized file formats, lazy loading and async decoding. I also chose PNG as fallback type instead of JPG because some of my images have transparency in them, which JPG does not support.

The following data is taken from the home page of the website, since it has a lot of images:

==The total download size decreased by a whopping 85%!!== That’s an incredible difference, with no noticeable difference in quality. Your results may vary, as they depend on how much of your website’s size is images.

Before the changes, out of 1.6MB total, 92% of it were images, 5% were fonts, 1% was HTML, and the remaining 2% were of JS and other things like the web manifest.

Now, out of 249kB, just 24% of it are images. Fonts now make up 27% of page size, and are likely the target of a future optimization post!

The Hard Part

The hardest part of this process is converting the images to all necessary formats and sizes. It is a lot of effort to do manually even for a single image, and even worse if you’re trying to optimize existing images like I was.

Generating the Images

For my needs, I have developed a NodeJS script that uses the Sharp library to do the magic for me. It accepts as parameters a source and a target folder, input file types (what files it will look for in the source folder), output file types (what types it will convert to), as well as the desired widths.

You can install the script as a NPM package, and then run it on a build command on your website!

Check out image-transmutation! See usage example

Using the images

To make this setup work, I had to do some changes on how images were used on my website.

Pre-existing conditions:

• All the images on my website were initially in a folder called “images”, with various subfolders;
• I didn’t want all the versions of an image (webp, avif, etc) to take up space on my repository, so I only have them generated on build time.

Modifications I did:

• I have created a component to centralize all image-loading logic;
• This component receives two parameters: the file path and the alt text;
• If my project is running in dev mode, it won’t add the srcset at all, as the optimized images won’t exist;

<script lang="ts">
	// This is a SvelteKit environment variable. If it's true, it means the project is running in dev mode.
	import { dev } from '$app/environment';

	// Declare the accepted parameters
	export let src: string;
	export let alt: string;

	// Declare the formats used for images
	export let formats: string[] = ['avif', 'webp', 'png'];

	// Get just the file name without extension (so "image.png" becomes "image")
	$: fileName = src.split('.')[0];

	// Function to build the srcset string
	function buildSrcset() {
		// If project is in dev mode, I don't want a srcset since images aren't optimized yet
		if (dev) return;

		let srcset = '';

		// Cycle through formats and add them to the srcset
		for (let i = 0; i < formats.length; i++) {
			srcset += `${fileName}.${formats[i]}`;

			if (i < formats.length - 1) {
				srcset += ', ';
			}
		}

		return srcset;
	}
</script>

<!-- Now we just use the default img element! -->
<img srcset="{buildSrcset()}" {src} {alt} loading="lazy" decoding="async" />

And to use this component inside another page:

<image src="my-image.png" alt="Example image" />

The full component code and usage example can be seen at my SvelteKit blog template repository. That might be more up to date than here, even!

Wrapping Up

With such amazing results, it’s hard not to recommend you to optimize the images in your website ASAP. There sure are more approaches and optimizations that can be done besides the ones presented on this article, as the web world is always changing. But optimizations are a great way of showing respect to your users (as well as gathering more of them). Your site loads more quickly, and it uses less data and resources.

As front-end developers, we must acknowledge that all we write runs on someone else’s computer, the user’s. So it is important that we respect them and make sure we just use the resources we need to.

I hope you enjoyed reading this! Take care and happy coding!

Favicons kinda suck. They should be a simple icon that identifies your webpage on a bunch of scenarios, i.e. the icon displayed on the tab besides your website’s title, or the icon on the mobile browser’s bookmarks screen, or the icon on the phone’s home screen.

Unfortunately, different browsers, OSs, and implementations throughout the years have ended up with many different files and meta tags, that we as developers need to handle otherwise we end up with missing or pixelated icons.

Easy Mode

I recently met my new best friend, Real Favicon Generator. It took all these pains I just wrote about and just made it a breeze to handle. Best of all, it’s customizable!

You just have to add in your existing favicon image (for best results, a SVG or high-quality PNG is recommended). From then on, the generator will display previews and allow customization of each category of favicon it will generate:

At the bottom, you can even set up ways of avoiding caching issues, compression, and scaling algorithms (!). After all that, it will generate them all as set, give you a zip with all the files, and the HTML code to paste on your <head>. You can check the result on this very website (fantinel.dev). The favicon should look fantastic on every device/browser combination.

Manual Mode

So, there are 5 types of favicons that we need to add, if we want to support every current browser:

1. Desktop browsers

• favicon.ico, for IE and any other legacy browsers. Optional if you don’t want to support it;
• favicon-16x16.png, the classic one that’s displayed on the tabs;
• favicon-32x32.png, used on Safari for macOS.

2. Android browsers

• android-chrome-192x192.png, shown on the tab card and when added to home screen;
• android-chrome-512x512.png, shown on the splash screen for when the website is installed to the phone. Optional if it’s not a PWA;

3. iOS Safari, and some Android browsers like Samsung Internet

• apple-touch-icon.png, a 180x180 file displayed when the website is added to home screen;

4. Windows 8/10 start menu (optional)

• mstile-150x150.png, only used when your website is added to the start menu as a tile on Windows 8/10, and when not declared, defaults to apple-touch-icon.png instead.

5. macOS Safari Pinned Tabs (optional)

• safari-pinned-tab.svg is used when users pin a tab on Safari for macOS. Basically, you declare a monochrome SVG and a theme color. Safari does the rest.

With those files, you should be good to go on every single browser, by adding this to your <head>:

<head>
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?" />
	<link rel="manifest" href="/site.webmanifest" />
	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
	<link rel="shortcut icon" href="/favicon.ico" />
</head>

Single SVG Favicon

Something that’s starting to become a thing is having a single SVG favicon. Theoretically, SVGs are infinitely scalable, and should look good on all sizes. Unfortunately, browser support is not there yet.

Can I Use reports that, currently (January 2021), only recent versions of Firefox and Chromium-based browsers support this feature. This means that Safari, non-Chromium Edge, IE, and some mobile browsers do not support it. Therefore, unless you want your favicon to just not appear in those browsers, you’d still have to use other file formats as well. The downside of this approach is that all favicons would look the same, and you won’t be able to customize and have differently-shaped icons for mobile devices, for example.

<head>
	<link rel="icon" href="favicon.svg" />
</head>

Wrapping Up

Favicons suck. Luckily, there are people working to make it suck less. With the approach presented on this article, your website should be able to display its best favicon on all browsers for years to come.

Last year, GitHub added a new cool feature for the user profile. You can now add a README file to it, and it will show up besides your profile pic. This is great for talking a bit about yourself and what you do, putting some contact info, or simply making a cool first impression.

Creating the Repository

For adding this to your profile, there’s a little secret. Instead of an option in your “Edit Profile” settings, this is achieved by ==creating a new repository with the same name as your GitHub username.==

You can choose to initialize the repository with a README file already. After that, the content of this file will already start showing on your personal profile.

The README is just a Markdown file, which may make you think initially that you can only write in stuff with GitHub’s default styling. However, when you get creative, there’s a lot more you can do. You can add images and GIFs to it, sure, but SVGs are the real heros here. By adding SVG files to the Markdown file, you enable a lot of possibilities. SVG files support HTML tags and CSS styles (including animations!)

For adding HTML to the SVG, we can use the <foreignObject> tag. This is an element that can include elements from different XML namespaces. Which means that even though you’re in a SVG namespace, you can use XHTML elements and all the features it supports, including the <style> tag for adding CSS.

As an example, check out the SVG file I use to add the “tags” with technologies to my profile:

<svg fill="none" viewBox="0 0 300 120" width="300" height="120" xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="100%" height="100%">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<style>
				.tags {
					display: flex;
					flex-wrap: wrap;
					height: 100%;
					width: 100%;
				}
				.tag {
					background-color: #e3ffff;
					border-radius: 0.25em;
					color: #0ca4a5;
					border: 1px solid #0ca4a5;
					display: inline-block;
					font-size: 0.75em;
					line-height: 2em;
					margin: 0.125em;
					padding: 0 0.5em;
					text-decoration: none;
					font-family: sans-serif;
				}
			</style>

			<div class="tags">
				<div class="tag">Angular</div>
				<div class="tag">Vue(X)</div>
				<div class="tag">JavaScript</div>
				<div class="tag">TypeScript</div>
			</div>
			<div class="tags">
				<div class="tag">(S)CSS</div>
				<div class="tag">Building UIs</div>
				<div class="tag">Web Components</div>
			</div>
			<div class="tags">
				<div class="tag">Ionic</div>
				<div class="tag">Electron</div>
				<div class="tag">.NET</div>
			</div>
		</div>
	</foreignObject>
</svg>