MoreRSS

site iconMatt FantinelModify

Web Developer in Brazil.
Please copy the RSS to your reader, or quickly subscribe to:

Inoreader Feedly Follow Feedbin Local Reader

Rss preview of Blog of Matt Fantinel

Saudade

2026-08-08 08:00:00

If anything looks wrong, read on the site!

I’ve been trying to write this post for 9 months. I could never get past writing a handful of words on it, but the idea of writing about Saudade has been bouncing around in my head constantly since then. The feeling was there, but the words just wouldn’t come out.

Saudade is a Portuguese word that, at least in Brazil, is kinda special to us. There is a widespread myth that it is a word that only exists in our language, and even though that’s not true, I like to think that at least the sheer amount of meanings we give it is somewhat unique.

If you don’t speak Portuguese, it’s hard to explain what the word is. Wikipedia has a definition I like: “Saudade describes a mix of feelings of loss, longing, distance and love”. I highlighted that last word because while the first three are usually associated with something negative, love surely is not. And that’s true for Saudade as well — while it can definitely mean something negative, there’s a strong positive feeling attached to it as well.

It makes sense, then, that this post’s tone kept morphing between those same four points.

Loss

It started as a melancholic reflection on being away from home, not fitting in, and feeling like a part of me was missing. And in a way, it’s still that. When I wrote Belonging Somewhere, 3 years ago, I was making sense of both old and new information and realizing that my true home was where I’d been all along. Moving away from it was never gonna be painless.

I miss my family, my friends, watching the Juventude games, the food and the weather. I also miss speaking my mother tongue when leaving my house, and I miss having the knowledge of how things work, what to expect, what counts as rude and what counts as weird. The mental tax of minor things in life is already high to brains like mine, but when all the things I’ve spent 30 years learning change at once, it can easily become unbearable.

Longing

Naturally, this evolved into the constant, nagging feeling of being in the wrong place. “What am I doing here? Why did I do this? I just wanna go home!”. I think it’s a perfectly natural feeling to have, and I don’t blame myself for feeling that way. I started longing for home and how everything was back there, and anything here that was different sucked.

But it is a slippery slope and if you don’t realize what you’re doing it can easily lead into an idealization of the past and ruining your present completely.

Distance

Time, therapy and good company heal all, so eventually that longing started to cease and my mind started to distance itself from home a little bit. Not that I stopped thinking about it; I just realized that it was no longer a part of my present. The distance that exists in the literal sense needs to exist in the metaphorical one too, otherwise I’ll never be able to enjoy what I’m living right now.

I started to go out more and got to know a lot of beautiful places around here (winter being over also played a big part in that). Lecco is a really cool place! And there’s even cooler things right near it. So much history, art, landscapes, or even just an interesting different culture to experience. It felt weird at first to allow myself to appreciate a culture that isn’t mine — a mental barrier I have that makes experimenting with new things very difficult — but as I got used to it, it all became more enjoyable.

Once the longing stopped and I accepted that the distance exists, I was able to create a routine that keeps me stable and do activities that are enriching, like sightseeing in an unknown place. Which is not that different from what I started doing 3 years ago, when I was stable at home and started getting to know a lot of beautiful places back there.

Love

All this process led to the best meaning of Saudade: love. I still miss my home very much and I’m looking forward to being back, but I now look at it in a much healthier way: instead of it being the only place for me, or the panacea to all my problems, it is now “just” a place that holds things I love, that made me very happy in the past. And isn’t it great that I have something to look back fondly to?

I’m no longer letting Saudade be a barrier that stops me from enjoying my new life here. Instead, ==I am choosing to make my present worth feeling Saudade for.==

Wrapping up

Defining ourselves can be pretty hard. We often take shortcuts by describing our jobs, where we’re from, our family status or our hobbies, but the reality is that we’re much more than that. We are the sum of everything we’ve ever done and experienced. Our childhood home, our family, the best and worst moments we’ve had, but also what we’re experiencing right now.

When I wrote about longterm goals (or rather, the lack of them), I mentioned it being unfair of me to decide now what future me is gonna do. “Future you has a way better idea of what they want than present you does”, I said. When I first started thinking about this post, I was doing the total opposite of that. I was letting dumb old me decide for future me based on information I had back then, but I know so much more now. I’m glad I got back on track.

Finally getting to write it means a lot to me, as the last year hasn’t been easy, though it was definitely fulfilling. Wherever you are, I hope you have things worth feeling Saudade for =)

Cool Link: State of Devs 2026

2026-08-06 19:41:06

This is a survey for developers about everything but coding, that is accepting answers up to September 5. If you’re a developer, it’s worth participating! It doesn’t take long to fill and can help understanding the current environment of the dev industry in such chaotic times.

Cool Link: Dustin Mierau's Website

2026-08-05 20:51:46

by Dustin Mierau

There’s a lot of websites that mimic retro desktops nowadays (they’re cool!), but this one feels truly special by having its own aesthetic, and it feels so fun to explore! I love ghow you can draw your own stamps and leave your own mark on it.

Cool Link: putt.day

2026-08-04 01:51:35

by ell

Play a different hole of mini-golf in your browser every day. You can see other people playing as well, and share your play with friends if you’re into that.

Spacing Prose with CSS

2026-07-24 08:00:00

If anything looks wrong, read on the site!

