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 believe it will be sometime in January we’ll hear what the Interop Project is going to focus on in 2024. This is a cross-company effort that picks certain web platform features to make sure work perfectly across browsers, meaning us web developers will more happily choose to implement them. I think it’s awesome. We’ve […]
Do you have a project where every time you open up that project’s root folder in VS Code, you need to run something like npm run dev to get started working? It’s likely that spins up the compiler and server and such needed to see and work on the site. Myself, I’ve got lots of […]
Container queries are similar to media queries but allow you set styles based on a particular element’s current size, typically the width. This is super handy because you can write CSS in a way that gives flexibility to the layout! With @media queries, there’s a tight coupling of the styling of a component’s content and […]
The concept of event delegation in JavaScript boils down to this: rather than attach event handlers directly to the element triggering the event, attach it to an element higher up in the DOM. The event should bubble up there anyway, and you can test the event’s trigger element to ensure you’re responding to the event […]
What is a quantity query? It’s a bit of CSS that allows you to style an element (and its descendants) based on how many children the element has. Example of a Quantity Query Situation Imagine a homepage currently showing 20 articles, more than you normally show. Maybe it’s a slow news day, and the lead […]
First: the Light DOM is just… the regular DOM. When people talk about native Web Components, the Shadow DOM comes up a lot. I have extremely mixed feelings about the Shadow DOM. On one hand, it’s a powerful scoping tool. For example, CSS applied inside the Shadow DOM doesn’t “leak” outside, meaning you can be […]
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.
