Tags: ft

426

sparkline

Tuesday, June 5th, 2018

Clearleft.com is a progressive web app

What’s that old saying? The cobbler’s children have no shoes that work offline. Or something.

It’s been over a year since the Clearleft site relaunched and I listed some of the next steps I had planned:

Service worker. It’s a no-brainer. Now that the Clearleft site is (finally!) running on HTTPS, having a simple service worker to cache static assets like CSS, JavaScript and some images seems like the obvious next step.

You know how it is. Those no-brainer tasks are exactly the kind of thing that end up on a to-do list without ever quite getting to-done. Meanwhile I’ve been writing and speaking about how any website can be a progressive web app. I think Alanis Morissette used to sing about this sort of situation.

Enough is enough! Clearleft.com is now a progressive web app. It has a manifest file and a service worker script.

The service worker logic is fairly straightforward, and taken almost verbatim from Going Offline. As you navigate around the site, the service worker applies different logic depending on the kind of file you’re requesting:

  • Pages are served fresh from the network, falling back to the cache when there’s a problem.
  • Everything else is served from the cache where possible, resorting to the network only if there’s no match in the cache—quite the performance boost!

In both cases, if a page or a file is retrieved from the network, it’s gets put into a cache. I’ve got one cache for pages, and another for everything else. And even if a file is retrieved from that cache, I still fire off a fetch request to grab a fresh copy for the cache. So while there’s a chance that a stale file might be served up, it will only ever be slightly stale, and the next time it’s requested, it’ll be fresh.

In the worst-case scenario, when a page can’t be retrieved from the network or the cache, you end up seeing a custom offline page. There you can see a list of any pages that are cached (meaning you can revisit them even without an internet connection).

A custom offline page showing a list of URLs.

It’s not ideal—page titles would be friendlier than URLs—but it’s a start. I’m sure I’ll revisit it soon. Honest.

Oh, and after a year of procrastinating about doing this, guess how long it took? About half a day. Admittedly, this isn’t my first progressive web app, and the more you build ‘em, the easier it gets. Still, it’s a classic example of a small investment of time leading to a big improvement in performance and user experience.

If you think your company’s website could benefit from being a progressive web app (and believe me, it definitely could), you have a couple of options:

  1. Arm yourself with a copy of Going Offline and give it a go yourself. Or
  2. Get in touch with Clearleft. We can help you. (See, I can say that with a straight face now that we’re practicing what we preach.)

Either way, don’t dilly dally …like I did.

Monday, May 21st, 2018

Pi-hole®: A black hole for Internet advertisements

This looks like a terrific use of a Raspberry Pi—blocking adtech surveillance at the network level.

Wouldn’t it be great if the clichéd going-home-for-Christmas/Thanksgiving to fix the printer/wifi included setting up one of these?

There’s an article about Pi-hole in Business Week where the creators offer some advice for those who equate any kind of online advertising with ubiquitous surveillance:

For publishers struggling to survive even with maximum ad surveillance, the Pi-hole team recommends a renewed focus on subscriptions, affiliate links, and curated endorsements for products and services that might truly interest users, similar to the way podcast hosts may talk about how much they personally enjoy a sponsor’s products. There’s nothing wrong with pitching people stuff they might enjoy, the team says. It’s just the constant, ever-intensifying surveillance that needs to stop.

Thursday, May 3rd, 2018

Leaving Clearleft – Jon Aizlewood

Following on from Ben’s post, this is also giving me the warm fuzzies.

I, in no uncertain terms, have become a better designer thanks to the people I’ve had the pleasure of working alongside at Clearleft. I’ll forever be thankful of my time there, and to the people who helped me become better.

Wednesday, May 2nd, 2018

So long, and thanks for all the beer. – Ben Sauer

Ben is moving on from Clearleft. I’m going to miss him. I found this summation of his time here very moving.

Working at Clearleft was one of the best decisions I ever made. 6 years of some work that I’m most proud of, amongst some of the finest thinkers I’ve ever met.

