One of the Top Pens of 2023 was this Glowy Hover Effect by Ines. When I was taking a look at it, it finally clicked how it works. In a nutshell, there are two copies of the same HTML layered on top of one another. The top one has a fancy colors and such, but […]
Here’s a little thought about the precarious relationship we live with on the web. As web developers, we have very little power over the platforms we build on. We’re given what we’re given, we use what we get. We can say what we want, but it may or may not have any influence; there are […]
I was reading a great post on Lene Saile’s blog and noticed a cool little design feature on her site that highlights a line of text once you scroll to it. Here’s a video so you can see what I mean: The highlighted line is done with a <mark> element in HTML, which feels right. […]
Layout recalculations, or “reflows”, happen when we change a layout-related property, such as an element’s width, height, or margin. Reflows can happen accidentally or on purpose. For instance, you might want to have a feature that switches from a grid view to a list view. In that case, triggering a reflow is essential for […]
HTML has a color input that is pretty decent: That’s it. Support across the board. However, browsers can and do have different approaches to what happens when the input is used. Ultimately: the user activates the input, may choose a color using the provided UI, and the color becomes the inputs value. It’s not my […]
As you continue to evolve in your career to a senior/lead developer, you may stop and wonder what the next step is for you to continue moving forward. “Should I pursue a leadership role?” It’s important to understand that if you do decide to pursue management, that it’s a role change, not a promotion. It’s […]
Sometimes when crafting up some quick interactive vanilla JavaScript, I add an event listener and write the functionality I want to happen right there. For example, here’s a super basic character counter: Totally works. But, you won’t see any character count until you start typing something. That’s probably not ideal. It should count the characters […]
Google has this little UI widget called Baseline that is intended to show you when Web Platform features are supported across a “baseline” of browser support. I’m a little confused by it. It could just be me. I suppose I’m looking either to be enlightened, or to offer this as feedback in case others share […]
I think the styling story for Shadow DOM Web Components is not great. I’ve got what seems to me like a simple idea that would help that. Fair warning: I’m just some dude on the internet with an opinion here. I’m coming at it from an author’s perspective who has only written a handful of […]
Everyone knows you can use console.log() to log text and variables to the console. Did you know you could also render (limited) CSS, SVGs, and even HTML in it?!? I didn’t! It’s a neat technique that can delight the curious and further your brand for curious users.
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.
