We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.
Zooming in browsers is an accessibility feature. I’d say that any attempt to fight against it is bad form. Don’t do it. Leave it be. I have seen compelling examples of ways to code that work with browser zoom that help make a site look nicer when high levels of zoom are applied. But they […]
CSS developers got the ultimate dream: container queries. But now that they are here, are we actually reaching for them as much as we thought we would?
Here is a list of popular courses on Frontend Masters for May 2024. Deep JavaScript fundamentals, React, and TypeScript continue to be incredibly popular. We’re proud that our community values learning the deep fundamentals—investing in core skills pays off for your entire career. As new tools and techniques evolve, it is much easier to stay […]
A very basic step-by-step guide of exactly how to do it for static files like .html, .css, and .js files.
Let’s get into the challenges and strategies of loading data in web applications, focusing on the comparison between client-rendered sites and server-rendered applications. There are some clear negative performance impacts of SPAs and server-rendered apps are *usually* better here, except when data is slow. Then what?
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 through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.