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.
Hubert Burda Media
München, Germany
€80-95K
Intermediate
Senior
JavaScript
Node.js
+1
Matching moments
06:40 MIN
Demonstrating Fugu APIs with a paint web app
Project Fugu: Progressive Web Apps, Superpowered
12:30 MIN
Understanding the web's evolution into an app platform
Native Web Apps: Are We There Yet?
05:38 MIN
Introducing Project Fugu and its goals for PWAs
Project Fugu: Progressive Web Apps, Superpowered
05:31 MIN
The future of PWAs and Fugu API adoption
Project Fugu: Progressive Web Apps, Superpowered
01:23 MIN
What are Progressive Web Apps (PWAs)?
Progressive Web Apps - The next big thing
06:20 MIN
How progressive web apps enhance the web platform
Project Fugu: Extending the web
03:30 MIN
Understanding the core principles of Progressive Web Apps
PWA Fundamentals: websites with superpowers
01:15 MIN
Understanding the core principles of PWAs
Is your Progressive Web App Lazy? How to read and improve your PWA Performance
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
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
&why GmbH
Berlin, Germany
€50-70K
Junior
Intermediate
Senior
React
Next.js
TypeScript
Confideck GmbH
Vienna, Austria
Remote
Intermediate
Senior
Node.js
MongoDB
TypeScript
Code Healers LLC
Hinesville, United States of America
Remote
€40-50K
Intermediate
Senior
PHP
.NET
React
+2
PiNCAMP GmbH
Berlin, Germany
Senior
React
GraphQL
Next.js
Content Pass GmbH
Berlin, Germany
Senior
API
Node.js
JavaScript
TypeScript
Continuous Integration
powerMedia GmbH
Hanau, Germany
Remote
API
CSS
GIT
Vue.js
+3
powerMedia GmbH
Hanau, Germany
API
CSS
GIT
Vue.js
Docker
+2
RecruitmentRevolution.com
Manchester, United Kingdom
Remote
£35-45K
PHP
CSS
HTML
+2
Weidmüller GmbH & Co KG
Marktheidenfeld, Germany
Go
API
C++
Scrum
DevOps
+4