Tags: prog

What You Need to Know about Modern CSS (2025 Edition) – Frontend Masters Blog

Here’s a comprehensive round-up of new CSS that you can use right now—you can expect to see some of this in action at Web Day Out!

Optimizing PWAs For Different Display Modes — Smashing Magazine

There’s really good browser support for display-mode media queries and this article does a really good job of running through some of the use cases for your progressive web app.

Hack to the Future - Frontend - Matt Hobbs

Put the kettle on. This is a long one!

Matt takes a trip down memory lane and looks at all the frontend tools, technologies, and techniques that have come and gone over the years.

But this isn’t about nostalgia (although it does make you appreciate how far we’ve come). He’s looking at whether anything from the past is worth keeping today.

Studying past best practices and legacy systems is crucial for understanding the evolution of technology and making informed decisions today.

There’s only one technique that makes the cut:

After discussing countless legacy approaches and techniques best left in the past, you’ve finally arrived at a truly timeless and Incredibly important methodology.

There was a time when you needed to make a native app in order to take advantage of specific technologies. That time has passed.

Now you can do all of these things on the web:

• push notifications,
• offline storage,
• camera access,
• and more.

Take a look at the home screen on your phone. Looking at the apps you’ve downloaded from an app store, ask yourself how many of them could’ve been web apps.

Social media apps, airline apps, shopping apps …none of them are using technologies that aren’t widely available on the web.

“But”, you might be thinking, “it feels different having a nice icon on my homescreen that launches a standalone app compared to navigating to a bookmark in my web browser.”

I agree! And you can do that with a web app. All it takes the addition of one manifest file that lists which icons and colours to use.

If that file exists for a website, then once the user adds the website to their homescreen it will behave just like native app.

Try it for yourself. Go to instagram.com in your mobile browser and it to your homescreen (on the iPhone, you get to the “add to home screen” option from the sharing icon—scroll down the list of options to find it).

See how it’s now an icon on your home screen just like all your other apps? Tap that icon to see how it launches just like a native app with no browser chrome around it.

This doesn’t just work on mobile. Desktop browsers like Chrome, Edge, and Safari also allow you to install web apps straight from the browser and into your dock.

About half of the icons in my dock are actually web apps and I honestly can’t tell which is which. Mastodon, Instagram, Google Calendar, Google Docs …I’m sure most of those services are available as downloadable desktop apps, but why would I bother doing that when I get exactly the same experience by adding the sites to my dock?

From a business perspective, it makes so much sense to build a web app (or simply turn your existing website into a web app with the addition of a manifest file). No need for separate iOS or Android developer teams. No need to play the waiting game with updates to your app in the app store—on the web, updates are instant.

You can even use an impressive-sounding marketing term for this approach: progressive web apps:

A Progressive Web App (PWA) is a web app that uses progressive enhancement to provide users with a more reliable experience, uses new capabilities to provide a more integrated experience, and can be installed. And, because it’s a web app, it can reach anyone, anywhere, on any device, all with a single codebase. Once installed, a PWA looks like any other app, specifically:

• It has an icon on the home screen, app launcher, launchpad, or start menu.
• It appears when you search for apps on the device.
• It opens in a standalone window, wholly separated from a browser’s user interface.
• It has access to higher levels of integration with the OS, for example, URL handling or title bar customization.
• It works offline.

But there’s still one thing that native apps do better than the web. If you want to be able to monitor and track users to an invasive degree, the web can’t compete with the capabilities of native apps. That’s why you’ll see so many websites on your mobile device that implore to install their app from the app store.

If that’s not a priority for you, then you can differentiate yourself from your competitors by offering your users a progressive web app. Instead of having links to Apple and Google’s app stores, you can link to a page on your own site with installation instructions.

I can guarantee you that users won’t be able to tell the difference between a native app they installed from an app store and a web app they’ve added to their home screen.

Vibe code is legacy code | Val Town Blog

When you vibe code, you are incurring tech debt as fast as the LLM can spit it out. Which is why vibe coding is perfect for prototypes and throwaway projects: It’s only legacy code if you have to maintain it!

The worst possible situation is to have a non-programmer vibe code a large project that they intend to maintain. This would be the equivalent of giving a credit card to a child without first explaining the concept of debt.

If you don’t understand the code, your only recourse is to ask AI to fix it for you, which is like paying off credit card debt with another credit card.

How to Make Websites That Will Require Lots of Your Time and Energy - Jim Nielsen’s Blog