He also outlines the lessons he learned here:

  • Writing and speaking will make you a better thinker and designer.
  • Autonomy rules.
  • Own stuff.
  • Aim high.

Should you ever choose to work with, or work for Clearleft, I hope these words will give you some encouragement — it is an exceptional place to be.

Tuesday, May 1st, 2018

nystudio107 | ServiceWorkers and Offline Browsing

Here’s an article from last year that gives a really good introduction to service workers and provides a plug-in for the Craft CMS.

What’s new in Microsoft Edge in the Windows 10 April 2018 Update - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

Service workers, push notifications, and variable fonts are now shipping in Edge.

Sunday, April 22nd, 2018

Inside CSS | Clearleft

If you’ve ever wondered what it would be like to be a fly on the wall at a CSS Working Group meeting, Richard has the inside scoop.

The consensus building is vital. Representatives from all the major browsers were in the room, collaborating closely by proposing ideas and sharing implementations. But most fundamentally they were agreeing together what should go in the specifications, because what goes in the specs is what gets built and ends up in the hands of users.

the Origins of Opera and the Future of Programming – The Composition

An interesting piece by Jessica Kerr that draws lessons from the histories of art and science and applies them to software development.

This was an interesting point about the cognitive load of getting your head around an existing system compared to creating your own:

Why are there a thousand JavaScript frameworks out there? because it’s easier to build your own than to gain an understanding of React. Even with hundreds of people contributing to documentation, it’s still more mental effort to form a mental model of an existing system than to construct your own. (I didn’t say it was faster, but less cognitively strenuous.)

And just because I’ve spent most of last year thinking about how to effectively communicate—in book form—relatively complex ideas clearly and simply, this part really stood out for me:

When you do have a decent mental model of a system, sharing that with others is hard. You don’t know how much you know.

Thursday, April 19th, 2018

That new-book smell

The first copies of Going Offline showed up today! This is my own personal stash, sent just a few days before the official shipping date of next Monday.

I am excite!

To say I was excited when I opened the box of books would be an understatement. I was positively squealing with joy!

Others in the Clearleft office shared in my excitement. Everyone did that inevitable thing, where you take a fresh-out-of-the-box book, open it up and press it against your nose. It’s like the bookworm equivalent of sniffing glue.

Actually, it basically is sniffing glue. I mean, that’s what’s in the book binding. But let’s pretend that we’re breathing in the intoxicating aroma of freshly-minted words.

If you’d like to bury your nose in a collection of my words glued together in a beautifully-designed package, you can pre-order the book now and await delivery of the paperback next week.

Tuesday, April 10th, 2018

Fantasies of the Future: Design in a World Being Eaten by Software / Paul Robert Lloyd

The transcript of a terrific talk by Paul, calling for a more thoughtful, questioning approach to digital design. It covers the issues I’ve raised about Booking.com’s dark patterns and a post I linked to a while back about the shifting priorities of designers working at scale.

Drawing inspiration from architectural practice, its successes and failures, I question the role of design in a world being eaten by software. When the prevailing technocratic culture permits the creation of products that undermine and exploit users, who will protect citizens within the digital spaces they now inhabit?

Friday, March 30th, 2018

Ampersand: Interview with Mandy Michael – Clear(left) Thinking – Medium

I’m soooo excited that Mandy is speaking at Ampersand here in Brighton in June!

Be there or be square.

Tuesday, March 20th, 2018

Brendan Dawes - Post from Instagram to Kirby

Brendan shows how he uses IFTTT and a webhook to post to his own site from Instagram. I think I might set up something similar to post from Untappd to my own site.

Announcing Windows 10 Insider Preview Build 17623 for Skip Ahead - Windows Experience BlogWindows Experience Blog

Well, Microsoft really buried the lede in this announcement:

…we will begin testing a change where links clicked on within the Windows Mail app will open in Microsoft Edge…

Yup, no matter which browser you’ve chosen to set as your default, hyperlinks will be hijacked to open with Edge. This is disgusting. It feels like a return to the shitty old days of Microsoft’s strong-arm tactics, just when Microsoft were gaining trust and respect.

