Latest Articles

“Multiplexed” Fonts Have a Cool Superpower

By Chris Coyier on May 3, 2024

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

The Vue Ecosystem in 2024

By Ben Hong on May 2, 2024

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.

Anchor CSS Popover

Popover API is Here

By Chris Coyier on April 30, 2024

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.

Courses

Go on AWS Course (and Podcast Interview with Melkey)

By Frontend Masters Staff on April 29, 2024

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 […]

Auth Svelte SvelteKit

Using Auth.js with SvelteKit

By Adam Rackis on April 29, 2024

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.

CSS HTML Search

The HTML, CSS, and SVG for a Classic Search Form

By Chris Coyier on April 25, 2024

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 […]

CSS Grid Masonry

Feedback on Masonry Layout

By Chris Coyier on April 24, 2024

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 […]

Speaking of Jake, his recent article HTML attributes vs DOM properties is a good one for all y’all on that journey to senior developer. I could imagine asking this in an interview. I’d say you should straight up know this is the case and learn over time the more nuanced stuff like which properties reflect into attributes and such.

Jake Archibald, by way of being convinced by Léonie Watson, says that the alt text of an of <img src="..." alt="..." width="..." height="..."> should evoke emotion:

The relevant parts of an image aren’t limited to the cold hard facts. Images can make you feel a particular way, and that’s something that should be made available to a screen reader user.

If necessary, that is. Some images just aren’t particularly emotional, like a screenshot of a banking dashboard. I think what Scott Vandehey says is a more broadly useful way to think about it:

Write alternative text as if you’re describing the image to a friend.

That’s helpful to me. Scott’s article has a bunch more practical advice and links about this topic from the community. Also good to remember: alt text shows when images are broken and different browsers handle that differently depending on how much of it there is.

Little boosts of front-end development news, information, and advice — right to your feed reader of choice.

RSS

I wrote in my masonry proposal feedback:

Are there any more fleshed out alternative proposals?

I thought Jen presented strongly that CSS grid is a great place to put masonry layout, but also that it wasn’t arguing against anything else. Rachel Andrew has that “anything else”, which is display: masonry; with more explanation. What’s nice is that it’s not limiting:

All of the demos in the WebKit post would still be possible.

I assume we’d lose subgrid… (e.g. sharing columns on an element that spans multiple columns) but if it’s the case and otherwise we can do every other thing Jen laid out… then as much as it’s fun to watch two of the biggest companies in the world blogfight, I kinda don’t care which way it goes.

Nikita Prokopov with a pretty humorous article about centering things in web design.

This is my claim: we, as a civilization, forgot how to center things.

Centering things is almost trivial in CSS at this point. There are different approaches, because there are different situations. The knowledge to do so is pretty easy to find.

So something is clearly getting lost between know-how and applying that knowledge.

Clearly, as Nikita showcases many dozen examples of getting it wrong. Plus a fair point: sometimes weird font metrics are the culprit. The leading-trim property is going to be yet another excuse-buster.

Wanna write?

Here's our page on guest writing. It's a win-win-win!

Latest Articles

“Multiplexed” Fonts Have a Cool Superpower

The Vue Ecosystem in 2024

Popover API is Here

Go on AWS Course (and Podcast Interview with Melkey)

Using Auth.js with SvelteKit

The HTML, CSS, and SVG for a Classic Search Form

Feedback on Masonry Layout

The Beat

Subscribe

Wanna write?

Latest Articles

“Multiplexed” Fonts Have a Cool Superpower

The Vue Ecosystem in 2024

Popover API is Here

Go on AWS Course (and Podcast Interview with Melkey)

Using Auth.js with SvelteKit

The HTML, CSS, and SVG for a Classic Search Form

Feedback on Masonry Layout

The Beat

HTML attributes vs DOM properties

On Alt

An alternative proposal for CSS masonry

Centering Things