Tags: os

1222

sparkline

Thursday, January 20th, 2022

Screenshots

I wrote about how I created a page on The Session with instructions for installing the site to your home screen. When I said that I included screenshots on that page, I may have underplayed the effort involved. It was real faff.

I’ve got an iPhone so generating screenshots (and video) from that wasn’t too bad. But I don’t have access to an Android phone. I found myself scouring the web for templates that I could use to mockup a screenshot of the address bar.

That got me thinking…

Wouldn’t it be cool if there were a service that generated those screenshots for you? You give it a URL, and it spits out screenshots of the site complete with overlays showing the installation flow on Android and iOS. It could even generate the img markup, complete with differently-scaled images for the srcset attribute.

Download the images. Copy that markup. Paste it into a page on your site. Boom! Now you’ve got somewhere to point your visitors to if you’d like them to install your progressive web app.

There are already some services out there for generating screenshots of mobile phones but they’re missing is the menu overlays for adding to home screen.

The devrels at both Google and Microsoft have been doing a great job of promoting progressive web apps. They’ve built tools to help you with tasks like generating icons or creating your web app manifest. It would be sooooo nifty if those tools also generated instructional screenshots for adding to home screen!

Tuesday, January 18th, 2022

Installing progressive web apps

I don’t know about you, but it seems like everyone I follow on Twitter is playing Wordle. Although I don’t play the game myself, I think it’s pretty great.

Not only does Wordle have a very sweet backstory, but it’s also unashamedly on the web. If you want to play, you go to the URL powerlanguage.co.uk/wordle. That’s it. No need to download an app.

That hasn’t stopped some nefarious developers trying to trick people into downloading their clones of Wordle from app stores. App stores, which are meant to be curated and safe, are in fact filled with dodgy knock-offs and scams. Contrary to popular belief, the web is quite literally a safer bet.

Wordle has a web app manifest, which means you can add it to your home screen and it will behave just like a native app (although I don’t believe it has offline support). That’s great, but the process of adding a web app to your home screen on iOS is ludicrously long-winded.

Macworld published an article detailing how to get the real Wordle app on your iPhone or iPad. On the one hand it’s great to see this knowledge being spread. On the other hand it’s dispiriting that it’s even necessary to tell people that they can do this, like it’s a hidden nerdy secret just for power users.

At this point I’ve pretty much given up on Apple ever doing anything about this pathetic situation. So what can I do instead?

Well, taking my cue from that Macworld article, the least I can do is inform people how they can add a progressive web app to their home screen.

That’s what I’ve done on thesession.org. I’ve published a page on how to install The Session to your home screen.

On both Android and iPhone the journey to installing a progressive web app begins with incomprehensible iconography. On Android you must first tap on the unlabeled kebab icon—three vertical dots. On iOS you must first tap on the unlabeled share icon—a square with an arrow coming out of it.

The menu icon on Android. The share icon on iOS.

When it comes to mobile operating systems, consumer choice means you choose which kind of mystery meat to eat.

I’ve included screenshots to help people identify these mysterious portals. For iOS I’ve also included a video to illustrate the quest to find the secret menu item buried beneath the share icon.

I’ve linked to the page with the installation instructions from the site’s “help” page and the home page.

Handy tip: when you’re adding a start_url value to your web app manifest, it’s common to include a query string like this:

start_url: "/?homescreen"

I’m guessing most people to that so they can get analytics on how many people are starting from an icon tap. I don’t do analytics on The Session but I’m still using that query string in my start_url. On the home page of the site, I check for the existence of the query string. If it exists, I don’t show the link to the installation page. So once someone has installed the site to their home screen, they shouldn’t see that message when they launch The Session.

If you’ve got a progressive web app, it might be worth making a page with installation instructions rather than relying on browsers to proactively inform your site’s visitors. You’d still need to figure out the right time and place to point people to that page, but at least the design challenge would be in your hands.

Should you decide to take a leaf out of the Android and iOS playbooks and use mystery meat navigation to link to such a page, there’s an emoji you could potentially use: 📲

It’s still worse than using actual words, but it might be better than some random combination of dots, squares and arrows.

(I’m not really serious about using that emoji, but if you do, be sure to use a sensible aria-label value on the enclosing a element.)

Thursday, December 30th, 2021

Picture 1 Picture 2 Picture 3 Picture 4

Road tripping.

Saturday, December 25th, 2021

Picture 1 Picture 2

Lola the luckdragon.

Wednesday, December 1st, 2021

Webrise

Prompted by my talk, The State Of The Web, Brian zooms out to get some perspective on how browser power is consolidated.

The web is made of clients and servers. There’s a huge amount of diversity in the server space but there’s very little diversity when it comes to clients because making a browser has become so complex and expensive.

But Brian hopes that this complexity and expense could be distributed amongst a large amount of smaller players.

10 companies agreeing to invest $10k apiece to advance and maintain some area of shared interest is every bit as useful as 1 agreeing to invest $100k generally. In fact, maybe it’s more representative.

