Crop marks are an idea that comes from the print design world. Design in the bleed area will be cut away by giant cutter machines, and that bleed area is designated by the crop marks. We can do it on the web too, just for kicks.
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.
I’m a huge proponent of open source, and here at Frontend Masters, we’re constantly looking for ways to support and promote various projects. Whether it’s through creating courseware for new projects, teaching our students how to work with them, engaging with maintainers, or even donating directly to some projects. In fact, since 2019, we’ve donated […]
You’ll hear people say they miss the Movable Type days. Or that Adobe should have never killed off Fireworks. Or in their heart they are still a MooTools stan. Or that their good ol’ days were Backbone and Lodash. Laying out sprites was their heyday. Table-based layout still makes the most sense to them. Every […]
I’ve seen all the excitement about scroll-driven animations. I’m excited too. Animations that use scroll position as a timeline rather than a time-based duration is just a clever idea. It’s something that websites have been using probably-too-much JavaScript for for a long time and it’s nice to see that kind of thing move to CSS […]
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.