Saturday, March 10th, 2018

Bitcoin Is Ridiculous. Blockchain Is Dangerous: Paul Ford - Bloomberg

An astoundingly great piece of writing from Paul Ford, comparing the dot-com bubble and the current blockchain bubble. This resonates so hard:

I knew I was supposed to have an opinion on how the web and the capital markets interacted, but I just wanted to write stuff and put it online. Or to talk about web standards—those documents, crafted by committees at the World Wide Web consortium, that defined the contract between a web browser and a web server, outlining how HTML would work. These standards didn’t define just software, but also culture; this was the raw material of human interaction.

And, damn, if this isn’t the best description the post-bubble web:

Heat and light returned. And bit by bit, the software industry insinuated itself into every aspect of global enterprise. Mobile happened, social networks exploded, jobs returned, and coding schools popped up to convert humans into programmers and feed them to the champing maw of commerce. The abstractions I loved became industries.

Oof! That isn’t even the final gut punch. This is:

Here’s what I finally figured out, 25 years in: What Silicon Valley loves most isn’t the products, or the platforms underneath them, but markets.

Sunday, February 11th, 2018

Welcoming Progressive Web Apps to Microsoft Edge and Windows 10 - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

It’s really great to hear about how Microsoft will be promoting progressive web apps as first-class citizens …but it’s really unhelpful that they’re using this fudgy definition:

Progressive Web Apps are just great web sites that can behave like native apps—or, perhaps, Progressive Web Apps are just great apps, powered by Web technologies and delivered with Web infrastructure.

Although they also give a more technical definition:

Technologically speaking, PWAs are web apps, progressively enhanced with modern web technologies (Service Worker, Fetch networking, Cache API, Push notifications, Web App Manifest) to provide a more app-like experience.

Nice try, slipping notifications in there like that, but no. No, no, no. Let’s not fool ourselves into thinking that one of the most annoying “features” of native apps is even desirable on the web.

If you want to use notifications, fine. But they are absolutely not a requirement for a progressive web app.

(A responsive design, on the other hand, totally is.)

Friday, February 9th, 2018

Href Tools - Free online web tools

Handy web-based tools—compress HTML, CSS, and JavaScript, and convert files from one format to another.

Thursday, February 8th, 2018

Progressive enhancement and the things that are here to stay, with Jeremy Keith | Fixate

I enjoyed chatting to Larry Botha on the Fixate On Code podcast—I hope you’ll enjoy hearing it.

Available for your huffduffing pleasure.

Friday, February 2nd, 2018

In support of MakerClub | Clearleft

Declan from MakerClub came by the office week and told us all about this great initiative for kids in Brighton that we’re supporting through the BrightSparks programme.

Thursday, February 1st, 2018

Global Diversity CFP Day—Brighton edition

There are enough middle-aged straight white men like me speaking at conferences. That’s why the Global Diversity Call-For-Proposals Day is happening this Saturday, February 3rd.

The purpose is two-fold. One is to encourage a diverse range of people to submit talk proposals to conferences. The other is to help with the specifics—coming with ideas, writing a good title and abstract, preparing the presentation, and all that.

Julie is organising the Brighton edition. Clearleft are providing the venue—68 Middle Street. I’ll be on hand to facilitate. Rosa and Dot will be doing the real work, mentoring the attendees.

If you’ve ever thought about submitting a talk proposal to a conference but just don’t know where to start, or if you’re just interested in the idea, please do come along on Saturday. It’s starts at 11am and will be all wrapped up by 3pm.

See you there!

How to cross post to Medium

Remy outlines the process he uses for POSSEing to Medium now that they’ve removed their IFTTT integration.

At some point during 2017, Medium decided to pull their IFTTT applets that allows content to be posted into Medium. Which I think is a pretty shitty move since there was no notification that the applet was pulled (I only noticed after Medium just didn’t contain a few of my posts), and it smacks of “Medium should be the original source”…which may be fine for some people, but I’m expecting my own content to outlast the Medium web site.