Tags: ress

613

sparkline

Thursday, September 9th, 2021

Why We Create Progressive Web Apps: A Conversation with Jeremy Keith

This is a really nice write-up by Sydney of the chat we had on her podcast.

Wednesday, September 8th, 2021

Decoded: The When, Why, and Why Not of Progressive Web Apps

I really enjoyed talking to Sydney Lai about progressive web apps, resilient web design, and all my other hobby horses.

Alas, there’s no transcript and I can’t find a direct link to the RSS feed or the individual audio file on the podcast website so it’s not huffduffable.

Thursday, September 2nd, 2021

Airport time

I went and spoke at an actual real live conference. As expected, it felt good …and weird. All at the same time.

It felt strange to be inside a building with other humans sharing an experience. At times it felt uncomfortable. The speaker’s dinner the night before the conference was lovely …and anxiety-inducing. Not just because it was my first time socialising in ages, but also just because it was indoors. I’ve been avoid indoor dining.

But the travel to Zürich all went smoothly. The airport wasn’t too busy. And on the airplane, everyone was dutifully masked up.

There’s definitely more paperwork and logistics involved in travelling overseas now. Jessica and I had to fill in our passenger locator forms for Switzerland and the UK. We also needed to pre-book a Covid test for two days after we got back. And we had to get a Covid test while we were in Switzerland so that we could show a negative result on returning to England. It doesn’t matter if you’re double-vaccinated; these tests are mandatory, which is totally fair.

Fortunately the conference organisers took care of booking those tests, which was great. On the first day of the conference I ducked out during the first break to go to the clinic next door and have a swab shoved up my nose. Ten minutes later I was handed a test result—negative!—complete with an official-looking stamp on it.

Two days later, after the conference was over, we had time to explore Zürich before heading to the airport to catch our evening flight. We had a very relaxing day which included a lovely boat trip out on the lake.

It was when we got to the airport that the relaxation ended.

We showed up at the airport in loads of time. I subscribe to the Craig Mod school of travel anyway, but given The Situation, I wanted to make sure we accounted for any extra time needed.

We went through security just fine and waited around for our gate to come up on the screen of gates and flights. Once we had a gate, we made our way there. We had to go through passport control but that didn’t take too long.

At the gate, there was a queue so—being residents of England—we immediately got in line. The airline was checking everyone’s paperwork.

When we got to the front of the line, we showed all our documents. Passport? Check. Boarding pass? Check. Passenger locator form? Check. Negative Covid result? Che …wait a minute, said the member of staff, this is in German. According to gov.uk, the test result needs to be in English, French, or Spanish.

I looked at the result. Apart from the heading at the top, all of the actual information was international: names, dates, and the test result itself said “neg.”

Not good enough.

My heart sank. “Call or email the clinic where you got the result. Get them to send you an English or French version” said the airline representative. Okay. We went off to the side and started doing that.

At this point there was still a good 40 or 50 minutes ’till the flight took off. We could sort this out.

I phoned the clinic. It was late Saturday afternoon and the clinic was closed. Shit!

Jessica and I went back to the gate agent we were dealing with and began pleading our case (in German …maybe that would help). She was very sympathetic but her hands were tied. Then she proposed a long shot. There was a Covid-testing centre in the airport. She would call them and tell them we were coming. But at this point it was 35 minutes until the flight left. We’d really have to leg it.

She scribbled down vague directions for where we had to go, and we immediately pelted off.

At this point I feel I should confess. I did not exhibit grace under pressure. I was, to put it mildy, freaking out.

Perhaps because I was the one selfishly indulging in panic, Jessica kept her head. She reminded me that we weren’t travelling to a conference—there wasn’t anywhere we had to be. Worst case scenario, we’d have to spend an extra night in Zürich and get a different flight tomorrow. She was right. I needed to hear that.

I was still freaking out though. We were running around like headless chickens trying to find where we needed to go. The instructions had left out the crucial bit of information that we actually needed to exit through passport control (temporarily re-entering Swiss territory) in order to get to the testing centre. Until we figured that out, we were just running hither and tither in a panic while the clock continued to count down.