While watching this Kevin Powell video (starting at 4:15), I found out about a really cool CSS pattern for styling prose (as in article text, just like what you’re reading right now). More specifically, it’s about defining the space between items. It’s based on Tailwind’s “prose” styling and uses the lobotomized owl selector (* + *).

[!info] The Lobotomized Owl 🦉 The name was introduced by Heydon Pickering back in 2014, and it’s an awesome name for a very straightforward selector.

The lobotomized owl (* + *) will select any element that is not the first, which makes it basically the same as *:not(:first-child).

The Prose

Let’s assume we have a blog post that has its content rendered like this:

<div class="prose">
	<h2>Lorem ipsum dolor</h2>
	<p>Ad officia consequat pariatur.</p>
	<p>Mollit eu anim qui qui et labore sit tempor sit.</p>
	<h2>Fugiat laboris esse mollit</h2>
	<p>Ad ipsum dolore laboris nisi</p>
</div>

How would you control the spacing between each piece of the text? You could either set a flat spacing (by setting .prose a flexbox and giving it a gap, among other ways), or target any child and give it a predefined margin-top depending on what type it is (so it’s larger on headings, for example).

An extremely elegant way of doing that, though, is by using em, which will make the margin vary by the font-size of an element!

/* The default value for 1rem is 16px */
h2 {
	font-size: 2rem; /* 32px */
}
p {
	font-size: 1rem; /* 16px */
}

.prose > * + * {
	/*
		Since we're using em, it will scale with
		the font size of the current element.
		For the h2, our margin would be 32px * 1.4 = 44.8px
		For the paragraph, 16px * 1.4 = 22.4px
	*/
	margin-top: 1.4em;
}

The CSS above sets a margin-top to any element (except the first) based on the text size of that element (because of em). So on a <p> with 16px font size, margin-top would be 16px * 1.4 = 22.4px. On an h2 with 32px font size, it’d be 44.8px.

[!info] A refresher on em vs rem It’s not uncommon to get these two units confused — but it’s important to understand their differences or you might end up with some pretty nasty debugging challenges.

Both scale off of font-size, what changes is what font-size they use. rem will always refer to the font-size of the body element, which defaults to 16px if not set. This means that it is a very predictable unit. 1rem will always be the same value no matter which element uses it.

em, on the other hand, scales off of the font-size of the current element. This means that 1em inside a heading tag can be very different from 1em in a footnotes section. Both have their uses and can coexist, as we can see right now.

This sets a nice default spacing for all possible elements inside of your .prose div. But you can also use the same idea to handle special cases. Let’s say you always want your images to have bigger margin around them. We can target them specifically:

.prose > * + img {
	/* 
		I am not setting a font-size for imgs, 
		which means 1em will default to 1rem, which defaults to 16px 
	*/
	margin-top: 2.8em;  
	margin-bottom: 2.8em;
}

I am adding a margin-bottom for that one as well so that the spacing remains consistent. Since margins don’t stack in CSS, this means that even if the element below the image has a margin-top, it will merge with the image’s margin-bottom. In practice, only the biggest margin counts.

Live demo

See the Pen CSS Prose Styling Demo by Matheus Fantinel (@matfantinel) on CodePen.

Pro tip: use a variable with a fallback

A really good practice when doing stuff like this is to use CSS variables with a fallback value, so you can easily override the default value whenever you need.

Consider your .prose styling has a default spacing of 1.4em, as we’ve established above. But now you want to use that same styling in a card component. Since on that card you have less space to work with, it’d be ideal if the spacing was a bit tighter than normal. You could do something like:

.prose > * + * {
	/* 
		Use the --prose-spacing variable value if it exists, 
		otherwise use 1.4em
	*/
	margin-top: var(--prose-spacing, 1.4em);
}

.prose > * + img {
	/* 
		If we make the image spacing also based on --prose-spacing,
		it will scale on the card too.
	*/
	margin-top: calc(var(--prose-spacing, 1.4em) * 2);
	margin-bottom: calc(var(--prose-spacing, 1.4em) * 2);
}

.card .prose {
	/* When inside the card, prose spacing is a bit tighter */
	--prose-spacing: 1.2em;
}

Pro Max tip: use round

If the decimal values (like margin being 22.4px) bother you, you can use the CSS round function to make sure it maps to a predictable, integer value.

If you’re interested, I highly recommend reading this amazing article by Ahmad Shadeed about the round function, but the gist of it is that you can do something like:

/* The default value for 1rem is 16px */
h2 {
	font-size: 2rem; /* 32px */
}
p {
	font-size: 1rem; /* 16px */
}

.prose > * + * {
	/*
		h2's margin would be 44.8, becomes 44px
		p's margin would be 22.4, becomes 22px
		The "2px" second parameter tells it to
		round to the nearest multiple of 2px.
		If I used "1px" instead, it 44.8 would
		round up to 45px.
	*/
	margin-top: round(var(--prose-spacing, 1.4em), 2px);
}

Wrapping up

This kind of elegant, simple approach is one of my favorite things about CSS and web development in general. We can easily over-engineer things, but nothing beats something like this.

Quick Review: Red Rooms

2026-07-23 20:00:00

Red Rooms
2023, Pascal Plante

My rating: I like it

This is a good one. A high quality psychological thriller that grips your attention right from the start and sticks with you after it ends. Amazing use of color, too!