Let’s add a different color to the styles of external links, regardless if they open in a new tab or not:
a[href^="http"]::after {
color: var(--color-secondary-1);
}I have a bold claim: there is a responsive CSS Grid / Flexbox combo layout that can be used to build almost any web layout. At least I haven’t found any layout I wanted to build and couldn’t.
Ahmad did two great reviews of the Threads app. Quite a few interesting CSS or unusual CSS technniques there.
Client component hydration has been a trendy topic these days. Some frameworks like Next, Astro and others are already doing it.
It is not common knowledge that we can achieve a very similar result with pure SSR and declarative shadow DOM.
All typefaces have been instructed to display their ligatures, by default, like this:
body {
font-variant-ligatures: normal;
font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1, "clig" 1, "calt" 1;
}On occasion we need to present a summary of content while allowing the user to deep dive if they want to. The details element is a great way to do this, with good browser support as well. Let’s see how.
a hover statesAll a elements on this page have a customised hover effect. Here’s how to achive that:
a:hover {
text-decoration: underline;
text-decoration-thickness: .1em;
text-underline-offset: .15em;
text-decoration-color: var(--color-secondary-1);
}Many times we need to show a modal to the user, to ask for confirmation, or to show some additional information in a manner which covers the rest of the page user interface. The dialog element is a great way to do this, and it is supported by all major browsers.
Implementing a consistent brand across various devices and channels has never been easy. The diversity of connected devices and their screen sizes is also not helping simplify the process.
Let’s take a stab at how we could improve this.
Previously I shared a very basic example of Go routing. Let’s see how we can improve that a little.
The last several years of web development have been going into a direction of needlessly over-engineering even simplest tasks.
Maybe it’s time to get back to the basics, to use simple solutions for simple tasks. Let’s touch on how I think we should be approaching initial web product development.
In my first not post I mentioned and example of something I find quite interesting in the recent CSS features,that is the has() selector. And while I was preparing to write something about it, which I mightstill do, here’s a great article on Smashing Magazine written by Stephanie Eckles about this exact topic.
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.