Tags: web

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.

We Are Still the Web - The History of the Web

The web is just people. Lots of people, connected across global networks. In 2005, it was the audience that made the web. In 2025, it will be the audience again.

Why I’m Writing Pure HTML & CSS in 2025

• Building HTML pages is easy
• Pure HTML is evergreen
• Bloated web pages are too slow
• I can host it anywhere, often for free
• Accessibility and SEO benefits are automatic
• It won’t need security patches
• There are no build steps

It’s time for modern CSS to kill the SPA - Jono Alderson

SPAs were a clever solution to a temporary limitation. But that limitation no longer exists.

Use modern server rendering. Use actual pages. Animate with CSS. Preload with intent. Ship less JavaScript.

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.

Kelp

A UI library for people who love HTML, powered by modern CSS and Web Components.

The orders of complexity of websites and what they imply for the design of web platform features

An excellent appraisal of the importance of the rule of least power.

Close to the metal: web design and the browser

It seems like the misguided perception of needing to use complex tools and frameworks to build a website comes from a thinking that web browsers are inherently limited. When, in fact, browsers have evolved to a tremendous degree

Introducing: Webbed Sites (Webbed Briefs)

I heard you like divs…

Also sprach Wittgenstein:

Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.

Or in English, thus spoke Wittgenstein:

The limits of my language mean the limits of my world.

Language and thinking are intertwined. I’m not saying there’s anything to the strong form of the Sapir-Whorf hypothesis but I think George Lakoff is onto something when he talks about political language.

There’s literal political language like saying “tax relief”—framing taxation as something burdensome that needs to be relieved. But our everyday language has plenty of framing devices that might subconsciously influence our thinking.

When it comes to technology, our framing of new technologies often comes from previous technologies. As a listener to a show, you might find yourself being encouraged to “tune in again next week” when you may never have turned a radio dial in your entire life.

In the early days of the web we used a lot of language from print. John Allsopp wrote about this in his classic article A Dao Of Web Design:

The web is a new medium, although it has emerged from the medium of printing, whose skills, design language and conventions strongly influence it. Yet it is often too shaped by that from which it sprang.

One outdated piece of language on the web is a framing device in two senses: “above the fold”. It’s a conceptual framing device that comes straight from print where newspapers were literally folded in half. It’s a literal framing device that puts the important content at the top of the page.

But there is no fold. We pretended that everyone’s screens were 640 by 480 pixels. Then we pretended that everyone’s screens were 800 by 600 pixels. But we never really knew. It was all a consensual hallucination. Even before mobile devices showed up there was never a single fold.

Even if you know that there’s no literal page fold on the web, using the phrase “above the fold” is still insidiously unhelpful.

So what’s the alternative? Well, James has what I think is an excellent framing:

The landing zone.

It’s the bit of the page where people first show up. It doesn’t have a defined boundary. The landing zone isn’t something separate to the rest of the page; the content landing zone merges into the rest of the content.

You don’t know where the landing zone ends, and that’s okay. It’s better than okay. It encourages you design in a way that still prioritises the most important content but without fooling yourself into thinking there’s some invisible boundary line.

Next time you’re discussing the design of a web page—whether it’s with a colleague or a client—try talking about the landing zone.

Who’s Afraid of a Hard Page Load?

Why single-page apps are just not worth it:

Here’s the problem: your team almost certainly doesn’t have what it takes to out-engineer the browser. The browser will continuously improve the experience of plain HTML, at no cost to you, using a rendering engine that is orders of magnitude more efficient than JavaScript.

Meanwhile, the browser marches on, improving the UX of every website that uses basic HTML semantics. For instance: browsers often don’t repaint full pages anymore.

Can Directories Rise Again? - The History of the Web

Search has bent in quality towards its earliest days, difficult to navigate and often unhelpful. And the remedy may be the same as it was a quarter century ago.

Matthias Ott – Painting With the Web – beyond tellerrand Düsseldorf 20025 - YouTube

A great talk by Matthias on what you can do with web standards today!

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.

Back to the Crazebox! - Toons Back To A Website - Homestar Runner

Let’s go back to a website!

P&B: Jeremy Keith – Manu

In which I answer questions about blogging.

I’ve put a copy of this on my own site too.

Let’s start from the basics: can you introduce yourself?

My name is Jeremy Keith. I’m from Ireland. Cork, like. Now I live in Brighton on the south coast of England.

I play traditional Irish music on the mandolin. I also play bouzouki in the indie rock band Salter Cane.

I also make websites. I made a community website all about traditional Irish music that’s been going for decades. It’s called The Session.

Back in 2005 I co-founded a design agency called Clearleft. It’s still going strong twenty years later (I mean, as strong as any agency can be going in these volatile times).

