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 […]
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.
Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSS
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.
Here's our page on guest writing. It's a win-win-win!
Frontend Masters Donates to open source projects. $363,806 contributed to date.