Dropdowns, menus, tooltips, comboboxes, toasts — the popover attribute will make building a large variety of UI components easier. The popover attribute can be used on any HTML element, so you have the flexibility to choose whichever element is most appropriate semantically for each particular use case. Unlike a dialog, a popover is always non-modal […]
You want a quick web performance win at work that’s sure to get you a promotion? Want it to only take five minutes? Then I got you. Capo.js is a tool to get your <head> in order. It’s based on some research by Harry Roberts that shows how something seemingly insignificant as the elements in […]
Creating unusual shapes is always a fun exercise and a good way to practice your CSS skills. One might argue that SVG is better for this job, but nowadays we have a lot of new CSS tricks that allow us to create shapes with a clean and optimized code. Through this two-article series, we will […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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.) […]
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.
