Frontend Masters Blog – Page 29 – Helping Your Journey to Senior Developer

Latest Articles

Understanding Interaction to Next Paint (INP)

By Mat Marquis on April 9, 2024

As of March 12th 2023, Interaction to Next Paint (INP) replaces First Input Delay (FID) as a Core Web Vital metric. FID and INP are measuring the same situation in the browser: how clunky does it feel when a user interacts with an element on the page? The good news for the web—and its users—is […]

DevTools Node

Node.js Debugging in Chrome DevTools

By Chris Coyier on April 8, 2024

I was pairing with my co-worker last week. They had a super different debugging style than I do. I’m aware that I can do fancy things in DevTools, like set breakpoints and whatnot right from within DevTools and use well-placed debugger; statements to halt JavaScript execution and inspect things at that point. But I hardly […]

DevTools

DevTools Tips & Tricks

By Pankaj Parashar on April 5, 2024

Front-end developers spend a significant amount of time working inside the browser’s DevTools. Likely just as much as they spend time writing code in the code editor. However, most developers barely scratch the surface of what DevTools can accomplish. I have been curating a collection of DevTools tips across major browsers. The following are some […]

Astro View Transitions

The View Transitions API

By Cassidy Williams on April 3, 2024

Like anyone, I love a good “native-feeling” experience on the web. I’ve really enjoyed creating that vibe with the new View Transitions API. Luckily it’s is pretty clean to work with, both with the Astro framework, and out of the box! View Transition Options Transitioning UI between states has been something that developers have been […]

Anchor CSS

Drawing a Line to Connect Elements with CSS Anchor Positioning

By Silvestar Bistrović on April 2, 2024

The World Wide Web Consortium (W3C) published a First Public Working Draft of CSS Anchor Positioning last year, so I thought I would give it a try. I already had a perfect candidate to try it on: a component on my other site, adedicated.dev, which showcase my services by linking different words together. To link […]

CLI

A Quick Command To See the Available Scripts

By Chris Coyier on April 1, 2024

Have you ever been like, ughkgh, is it npm run dev or npm run start? Is it yarn testwatch or yarn test:watch? If you do it every time you open a project, I’d suggest setting up tasks. But I mean more for one-off or less frequently used scripts. I’m forever forgetting the exact scripts from […]

The Beat

First I read Nikhil Suresh’s angry rant about AI, then I read Frank M Taylor’s angry rant about front-end development. I agree and disagree with different points in each, like any good rant. Something that struck me is that, well, I don’t think either of them are actually particularly angry, it’s actually a schtick. I also watched Dan Olson’s I Don’t Know James Rolfe recently (aka “Angry Video Game Nerd”). I liked Dave Rupert’s take that “nerdrage” has turned into a genre of content. This genre has made it’s way all the way to technology writing. Heck, I do it myself sometimes, but I also agree with Chris Enns in that I wish we all generally wrote more about things we like.

Ryan Seddon makes clear the potential performance problem with cross-page View Transitions:

… on a slow or spotty network, the transition may appear as if the screen is freezing, as the browser waits for the page to load before it can transition smoothly between the two screens—this is not ideal.

But also that our new friend the Speculation Rules API is a potential remedy:

Combining these two helps mitigate the original tradeoff of the “pause” between navigations while the browser loads the next document. With speculative prerender, it can render the page before the user clicks, making the transition near-instant.

Both these APIs are Chrome’n’friends only, so I guess it’s a you-break-it you-fix-it deal. They are also both progressive enhancements so no grave harm in using them now, unless you consider potentially unused pre-renders too wasteful.

I enjoyed Hugo Landau’s praise of PHP in The Demise of the Mildly Dynamic Website:

PHP has the world’s simplest deployment model for web applications: copy some files to a directory. This deployment model is so simple, and so intuitively understandable, that almost anyone capable of using an FTP client could deploy a PHP application.

Because PHP originated as a templating language, the initial behaviour of a PHP file is simply to print its contents. This means, in turn, that you can just “dip in and out” of PHP as you need it. Compare this in turn with even the simplest Perl or Python CGI script. For the latter, you’re writing a program which outputs HTML; with PHP, you’re writing HTML with some occasionally interwoven code. If a particular page doesn’t need to do anything dynamic, it needn’t contain any code at all.

PHP scripts don’t consume any resources (persistent processes, etc.) when they’re not being used.

And PHP is a heck of a lot better today than it was back in those “Rise of PHP” years. You could do a lot worse than building in Laravel.

CSS has linear, radial, and conic gradients, that can all do interesting and complex things… but not quite this, at least not on their own:

Example from Josh Tumath who is interested in getting a better syntax for them in CSS.

That’s what we’ve been calling a Mesh Gradient. There are all sorts of ways to pull it off, like using multiple backgrounds with radial gradients placed at different locations, or placing shapes and using the blur() filter.

Here’s a gallery of them, the thumbnails of which have nice hover effects, and many of which have slow classy animations.

Featured

Step Gradients with a Given Number of Steps

Popular

Latest Articles

Understanding Interaction to Next Paint (INP)

Node.js Debugging in Chrome DevTools

DevTools Tips & Tricks

The View Transitions API

Drawing a Line to Connect Elements with CSS Anchor Positioning

A Quick Command To See the Available Scripts

The Beat

Did you know?

Featured

Step Gradients with a Given Number of Steps

Popular

Latest Articles

Understanding Interaction to Next Paint (INP)

Node.js Debugging in Chrome DevTools

DevTools Tips & Tricks

The View Transitions API

Drawing a Line to Connect Elements with CSS Anchor Positioning

A Quick Command To See the Available Scripts

The Beat

Nerdrage

View transitions + speculative rules

The Demise of the Mildly Dynamic Website

Mesh Gradients

Subscribe

Wanna write?