1. Install Stuff Indiscriminately From npm
2. Pick a Framework Before You Know You Need One
3. Always, Always Require a Compilation Step

If you’re a front-end developer and you don’t read Chris Ferdinandi’s blog, you should change that right now. Add that RSS feed to your feed reader of choice!

Lately he’s been posting about some of the thinking behind his Kelp UI library. That includes some great nuggets of wisdom around HTML web components.

First of all, he pointed out that web components don’t need a constructor(). This was news to me. I thought custom elements had to include this incantation at the start:

constructor () {
  super();
}

But it turns that if all you’re doing is calling super(), you can omit the whole thing and it’ll be done for you.

I immediately refactored all the web components I’m using on The Session. While I was at it, I implemented Chris’s bulletproof web component loading.

Now technically, I don’t need to do this. I’m linking to my JavaScript at the bottom of every page so I know it’s going to load after the HTML. But I don’t like having that assumption baked into my code.

For any of my custom elements that reference other elements in the DOM—using, say, document.querySelector()—I updated the connectedCallback() method to use Chris’s technique.

It turned out that there weren’t that many of my custom elements that were doing that. Because HTML web components are wrapped around existing markup, the contents of the custom element are usually what matters (rather than other elements on the same page).

I guess that’s another unexpected benefit to HTML web components. Because they’ve already got their own bit of DOM inside them, you don’t need to worry about when you load your markup and when you load your JavaScript.

And no faffing about with the dark arts of the Shadow DOM either.

Vibe coding and Robocop

The short version of what I want to say is: vibe coding seems to live very squarely in the land of prototypes and toys. Promoting software that’s been built entirely using this method would be akin to sending a hacked weekend prototype to production and expecting it to be stable.

Remy is taking a very sensible approach here:

I’ve used it myself to solve really bespoke problems where the user count is one.

Would I put this out to production: absolutely not.

I’m more proud of these 128 kilobytes than anything I’ve built since | by Mike Hall | Jul, 2025 | Medium

I don’t normally link to articles on Medium—I respect you too much—and I do wish this were written on Mike Hall’s own site, but this is just too good not to share.

And don’t dismiss this as a nostalgiac case study from the past:

At no point did the constraints make the product feel compromised. Users on modern devices got a smooth experience and instant feedback, while those on older devices got fast, reliable functionality. Users on feature phones got the same core experience without the bells and whistles.

The constraints forced us to solve problems in ways we wouldn’t have considered otherwise. Without those constraints, we could have just thrown bytes at the problem, but with them every feature had to justify itself. Core functionality had to work everywhere, and without JavaScript crutches proper markup became essential.

This experience changed how I approach design problems. Constraints aren’t a straitjacket, keeping us from doing our best work; they are the foundation that makes innovation possible. When you have to work within severe limitations, you find elegant solutions that scale beyond those limitations.

CSS Intelligence: Speculating On The Future Of A Smarter Language — Smashing Magazine

This is a really thoughtful look at the evolution of CSS and the ever-present need to balance power with learnability.

Scrappy: make little apps for you and your friends

I really like the thinking behind this project:

We believe computers should work for people, and dream of a future where computing, like cooking or word processing, is available to everyone. Where you can solve your own small, unique problems with small, unique apps. Where you don’t just rely on mass-market apps made by expert programmers. Where you share home-made little apps with family and friends.

Scrappy is our contribution to this dream.

Polishing your typography with line height units | WebKit

I should be using the lh and rlh units more enough—they’re supported across the board!

A Web Component UI library for people who love HTML | Go Make Things

I’m obviously biased, but I like the sound of what Chris is doing to create a library of HTML web components.

Hiding elements that require JavaScript without JavaScript :: dade

This is clever: putting CSS inside a noscript element to hide anything that requires JavaScript.

A pragmatic browser support strategy | Go Make Things

1. Basic functionality should work on any device that can access the web.
2. Extras and flourishes are treated as progressive enhancements for modern devices.
3. The UI can look different and even clunky on older devices and browsers, as long as it doesn’t break rule #1.

Ten years ago today I coined the shorthand “js;dr” for “JavaScript required; Didn’t Read”. - Tantek

Practice Progressive Enhancement.

Build first and foremost with forgiving technologies, declarative technologies, and forward and backward compatible coding techniques.

All content should be readable without scripting.

If it’s worth building on the web, it’s worth building it robustly, and building it to last.

Build It Yourself | Armin Ronacher’s Thoughts and Writings