It was a nightmare. I don’t mean that figuratively. I mean, I’m pretty sure I’ve had this exact nightmare. I’m in a building with a layout I don’t know and I need to get somewhere urgently but I don’t know how to get there.

Even the reason for this panicked situation felt like it had a dream logic to it. You know when you wake up from a bad dream and you examine the dream in retrospect and you realise it doesn’t actually make any sense? Well, that’s how this felt. You’ve got a negative test result but it needs it to be in one of these three languages …I mean, that sounds like the kind of nonsensical reasoning that should dissolve upon awakening.

Time was slipping away. Our flight leaves in twenty minutes.

Finally we realise that we need to go back through passport control. On the other side we run around some more until we spot the location that matches the vague description we’ve been given. There’s a sign! Covid testing centre!

We burst in through the doors. The gate agent had called ahead so we were expected. The young doctor on duty was cool as a cucumber. He must have to deal with this situation all day long. He calmly got us both to start filling in the appropriate online forms to pay for the tests, but instead of waiting for us to finish doing that, he started the testing straight away. Smart!

This felt like another nightmare I’ve had. I don’t mean having a swab shoved up my nose until it tickles my brain—that was probably the least uncomfortable part of this whole ordeal. I mean I need to fill out this web form accurately. On a touch screen device. And do it as quickly as possible!

Well, we did it. Filled in the forms, got the swabs. But now it was less than fifteen minutes until our flight time and we knew we still had to get back through passport control where there were lines of people.

“You’ll have the test results by email in ten minutes,” said the doctor. “Go!”

We sprinted out of there and went straight for the passport lines. Swallowing my pride, I went to the people at the end of a line. “Our flight leaves in ten minutes! Can we please cut in front!?”

“No.”

Right, next line. “Our flight leaves in…”

“Yes, yes! Go!”

“Thank you! Thank you so much!”

We repeated this craven begging until we got to the front of the line and gave our passports to the same guy who had orginally stamped them first time we came through. He was unfazed.

Then we ran back to the gate. Almost everyone had boarded by this point, but the gate was still open. Maybe we could actually make it!

But we still needed our test results. We both stood at the gate with our phones in hand, the email app open, frantically pulling to refresh.

The minutes were ticking by. At this point the flight departure time had arrived, but the gate agent said there was a slight delay. They could wait one or two minutes more.

Pull, refresh. Pull, refresh.

“I’ve got mine!” shouted Jessica. Half a minute later, mine showed up.

We showed the gate agent the results. She stamped whatever needed to be stamped and we were through.

I couldn’t believe it! Just 15 minutes ago I had been thinking we might as well give up—there was absolutely no way we were going to make it.

But here we were boarding the plane.

We got to our seats and strapped in. We were both quite sweaty and probably looked infectious …but we also had fresh proof that neither of had the ’rona.

We just sat there smiling, looking at each other, and shaking our heads. I just couldn’t believe we had actually made it.

The captain made an announcement. They were having a little technical difficulty with the plane’s system—no doubt the cause of the slight delay, luckily for us. They were going to reboot the system in the time-honoured fashion of turning it off and again.

The lights briefly went out and then came back on as the captain executed this manouvre.

Meanwhile Jessica and I were coming down from our adrenaline rush. Our breathing was beginning to finally slow down.

The captain’s voice came on again. That attempt at fixing the glitch hadn’t worked. So to play it safe, we were going to switch planes. The new plane would take off in an hour and a half from a different gate.

As the other passengers tutted and muttered noises of disapproval, Jessica and I just laughed. A delay? No problem!

But oh, the Alanis Morissette levels of irony! After all that stress at the mercy of the ticking clock, it turned out that time was in plentiful supply after all.

Everything after that proceeded without incident. We got on the replacement plane. We flew back to England. We breezed across the border and made our way home.

It felt good to be home.

Tuesday, August 3rd, 2021

How To Build Resilient JavaScript UIs — Smashing Magazine

The opening paragraphs of this article should be a mantra recited by every web developer before they begin their working day:

Things on the web can break — the odds are stacked against us. Lots can go wrong: a network request fails, a third-party library breaks, a JavaScript feature is unsupported (assuming JavaScript is even available), a CDN goes down, a user behaves unexpectedly (they double-click a submit button), the list goes on.

