PWA Summit 2021 Talk Highlights

The entire livestream of PWA Summit 2021 is available online on YouTube.

This is the full livestream of the conference, and includes the keynote, all 9 talks, all 3 live Q&A sessions, and the full Future of Web Apps panel. It also includes four talks from our organizing companies.

Highlights to me are:

Make your PWAs look and launch beautifully – Önder Ceylan (2:28:30)
Building beautiful-looking icons and splash screen images for your PWA is an important aspect of the launch experience for your users. Discover the current, and upcoming, web standards to make for beautiful launch experiences, how to make them great on different platforms, and automation approaches to help you on your way toward creating stunning launch experiences for your PWAs.
(slides, writeup)
Creating delightful user experiences with PWAs – Callie Riggins (3:06:55)
Progressive Web Apps open up the ability to create moments of delight for our users that we otherwise couldn’t do with regular websites. Learn how Airbnb’s done just that to provide a high quality installation experience, seamless transitions, and an offline arrival guide across a multi-year, distributed effort.
Bringing your PWA to App Stores- Micah Engle-Eshleman (4:20:00)
App stores are an important distribution channel for Progressive Web Apps; they provide exposure alongside the other apps users are searching for, and have built-in ways to manage purchases and subscriptions. In this talk, BeFunky will share their experience launching their PWA into the Play store, from bundling it for release to integrating with Play payments with the Digital Goods and Payment Request APIs, all while sharing what they’ve learned and what getting into an app store has done for their product.
(slides)
Building PWAs for Dual Screen Devices – Stephanie Stimac (2:21:40)
Organizing Partner Talk

💡 If you watch the recording on YouTube itself, you can use the chapter markers (as defined in the description) to easily jump to specific talks.

Related: at the very same PWA Summit, Aaron Gustafson gave a workshop “Getting Started with PWAs” that’s worth checking out.

Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris, NYTimes

Talk by Rich Harris, as presented at the most recent JamstackConf:

Transitional apps samples elements from both traditional and modern architecture. The term is borrowed from interior design’s framing of “transitional design.” Transitional apps are, like multi-page apps, server-side rendered for fast initial loads, resilient since they work without JS by default, and provide a consistent experience with accessibility features built in. But like a single-page application, they also have a single codebase, fast navigation, persistent elements, and client-side state management.

If you’ve ever had a discussion or thought about MPA vs SPA, then be sure to give this video a watch.

How CodePen leverages Cloudflare Workers and Cloudflare KV Storage

Interesting to see Chris Coyier and Stephen Shaw lift the hood of CodePen, detailing how they use Cloudflare Workers and Cloudflare’s KV Storage.

Cloudflare workers are like serverless functions that always run at the edge, making them incredibly fast. Not only that, but the tooling around them is really nice. They can run at particular routes on your own website, removing any awkward CORS troubles, and helping you craft clean APIs. But they also have special superpowers, like access to KV storage (also at the edge), image manipulation and optimization, and HTML rewriting.

💡 If you’re already familiar with the two concepts (and know how to link them together), feel free to fast forward to the 15-minute mark.

DOM Treemap DevTools Extension

Christian Schaefer created a DevTools Extension for both Chromium and Firefox that visualizes the children of a DOM Node. The bigger the box, the more children that child node has.

After a Google Lighthouse audit complaining an excessive DOM size, have you ever wondered in which corner of your document most DOM nodes are buried? Neither Lighthouse nor the Devtools themselves help finding those areas.

That’s what DOM Treemap is for. It extends your Devtools Elements tab with an additional pane which visualizes the distribution of node descendants of the currently inspected DOM element. This makes it easy for you drill down your DOM and to locate all those hidden the node heavy parts.

DOM Treemap (Chrome) →
DOM Treemap (Firefox) →

Generative design with CSS Houdini

Recording of George Francis giving his talk “Generative design with CSS Houdini” at the most recent edition of London CSS

Learn how the mystical powers of CSS Houdini can be harnessed to create ever-unique, generative user interfaces — think random patterns, shapes, animations, and more!

Related: Random Paint Effects with Houdini

Google Maps JavaScript API WebGL

I’m a huge mapping nerd, so I’m a sucker for the Maps JavaScript API WebGL beta which was announced at Google I/O back in May:

Introduced are three new features:

  • WebGL Overlay View lets you add custom 2D and 3D graphics and animated content to your maps.
  • Tilt and heading can now be adjusted programmatically, and by using mouse and keyboard gestures.
  • map.moveCamera() lets you simultaneously change multiple camera properties.

To give you an idea of what you can do with this, the WebGL-powered Maps demo website has some nice examples, such as an airplane taking off, a car following directions on a map, a building being highlighted, etc.

There’s also a codelab you can follow to learn the details.

WebGL-powered Maps →
Maps JavaScript API » WebGL Features » Overview →
Codelab: Build 3D map experiences with WebGL Overlay View →

Percollate — A command-line tool to turn web pages into beautiful, readable PDF, EPUB, or HTML docs.

Percollate is a command-line tool that turns web pages into beautifully formatted PDF, EPUB, or HTML files.

Installation per NPM

npm install -g percollate

Once installed you can, for example, run this:

percollate epub https://brm.us/at-layer -o css-at-layer.epub

Percollate will automatically extract the main content (powered by Mozilla’s Readability.js), perform some enhancements on it (such as expanding <details>), and generate the requested file.

Also allows using a custom template and passing in custom CSS via CLI flags.

Percollate →

Via Stefan

Getting Started with PWAs


View Getting Started with PWAs [Workshop] on Notist.

Slides from Aaron Gustafson‘s PWA workshop at the PWA Summit.

Aaron will walk you, step-by-step, through the process of turning a website into a PWA. Following along, you’ll author Web App Manifests and Service Workers and gain exposure to some next-gen APIs that tie them more deeply into the underlying operating system. By the end of the workshop, you’ll walk away with a functional PWA you can use right away.

Getting Started with PWAs →