Latest Articles

Building a TODO App from Scratch — Step 4 — Styling & Interactive Choices

By Chris Coyier on February 28, 2024

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

Courses JavaScript Podcast

Testing Your JavaScript Knowledge Course (and Podcast Interview with Lydia Hallie)

By Frontend Masters Staff on February 28, 2024

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

JavaScript TODO

Building a TODO App from Scratch — Step 3 — Basic JavaScript Functionality

By Chris Coyier on February 22, 2024

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

CSS JavaScript Syntax Highlighting

Syntax Highlighting with no spans?!

By Chris Coyier on February 21, 2024

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

Next.js

Sending My Respect to Next.js (and Vercel)

By Marc Grabanski on February 20, 2024

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

JavaScript URLs

Encoding and Decoding URLs in JavaScript

By Juliet Ofoegbu on February 20, 2024

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

:has()CSS Dialog Scrolling

Scroll-Locked Dialogs

By Chris Coyier on February 19, 2024

I just wrote about the <dialog> element, with some basic usage and things to watch for. It’s a great addition to the web platform. Here’s another interesting thing we can do, connecting it to another one of my favorite new things on the web platform: :has(). (You can see I’ve been pretty into it lately.) […]

The Beat

David Bushell has some choice words about modern WordPress development.

I loathe what WordPress development has become. If you haven’t kept up with Gutenberg and full-site editing (FSE) you may be surprised at how radically different modern WordPress themes are — and not in a good way.

I’m torn on all this. I actually think the block editor is great. (I don’t think we call it Gutenberg anymore? That’s just the bleeding edge plugin?) There are serious rough edges, but it’s big improvement on building content. But FSE somehow feels a step too far to me. Where I think the way blocks are stored as content as HTML comments is clever, actually writing them to set up a theme seems gross. How it pushes how your theme actually works into the database, is even grosser. That’s not version controlled and requires an exotic syncing process and such.

I’d say “you don’t have to do it that way” (I don’t), except that’s what some people did with the block editor by using the “classic editor” plugin, and if you’re still doing that you’re really swimming upstream these days.

Google released a new page listing web platform features: webstatus.dev

For the first time you’ll have a way to see the entire web platform mapped as a set of features, along with their support in browsers.

It’s explicitly not a caniuse replacement. In fact it’s use case is rather niche: it’s mostly to show off what’s new on the web for people (like writers) who are specifically looking for that. Since that’s the use case, I’d vote they get some links to resources in there somehow so there is clear path to know what the feature even is.

Peak in DevTools. Looks like it’s built from a custom set of Web Components.

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

RSS

The State of HTML 2023 Results are out!

I thought this survey was more interesting to take than reading these results. It’s not that the results aren’t interesting. I’m almost impressed by how low the “used it” percentages are for certain features, like less than half of people have used a <details>?? And 28% are itching to use tabindex again? 😬 It’s just that in taking the survey we were all reminded of how many interesting things are going on in HTML land and likely learned about a good many things, like there is a Badging API??

I like Lea’s conclusion:

Some argue that improving HTML is futile, but the survey resoundingly demonstrates the contrary. Developers crave more interactive HTML elements: not only were interactive elements like <datalist> or the Popover API among those accumulating the most positive sentiment across all categories, but in addition all top missing elements were interactive widgets.

Some of you likely worked through the “CSS3” thing. It was huge. People damn near stopped saying “CSS” for a few years there. Everything was “HTML5” and “CSS3”, such was the success of that marketing effort. There was a logo and everything. It was a little cheesy, but it was a good thing. People saw them as a milestone. Something that was well defined that they could wrap their heads around and learn. Then we never repeated it. In fact, the message was clear:

There has never been a CSS4. There will never be a CSS4. CSS4 is not a thing that exists.

But things tend to change over a decade, and after a couple of rounds of enthusiasm that fizzled out, there is some more official-feeling momentum on this.

CSS4: Properties and features introduced in a spec around 2013 – 2018.

CSS5: Properties and features introduced in a spec around 2019 – 2024.

Wanna write?

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

Latest Articles

Building a TODO App from Scratch — Step 4 — Styling & Interactive Choices

Testing Your JavaScript Knowledge Course (and Podcast Interview with Lydia Hallie)

Building a TODO App from Scratch — Step 3 — Basic JavaScript Functionality

Syntax Highlighting with no spans?!

Sending My Respect to Next.js (and Vercel)

Encoding and Decoding URLs in JavaScript

Scroll-Locked Dialogs

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

Building a TODO App from Scratch — Step 4 — Styling & Interactive Choices

Testing Your JavaScript Knowledge Course (and Podcast Interview with Lydia Hallie)

Building a TODO App from Scratch — Step 3 — Basic JavaScript Functionality

Syntax Highlighting with no spans?!

Sending My Respect to Next.js (and Vercel)

Encoding and Decoding URLs in JavaScript

Scroll-Locked Dialogs

The Beat

Modern WordPress – Yikes!

Web Platform Dashboard

State of HTML 2023 Results

CSS… 5?