Fortunately, we as engineers can avoid, or at least mitigate the impact of breakages in the web apps we build. This however requires a conscious effort and mindset shift towards thinking about unhappy scenarios just as much as happy ones.

I love, love, love the emphasis on reducing assumptions:

Taking a more defensive approach when writing code helps reduce programmer errors arising from making assumptions. Pessimism over optimism favours resilience.

Hell, yeah!

Accepting the fragility of the web is a necessary step towards building resilient systems. A more reliable user experience is synonymous with happy customers. Being equipped for the worst (proactive) is better than putting out fires (reactive) from a business, customer, and developer standpoint (less bugs!).

Friday, July 30th, 2021

For developers, Apple’s Safari is crap and outdated – Perry Sun | Blog

Apple dragged their feet in adding support for PWAs in Safari, and when they finally did, limited the capabilities of a PWA so that native-like app functionality wouldn’t be possible, like notifications or a home screen icon shortcut – to name just a few of the many restrictions imposed by Apple.

But it goes beyond that. On iOS, the only web rendering engine allowed is Apple’s own WebKit, which runs Safari. Third-party iOS browsers such as Chrome can only use WebKit, not their own engines (as would be permitted in Windows, Android, or macOS). And it’s WebKit that governs PWA capabilities.

Safari is very good web browser, delivering fast performance and solid privacy features.

But at the same time, the lack of support for key web technologies and APIs has been both perplexing and annoying at the same time.

The enormous popularity of iOS makes it all the more annoying that Apple continues to hold back developers from being able to create great experiences over the web that work across all platforms.

Tuesday, July 6th, 2021

Tabs in HTML?

I’ve been having some really interesting chats with Brian about tabs, markup, progressive enhancement and accessibility. Here’s a braindump of his current thinking which is well worth perusing.

Monday, July 5th, 2021

petite-vue - npm

An interesting alternative to using the full Vue library, courtesy of Vue’s creator:

petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for “sprinkling” small amount of interactions on an existing HTML page rendered by a server framework.

Tuesday, June 29th, 2021

Safari 15

If you download Safari Technology Preview you can test drive features that are on their way in Safari 15. One of those features, announced at Apple’s World Wide Developer Conference, is coloured browser chrome via support for the meta value of “theme-color.” Chrome on Android has supported this for a while but I believe Safari is the first desktop browser to add support. They’ve also added support for the media attribute on that meta element to handle “prefers-color-scheme.”

This is all very welcome, although it does remind me a bit of when Internet Explorer came out with the ability to make coloured scrollbars. I mean, they’re nice features’n’all, but maybe not the most pressing? Safari is still refusing to acknowledge progressive web apps.

That’s not quite true. In her WWDC video Jen demonstrates how you can add a progressive web app like Resilient Web Design to your home screen. I’m chuffed that my little web book made an appearance, but when you see how you add a site to your home screen in iOS, it’s somewhat depressing.

The steps to add a website to your home screen are:

  1. Tap the “share” icon. It’s not labelled “share.” It’s a square with an arrow coming out of the top of it.
  2. A drawer pops up. The option to “add to home screen” is nowhere to be seen. You have to pull the drawer up further to see the hidden options.
  3. Now you must find “add to home screen” in the list
  • Copy
  • Add to Reading List
  • Add Bookmark
  • Add to Favourites
  • Find on Page
  • Add to Home Screen
  • Markup
  • Print

It reminds of this exchange in The Hitchhiker’s Guide To The Galaxy:

“You hadn’t exactly gone out of your way to call attention to them had you? I mean like actually telling anyone or anything.”

“But the plans were on display…”

“On display? I eventually had to go down to the cellar to find them.”

“That’s the display department.”

“With a torch.”

“Ah, well the lights had probably gone.”

“So had the stairs.”

“But look you found the notice didn’t you?”

“Yes,” said Arthur, “yes I did. It was on display in the bottom of a locked filing cabinet stuck in a disused lavatory with a sign on the door saying ‘Beware of The Leopard.’”