We believe that there is a very long tail of increasingly smaller companies who could do something, if only they coordinated to fund it together. The further we stretch this out, the more sources we enable, the more its potential adds up.

Tuesday, November 30th, 2021

Speakers | State of the Browser 2021

All the talks from this year’s State Of The Browser event are online, and they’re all worth watching.

I laughed out loud at multiple points during Heydon’s talk.

Sunday, November 28th, 2021

Modern CSS in a Nutshell - Cloud Four

I like this high-level view of the state of CSS today. There are two main takeaways:

  1. Custom properties, flexbox, and grid are game-changers.
  2. Pre- and post-processers are becoming less and less necessary.

This is exactly the direction we should be going in! More and more power from the native web technologies (while still remaining learnable), with less and less reliance on tooling. For CSS, the tools have been like polyfills that we can now start to remove.

Alas, while the same should be true of JavaScript (there’s so much you can do in native JavaScript now), people seem to have tied their entire identities to the tooling they use.

They could learn a thing or two from the trajectory of CSS: treat your frameworks as cattle, not pets.

Thursday, November 25th, 2021

The Handwavy Technobabble Nothingburger

Any application that could be done on a blockchain could be better done on a centralized database. Except crime.

This resonates:

I’m not alone in believing in the fundamental technical uselessness of blockchains. There are tens of thousands of other people in the largest tech companies in the world that thanklessly push their organizations away from crypto adoption every day. The crypto asset bubble is perhaps the most divisive topic in tech of our era and possibly ever to exist in our field. It’s a scary but essential truth to realise that normal software engineers like us are an integral part of society’s immune system against the enormous moral hazard of technology-hyped asset bubbles metastasizing into systemic risk.

Monday, November 15th, 2021

The internet that disappears - Embedded

The internet, it turns out, is not forever. It’s on more of like a 10-year cycle. It’s constantly upgrading and migrating in ways that are incompatible with past content, leaving broken links and error pages in its wake. In other instances, the sites simply shutter, or become so layered over that finding your own footprint is impossible—I have searched “Kate Lindsay Myspace” every which way and have concluded that my content from that platform must simply be lost to time, ingested by the Shai-Hulud of the internet.

Wednesday, October 20th, 2021

“The internet wasn’t designed to breach national boundaries” - Rest of World

Say you’re into the indie web without saying you’re into the indie web…

The internet wasn’t really convenient in 1994 or 1995, but it was a very collaborative space.

There was a moment where we replaced this idea of the internet being a medium that we can all write to and participate in to one that is mediated. That happened at some point after social networks started to arrive and when the smartphone started to arrive. It’s a combination of the nature of those platforms and the prevalence of the technologies, which meant the economic rewards of getting this right rose significantly.

And so there’s a really distinctly different feel in the 2013, or 2014, internet to the one that you might have had in 1997, or 1998. It’s not just that it’s easier and I’m yearning for a world of cars with manual choke and manual transmission and crank-up starter handles, but it’s that the programmability of the internet and its endpoints has turned into something that is increasingly permissioned by major platforms.

Sunday, October 17th, 2021

Picture 1 Picture 2 Picture 3
map

Checked in at Pinóquio. Seafood feast — with Jessica

Saturday, October 16th, 2021

Picture 1 Picture 2 Picture 3 Picture 4
map

Checked in at A Cevicheria. Feasting on ceviche — with Jessica

Picture 1 Picture 2 Picture 3 Picture 4

Exploring Lisbon with @wordridden.

Tuesday, October 5th, 2021

Build a Better Mobile Input

This is such a handy tool for building forms! Choose different combinations of type, inputmode, and autocomplete attributes on input elements and see how that will be conveyed to users on iOS and Android devices.

Saturday, October 2nd, 2021

Picture 1 Picture 2 Picture 3 Picture 4

Spent a nice couple of days hanging out with my buddy Cider.

Friday, October 1st, 2021

Picture 1 Picture 2 Picture 3 Picture 4

Looking up in London.

Picture 1 Picture 2 Picture 3

I’m such a sucker for gamification when it comes to web performance/security/privacy.

Thursday, September 30th, 2021

Bruce Lawson’s personal site  : Set Safari free!

If Apple allowed Safari to actually compete, it would be better for web developers, businesses, consumers, and for the health of the web. Come on, Apple, set Safari free!

Wednesday, September 29th, 2021

Get Lost on the Web – Dan Q

Internet users use fewer different websites today than they did 20 years ago, and spend most of their “Web” time in app versions of websites (which often provide a better experience only because site owners strategically make it so to increase their lock-in and data harvesting potential). Truly exploring the Web now requires extra effort, like exercising an underused muscle. And if you begin and end your Web experience on just one to three services, that just feels kind of… sad, to me. Wasted potential.

Tuesday, September 28th, 2021

iOS Browser Choice | CSS-Tricks

I have this expensive computer in my pocket and it feels unfair that it is hamstrung in this very specific way of not allowing other browser engines. I also have an Apple laptop and it’s not hamstrung in that way, and I really hope it never is.