Oh, and I’ve written some nerdy books about making websites. The one I’m most proud of is called Resilient Web Design.

What’s the story behind your blog?

I was living in Freiburg in southern Germany in the 1990s. That’s when I started making websites. My first ever website was for a band I was playing in at the time. My second ever website was for someone else’s band. Then I figured I should have my own website.

I didn’t want the domain name to be in German but I also didn’t want it to be in English. So I got adactio.com.

To begin with, it wasn’t a blog. It was more of a portfolio-type professional site. Although if you look at it now, it looks anything other than professional. Would ya look at that—the frameset still works!

Anyway, after moving to Brighton at the beginning of the 21st century, I decided I wanted to have one of those blogs that all the cool kids had. I thought I was very, very late to the game. This was in November 2001. That’s when I started my blog, though I just called it (and continue to call it) a journal.

What does your creative process look like when it comes to blogging?

Sometimes a thing will pop into my head and I’ll blog it straight away. More often, it bounces around inside my skull for a while. Sometimes it’s about spotting connections, like if if I’ve linked to a few different things that have some kind of connective thread, I’ll blog in order to point out the connections.

I never write down those things bouncing around in my head. I know I probably should. But then if I’m going to take the time to write down an idea for a blog post, I might as well write the blog post itself.

I never write drafts. I just publish. I can always go back and fix any mistakes later. The words are written on the web, not carved in stone.

Do you have an ideal creative environment? Also do you believe the physical space influences your creativity?

I mostly just blog from home, sitting at my laptop like I’m doing now. I have no idea whether there’s any connection between physical space and writing. That said, I do like writing on trains.

A question for the techie readers: can you run us through your tech stack?

I use my own hand-rolled hodge-podge of PHP and MySQL that could only very generously be described as a content management system. It works for me. It might not be the most powerful system, but it’s fairly simple. I like having control over everything. If there’s some feature I want, it’s up to me to add it.

So yeah, it’s a nice boring LAMP stack—linux Apache MySQL PHP. It’s currently hosted on Digital Ocean. I use DNSimple for all the DNS stuff and Fastmail for my email. I like keeping those things separate so that I don’t have a single point of failure.

I realise this all makes me sound kind of paranoid, but when you’ve been making websites for as long as I have, you come to understand that you can’t rely on anything sticking around in the long term so a certain amount of paranoia is justified.

Given your experience, if you were to start a blog today, would you do anything differently?

I’m not sure. I’m not entirely comfortable about using a database. It feels more fragile than just having static files. But I do cache the blog posts as static HTML too, so I’m not entirely reliant on the database. And having a database allows me to do fun relational stuff like search.

If I were starting from scratch, I probably wouldn’t end up making the same codebase I’ve got now, but I almost certainly would still be aiming to keep it as simple as possible. Cleverness isn’t good for code in the long term.

Financial question since the Web is obsessed with money: how much does it cost to run your blog? Is it just a cost, or does it generate some revenue? And what’s your position on people monetising personal blogs?

I’ve got hosting costs but that’s pretty much it. I don’t make any money from my website.

That Irish traditional music website I mentioned, The Session, that does accept donations to cover the costs. As well as hosting, there’s a newsletter to pay for, and third-party mapping services.

Time for some recommendations: any blog you think is worth checking out? And also, who do you think I should be interviewing next?

You should absolutely check out Walknotes by Denise Wilton.

It’s about going out in the morning to pick up litter before work. From that simple premise you get some of the most beautiful writing on the web. Every week there’s a sentence that just stops me in my tracks. I love it.

We wife, Jessica Spengler, also has a wonderful blog, but I would say that, wouldn’t I?

Final question: is there anything you want to share with us?

You know I mentioned that The Session is funded by donations? Well, actually, this month—April 2025—any donations go towards funding something different; bursary sponsorship places for young musicians to attend workshops at the Belfest Trad Fest who otherwise wouldn’t be able to go:

thesession.org/donate

So if you’ve ever liked something I’ve written on my blog, you can thank me by contributing a little something to that.

Cheers,
Jeremy

Cascading Layouts | OddBird

A workshop on resilient CSS layouts

Oh, hell yes!

Do not hesitate—sign yourself up to this series of three online workshops by Miriam. This is the quickest to level up your working knowledge of the most powerful parts of CSS.

By the end of this you’re going to feel like Neo in that bit of The Matrix when he says “I know kung-fu!” …except kung-fu isn’t very useful for building resilient and maintainable websites, whereas modern CSS absolutely is.

Vision for W3C

We believe the World Wide Web should be inclusive and respectful of all participants: a Web that supports facts over falsehoods, people over profits, humanity over hate.

Better typography with text-wrap pretty | WebKit

Everything you ever wanted to know about text-wrap: pretty in CSS.