Safari’s current “support” for adding progressive web apps to the home screen feels like the minimum possible …just enough to use it as a legal argument if you happen to be litigated against for having a monopoly on app distribution. “Hey, you can always make a web app!” It’s true in theory. In practice it’s …suboptimal, to put it mildly.

Still, those coloured tab bars are very nice.

It’s a little bit weird that this stylistic information is handled by HTML rather than CSS. It’s similar to the meta viewport value in that sense. I always that the plan was to migrate that to CSS at some point, but here we are a decade later and it’s still very much part of our boilerplate markup.

Some people have remarked that the coloured browser chrome can make the URL bar look like part of the site so people might expect it to operate like a site-specific search.

I also wonder if it might blur “the line of death”; that point in the UI where the browser chrome ends and the website begins. Does the unified colour make it easier to spoof browser UI?

Probably not. You can already kind of spoof browser UI by using the right shade of grey. Although the removal any kind of actual line in Safari does give me pause for thought.

I tend not to think of security implications like this by default. My first thought tends to be more about how I can use the feature. It’s only after a while that I think about how bad actors might abuse the same feature. I should probably try to narrow the gap between those thoughts.

Solutionism

Progressive enhancement in meatspace:

IRL progressive enhancement is quite common when you think of it. You can board planes with paper boarding cards, but also with technology like QR codes and digital wallets. You can pay for a coffee with cash, card or phone. The variety serves diverse sets of people. Just like in web development, not dismissing the baseline lets us cover use cases we didn’t know existed. It is fragile, though: some manager somewhere probably has a fantasy about replacing everything with fancy tech and fancy tech only.

Sunday, June 27th, 2021

An email to The Guardian

Hello,

My name is Jeremy and I’ve been a paid subscriber to The Guardian for a few years now. But I’m considering cancelling my account after reading this editorial.

On the face of it, the headline of the article sound reasonable and hard to disagree with. But the substance of the article downplays anti-trans views as simply being “gender critical.” This is akin to describing segregationist views as “integration critical.”

This line is particularly egregious:

As a society, we need to resolve the question of how to protect the privacy, dignity and rights of trans women while also respecting the privacy, dignity and rights of those born female.

Setting up these positions as though one in any way invalidates the other gives oxygen to those who wish to paint someone’s identity as a threat. I’m very disappointed to see this viewpoint expressed in an editorial on The Guardian website.

Yours,

Jeremy Keith

Tuesday, June 8th, 2021

mmm.page

This is a fun drag’n’drop way to make websites. And I like the philosophy:

Websites shouldn’t all look the same. We prefer campy, kitschy, messy, imperfect.

Sunday, May 16th, 2021

Container Queries in Web Components | Max Böck

The point of this post is to show how nicely container queries can play with web components, but I want to also point out how nice the design of the web component is here: instead of just using an empty custom element, Max uses progressive enhancement to elevate the markup within the custom element.

Tuesday, May 11th, 2021

Design for reading: tips for optimizing content for Reader modes and reading apps

The more I consume content in reading apps, the more I am reminded of the importance and the power of progressive enhancement as a strategy to create resilient and malleable experiences that work for everyone, regardless of how they choose to consume our content.

Top stuff from Sara here!

We have a tendency to always make an assumption about how our readers are reading our content—probably in the browser, with our fancy styles applied to it. But if we make a habit out of thinking about the Web in layers and CSS as an enhancement on top of the content layer, then we can start optimizing and enhancing our users’ reading experiences regardless of their context.

Thinking about the different ways in which users access the Web only shines light on the importance of a progressively enhanced approach to building for the Web. The more we think about the Web in layers and try to improve the experience of one layer before moving to the next, the more resilient experiences we can create. That’s what the essence of progressive enhancement is about.

Monday, May 10th, 2021

Building a resilient frontend using progressive enhancement - Service Manual - GOV.UK

Using progressive enhancement means your users will be able to do what they need to do if any part of the stack fails.

What a terrific short guide to sensible web development!

  • Start with HTML
    • Using interactive elements
    • Adding the extras
    • Building more complex services
    • Testing your service
    • Do not assume users turn off CSS or JavaScript
    • Case studies and related guides

