Frontend Masters Blog – Page 30 – Helping Your Journey to Senior Developer

Latest Articles

Git

Tower vs. GitHub Desktop

By Chris Coyier on March 29, 2024

I’m a GUI guy when it comes to using Git. I like to click over to a native app and immediately see useful things. Like a list of files that were changed in the repo I’m actively working on, on the branch I’m actively working on. This feels efficient and productive to me. I can […]

CSS

What You Need to Know about Modern CSS (2024 Edition)

By Chris Coyier on March 26, 2024

My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t […]

Contentful Eleventy Liquid

Building a Live Preview with Eleventy, Contentful, and Liquid Templating

By Silvestar Bistrović on March 22, 2024

As a part of the marketing team at Heyflow, I collaborate with people who work on the company’s website. Although all team members are technically acquainted, sometimes they struggle to update the website. The struggle is not being able to visualize what will change on the page when updating the content. Saving the updates and […]

CSS Scrolling

Chill Scroll Snapping: Article Headers

By Chris Coyier on March 19, 2024

CSS has a feature called scroll snapping. A lot of the demos and examples, rightfully so, focus around things that benefit highly from it. For instance, an image slider, carousel, or grid of things that just beg to be aligned after scrolling. But you don’t have to be in such a strict and rigid situation […]

Discord

Front End or Full Stack? A Replay of an Interesting Discord Conversation

By Frontend Masters Staff on March 18, 2024

If you’re an active Frontend Masters member, under the Apps section of your account you can join our Discord community to chat with fellow developers. There are often great conversations there. Here’s one about choosing a path to focus on. Should I go deeper into front end, or expand to learning full stack? xSOu!3nder Hey […]

@property Animation CSS Mask

Creating Wavy Circles with Fancy Animations in CSS

By Temani Afif on March 15, 2024

In a previous article, we created flower-like shapes using modern CSS (mask, trigonometric functions, etc). This article is a follow-up where we will create a similar shape and also introduce some fancy animations. Here is a demo of what we are building. Hover the image to see the animation Cool right? If you check the […]

The Beat

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:

You can’t just update @media queries to @container queries with the same numbers, they measure very different things and will now break at different places.
Every component is going to have different breakpoints, and now you need to keep those breakpoints synced in both HTML and CSS.
Dealing with that style duplication is tricky. I would think a lot of setups don’t have a processing setup that has mixin abilities.

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.

Nicholas C. Zakas on the idea that we have choice in server-side JavaScript runtimes now, and you should be careful.

… it makes sense to preserve the ability to switch runtimes easily. It doesn’t matter if you want to use Node.js or Deno or Bun in production right now. What you really want is the ability to change your mind later with as little pain as possible.

Here’s his advice (truncated for brevity):

Don’t use Deno- or Bun-specific APIs. Stick with Node APIs that are already supported in Deno and Bun.

Use the “node:” prefix for Node.js internal modules. Node works just fine when using the “node:” prefix, so you can ensure compatibility across all three runtimes.

Use npm and JSR packages, not HTTP module specifiers. Deno is still the only runtime to support URL modules, so it’s best to stick with npm and JSR packages, which can be used across all three.

Use package.json for dependencies. Don’t use the proprietary file formats which have no advantages.

Always run CI with Node, too. Even if you’re deploying to Deno or Bun, run CI in Node.

Featured

Step Gradients with a Given Number of Steps

Popular

Latest Articles

Tower vs. GitHub Desktop

What You Need to Know about Modern CSS (2024 Edition)

Building a Live Preview with Eleventy, Contentful, and Liquid Templating

Chill Scroll Snapping: Article Headers

Front End or Full Stack? A Replay of an Interesting Discord Conversation

Creating Wavy Circles with Fancy Animations in CSS

The Beat

Did you know?

Featured

Step Gradients with a Given Number of Steps

Popular

Latest Articles

Tower vs. GitHub Desktop

What You Need to Know about Modern CSS (2024 Edition)

Building a Live Preview with Eleventy, Contentful, and Liquid Templating

Chill Scroll Snapping: Article Headers

Front End or Full Stack? A Replay of an Interesting Discord Conversation

Creating Wavy Circles with Fancy Animations in CSS

The Beat

How to use container queries now

Primitive Obsession

New JavaScript Set methods

Make Sure You Can Switch

Subscribe

Wanna write?