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.

Job ad Dark

SabIna compys

SabIna compys
Vienna, Austria

Remote
€20-100K
Intermediate
JavaScript
.NET
+1

Matching moments

Demonstrating Fugu APIs with a paint web app
06:40 MIN

Demonstrating Fugu APIs with a paint web app

Project Fugu: Progressive Web Apps, Superpowered

Understanding the web's evolution into an app platform
12:30 MIN

Understanding the web's evolution into an app platform

Native Web Apps: Are We There Yet?

Introducing Project Fugu and its goals for PWAs
05:38 MIN

Introducing Project Fugu and its goals for PWAs

Project Fugu: Progressive Web Apps, Superpowered

The future of PWAs and Fugu API adoption
05:31 MIN

The future of PWAs and Fugu API adoption

Project Fugu: Progressive Web Apps, Superpowered

What are Progressive Web Apps (PWAs)?
01:23 MIN

What are Progressive Web Apps (PWAs)?

Progressive Web Apps - The next big thing

How progressive web apps enhance the web platform
06:20 MIN

How progressive web apps enhance the web platform

Project Fugu: Extending the web

Understanding the core principles of Progressive Web Apps
03:30 MIN

Understanding the core principles of Progressive Web Apps

PWA Fundamentals: websites with superpowers

Understanding the core principles of PWAs
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

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

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

Native Web Apps: Are We There Yet?

Maxim Salnikov

PWA Fundamentals: websites with superpowers43:06

PWA Fundamentals: websites with superpowers

Rowdy Rabouw

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
BB
Benedikt Bischof
Native Web Apps: Are We There Yet?
Welcome to this issue of the WeAreDevelopers Live Talk series. This article recaps an interesting talk by Maxim Salnikov who spoke about the development of native web apps. What you will learn:Some pros and cons of web applicationsThe most important ...
Native Web Apps: Are We There Yet?
CH
Chris Heilmann
Dev Digest 134 - Where pixels sing?
News and ArticlesWeAreDevelopers LIVE Data and Security Day is on Wednesday, 25/09/2024. Learn about OPC UA Updates, Best Practices for Using GitHub Secrets, Passwordless Web 1.5, Emerging AI Security Risks, Data Privacy in LLMs and get a chance to t...
Dev Digest 134 - Where pixels sing?
CH
Chris Heilmann
Dev Digest 131 - AI'm not sure about OSS
News and ArticlesRust and Typescript are rising stars in programming languages 2024 survey, the State of CSS 2024 survey is open and here is what's new in ECMAScript.In security news, a Microsoft update bricks Linux dual-boot systems, they patched a ...
Dev Digest 131 - AI'm not sure about OSS

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Developer

Frontend Developer

JO Media Software Solutions GmBh
Brunn am Gebirge, Austria

Senior
CSS
Angular
JavaScript
TypeScript
Frontend-Entwickler

Frontend-Entwickler

infomax websolutions GmbH
Grassau, Germany

Intermediate
Senior
CSS
HTML
JavaScript
TypeScript