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
01:32 MIN
Understanding the core principles of PWAs
Is your Progressive Web App Lazy? How to read and improve your PWA Performance
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
29:57Is your Progressive Web App Lazy? How to read and improve your PWA Performance
Laura Morinigo
41:49PWAs in 2021
Ire Aderinokun
43:06PWA Fundamentals: websites with superpowers
Rowdy Rabouw
44:40Native Web Apps: Are We There Yet?
Maxim Salnikov
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
From learning to earning
Jobs that call for the skills explored in this talk.
![Senior Software Engineer [TypeScript] (Prisma Postgres)](https://wearedevelopers.imgix.net/company/283ba9dbbab3649de02b9b49e6284fd9/cover/oKWz2s90Z218LE8pFthP.png?w=400&ar=3.55&fit=crop&crop=entropy&auto=compress,format)
Senior Software Engineer [TypeScript] (Prisma Postgres)
Prisma
Remote
Senior
Node.js
TypeScript
PostgreSQL
Frontend Web Developer
Pictarine
Canton de Castanet-Tolosan, France
Intermediate
React
Next.js
TypeScript
Google Cloud Platform