Link tags: tab

138

sparkline

How Web Components Are Used at GitHub and Salesforce – The New Stack

I’m very taken with Github’s tab-container element—this is exactly how I think web components should be designed!

Merch Table

Feel bad because your favourite artists aren’t getting any income from Spotify? Here’s a handy tool from Hype Machine that allows you to import Sportify playlists and see where you can support those artists on Bandcamp.

Personal Data Warehouses: Reclaiming Your Data

I like the way that Simon is liberating his data from silos and making it work for him.

An opinionated guide to accessibility testing /// Iain Bean

  1. First impressions
  2. The Tab key
  3. Automated testing tools
  4. Screen reader testing
  5. Next steps

Presentable #96: The Employee-Owned Design Agency - Relay FM

If you want to know more about Clearleft’s new employee-ownserhip model, Andy tells Jeff all about it in this huffduffable hour of audio.

world smallest office suite

I like this idea for a minimum viable note-taking app:

data:text/html,<body contenteditable style="line-height:1.5;font-size:20px;">

I have added this to bookmarks and now my zero-weight text editor is one keypress away from me. You might also use it as a temporary clipboard to paste text or even pictures.

See also: a minimum viable code editor.

‘Real’ Programming Is an Elitist Myth | WIRED

The title says it all, really. This is another great piece of writing from Paul Ford.

I’ve noticed that when software lets nonprogrammers do programmer things, it makes the programmers nervous. Suddenly they stop smiling indulgently and start talking about what “real programming” is. This has been the history of the World Wide Web, for example. Go ahead and tweet “HTML is real programming,” and watch programmers show up in your mentions to go, “As if.” Except when you write a web page in HTML, you are creating a data model that will be interpreted by the browser. This is what programming is.

Lateral Thinking With Withered Technology · Matthias Ott – User Experience Designer

What web development can learn from the Nintendo Game and Watch.

The Web now consists of an ever-growing number of different frameworks, methodologies, screen sizes, devices, browsers, and connection speeds. “Lateral thinking with withered technology” – progressively enhanced – might actually be an ideal philosophy for building accessible, performant, resilient, and original experiences for a wide audience of users on the Web.

Dark Ages of the Web

Notes on the old internet, its design and frontend.

Top 10 books about remaking the future | Peter F Hamilton | Books | The Guardian

Here then are 10 stories of remaking the future that contain hope — or at least stability.

  1. The City and the Stars by Arthur C Clarke
  2. The First Fifteen Lives of Harry August by Claire North
  3. Revenger by Alastair Reynolds
  4. Children of Time by Adrian Tchaikovsky
  5. Do You Dream of Terra-Two? by Temi Oh
  6. Consider Phlebas by Iain M Banks
  7. Natural History by Justina Robson
  8. Ancillary Justice by Ann Leckie
  9. Way Station by Clifford D Simak
  10. News from Gardenia by Robert Llewellyn

Optimizing keyboard navigation using tabindex and ARIA — Sara Soueidan

Smart thinking from Sara to improve usability for keyboard users by using aria-hidden="true" tabindex="-1" to skip duplicate links:

A good rule of thumb for similar cases is that if you have multiple consecutive links to the same page, there is probably a chance to improve keyboard navigation by skipping some of those links to reduce the number of tab stops to one. The less tab stops, the better, as long as it does not worsen or compromise on other aspects of usability.

I’ve cautiously implemented this pattern now over on The Session where snippets of comments had both a title link and a “more” link going to the same destination.

Designing for Progressive Disclosure by Steven Hoober

Progressive disclosure interface patterns categorised and evaluated:

  • popups,
  • drawers,
  • mouseover popups (just say no!),
  • accordions,
  • tabs,
  • new pages,
  • scrolling,
  • scrolling sideways.

I really like the hypertext history invoked in this article.

The piece finishes with a great note on the MacNamara fallacy:

Everyone thinks metrics let us measure results. But, actually, they don’t. They measure only what they are measuring. Engagement, for example, is not something that can be measured, so we use an analogue for it. Time on page. Or clicks.

We often end up measuring what is quick, cheap, and easy to measure. Therefore, few organizations regularly conduct usability testing or customer-satisfaction surveys, but lots use analytics.

Even today, organizations often use clicks as a measure of engagement. So, all too often, they design user interfaces to generate clicks, so the system can measure them.

SofaConf 2020 - a technical write-up | Trys Mudford

Trys describes the backend architecture of the excellent Sofa Conf website. In short, it’s a Jamstack dream: all of the convenience and familiarity of using a database-driven CMS (Craft), combined with all the speed and resilience of using a static site generator (Eleventy).

I love the fact that anyone on the Clearleft events team can push to production with a Slack message.

I also love that the site is Lighthousetastically fast.

Link Targets and 3.2.5 | Adrian Roselli

Here are the many, many reasons why you should not open links in a new window (or tab).

Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so anyway, inform users in text.

Basil: Secret Santa as a Service | Trys Mudford

Trys writes up the process—and the tech (JAM)stack—he used to build basil.christmas.

HTML periodical table (built with CSS grid)

This is a nifty visualisation by Hui Jing. It’s really handy to have elements categorised like this:

  • Root elements
  • Scripting
  • Interactive elements
  • Document metadata
  • Edits
  • Tabular data
  • Grouping content
  • Embedded content
  • Forms
  • Sections
  • Text-level semantics

Table Design Patterns On The Web — Smashing Magazine

Hui Jing runs through a whole bunch of options for displaying responsive tables, some of them using just CSS, some of them using a smidgen of JavaScript. There are some really clever techniques in here.

Elemental haiku

An ode for every element in the periodic table, in the form of a haiku.

Home - Memory of Mankind

A time capsule for the long now. Laser-etched ceramic tablets in an Austrian salt mine carry memories of our civilisation in three categories: news editorials, scientific works, and personal stories.

You can contribute a personal story, your favorite poem, or newspaper articles which describe our problems, visions or our daily life.

Tokens that mark the location of the site are also being distributed across the planet.

Trix: A rich text editor for everyday writing

If you must add a rich text editor to an interface, this open source offering from Basecamp looks good.