Latest Articles

Performance Speculation Rules

Playing with the Speculation Rules API in the Console

By Stoyan Stefanov on June 7, 2024

This new API enables client-side prerendering, improving performance for users who are likely to visit a new page.

Newsletter

Frontend to Fullstack Monthly #14 – The state of HTML in 2024

By Frontend Masters Staff on June 6, 2024

We’re back with Frontend to Fullstack Monthly #14 – new courses, updates, and all the industry’s latest news! Frontend Masters Boost (From this Blog) This month, Boost welcomed new writers sharing essential tools, technology, and modern browser features: For beginners: Frontend Masters Courses We launched four new courses: We have recorded a ton of courses […]

Web Components

Live Demos of Stand Alone Web Components

By Chris Coyier on June 6, 2024

A “stand alone” Web Component is a Web Component that provides some design or functionality but that has little by way of dependencies, strong opinions, or heavy design. In other words, Web Components that could easily imagine sliding into any project without much trouble.

JavaScript Promises

Control JavaScript Promises from Anywhere Using Promise.withResolvers()

By Alex MacArthur on June 5, 2024

This method enhances flexibility by allowing promises to be resolved or rejected remotely, simplifying and streamlining asynchronous code.

User Testing

Fast and Budget-Friendly User Research and Testing

By Paul Boag on June 4, 2024

Despite perceived challenges like cost and time, modern tools such as Lookback and Maze offer affordable and efficient remote and unfacilitated testing options.

TypeScript

Testing Types in TypeScript

By Adam Rackis on June 4, 2024

This post explores advanced TypeScript utilities for testing and verifying type correctness, akin to unit testing without extra setup.

Courses

New Course: Modern CSS Layouts with CSS Grid

By Frontend Masters Staff on May 30, 2024

To quote Chris Coyier from his recent post, Modern CSS Features You Need to Know: Given CSS’s ever-evolving capabilities, having a robust understanding allows you to build better-looking, higher-performing, and more accessible websites. And Jen Kramer’s new course Ultimate CSS Grid & Layout Techniques will level-up your layout skills and take you beyond the basics with Grid, Flexbox, […]

I mentioned lazygit the other day, a project I find to have a tremendously well done interface for being entirely at the command line. As frustrated as I get with tmux sometimes (the scrolling and the copying text, ughgkh), I still find it to be useful and impressive that “UI” can exist at all in the terminal.

I’ve since seen Posting, an API client, which also looks amazing. The Charm tools are pretty jaw dropping to me, which include stuff like a Markdown app and email sender. Turns out, there are actually a ton of “TUI” apps, collected here by Justin Garrison. An SQL client, a file manager, and an image viewer, are a few that caught my eye.

Brecht De Ruyte has a good rundown of what’s up with future named versions of CSS. You might remember “CSS3” and how hot of a buzzword that is. JavaScript still has successful “ES202X” naming that groups features into useful buckets. But CSS hasn’t benefited from named groups since CSS3.

I’ve written:

CSS3, and perhaps to a larger degree, “HTML5”, became (almost) household names. It was so successful, it’s leaving us wanting to pull that lever again. It was successful on a ton of levels:

It pushed browser technology forward, particularly on technologies that had been stale for too long.

It got site owners to think, “hey maybe it’s a good time to update our website.“

It got educators to think, “hey maybe it’s a good time to update our curriculums.“

Then it felt like a pipedream. Now it’s real! You can see how the official community group is grouping CSS features and comment on the RFC (Request for Comments). I take no issues with the groups. Ship it.

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

RSS

Nolen Royalty made a website (now turned off) with a million checkboxes on it which was realtime for everyone viewing it. Users can check (or uncheck) a checkbox and that is persisted to a datastore and propagated to all visitors instantly. This, as it turns out, is a non-trivial task if you want it to run well, handle scale, and not cost a ton of money.

I’m posting this because if reading this kind of thing is interesting and kind of thrilling for you, a career in DevOps is probably not a bad idea for you.

David Gerrells has a bunch of fun rendering far too many CSS box-shadows for things that box-shadow was never meant to do.

I found out my m1 can render a stupid number of these bad boys and so I set out to see just how far you can push them and boy did I.

Because box-shadow mimics the shape of the original element, doesn’t have to have any blur at all, and can be colored any color, they can be a way to draw anything you want wherever you want with a single DOM element. Doing faux ray-tracing as David does at the end is not something I thought I’d ever see.

I found it fun looking at the DevTools while the demos were cooking.

Wanna write?

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

Latest Articles

Playing with the Speculation Rules API in the Console

Frontend to Fullstack Monthly #14 – The state of HTML in 2024

Live Demos of Stand Alone Web Components

Control JavaScript Promises from Anywhere Using Promise.withResolvers()

Fast and Budget-Friendly User Research and Testing

Testing Types in TypeScript

New Course: Modern CSS Layouts with CSS Grid

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

Playing with the Speculation Rules API in the Console

Frontend to Fullstack Monthly #14 – The state of HTML in 2024

Live Demos of Stand Alone Web Components

Control JavaScript Promises from Anywhere Using Promise.withResolvers()

Fast and Budget-Friendly User Research and Testing

Testing Types in TypeScript

New Course: Modern CSS Layouts with CSS Grid

The Beat

TUIs

It’s Time To Talk About “CSS5”

Scaling One Million Checkboxes

So you think you know box shadows?