We’re at a point in the most ecosystems where pulling in libraries is not just the default action, it’s seen positively: “Look how modular and composable my code is!” Actually, it might just be a symptom of never wanting to type out more than a few lines.

It always amazes me when people don’t view dependencies as liabilities. To me it feels like the coding equivalent of going to a loan shark. You are asking for technical debt.

There are entire companies who are making a living of supplying you with the tools needed to deal with your dependency mess. In the name of security, we’re pushed to having dependencies and keeping them up to date, despite most of those dependencies being the primary source of security problems.

But there is a simpler path. You write code yourself. Sure, it’s more work up front, but once it’s written, it’s done.

I really like Brad’s new project, Cold Album Drumming:

Brad Frost plays drums to the albums he knows intimately, but has never drummed to before. Cover to cover. No warm-up. No prep. Totally cold. What could possibly go wrong?

I got a kick out of watching him play along to Radiohead’s In Rainbows and The Decemberist’s The Crane Wife.

I was really into The Decemberists in the first decade of the 21st Century. I remember seeing them in a long-gone Brighton venue more than twenty years ago.

But I kind of stopped paying attention to them after they released The Hazards Of Love. Not because I didn’t like that album. Quite the opposite. I love that album. I think in my mind I kind of thought “That’s it, they’ve done it, they can go home now.”

It’s exactly the kind of album I should not like. It’s a concept album. A folk-rock opera.

When I was growing up, concept albums were the antithesis of cool. Prog rock was like an insult.

You have to remember just how tribal music was back in the ’70s and ’80s. In my school, I remember the divide between the kind of people who listened to The Cure and The Smiths versus the kind of people who listened to Prince or Queen. Before that you had the the mods and the rockers, which in hindsight makes no sense—how are The Who and The Jam not rockers?

Looking back now, it’s ridiculous. I get the impression that for most people growing up in the last few decades, those kind of distinctions have been erased. People’s musical intake is smeared across all types and time periods. That is a good thing.

Anyway, a folky prog-rock opera like The Hazards Of Love is exactly the kind of thing that past me would’ve hated. Present me adores it. Maybe it’s because it’s got that folky angle. I suspect Colin Meloy listened to a lot of Horslips—heck, The Decemberists even did their own mini version of The Táin.

Speaking of mythic Irish language epics, I really like John Spillane’s Fíorusice:

Fíoruisce - The Legend of the Lough is a three-act Gaelic folk opera composed by Irish artist John Spillane. It is a macaronic or bilingual work. The work is an imagined re-Gaelicization of the Victorian Cork fairytale Fior-usga collected by Thomas Crofton Croker in the 1800’s and published in his book Fairy Legends and Traditions of the South of Ireland (1828). The story is a surreal tale culminating in a drowned kingdom, which as lore tells us, becomes The Lough in Cork city as we know it today. They say, you can see the tops of the underworld towers on a clear day and hear the music of their big party on Midsummer’s night.

Yup, it’s another concept album. And funnily enough, past me was not a fan of John Spillane either.

I first heard him when he was part of a trad band called Nomos in Cork in the early ’90s (the bódhran player’s mother was friends with my mother). I really liked their tunes but I thought the songs were kind of twee.

Over the years, the more of his songs I heard, the more I understood that John Spillane was just being completely open and honest. Past me thought that was twee. Present me really respects it. In fact, I genuinely love his songs like Johnny Don’t Go To Ballincollig and All The Ways You Wander.

And then there’s Passage West. It’s a masterpiece. I might be biased because Passage West is the next town over from Cobh, where I grew up.

So yeah, Fíorusice is something that past me would’ve disdained:

1. a concept album by
2. John Spillane in
3. the Irish language.

Present me is into all three.

It’s Bandcamp Friday today. I think I know what I’m going to get.

Hallucinations in code are the least dangerous form of LLM mistakes

The moment you run LLM generated code, any hallucinated methods will be instantly obvious: you’ll get an error. You can fix that yourself or you can feed the error back into the LLM and watch it correct itself.

Compare this to hallucinations in regular prose, where you need a critical eye, strong intuitions and well developed fact checking skills to avoid sharing information that’s incorrect and directly harmful to your reputation.

With code you get a powerful form of fact checking for free. Run the code, see if it works.

mirisuzanne/track-list: Enhance a list of audio tracks with playlist controls

This is very nice HTML web component by Miriam, progressively enhancing an ordered list of audio elements.