I have recently been reading a lot given that I had a lot of time on my hands. Many of my readings have been about my work, what I'm passionate about in my work — how to build amazing experiences on the web and native platforms.
So I have quickly put together this not blog to share not posts here. Read along if you’re curious what this crazy idea is about.
What is a not blog?
I get an urge to try things out when I read about them. For example: I like a lot the has() CSS selector features. So I naturally want to try them out. But a traditional blog doesn’t offer the opportunity to actually embed code easily into a post, like the features I’m trying out.
I could embed some tool into the post with code examples but I am not a big fan of such tools.
Also, I would like to share the experience of building something from scratch, this not blog, so that whoever is curious, can follow how I build it.
For instance, I would like to experiment and showcase how the has() selector works. For this I created the below figure:
<figure>
<img src="/public/images/nothing_at_all_aiseo_art.jpg" />
</figure>
which renders like this:
the above figure with the colorful image and the one below look different only because the bottom one has a figcaption.
<figure>
<img src="/public/images/nothing_at_all_aiseo_art.jpg" />
<figcaption>image generated with <a href="https://art.aiseo.ai" target="_blank">https://art.aiseo.ai</a></figcaption>
</figure>
Here’s the selector that makes this possible (nb. stable Firefox seems to not support has() by default yet):
.post figure:has(figcaption) {
background: var(--color-neutral-7);
padding: 2rem;
max-width: 50ch;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
The browser will add the additional styling only to the figures that have a figcaption style.
So if you are interested in Go, SwiftUI, good CSS practices and on top of everything a very iterative, lean delivey approach follow the story here.