A deep dive into producing an interpolated “gradient” of colors from just two provided colors.
To quote Chris Coyier from his recent post, Modern CSS Features You Need to Know: Given CSS’s ever-evolving capabilities, having a robust understanding allows you to build better-looking, higher-performing, and more accessible websites. And Jen Kramer’s new course Ultimate CSS Grid & Layout Techniques will level-up your layout skills and take you beyond the basics with Grid, Flexbox, […]
People from the official Discord weigh in.
Let’s look at using CSS as an efficient alternative to JavaScript for creating simple timers. We’ll use modern CSS properties like @property, @keyframes, and pseudo-elements with counter() values.
There were over 20,000 respondents in 2023. Key findings include the popularity of the datalist feature and discontent with form elements, especially styling issues. There’s mixed sentiment about web components, a desire for new HTML elements like datatables, and signs that the divide between HTML/CSS and JavaScript may be narrowing.
Server-side component rendering can improve data loading efficiency over client-rendered SPAs. Despite their benefits, such as out-of-order streaming, they have limitations, including slow server action updates and lack of support for client-side interactivity. React Query complements RSC by managing client-side data updates, addressing some of RSC’s drawbacks.
It might seem like you could just set a transition on the opacity of the dialog element in CSS from 0 to 1, but it doesn’t work. You’ll need to learn about @starting-style, and the overlay and allow-discrete keywords.
It’s not that modals are all automatically bad, it’s that, as Adrian Egger says, “modals are the crutch of the inarticulate design and developer” and they “are easily replaced with other patterns that are less jarring.” on the dedicated site for this crusade: modalzmodalzmodalz.com. Adrian’s personal site is sweet, too.
Will Boyd covers how there is an infinity value baked into CSS. Never lose a z-index battle again, heh. I enjoyed little tidbits like how you can’t animate to infinity because…
… there are no incremental values on the way to infinity. A fraction of infinity is still infinity. So for every frame of the animation, the animated value is infinity.
I used one of Will’s ideas right after seeing it:
border-radius: calc(infinity * 1px);Code language: CSS (css)This is when want that “pill shaped” button where the corners round as much as they can. You’d think 100% would work there, but that does something very different with border-radius (try it).
I spent the evening exploring a web that is full of applications and sites and only limited by URLs that I could think of (heh – this web never has a 404 or an unregistered domain). WebSim provides a simulation of the web via a faux Web Browser. It’s a web that doesn’t actually exist, but one that works incredibly well.
Almost every site has at least one third-party script on it, and the average is 5. I’ve taken that from the blog post Introducing Nuxt Scripts from Harlan Wilton. While third-party scripts are a performance and security drain, they are, as Harlan puts it “fundamentally useful and aren’t going anywhere soon.”
Typically, you just chuck a third-party script in the HTML somewhere with a <script> tag that is high enough up that any usage of it comes after. But these days, with JavaScript frameworks abound, loading and using them is far more complicated. I applaud Nuxt for taking this head on and providing sensible helpers for them. Loading triggers and callbacks, types, bundling, etc.
Looks like it’s on the roadmap, but getting Partytown in there to gets the scripts off the main thread would be very good.
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. $363,806 contributed to date.