This is a really good use-case for cancelling fetch requests: making API calls while autocompleting in search.
It’s so great to see the initial UX work that James and I prototyped in a design sprint come to fruition in the form of a progressive web app!
In the case of this web-app, if the tablets go offline, they will still store all the transactions that are made by customers. Once the tablet comes back online, it will sync it back up to the server. That is, essentially, what a Progressive Web App is — a kind of a website with a few more security and, most importantly, offline features.
In the past, when I brushed off new advances or updates to technology and processes I preferred to stick with a simple path of “it still works fine,” but in doing so I realize now that I have l lost a lot beginning with the ability to function with current best practices in certain areas of my skill sets and the degradation a few projects, especially Airbag.
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.”)
Then there’s the inflatable doorknob.
This uses generated content in CSS to make the
aria-label attributes visible on small screens—clever!
Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.
Some interesting outcomes from testing gov.uk with blind users of touchscreen devices:
Rather than reading out the hierarchy of the page, some of the users navigated by moving their finger around to ‘discover’ content.
This was really interesting - traditionally good structure for screen readers is about order and hierarchy. But for these users, the physical placement on the screen was also really important (just as it is for sighted users).
Dave explains the thinking behind his responsive table pattern I linked to a while back. He’s at pains to point out that you should always make sure a pre-made pattern is right for you instead of just deploying it no-questions-asked:
Using prefabricated, road tested solutions from Apple’s Human Interface Guidelines, Google’s Material Design, Twitter’s Bootstrap, and Brad Frost’s Responsive Patterns is always a good place to start, but don’t settle there. My biggest advice would be to turn off the 27” display and use your sites and projects on your phone, there’s lots of low hanging fruit that could give way to new patterns, tailor-suited to your content.
Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.
A fascinating insight into some of Tumblr’s most popular accounts:
Some posts get more than a million notes—imagine a joke whispered in biology class getting a laugh from a city the size of San Francisco.
It’ll be a real shame when Tumblr disappears.
That’s “when”, not “if”. Remember:
In 2013, Yahoo bought Tumblr.
There’s something about this that I really like: a message transmitted via a modern communications medium converted into the oldest form of writing.
Combining the molecules of narrative tropes to create stories.
Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.
Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.
An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.
I like this CSS solution to sideways-scrolling tables for small viewports. It’s not going to be right for every situation but it’s a handy trick to keep up your sleeve.