Christian Liebel

Making of paint.js.org—a Web Component-based Productivity PWA

Build desktop-class PWAs with native file handling and clipboard access, all without a major framework. Here's how.

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

The origin story of the Polypane developer browser
05:28 MIN

The origin story of the Polypane developer browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Technical challenges of shipping a cross-platform browser
09:38 MIN

Technical challenges of shipping a cross-platform browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Recreating React components using AI and dev tools
04:56 MIN

Recreating React components using AI and dev tools

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Featured Partners

Related Videos

See all videos
Project Fugu: Progressive Web Apps, Superpowered45:20

Project Fugu: Progressive Web Apps, Superpowered

Christian Liebel

PWAs in 202141:49

PWAs in 2021

Ire Aderinokun

PWA Fundamentals: websites with superpowers43:06

PWA Fundamentals: websites with superpowers

Rowdy Rabouw

Native Web Apps: Are We There Yet?44:40

Native Web Apps: Are We There Yet?

Maxim Salnikov

Progressive Web Apps - The next big thing40:01

Progressive Web Apps - The next big thing

Nico Martin

Project Fugu: Extending the web58:12

Project Fugu: Extending the web

Lucien Immink

Is your Progressive Web App Lazy? How to read and improve your PWA Performance29:57

Is your Progressive Web App Lazy? How to read and improve your PWA Performance

Laura Morinigo

Possibilities with Web Capabilities27:05

Possibilities with Web Capabilities

Rowdy Rabouw

Related Articles

View all articles

From learning to earning

Jobs that call for the skills explored in this talk.