Links
The End of Front-End Development
This sentiment (that AI will destroy front-end development as a job) is all over Twitter right now, and I couldn't disagree more. I don't think web developer jobs are going anywhere. And I'm getting pretty sick of the FUD being spread online. So, in this blog post, I'm going to share my hypothesis for what will happen. Things are going to change, but not in the scary way people are saying.
Responsive Border Radius with Badge
This is a really cool CSS-only trick — the little "unread messages" badge stays attached to the corner of the blue box no matter how large the border radius is!
Selecting previous siblings with CSS :has()
One of the more maddening limitations of CSS was for long its inability to select elements based on their children or preceding siblings. This made it impossible to construct CSS selectors that could target previous siblings of an element, but the
has:()
pseudo-class (along with:not()
,:where()
, and:is()
from Selectors Level 4) has thrown out the old limitations and opened up a new world of possibilities when working with selectors.
Laying Out a Print Book With CSS
But CSS isn’t really made for print, right? I mean, sure, like any totally normal person I use
@media print
to make my HTML resume look better when a recruiter runs off a copy, but laying out a 300+ page novel is a different beast. You’ve got page numbers, persistent headings, special cases for first of a chapter, weird paper-sizing, etc. Can CSS do all this? Spoiler: Yes. But you have to push it to the bleeding edge.
The search element
ARIA defines 8 landmark roles to help authors structure their web pages. For every landmark role, except for
search
, a native HTML element could be used - under certain conditions - to expose these landmark roles. With the addition ofsearch
, now every ARIA landmark has a native HTML equivalent.
Videos
Useful & Responsive Layouts, no Media Queries required
Here’s 5 quick responsive layouts that you can use, without any media queries! There’s nothing wrong with media queries, and we still need them sometimes, but these can be really handy in the right situation!
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.