Link tags: enhance

324

sparkline

Why We Create Progressive Web Apps: A Conversation with Jeremy Keith

This is a really nice write-up by Sydney of the chat we had on her podcast.

Decoded: The When, Why, and Why Not of Progressive Web Apps

I really enjoyed talking to Sydney Lai about progressive web apps, resilient web design, and all my other hobby horses.

Alas, there’s no transcript and I can’t find a direct link to the RSS feed or the individual audio file on the podcast website so it’s not huffduffable.

How To Build Resilient JavaScript UIs — Smashing Magazine

The opening paragraphs of this article should be a mantra recited by every web developer before they begin their working day:

Things on the web can break — the odds are stacked against us. Lots can go wrong: a network request fails, a third-party library breaks, a JavaScript feature is unsupported (assuming JavaScript is even available), a CDN goes down, a user behaves unexpectedly (they double-click a submit button), the list goes on.

Fortunately, we as engineers can avoid, or at least mitigate the impact of breakages in the web apps we build. This however requires a conscious effort and mindset shift towards thinking about unhappy scenarios just as much as happy ones.

I love, love, love the emphasis on reducing assumptions:

Taking a more defensive approach when writing code helps reduce programmer errors arising from making assumptions. Pessimism over optimism favours resilience.

Hell, yeah!

Accepting the fragility of the web is a necessary step towards building resilient systems. A more reliable user experience is synonymous with happy customers. Being equipped for the worst (proactive) is better than putting out fires (reactive) from a business, customer, and developer standpoint (less bugs!).

Tabs in HTML?

I’ve been having some really interesting chats with Brian about tabs, markup, progressive enhancement and accessibility. Here’s a braindump of his current thinking which is well worth perusing.

petite-vue - npm

An interesting alternative to using the full Vue library, courtesy of Vue’s creator:

petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for “sprinkling” small amount of interactions on an existing HTML page rendered by a server framework.

Solutionism

Progressive enhancement in meatspace:

IRL progressive enhancement is quite common when you think of it. You can board planes with paper boarding cards, but also with technology like QR codes and digital wallets. You can pay for a coffee with cash, card or phone. The variety serves diverse sets of people. Just like in web development, not dismissing the baseline lets us cover use cases we didn’t know existed. It is fragile, though: some manager somewhere probably has a fantasy about replacing everything with fancy tech and fancy tech only.

Container Queries in Web Components | Max Böck

The point of this post is to show how nicely container queries can play with web components, but I want to also point out how nice the design of the web component is here: instead of just using an empty custom element, Max uses progressive enhancement to elevate the markup within the custom element.

Design for reading: tips for optimizing content for Reader modes and reading apps

The more I consume content in reading apps, the more I am reminded of the importance and the power of progressive enhancement as a strategy to create resilient and malleable experiences that work for everyone, regardless of how they choose to consume our content.

Top stuff from Sara here!

We have a tendency to always make an assumption about how our readers are reading our content—probably in the browser, with our fancy styles applied to it. But if we make a habit out of thinking about the Web in layers and CSS as an enhancement on top of the content layer, then we can start optimizing and enhancing our users’ reading experiences regardless of their context.

Thinking about the different ways in which users access the Web only shines light on the importance of a progressively enhanced approach to building for the Web. The more we think about the Web in layers and try to improve the experience of one layer before moving to the next, the more resilient experiences we can create. That’s what the essence of progressive enhancement is about.

Building a resilient frontend using progressive enhancement - Service Manual - GOV.UK

Using progressive enhancement means your users will be able to do what they need to do if any part of the stack fails.

What a terrific short guide to sensible web development!

  • Start with HTML
    • Using interactive elements
    • Adding the extras
    • Building more complex services
    • Testing your service
    • Do not assume users turn off CSS or JavaScript
    • Case studies and related guides

Episode 012 - Designing Resilience with Jeremy Keith by The Object-Oriented UX Podcast

I enjoyed this conversation with Sophia (our chat starts around the 11 minute mark) prompted by Resilient Web Design.

The Layers of the Web - Jeremy Keith - YouTube

Here’s the video of the talk I gave at the Web Stories conference back in February.

The Layers of the Web - Jeremy Keith

Matthew Somerville on Twitter

Our slippy map works without JavaScript, yet we also have a service worker.

Getting a tattoo. brb

Idle Sunday thoughts about web trends | Studio Tendra

Six years old. Still very astute. Still very true.

Dropping Support For IE11 Is Progressive Enhancement · The Ethically-Trained Programmer

Any time or effort spent getting your JavaScript working in IE11 is wasted time that could be better spent making a better experience for users without JavaScript.

I agree with this approach.

With a few minor omissions and links, you can create a site that works great in modern browsers with ES6+ and acceptably in browsers without JavaScript. This approach is more sustainable for teams without the resources for extensive QA, and more beneficial to users of nonstandard browsers. Trying to recreate functionality that already works in modern browsers in IE11 is thankless work that is doomed to neglect.

Progressive enhancement and accessibility redux - QuirksBlog

This is a really interesting take on the intersection between accessibility and progressive enhancement (which I always felt was there, but this expresses it well):

Accessibility aims to optimize an experience across a spectrum of user capabilities. Progressive enhancement aims to optimize an experience across a spectrum of user agent capabilities.

Indeed, if you broaden the definition of “user agent” to include a user’s physiology, I think the concepts become nearly identical.

The unreasonable effectiveness of simple HTML – Terence Eden’s Blog

I love the story that Terence relates here. It reminds me of all the fantastic work that Anna did documenting game console browsers.

Are you developing public services? Or a system that people might access when they’re in desperate need of help? Plain HTML works. A small bit of simple CSS will make look decent. JavaScript is probably unnecessary – but can be used to progressively enhance stuff.

A minimum viable experience makes for a resilient, inclusive website or app - Post - Piccalilli

The whole idea of progressive enhancement is using the power that the web platform gives us for free—specifically, HTML, CSS and JavaScript—to provide a baseline experience for the people who visit our sites and/or apps, and then build on that where appropriate and necessary, depending on the capabilities of the technology that they are using.

Is Progressive Enhancement Dead Yet? (Webbed Briefs)

Heydon’s newest short video is right up my alley.

Loading and replacing HTML parts with HTML

I like this proposal for a declarative Ajax pattern. It’s relatively straightforward to polyfill, although backward-compatibility is an issue because of existing browser behaviour with the target attribute.

HTML Over The Wire | Hotwire

This is great! The folks at Basecamp are releasing the front-end frameworks they use to build Hey. There’s Turbo—the successor to Turbolinks:

It offers a simpler alternative to the prevailing client-side frameworks which put all the logic in the front-end and confine the server side of your app to being little more than a JSON API.

With Turbo, you let the server deliver HTML directly, which means all the logic for checking permissions, interacting directly with your domain model, and everything else that goes into programming an application can happen more or less exclusively within your favorite programming language. You’re no longer mirroring logic on both sides of a JSON divide. All the logic lives on the server, and the browser deals just with the final HTML.

Yes, this is basically Hijax (which is itself simply a name for progressive enhancement applied to Ajax) and I’m totally fine with that. I don’t care what it’s called when the end result is faster, more resilient websites.

Compare and contrast the simplicity of the Hotwire/Turbo approach to the knots that React is tying itself up in to try to get the same performance benefits.