Christian Liebel
Making of paint.js.org—a Web Component-based Productivity PWA
#1about 10 minutes
Demonstrating a cross-platform PWA paint application
A live demonstration showcases paint.js.org's features, including installation, file handling, clipboard integration, and offline capabilities across desktop and mobile devices.
#2about 7 minutes
Building with Web Components and the Lit library
The application is built using standard Web Components and the lightweight Lit library, avoiding larger frameworks for better interoperability.
#3about 2 minutes
Unifying input with HTML Canvas and Pointer Events
The HTML Canvas 2D context is used for drawing, while Pointer Events provide a unified API for handling mouse, touch, and pen inputs.
#4about 6 minutes
PWA fundamentals for installation and offline support
Progressive Web App capabilities are enabled through the Web App Manifest for installability and a Service Worker for offline caching.
#5about 8 minutes
Extending web capabilities with Project Fugu APIs
Project Fugu is a cross-vendor initiative that adds native-like features to the web platform, such as clipboard and file system access.
#6about 2 minutes
Using the Async Clipboard API for copy and paste
The Async Clipboard API provides a modern, permission-based way to programmatically read and write images to the system clipboard.
#7about 3 minutes
Implementing file system access and file handling
The File System Access API allows the PWA to open, save, and overwrite files, while the Web App Manifest registers it as a file handler.
#8about 2 minutes
Creating a dark mode with CSS Custom Properties
A dynamic dark mode is implemented using CSS Custom Properties that are updated based on the `prefers-color-scheme` media feature.
#9about 4 minutes
Summary and real-world examples of advanced PWAs
A recap of how modern web technologies enable desktop-class applications, with examples like VS Code and Photoshop for the web.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
06:05 MIN
Demonstrating Fugu APIs with a paint web app
Project Fugu: Progressive Web Apps, Superpowered
03:47 MIN
Understanding the web's evolution into an app platform
Native Web Apps: Are We There Yet?
00:27 MIN
Introducing Project Fugu and its goals for PWAs
Project Fugu: Progressive Web Apps, Superpowered
31:27 MIN
The future of PWAs and Fugu API adoption
Project Fugu: Progressive Web Apps, Superpowered
04:37 MIN
What are Progressive Web Apps (PWAs)?
Progressive Web Apps - The next big thing
10:04 MIN
How progressive web apps enhance the web platform
Project Fugu: Extending the web
02:00 MIN
Understanding the core principles of Progressive Web Apps
PWA Fundamentals: websites with superpowers
05:54 MIN
Expanding PWA capabilities with modern web APIs
PWAs in 2021
Featured Partners
Related Videos
45:20Project Fugu: Progressive Web Apps, Superpowered
Christian Liebel
41:49PWAs in 2021
Ire Aderinokun
44:40Native Web Apps: Are We There Yet?
Maxim Salnikov
43:06PWA Fundamentals: websites with superpowers
Rowdy Rabouw
40:01Progressive Web Apps - The next big thing
Nico Martin
58:12Project Fugu: Extending the web
Lucien Immink
27:05Possibilities with Web Capabilities
Rowdy Rabouw
29:57Is your Progressive Web App Lazy? How to read and improve your PWA Performance
Laura Morinigo
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
