Tags: avi

188

sparkline

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.

ARP Observatory (@ArpObservatory) | Twitter

In July we started receiving audio signals from outside the solar system, and we’ve been studying them since.

Tweets contain sound samples on Soundcloud, data visualisations, and notes about life at the observatory …all generated by code.

ARP is a fictional radio telescope observatory, it’s a Twitter & SoundCloud bot which procedurally generates audio, data-visualisations, and the tweets (and occasionally long-exposure photography) of an astronomer/research scientist who works at ARP, who is obsessive over the audio messages, and who runs the observatory’s Twitter account.

Sticky headers

A three-part series by Remy looking at one interface pattern (a sticky header) and how his code evolved and changed:

  1. Sticky headers
  2. Smooth scroll & sticky navigation
  3. CSS sticky nav & smooth scroll

Hertzsprung-Russell diagram animation | ESA/Hubble

When I was in Düsseldorf for this year’s excellent Beyond Tellerrand conference, I had the pleasure of meeting Nadieh Bremer, data visualisation designer extraordinaire. I asked her a question which is probably the equivalent of asking a chef what their favourite food is: “what’s your favourite piece of data visualisation?”

There are plenty of popular answers to this question—the Minard map, Jon Snow’s cholera map—but we had just been chatting about Nadieh’s previous life in astronomy, so one answer popped immediately to mind: the Hertzsprung-Russell diagram.

Font Map · An AI Experiment by IDEO

Fontlandia is yours to explore.

By leveraging AI and convolutional neural networks to draw higher-vision pattern recognition, we have created a tool that helps designers understand and see relationships across more than 750 web fonts.

Stuff in Space

A gorgeous visualisation of satellites in Earth orbit. Click around to grasp the scale of the network.

Using the aria-current attribute – Tink

The aria-current attribute is very handy and easy to implement. Léonie explains it really well here.

A Day in the Life of Americans | FlowingData

Watching this data visualisation on its high speed setting is quite hypnotic.

My biggest takeaway from the second Offline Camp in Santa Margarita, CA — plus toast!

J. Renée Beach writes on Ev’s blog about three things to consider when planning for offline experiences:

  • Freshness,
  • Reach, and
  • Assurance.

How will you express to your users that the content is up to date, safe and available across their network?

Our World In Data

If you’re in need of some long-term perspective right now—because, let’s face it, the short-term outlook is looking pretty damn bleak—then why not explore some of Max Roser’s data visualisations? Have a look at some of the global trends in inequality, disease, hunger, and conflict.

Your Social Media Fingerprint

Clever! By exploiting the redirect pattern that most social networks use for logging in, and assuming that site’s favicon isn’t stored in a CDN, it’s possible to figure out whether someone is logged into that site.

CSS Mega Dropdown | CodyHouse

I’m no fan of mega menus, and if a site were being designed from scratch, I’d do everything I could to avoid them, but on some existing projects they’re an unavoidable necessity (the design equivalent of technical debt). In those situations, this looks like a really nice, responsive approach.