The new CSS sibling-index() (and -count()) functions are perfect for staggered timing affects. This goes a little step further staggering both before and after a selected element.
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 […]
I feel like I haven’t seen a really nice web design inspiration gallery in a while so Design Spells is really doing it for me.
Design details that feel like magic.
I think it’s the focus on websites. 😍
Google has this little widget called Baseline. Here’s a screenshot example:
The idea is for it to accompany a web platform feature so you can have a sense of what browsers support it. Web developers are rightfully skeptical of new web tech, wanting to know when they can actually use a feature, so this is helpful.
But there is crucial information missing here. Developers don’t decide to use a feature only based on browser support, but also:
Dave posts about this common web component learning blunder. The blunder is… not using a framework. I’m very guilty of this myself. I was just commenting about how the lifespan of web components could be wonderfully long if we keep them dependency free, which theoretically we can because they are a native part of the platform. But…
If you take anything from this post, please understand this: web components (most likely) weren’t designed for you. Not to dissuade you from using them, but they were purposefully designed to be a low-level bare metal primitive for library authors to build on; they were designed to be used with a library, a thin layer of abstraction butter on top.
You’re supposed to use them with a framework on top. As Dave lays out, they buy a lot and cost little.
Some things you just can’t undo in CSS.
<div style="display: none;">
<div style="display: block;">
Still hidden.
</div>
</div>Code language: HTML, XML (xml)But, perhaps unintuitively, that does work with visibility.
<div style="visibility: hidden;">
<div style="visibility: visible;">
Visible
</div>
</div>Code language: HTML, XML (xml)Ben Nadel makes the point that pointer-events is another one of those properties that allows you to “undo” what a parent has set. It’s like pointer-events just cascades down to descendent elements and you override it, but some properties you just can’t come back from, like display above or opacity.
Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
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.