Just to cut to the chase, the superpower is being able to adjust their weight (or at least one of their attributes, or as variable fonts call them, an “axis”) without changing the space they occupy. This means that interactive effect and animations can be done without worry for awkward reflow situations and performance problems. […]
Vue has become one of the top JavaScript frameworks for building and maintaining web apps. It is a popular pick for many developers because of its philosophy of creating an approachable, performant, and versatile approach to building scalable apps.
Let’s look at some of the popular tools and libraries used by the community today.
This API, which you can use entirely in HTML, allows you to open an element on top of *everything* despite where it lives in the DOM and without any particular styling.
You may have noticed that the FrontendMasters.com website is fast. We use Go on the backend and a small amount of vanilla JavaScript where it’s needed on the front-end. Our CTO chose Go because of its speed and simplicity. What’s not as simple is the AWS infrastructure behind the scenes. Sure, this diagram looks simple […]
We’ll look at how to use @auth/core, add a Google Provider, and get our sessions persisting in DynamoDB. There is a GitHub repo for reference on everything.
Let’s build a search form that looks like this: That feels like the absolute bowl-it-down-the-middle search form right now. Looks good but nothing fancy. And yet, coding it in HTML and CSS I don’t think is perfectly intuitive and makes use of a handful of decently modern and slightly lesser used features. The Label-Wrapping HTML […]
Jen Simmons posted Help us invent CSS Grid Level 3, aka “Masonry” layout over on the WebKit blog the other day and is actively soliciting feedback. Our hope is that web designers and developers chime in (post to social media, write blog posts) with your thoughts about which direction CSS should take. Don’t mind if I do. Do […]
CSS has linear, radial, and conic gradients, that can all do interesting and complex things… but not quite this, at least not on their own:
That’s what we’ve been calling a Mesh Gradient. There are all sorts of ways to pull it off, like using multiple backgrounds with radial gradients placed at different locations, or placing shapes and using the blur() filter.
Here’s a gallery of them, the thumbnails of which have nice hover effects, and many of which have slow classy animations.
Philip Walton for Google responded to our question We’ve Got Container Queries Now, But Are We Actually Using Them? There are a variety of reasons why usage of them seems to be low, but certainly developers worried about browser support is still a factor. The biggest quoted concern is Safari 15, which is entirely reasonable.
Philip lays out a technique where you build a <responsive-container> Web Component which has a ResizeObserver that updates classes on itself you can use for fallback styles in browsers that don’t support @container.
It’s clever and efficient, but there is stuff I worry about:
@media queries to @container queries with the same numbers, they measure very different things and will now break at different places. Still, if this helps you build a better system you can get to production, godspeed.
Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSS
I found this essay Primitive Obsession by Andrew Cairns interesting. The big example in it is this:
$user = new User('abc123', 'email@address.com');Code language: JavaScript (javascript)Here the User function takes two string params, string being a primitive type, and here, quite easy to screw up by passing them in the wrong order and/or not pre-validating the values. If you agree, there are a variety of ways to tackle this problem which generally boil down to passing in a typed object. TypeScript and Zod fans will be like: yeah duh.
Sets in JavaScript are quite useful as they are like an array, but can only contain one of a specific item. So you can unique-ify an array easily, and even willy-nilly add stuff to it and not worry about duplicates:
const people = ["chris", "chris", "cindy"];
const peopleSet = new Set(people);
peopleSet.add("chris");
console.log(peopleSet);
// {"chris","cindy"}Code language: JavaScript (javascript)Now they are even more useful with recently universally available methods, as Brian Smith summarizes:
intersection()returns a new set with elements in both this set and the given set.union()returns a new set with all elements in this set and the given set.difference()returns a new set with elements in this set but not in the given set.symmetricDifference()returns a new set with elements in either set, but not in both.isSubsetOf()returns a boolean indicating if all elements of a set are in a specific set.isSupersetOf()returns a boolean indicating if all elements of a set are in a specific set.isDisjointFrom()returns a boolean indicating if this set has no elements in common with a specific set.
Here's our page on guest writing. It's a win-win-win!
Frontend Masters Donates to open source projects. $313,806 contributed to date.