Tags: progress

Using ServiceWorker in Chrome today - JakeArchibald.com

It’s very early days for ServiceWorker, but Jake is on hand with documentation and instructions on its use. To be honest, most of this is over my head and I suspect it won’t really “click” until I try using it for myself.

Where it gets really interesting is in the comments. Stuart asks “What about progressive enhancement?” And Jake points out that because a ServiceWorker won’t be installed on a first visit, you pretty much have to treat it as an enhancement. In fact, you’d have to go out of your way to make it a requirement:

You could, of course, throw up a splash screen and wait for the ServiceWorker to install, creating a ServiceWorker-dependant experience. I will hunt those people down.

A Fundamental Disconnect, From the Notebook of Aaron Gustafson

I think Aaron is spot-on here. There’s a tendency to treat web development these days as just the same as any other kind of software development—which is, on the one hand, great because it shows just how far JavaScript and browsers have come …but on the other hand, that attitude is missing a crucial understanding of the fundamental nature of the web’s technology stack (that we should be treating HTML, CSS, and JavaScript as layers; not as one big ball of webby, timey-wimey stuff).

A device agnostic approach to inlining CSS | Blog | Decade City

I very much agree with Orde’s framing here: I don’t think it makes much sense to talk about “above the fold” CSS …but it makes a lot of sense to talk about critical CSS.

And, yeah, it’s another example of progressive enhancement.

We Work in a World of Assumptions – The Pastry Box Project

Dan Donald gets to the heart of progressive enhancement:

Assumptions in themselves don’t have to be inherently bad but let’s recognise them for what they are. We know very little but that can hopefully enable us to be far more flexible and understanding in what we create.

Jeremy Keith on progressive enhancement - YouTube

Almost six minutes of me squinting in the sun and sharing my reckons while seagulls squawk in the background.

Using Encapsulation for Semantic Markup on CSS-Tricks

I really hope that this is the kind of usage we’ll see for web components: enhancements for the browsers that support them without a good ol’ fashioned fallback for older browsers.

Data attributes and progressive enhancement - Simply Accessible

Derek’s excellent advice on avoiding over-reliance on data attributes has this brilliant nugget of insight:

In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works

Spotlight – a pure JavaScript application for GOV.UK Performance | Technology at GDS

A nice tale of progressive enhancement from gov.uk, talking about how they made their analytics dashboards (which are public, by the way) using JavaScript on the server and on the client.

I believe this is what the kids are calling isomorphic JavaScript.

Device-Agnostic by Trent Walton

A terrific post from Trent, touching on all the important facets of building for the web: universality, progressive enhancement, performance …great stuff!

The Pastry Box Project, Scott Jehl, Friday, 7 March 2014

Scott writes an absolutely spot-on skewering of the idea that progressive enhancement means you’re going to spend your time catering to older browsers. The opposite is true.

Progressive Enhancement frees us to focus on the costs of building features for modern browsers, without worrying much about leaving anyone out. With a strongly qualified codebase, older browser support comes nearly for free.

Platformed. — Unstoppable Robot Ninja

The importance of long-term thinking in web design. I love this description of the web:

a truly fluid, chaotic design medium serving millions of imperfect clients

Realizing One Web

A nice look at responsive design, progressive enhancement, and the principle of One Web.

Why is Progressive Enhancement so unpopular? — All in the head

Like Drew, I’ve noticed some real hostility to the idea of progressive enhancement recently. Like Drew, I don’t really understand where this attitude comes from. It’s not like progressive enhancement prevents you from doing anything you would do otherwise: it’s just another way of approaching the way you build for the web.

I hope I’m wrong, but I suspect that some developers are letting their tools dictate their principles—the tail wagging the dog (where the tail is Angular, Ember, etc.).

Why I’m turning JavaScript off by default

Another good ol’ rant from Tom. It’s a bit extreme but the underlying lamentation with the abandonment of progressive enhancement is well founded.

Building for the device agnostic web | Talks | Decade City

