2026-05-30 21:24:33
Yesss! I’ve waited for this for so long! One of the worst parts of my job is trying to implement those kind of separators (really common in designs) without this functionality being an actual thing yet. So many hacks, complex calculations, for something so visually trivial.
And even if it takes a while to get to other browsers, it’s mostly a visual drawback if not supported; so I can already start thinking about using it.
2026-05-30 09:01:10
by Tim Holman
A collection of fun optical illusions, with quick explanations of how they work.
I found out later that this is just one out of many other “toy” collections. I recommend checking those out as well!
2026-05-29 08:00:00
At my job at Useful Group, a need we often have is building carousels (or sliders, whatever name you prefer). While they are often overused (and badly used) around the web, they still have their very valid use cases. For those, we used to rely on third-party JS-based libraries like Slick, that while did their job well, still had some drawbacks that were annoying us:
Around 2 years ago, I tried solving all that and created a library called enhanced-css-slider. It worked and we’ve used it at Useful Group since then, but it had always been a little bit janky in some situations and it was a nightmare to maintain. So, I threw it out the window and built another solution from scratch that solves all the problems listed above + is smooth as heck! I called it Carousel Pilot.
We’ve been able to provide a really great horizontal scrolling experience with just HTML and CSS for a while now, especially with scroll snapping. What was left was all that carousels can do aside from scrolling. So, Carousel Pilot was created for just that.
[!info]
Check out the Carousel Pilot website for docs, examples and an interactive demo.
The idea is that you build your own carousel (with HTML/CSS, however you want to build it), and then add Carousel Pilot to it so that it can… pilot it. It’s a great way to add progressive enhancement to whatever you’re working on: make something that works well enough with just HTML and CSS, and if JavaScript is available, you can add actual functionality to it!
Right now Carousel Pilot provides you with:
The way looping works is that, if enabled, it will immediately clone all your slides a few times, to give looping some buffer to work with. It then keeps track of the real vs fake slides and, as soon as the scrolling motion stops, checks which slide is currently active. If it’s a real one, nothing happens. If it’s a fake one, it stealthily scrolls to the corresponding real slide — no animation, so to the user it feels like nothing happened at all. You can see this in action by making the scrollbar visible in the demo: notice how it immediately jumps to the right position when scrolling stops?
Of course, if I just clone the slides an X amount of times, it means that there technically is an end to the loop. And if you scroll long enough you see it, just like on the iPhone’s alarm settings. But I think that’s a fair compromise. I tried other approaches that would try to jump back to the real slides while the scrolling motion was still happening and they all ended up being too janky for my taste.
Hopefully this tool is useful to you, or at least this post was interesting enough, since you got all the way here ;)
As a reminder, you can find Carousel Pilot, its docs, and an interactive demo at carouselpilot.fantinel.dev.
Thanks for reading!
2026-05-28 08:00:00
Only 11 months ago I announced version 5 of this little website here, and I worked a lot on it since then. I added Quick Reviews, organized the Cool Links, added a whole new Photography section and even built a single page to see them all at the same time.
And it’s working! I’ve been posting a lot more than I ever did, and there’s more people reading than ever, too. Far more than a blog, this has become my corner of the internet where I can publish anything I want to make public. Things I love, hate, or am proud of.
It was starting to get a bit messy behind the scenes, though, and I had too many ideas I couldn’t experiment with because of that. So, I started by rebuilding my existing design in Figma, and experimenting a bit there… which ended up becoming a big enough change for me to label it as version 6 😅
Every part of this website is now significantly improved in one way or another. I went over every single element of it and either cleaned it up, refactored or rewrote it. Which in turn meant I could add a lot of @@care@@ and @@love@@ to every piece of it.
Everything - the way a button reacts when you hover over it, the breathing rainbows, the subtle neon glow of headings, the way things are positioned - was thought out explicitly at some point. That doesn’t mean it’s perfect, as I’m far from an expert in design and UX, but everything was built to be the best it could be for me, within my time and knowledge constraints.
I wanted to call out some of my favorite details in this update:
The first is probably my favorite: since each section of the site has its own accent color, I used the new-ish color-mix CSS function to add just a tint of that accent color to the background of each page:
But wait, did you notice that transition?
As you might have noticed above, every page navigation smoothly animates the content of the page on the right. That’s intentional! I used View Transitions to achieve that animation. I only wanted to apply it when it made sense, so it only happens when you click on one of the main nav menus, but not when you navigate within the blog section, for example.
I really wanted to achieve this effect that the content was, well, a page that was smoothly swapped out as you go between the sections of the website, and I think I achieved that effect. On mobile, the main nav is on top, so the page scrolls from the bottom:
As you can also see above, the header menu changed! Before, all items were hidden behind an hamburger menu. Look, hamburger menus work, but are almost never a good experience. Unless someone is actively exploring the website, they’ll most likely never open it, and chances are they’ll miss out on something they might like.
However, it is hard to find a good solution for mobile. I experimented a bit and landed on a simple horizontal scroll, because the menu is simple enough for it to work. I used this trick to get a smooth dynamic fade to the right/left of the menu, so there’s a visual hint that it is scrollable. And I think the result is pretty functional and @@invites exploration@@:
I added filters to all parts of the website now! Everything can be filtered by date, so it’s easy to get to the older posts. Blog posts, reviews, cool links all also have their own filters by category or type. And in the archive page you can still see everything, but can now filter out the things you don’t care about!
Oh, and filtering on mobile is not behind. I put all the same filters inside a modal dialog that pops up from the bottom of the page. And since it mimics something that phones already have, I made sure that swiping down closes the dialog as well!
The polaroid-like cards in the home page are not just flat, boring imitations: they have some weight to them too. Not much, since they’re just sheets of paper, but have you tried hovering your cursor over them (or tapping on them if you’re on your phone)?
They’re also more complex than they look: they are responsive, but do so by scaling down its content and not just themselves. It does some smart calculations with scale to fit in wherever they are and without risking the label getting too big. Just like a real world element would.
They started as an experiment that I liked too much to not use somewhere. And I needed some ideas of what to put in the home page, so that’s how they ended up there.
I also did a lot of work behind the scenes to make things easier to keep track of and to maintain. Since this is a side project, it’s normal for me to not work on it for a while, and I need things to be in order so I don’t get caught up trying to remember how things work.
So I refactored a lot of the existing code, moved even more content away from the code, and prepped everything I need to finally build some pages I’ve been wanting to for a while, like /about, /now and /uses. I’m still procrastinating on those just a little bit more, though.
I hope you enjoyed seeing a bit of what I put into this digital garden of mine. Most of all, it’s something I do out of pure passion, and I love playing around with these 0s and 1s. It’s my favorite way of expressing myself and learning cool things that I can use at work at the same time 😉
2026-05-27 18:36:33
by Victor Naumik
This website allows you to find the latitude of your city (or whatever city you want) and shows all the cities in the same latitude all around the world (or in the mirrored latitute i.e. opposite hemisphere).
My home city is opposite to Cairo, which is neat. The one I’m currently living in is parallel to Vancouver, which is also neat.
2026-05-25 18:20:54
Will it ever be? Probably not. What will happen then? Nothing good for us probably.
