Let’s try a fresh take on animating focus rings around a page. Flying focus, as it were. Only instead of measuring where elements are ourselves, we’ll let View Transitions figure it out.
There are A LOT of options these days for getting AI help right in your code editor. What seemed to begin with plugins has morphed into a lot of VS Code forks.
Leaflet.js is a free open-source mapping library. We’ll look at how to use it to create a basic map with location points of cats up for adoption.
Just four declarations in CSS can handle this nicely, while avoiding the vertical scrollbar issue.
We’ll get into layered content, clip-path, and the :has() selector to build a responsive slider with live videos. We can do it by hand, but a few SCSS loops will help make it more manageable.
This helps load in data just *before* a user gets to it, and it works with non-root containers and horizontal scrolling.
Hey we might as well spill out all these wishes as the CSS feature train has been rolling and we oughta get while the getting is good.
The fourth issue of The HTML Review is out. Wonderful writing framed by entirely different and unusual interactive interfaces, brought to you by the power of web technology. A zine come to life.
Just try to pick a favorite.
Steve Yegge makes the prediction in Revenge of the junior developer that this current wave of AI “agents” that help us code with more capability than just type ahead suggestions and refactorings, like file creation, command line usage, and more, is just the fourth wave of six. The fifth is an individual developer managing multiple agents (a “cluster”) which gives way to “fleets” of agents in the sixth.
The revenge part? Junior developers, less stuck in their ways, will be quicker to adapt to these new ways of working. I think it’s interesting to think about, but my experience, the value of someone who deeply knows how to understand a system and fix and prevent problems, traits that define a senior developer, will remain as valuable as ever.
I enjoyed this blog post from Blake Watson about a simple requirement and then going down the rabbit hole of functional programming to solve it in increasingly reusable, if mind-bending ways. By the end:
Creating a function that returns a function that returns a function can get a little trippy to think about. But what we’ve done is make our work reusable and flexible.
Blake admits he didn’t actually use the fully functional abstracted functional version. I vibe with that. Take it as far as you can without sacrificing clarity.
Chrome 135 (in Beta as I write, probably stable early April?) will have customizable select elements in it. You opt-in to it in CSS, and once you have, you can go ham on styling regular ol’ <select>, <option>, ‘n’ friends elements. Very progressive-enhancement friendly as a select without custom styling is… fine.
It’s interesting and notable that even when it does ship Chrome is prepared to protect the web:
Chrome has the features behind a Finch experiment in case there is an emergency need to turn it off. If things go well, the experiment will end and the code will be shipped permanently into the source.
I’ve seen people playing!
position: sticky;legend (👍)Developer 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.