Some excellent practical advice on progressive enhancement.

Grade components, not browsers—Filament Group, Inc., Boston, MA

I really like Scott’s approach to defining what “support” means in terms of browsers—it makes a lot sense to break things down to the component level.

How many people are missing out on JavaScript enhancement? | Government Digital Service

The research behind GDS’s research that one in every 93 users of gov.uk is not receiving JavaScript …and it’s not because of JavaScript being disabled in their browser either. As ever, progressive enhancement is most useful in dealing with the situations you don’t anticipate.

Line Mode on Parallel Transport

A love letter to HTML, prompted by the line-mode browser hack event at CERN.

Progressive Enhancement: It’s About the Content

A cogent definition and spirited defence of progressive enhancement:

Progressive Enhancement is an extension of our shared values on the web and goes to the root of the web. I believe—and hope you agree—that the web is for everybody and should be accessible regardless of the device a user brings to the party.

Progressive Enhancement. Still Alive and Kickin’

Dan explains the reasoning behind his “Sigh, JavaScript” Tumblr blog, and provides an excellent example of progressive enhancement in the process.

Go, Dan, go!

Sigh, JavaScript

A great little Tumblr blog from Dan Mall: a collection of sites that don’t work at all if JavaScript isn’t available.

‘Sfunny, I was talking about just this kind of thing at An Event Apart today.

Reflections on An Event Apart DC 2013

Jason pulls together some of the themes that emerged at An Event Apart DC this week.

Being Practical - TimKadlec.com

Yet another timely reminder from Tim, prompted by the naysayers commenting on his previous excellent post on progressive enhancement, universal access, and the nature of the web.

Progressive enhancement is still important by Jake Archibald

Another great post on using progressive enhancement for JavaScript, this time by Jake. He does a great job of explaining the performance bottleneck that is created when you start doing everything on the client side.

Progressive Enhancement: Still Not Dead. - That Emil

A great post by Emil on the importance of using progressive enhancement for JavaScript — an increasingly unpopular position in today’s climate of client-side-only frameworks and libraries.

There’s something fundamental and robust about being able to request a URL and get back at least an HTML representation of the resource: human-readable, accessible, fault tolerant.

Enough with the JavaScript already!

A great set of slides from Nicholas, all about the disturbing trend in “modern” web apps to depend entirely on JavaScript as a single point of failure.

Leveraging Advanced Web Features in Responsive Design

A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.

Progressive enhancement in the Government Service Design manual

A nice description of progressive enhancement by Norm, as applied at GDS.

Implementing off-canvas navigation for a responsive website by David Bushell

This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.

Twitter Engineering: Implementing pushState for twitter.com

A really nice explanation by Todd Kloots of Twitter’s use of progressive enhancement with Ajax and the HTML5 History API. There’s even a shout for Hijax in there.

The Vanilla Web Diet | Smashing Coding

I wholeheartedly agree with Christian’s diagnosis of the average web page: it’s overweight to the point of obesity. Fortunately Dr. Heilmann has some remedies.

isolani - Web Standards: Web App Mistakes: Condemned to repeat

Some great thoughts from Mike Davies about the strengths of the web, prompted by some of the more extreme comments made by James Pearce at Full Frontal last week.

I should point out that James was being deliberately provocative in order to foment thought and discussion and, judging from this blog post, he succeeded.

The Web’s independence from the hardware and software platform people use is a feature. It’s better than cross-platform frameworks which are constantly criticised for not producing exact native-feeling apps on the multitude of platforms they run on. The Web is above that pettiness.

Jeremy Keith: Forbedringer gjennom responsiv design (Webdagene 2012) on Vimeo

This is the talk I gave at the Webdagene conference in Norway a few weeks back. I called it Responsive Enhancement but I think the Norwegian title translates as “Improvements Through Responsive Design.”

{ io: The Web Is Growing Up }

A lovely bit of hypertext.

Twitter without Hashbangs

