Latest Articles

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

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

Book

The Front End Developer/Engineer Handbook 2024 — A Guide to Modern Web Development

By Frontend Masters Staff on April 23, 2024

We just released the highly anticipated Frontend Handbook 2024, by Cody Lindley! The handbook provides an in-depth overview of the skills, tools, and technologies necessary to excel as a front-end developer / engineer. With 38,000 words of practical knowledge and advice, it covers the core technologies—HTML, CSS, and JavaScript—and how they form the foundation of […]

Avatars JavaScript SVG

Faces.js and Playing with Densely Packed Grids

By Chris Coyier on April 22, 2024

I only just recently saw Faces.js, a library for producing controllable cartoony avatars. It was launched in 2012, so I’m a little late to the party. It produces faces (busts, really) randomly, or with certain parameters locked to what you want. I think that’s a really cool idea, and if you needed this kind of […]

Color Dark Theme

What’s Going On in Dark Theme / Light Theme Land

By Chris Coyier on April 18, 2024

There has been a fresh round of enthusiasm and writing around light mode / dark mode support for the web lately. I think it’s driven partially by the new light-dark() function in CSS (CSS Color Module Level 5 spec) that makes it easier to declare values that change depending on the mode. Here’s the basic […]

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.

Happy Friday!

I think I’m a bit unusual in that I typically like to listen to nothing as I work. Or more specifically, code or write. I love listening to music when I’m ever doing anything rote, and podcasts when I drive.

But I gave musicForProgramming(); a try when I saw it the other day and found it quite nice actually, even while coding, so I’m sharing it with you.

And have you ever wondered why there seems to be an outsized number of coders who are also musicians? Kent Beck thinks it’s because of finding pleasure in pattern recognition:

I enjoy music because I enjoy those moments of discovering the patterns in a piece. When I see a pattern, I feel satisfied.

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

RSS

What is the go-to component library these days? I’m not sure there is a clear winner right now. Bootstrap is still popular I’m sure. It seems stable but also sort on maintenance mode and the fact that they are recommending this feels like they are kinda done. I imagine the Sass dependency makes it slot into less and less new projects. The shadcn/ui project is having popularity boom, but the fact that it’s only for React also limits the reach.

Brad Frost kicked off discussion this year about what a global design system might be like. To my web-centric mind, the only answer to this is a component library of web components. And since that is the case, Shoelace is already on the job. I’ve only just learned that…

After setting the record in 2016 for the most funded and most backed software Kickstarter ever (both records still hold), the Font Awesome team is back with a new Kickstarter! Introducing: WEB AWESOME.

Essentially Shoelace 3 is now Web Awesome. Seems very smart. Building a business around what could become the go-to component library will help it become that and stay that.

I heard from a guy once who was incredulous I’d want to block the bots that scrape websites to train AI models. Why wouldn’t I want to help train the intelligence of the future? I get that perspective, I do, but shouldn’t it be up to me? The companies that are scraping my sites are for-profit and turning the access to them into paid products. And they aren’t cutting checks — they’re drinking milkshakes. Nor are they typically linking to or crediting sources.

The AI company bots say they’ll respect a robots.txt directive, which is a file that instructs the permissions of whole-internet roving bots on a particular site. They might, but given the level of respect shown so far, I wouldn’t bet on it. I like the idea of instructing your actual web server to block the bots based on their User-Agent string. Ethan Marcotte did just this recently:

First, I polled a few different sources to build a list of currently-known crawler names. Once I had them, I dropped them into a mod_rewrite rule in my .htaccess file:

Wanna write?

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

Latest Articles

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 Front End Developer/Engineer Handbook 2024 — A Guide to Modern Web Development

Faces.js and Playing with Densely Packed Grids

What’s Going On in Dark Theme / Light Theme Land

The Beat

Subscribe

Wanna write?

Latest Articles

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 Front End Developer/Engineer Handbook 2024 — A Guide to Modern Web Development

Faces.js and Playing with Densely Packed Grids

What’s Going On in Dark Theme / Light Theme Land

The Beat

Centering Things

musicForProgramming();

Web Awesome Kickstarter

Blocking AI Bots