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.
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 […]
If you want to use multi-page view transitions, this used to be a prerequisite:
<meta name="view-transition" content="same-origin">Code language: HTML, XML (xml)That’s dead. Now you do this:
@view-transition {
navigation: auto;
}Code language: CSS (css)Thanks to Bramus for the PSA and update article.
David Bushell has some choice words about modern WordPress development.
I loathe what WordPress development has become. If you haven’t kept up with Gutenberg and full-site editing (FSE) you may be surprised at how radically different modern WordPress themes are — and not in a good way.
I’m torn on all this. I actually think the block editor is great. (I don’t think we call it Gutenberg anymore? That’s just the bleeding edge plugin?) There are serious rough edges, but it’s big improvement on building content. But FSE somehow feels a step too far to me. Where I think the way blocks are stored as content as HTML comments is clever, actually writing them to set up a theme seems gross. How it pushes how your theme actually works into the database, is even grosser. That’s not version controlled and requires an exotic syncing process and such.
I’d say “you don’t have to do it that way” (I don’t), except that’s what some people did with the block editor by using the “classic editor” plugin, and if you’re still doing that you’re really swimming upstream these days.
Google released a new page listing web platform features: webstatus.dev
For the first time you’ll have a way to see the entire web platform mapped as a set of features, along with their support in browsers.
It’s explicitly not a caniuse replacement. In fact it’s use case is rather niche: it’s mostly to show off what’s new on the web for people (like writers) who are specifically looking for that. Since that’s the use case, I’d vote they get some links to resources in there somehow so there is clear path to know what the feature even is.
Peak in DevTools. Looks like it’s built from a custom set of Web Components.
The State of HTML 2023 Results are out!
I thought this survey was more interesting to take than reading these results. It’s not that the results aren’t interesting. I’m almost impressed by how low the “used it” percentages are for certain features, like less than half of people have used a <details>?? And 28% are itching to use tabindex again? 😬 It’s just that in taking the survey we were all reminded of how many interesting things are going on in HTML land and likely learned about a good many things, like there is a Badging API??
I like Lea’s conclusion:
Some argue that improving HTML is futile, but the survey resoundingly demonstrates the contrary. Developers crave more interactive HTML elements: not only were interactive elements like
<datalist>or the Popover API among those accumulating the most positive sentiment across all categories, but in addition all top missing elements were interactive widgets.
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.