Remember when I linked to the story of Twitter’s recent redesign of their mobile site and I said it would be great to see it progressively enhanced up to the desktop version? Well, here’s a case study that does just that.

It’s time to stop blaming Internet Explorer | NCZOnline

Nicholas is inside my head! Get out of my head, Nicholas!

What makes the web beautiful is precisely that there are multiple browsers and, if you build things correctly, your sites and applications work in them all. They might not necessarily work exactly the same in them all, but they should still be able to work. There is absolutely nothing preventing you from using new features in your web applications, that’s what progressive enhancement is all about.

Build a smart mobile navigation without hacks | Tutorial | .net magazine

A really great markup and CSS pattern for “content first, navigation second” from Aaron.

How to Make Progress Bars Feel Faster to Users - UX Movement

A fascinating insight into the psychological implications of animated progress indicators.

The responsive images problem

A run-down of the various approaches to the responsive images problem, concluding that this is something that needs to be solved in the image format.

Responsive image format - blog

An idea for handling responsive images not with a new format, but with an existing one: progressive JPGs.

Nicholas Zakas: Progressive Enhancement 2.0 - YouTube

A great talk by Nicholas on what progressive enhancement means today. There’s some good ammunition in here.

Content Parity | Brad Frost Web

Yet another great post from Brad:

Whenever I think of the concept of “One Web” and providing universal access to information on the web, I tend to break it down into something much simpler: give people what they ask for.

Excessive Enhancement - SXSW2012 // Speaker Deck

The slides from Phil’s excellent South by Southwest presentation on URLs, JavaScript, and progressive enhancement.

Browser Support? Forget It! – David Bushell – Web Design

A great post that discusses exactly what we mean when we talk about “supporting” different browsers.

Solve for X: Neal Stephenson on getting big stuff done - YouTube

Neal Stephenson speaks at Solve For X on the relative timidity of scientific (and science fictional) progress in our current time.

Progress Bar

A nice little bit of CSS for a page-loading animation. View source.

deCSS3 - a bookmarklet for graceful degradation.

This is really handy: a bookmarklet that will disable any CSS3 on a page so you can check that your fallbacks look okay.

A plea for progressive enhancement | Stephanie Rieger

Yes! Yes! Yes!!!

Progressive enhancement is the only sane approach to today’s massively divergent landscape of devices. It can’t be repeated often enough.

The Mobile Case for Progressive Enhancement | Brad Frost Web

A great, great reminder from Brad on the importance of progressive enhancement especially on mobile. There seems to be a real mindset amongst developers working on mobile sites that JavaScript is a requirement for building anything (and there’s a corresponding frustration with the wildly-varying levels of JavaScript support). It ain’t necessarily so!

Full Fucking Service, Reckless web development practices are encouraging idiots

I wholeheartedly agree with this summation of what professional web design and development entails.

Bagchecking in the Command Line | Bagcheck

This is a fascinating take on progressive enhancement from Luke: for a service-based site, the equivalent of Content First is API first …literally a command line interface as a baseline.

LONDON WEB - Sept 2010 - The Progressive Web - Andy Hume on Vimeo

A great presentation by Andy on the use of progressive enhancement at Clearleft.

Stop! You are doing mobile wrong! | Metal Toad Media

An excellent summation of the responsive enhancement approach to web development.

Unobtrusify.com - Unobtrusive Javascript for Progressive Enhancement

A simple and powerful message, beautifully delivered (itself an example of unobtrusive JavaScript). Bravo, Phil Hawksworth!

Five CSS design browser differences I can live with | For A Beautiful Web

A great article by Malarkey wherein he lists five examples of progressive enrichment (as Dan is wont to call it) complete with side-by-side comparisons. Useful ammo, this.

AJAX Activity Indicators

Want to indicate that something is happening on a web page, like... oh, I don't know... an Ajax request or something? Here's a cornucopia of animated progress indicators.

Progressive Layout

Using JavaScript to serve up fixed or liquid layout based on browser width.