Tags: avi

199

sparkline

page-transitions-travelapp

A demo of page transition animations by Sarah—she’s written about how she did it. I really like it as an example of progressive enhancement: you can navigate around the site just fine, but with JavaScript you get the smooth transitions as a bonus.

All of this reminds me of Jake’s proposal for navigation transitions in the browser. I honestly think this would solve 80% of the use-cases for single page apps.

Sessions Map

This is nifty—a map of all the Irish music sessions and events happening around the world, using the data from TheSession.org.

If you’re interested in using data from The Session, there’s a read-only API and regularly-updated data dumps.

Animated SVG Radial Progress Bars - daverupert.com

Using a single path SVG, a smidge of CSS, and ~6 lines of JavaScript.

In this days of monolithic frameworks, I really like seeing modest but powerful patterns like this—small pieces that we can loosely join.

Focusing on Focus Styles | CSS-Tricks

A deep dive into the :focus pseudo-class and why it’s important.

A Tale of Two Rooms: Understanding screen reader navigation | The Paciello Group

A nice analogy to help explain what it’s like to navigate with a screen reader—and how much well-structured markup can help make it easier.

Improving the Accessibility of 24 ways | CSS-Tricks

Paul walks us through the process of making some incremental accessibility improvements to this year’s 24 Ways.

Creating something new will always attract attention and admiration, but there’s an under-celebrated nobility in improving what already exists. While not all changes may be visual, they can have just as much impact.

Cognitive Overload - daverupert.com

From Scott McCloud to responsive design, Dave is pondering our assumptions about screen real estate:

As the amount of information increases, removing details reduces information density and thereby increasing comprehension.

It reminds me of Edward Tufte’s data-ink ratio.

The Times | data viz catalogue

Data visualisations created for The Times, complete with code.

Frappé Charts

A JavaScript library for displaying charts’n’graphs.

Web Typography: Designing Tables to be Read, Not Looked At · An A List Apart Article

An extract from Richard’s excellent book, this is a deep dive into styling tables for the web (featuring some CSS I had never even heard of).

Tables can be beautiful but they are not works of art. Instead of painting and decorating them, design tables for your reader.

(It also contains a splendid use of the term “crawl bar.”)

Creating accessible menus-Part 1

James has been tweaking the accessibility of his site navigation. I’m looking forward to the sequel.

jakearchibald/navigation-transitions

I honestly think if browsers implemented this, 80% of client-rendered Single Page Apps could be done as regular good ol’-fashioned websites.

Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.

How much storage space is my Progressive Web App using? | Dean Hume

You can use navigator.storage.estimate() to get a (vague) idea of how much space is available on a device for your service worker caches.

Progressively Worse Apps

This article makes a good point about client-rendered pages:

Asynchronously loaded page elements shift click targets, resulting in a usability nightmare.

…but this has nothing, absolutely nothing to do with progressive web apps.

More fuel for the fire of evidence that far too many people think that progressive web apps and single page apps are one and the same.

What Would Augment Reality? (with images, tweets) · lukew · Storify

Luke has been asking people to imagine ways of augmenting the world. Spimes are back, baby!

The Web as a Material — Joschi Kuphal · Web architect · Nuremberg / Germany

Joschi gives the backstory to last week’s excellent Material conference in Iceland that he and Brian organised. I love that this all started with a conversation at Indie Web Camp Brighton back in 2014.

Material Conference by Amber Wilson

Amber describes Material much better than I could:

There’s an element of magic in the air that you get to grasp and breathe in when you gather in the same place with so many different people – people with stories and paths they could write books about. The passion, the ideas, the stories of difficult journeys (the behind-the-scenes that you never see on social media). All of this makes not a basic recipe for a good time, but one for a delicious, enlightening experience that I’ve not seen replicated in any other environment.

The only thing she neglects to mention is that her talk was very much part of what made the event so special.

Presenting the new d3.loom chart form plugin - Visual Cinnamon

Nadieh has packaged up the code for her lovely loom diagrams as a plug-in for d3.

The Pudding

A Weekly Journal of Visual Essays

Some lovely data visualisation here.