Friday, May 7th, 2021

Episode 012 - Designing Resilience with Jeremy Keith by The Object-Oriented UX Podcast

I enjoyed this conversation with Sophia (our chat starts around the 11 minute mark) prompted by Resilient Web Design.

Wednesday, April 21st, 2021

PlymouthPress – A Letterpress Image Font

An experimental image font made using the University of Plymouth’s unique letterpress workshop.

Grungy!

The font is intended for display purposes only, and not is suitable for body text.

Monday, April 12th, 2021

The Layers of the Web - Jeremy Keith - YouTube

Here’s the video of the talk I gave at the Web Stories conference back in February.

The Layers of the Web - Jeremy Keith

Tuesday, April 6th, 2021

Matthew Somerville on Twitter

Our slippy map works without JavaScript, yet we also have a service worker.

Getting a tattoo. brb

Of the web

I’m subscribed to a lot of blogs in my RSS reader. I follow some people because what they write about is very different to what I know about. But I also follow lots of people who have similar interests and ideas to me. So I’m not exactly in an echo chamber, but I do have the reverb turned up pretty high.

Sometimes these people post thoughts that are eerily similar to what I’ve been thinking about. Ethan has been known to do this. Get out of my head, Marcotte!

But even if Ethan wasn’t some sort of telepath, he’d still be in my RSS reader. We’re friends. Lots of the people in my RSS reader are my friends. When I read their words, I can hear their voices.

Then there are the people I’ve never met. Like Desirée García, Piper Haywood, or Jim Nielsen. Never met them, don’t know them, but damn, do I enjoy reading their blogs. Last year alone, I ended up linking to Jim’s posts ten different times.

Or Baldur Bjarnason. I can’t remember when I first came across his writing, but it really, really resonates with me. I probably owe him royalties for the amount of times I’ve cited his post Over-engineering is under-engineering.

His latest post is postively Marcottian in how it exposes what’s been fermenting in my own mind. But because he writes clearly, it really helps clarify my own thinking. It’s often been said that you should write to figure out what you think, and I can absolutely relate to that. But here’s a case where somebody else’s writing really helps to solidify my own thoughts.

Which type of novelty-seeking web developer are you?

It starts with some existentialist stock-taking. I can relate, what with the whole five decades thing. But then it turns the existential questioning to the World Wide Web itself, or rather, the people building the web.

In a way, it’s like taking the question of the great divide (front of the front end and back of the front end), and then turning it 45 degrees to reveal an entirely hidden dimension.

In examining the nature of the web, he hits on the litmus of how you view encapsulation:

I mention this first as it’s the aspect of the web that modern web developers hate the most without even giving it a label. Single-Page-Apps and GraphQL are both efforts to eradicate the encapsulation that’s baked into the foundation of every layer of the web.

Most modern devs are trying to get rid of it but it’s one of the web’s most strategic advantages.

I hadn’t thought of this before.

By default, if you don’t go against the grain of the web, each HTTP endpoint is encapsulated from each other.

Moreover, all of this can happen really fast if you aren’t going overboard with your CSS and JS.

He finishes with a look at another of the web’s most powerful features: distribution. In between are the things that make the web webby: hypertext and flexibility (The Dao of the Web).

It’s the idea that the web isn’t a single fixed thing but a fluid multitude whose shape is dictated by its surroundings.

This resonates with me because it highlights two different ways of viewing the web.

On the one hand, you can see the web purely as a distribution channel. In the past you might have been distributing a Flash movie. These days you might be distributing a single page app. Either way, the web is there as a low-friction way of getting your creation in front of other people.

The other way of building for the web is to go with the web’s grain, embracing flexibility and playing to the strengths of the medium through progressive enhancement. This is the distinction I was getting at when I talked about something being not just on the web, but of the web.

With that mindset, Baldur then takes us through some of the technologies that he’s excited about, like SvelteKit and Hotwire. I think it’s the same mindset that got me excited about service workers. As Baldur says:

They are helping the web become better at being its own thing.

That’s my tagline right there.

Wednesday, March 31st, 2021

esoteric.codes

Languages, platforms, and systems that break from the norms of computing.