You can capture scrolling events and do your own work with the information in them. It can do cool things, but you’ve got work to do.
I’m already a little over all the green. What was I thinking? I’m much more of a nice gray color palette kinda guy with some fun poppy colors. That’s what we need to get to here. When we left off, we just had wireframes going. It’s time to get some style on this thing! Custom […]
Quizzing has always been a highly requested feature, and we wanted it not just to be a test — but a course that combines challenging questions with in-depth, quality instruction. We released our first quiz-based course last year covering advanced web development topics and folks seem to really enjoy it. Today, we’re excited to release […]
We left off with a wireframe-y looking HTML-ized version of our design. Personally, I’m a little tempted to get some CSS on there, but let’s hold off and do the very basic JavaScript functionality first. That will make it, ya know, actually functional, and having some of the interactive stuff in place might inform some […]
When I think of showing off syntax highlighted code on the web, I think of code that takes in a string of code, finds relevant substrings (tokens) with elaborate RegExes, then wraps them in <span>s with classes to that color can be applied to those classes. This is quite literally how it works. The really […]
Today, I did some maintenance work on a Next.js course website (we have tons of them built on Next.js), and I thought to myself: “Wow, this framework has been around for a long time and continues to evolve. It is certainly not a one-hit-wonder.” For context, I’m generally more of a purist, opting to use […]
URL, which stands for Uniform Resource Locator, is an address to access resources on the internet. Each URL points to a unique resource on the web. URLs can sometimes contain special characters or need to be manipulated dynamically. In this article, we’ll explore the modern techniques for working with URLs in JavaScript, and answer the […]
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.
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.
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.