It’s all fun and games until you realise that everything in here was inspired by actual interfaces out there on the web.
Thursday, July 4th, 2019
Monday, June 24th, 2019
Am I cached or not?
When I was writing about the lie-fi strategy I’ve added to adactio.com, I finished with this thought:
What I’d really like is some way to know—on the client side—whether or not the currently-loaded page came from a cache or from a network. Then I could add some kind of interface element that says, “Hey, this page might be stale—click here if you want to check for a fresher version.”
Trys heard my plea, and came up with a very clever technique to alter the HTML of a page when it’s put into a cache.
It’s a function that reads the response body stream in, returning a new stream. Whilst reading the stream, it searches for the character codes that make up:
<html. If it finds them, it tacks on a
But then I was discussing this issue with Tantek and Aaron late one night after Indie Web Camp Düsseldorf. I realised that I might have another potential solution that doesn’t involve the service worker at all.
Caveat: this will only work for pages that have some kind of server-side generation. This won’t work for static sites.
In my case, pages are generated by PHP. I’m not doing a database lookup every time you request a page—I’ve got a server-side cache of posts, for example—but there is a little bit of assembly done for every request: get the header from here; get the main content from over there; get the footer; put them all together into a single page and serve that up.
I’ve published the code as a gist.
script element on each page, I have this bit of coducken:
var serverTimestamp = <?php echo time(); ?>;
serverTimestamp holds the timestamp that the page was generated. When the page is put in the cache, this won’t change. This number should be the number of seconds since January 1st, 1970 in the UTC timezone (that’s what my server’s timezone is set to).
Date object, I use a caravan of methods like
getTime() to end up with a variable called
clientTimestamp. This will give the current number of seconds since January 1st, 1970, regardless of whether the page is coming from the server or from the cache.
var localDate = new Date(); var localUTCString = localDate.toUTCString(); var UTCDate = new Date(localUTCString); var clientTimestamp = UTCDate.getTime() / 1000;
Then I compare the two and see if there’s a discrepency greater than five minutes:
if (clientTimestamp - serverTimestamp > (60 * 5))
If there is, then I inject some markup into the page, telling the reader that this page might be stale:
The reader has the option to refresh the page or dismiss the message.
It’s not foolproof by any means. If the visitor’s computer has their clock set weirdly, then the comparison might return a false positive every time. Still, I thought that using UTC might be a safer bet.
All in all, I think this is a pretty good method for detecting if a page is being served from a cache. Remember, the goal here is not to determine if the user is offline—for that, there’s
The upshot is this: if you visit my site with a crappy internet connection (lie-fi), then after three seconds you may be served with a cached version of the page you’re requesting (if you visited that page previously). If that happens, you’ll now also be presented with a little message telling you that the page isn’t fresh. Then it’s up to you whether you want to have another go.
I like the way that this puts control back into the hands of the user.
Wednesday, June 19th, 2019
Another take on the scrolling navigation pattern. However you feel about the implementation details, it’s got to better than the “teenage tidying” method of shoving everything behind a hamburger icon.
Tuesday, June 18th, 2019
An excellent piece by Maciej on the crucial difference between individual privacy and ambient privacy (and what that means for regulation):
Ambient privacy is not a property of people, or of their data, but of the world around us. Just like you can’t drop out of the oil economy by refusing to drive a car, you can’t opt out of the surveillance economy by forswearing technology (and for many people, that choice is not an option). While there may be worthy reasons to take your life off the grid, the infrastructure will go up around you whether you use it or not.
Because our laws frame privacy as an individual right, we don’t have a mechanism for deciding whether we want to live in a surveillance society. Congress has remained silent on the matter, with both parties content to watch Silicon Valley make up its own rules. The large tech companies point to our willing use of their services as proof that people don’t really care about their privacy. But this is like arguing that inmates are happy to be in jail because they use the prison library. Confronted with the reality of a monitored world, people make the rational decision to make the best of it.
That is not consent.
For more detail, I highly recommend reading his testimony to the senate hearing on Privacy Rights and Data Collection in a Digital Economy.
I don’t know how we got to a point where chatting and sharing with friends means having to pick through adverts, and agreeing to being tracked and marketed at, and risk being exposed to, or abused by, terrible people. Our conversations and holiday snaps have become darkly marketed events. You could say this is a fair exchange but it feels wrong to me. The things being exchanged are too different, a kind of category error. It’s a wonky kind of barter in which I feel powerless and used. It’s not why I came here, to the internet.
Sunday, June 16th, 2019
IntersectionObserver to lazy load images—very handy for webmention avatars.
Tuesday, June 11th, 2019
A very thoughtful post by Hidde that draws a useful distinction between the “internals” of a component (the inner workings of a React component, Vue component, or web component) and the code that wires those components together (the business logic):
I really like working on the detailed stuff that affects users: useful keyboard navigation, sensible focus management, good semantics. But I appreciate not every developer does. I have started to think this may be a helpful separation: some people work on good internals and user experience, others on code that just uses those components and deals with data and caching and solid architecture. Both are valid things, both need love. Maybe we can use the divide for good?
Sunday, June 9th, 2019
Each typeface highlights a piece of history from a specific underrepresented race, ethnicity, or gender—from the Women’s Suffrage Movement in Argentina to the Civil Rights Movement in America.
Thursday, June 6th, 2019
From the days of Xerox PARC:
In your garage organization, there’s always a bucket for miscellaneous. You’ve got nuts and bolts and screws and nails, and then, stuff, miscellaneous stuff. That’s kind of what the hamburger menu button was.
Same as it ever was.
Some ideas for interface elements that prompt progressive web app users to add the website to their home screen.
Wednesday, June 5th, 2019
Aaron knows what he’s talking about when it comes to authentication, and Apple’s latest move with sign-in for native apps gets the thumbs up.
Sign In with Apple is a good thing for users! This means apps will no longer be able to force you to log in with your Facebook account to use them.
This does not mean that Apple is requiring every app to use Sign in with Apple.
Monday, May 27th, 2019
Bullet comments, or 弹幕 (“danmu”), are text-based user reactions superimposed onto online videos: a visual commentary track to which anyone can contribute.
A fascinating article by Christina Xu on this overwhelming collaborative UI overlaid on Chinese video-sharing sites:
In the West, the Chinese internet is mostly depicted in negative terms: what websites and social platforms are blocked, what keywords are banned, what conversations and viral posts are scrubbed clean from the web overnight. This austere view is not inaccurate, but it leaves out what exactly the nearly 750 million internet users in China do get up to.
Take a look at bullet comments, and you’ll have a decent answer to that question. They represent the essence of Chinese internet culture: fast-paced and impish, playfully collaborative, thick with rapidly evolving inside jokes and memes. They are a social feature beloved by a generation known for being antisocial. And most importantly, they allow for a type of spontaneous, cumulative, and public conversation between strangers that is increasingly rare on the Chinese internet.
Tuesday, May 21st, 2019
This is a really great, balanced profile of the Indie Web movement. There’s thoughtful criticism alongside some well-deserved praise:
If we itemize the woes currently afflicting the major platforms, there’s a strong case to be made that the IndieWeb avoids them. When social-media servers aren’t controlled by a small number of massive public companies, the incentive to exploit users diminishes. The homegrown, community-oriented feel of the IndieWeb is superior to the vibe of anxious narcissism that’s degrading existing services.
Tantek’s barnstorming closing talk from Beyond Tellerrand. This is well worth 30 minutes of your time.
Own your domain. Own your content. Own your social connections. Own your reading experience. IndieWeb services, tools, and standards enable you to take back your web.
Wednesday, April 10th, 2019
Wouldn’t it be great if every component in your design system had accessibility acceptance criteria? Paul has some good advice for putting those together:
- Start with accessibility needs
- Don’t be too generic
- Don’t define the solution
- Iterate criteria
Tuesday, April 9th, 2019
Monday, April 8th, 2019
When we hide content, there’s a greater risk the user won’t see it. There’s a higher reliance on digital literacy and it’s generally more labour intensive for the user.
Worse still, sometimes we kill off essential content.
Sunday, April 7th, 2019
I got a message from a screen-reader user of The Session recently, letting me know of a problem they were having. I love getting any kind of feedback around accessibility, so this was like gold dust to me.
They pointed out that the drag’n’drop interface for rearranging the order of tunes in a set was inaccessible.
Of course! I slapped my forehead. How could I have missed this?
It had been a while since I had implemented that functionality, so before even looking at the existing code, I started to think about how I could improve the situation. Maybe I could capture keystroke events from the arrow keys and announce changes via ARIA values? That sounded a bit heavy-handed though: mess with people’s native keyboard functionality at your peril.
Then I looked at the code. That was when I realised that the fix was going to be much, much easier than I thought.
I documented my process of adding the drag’n’drop functionality back in 2016. Past me had his progressive enhancement hat on:
One of the interfaces needed for this feature was a form to re-order items in a list. So I thought to myself, “what’s the simplest technology to enable this functionality?” I came up with a series of
selectelements within a form.
The problem was in my feature detection:
There’s a little bit of mustard-cutting going on: does the
dragulaobject exist, and does the browser understand
querySelector? If so, the
selectelements are hidden and the drag’n’drop is enabled.
The logic was fine, but the execution was flawed. I was being lazy and hiding the
select elements with
display: none. That hides them visually, but it also hides them from screen readers. I swapped out that style declaration for one that visually hides the elements, but keeps them accessible and focusable.
It was a very quick fix. I had the odd sensation of wanting to thank Past Me for making things easy for Present Me. But I don’t want to talk about time travel because if we start talking about it then we’re going to be here all day talking about it, making diagrams with straws.
I pushed the fix, told the screen-reader user who originally contacted me, and got a reply back saying that everything was working great now. Success!
Saturday, April 6th, 2019
Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective · An A List Apart Article
This is a fascinating insight into what it’s like to use the web if you’ve got vertigo (which is way more common than you might think):
Really, there are no words to describe just how bad a simple parallax effect, scrolljacking, or even
background-attachment: fixedwould make me feel. I would rather jump on one of those 20-G centrifuges astronauts use than look at a website with parallax scrolling.
Every time I encountered it, I would put the bucket beside me to good use and be forced to lie in bed for hours as I felt the room spinning around me, and no meds could get me out of it. It was THAT bad.
Thursday, April 4th, 2019
This is a really nice write-up of creating an accessible progressive disclosure widget (a show/hide toggle).
Where it gets really interesting is when Andy shows how it could all be encapsulated into a web component with a progressive enhancement mindset