Talk | 
WeAreDevelopers World Congress 2022
 | 14.06.2022

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

Progressive Web Apps and the new powerful web APIs provided by Project Fugu allow developers to implement desktop-class productivity apps using web technologies. In this session, Thinktecture's Christian Liebel shows you the critical parts of how paint.js.org was made, a remake of the productivity app dinosaur Microsoft Paint. It runs great as a standalone application, and since it is based on Web Components, it can even be embedded into other applications. And since everything is web-based, it runs on all operating systems, desktop or mobile, not just Windows 95.

Christian Liebel ist Consultant bei Thinktecture. Sein Fokus liegt auf Webstandards und Progressive Web Apps. Er vertritt Thinktecture beim W3C.

Event

WeAreDevelopers World Congress 2022
14.06.22  
- 15.06.22 
@ Berlin
 (DE)
Making of paint.js.org—a Web Component-based Productivity PWA

Links & Materialien

Mehr Beiträge zu PWA, Web Components

Weitere Artikel zu PWA, Web Components

.NET
Adding Superpowers to your Blazor WebAssembly App with Project Fugu APIs

Adding Superpowers to your Blazor WebAssembly App with Project Fugu APIs

Blazor WebAssembly is a powerful framework for building web applications that run on the client-side. With Project Fugu APIs, you can extend the capabilities of these apps to access new device features and provide an enhanced user experience. In this article, learn about the benefits of using Project Fugu APIs, the wrapper packages that are available for Blazor WebAssembly, and how to use them in your application.

Whether you're a seasoned Blazor developer or just getting started, this article will help you add superpowers to your Blazor WebAssembly app.
28.02.2023
Angular
Implementing Smart and Presentational Components with Angular: Condensed Angular Experiences – Part 4

Implementing Smart and Presentational Components with Angular: Condensed Angular Experiences – Part 4

In this article, we will explore how to apply the concept of smart and presentational components with Angular. We will choose a complex-enough target to see all aspects in action, yet understandable and within the scope of this article. The goal is to teach you how to use this architecture in your way. For that, we will iterate through different development stages, starting with the target selection and implementing it in a naive way. After the first development, we will refactor that naive solution into smart and presentational components that are reusable, refactor-friendly, and testable.
23.01.2023
Angular
Master Web Component Forms Integration – with Lit and Angular

Master Web Component Forms Integration – with Lit and Angular

When a company has cross-framework teams, it is a good choice to use Web Components to build a unified and framework-independent component library. However, some pitfalls are to consider when integrating these components into web forms. Therefore, for a better understanding, we will look at two possible approaches and try to integrate them into an Angular form as an example.

Notice: All code samples are available on Github!
09.06.2022
Angular
About Smart and Presentational Components, Architecture Overview & Concepts: Condensed Angular Experiences – Part 3

About Smart and Presentational Components, Architecture Overview & Concepts: Condensed Angular Experiences – Part 3

Modern web technologies enable us to write huge business applications that are performant and easy to use. But with time comes complexity to our projects naturally. That added complexity sums up and makes further app development slow and cumbersome. This article discusses how a simple architectural concept can make every app more maintainable, faster to develop, and extendable in the long run.
08.04.2022
Project Fugu
Dark Mode Support – Real-World PWA: The Making Of Paint.Js.Org – Part 5

Dark Mode Support – Real-World PWA: The Making Of Paint.Js.Org – Part 5

In part five of the series about the making of the web-based Microsoft Paint clone paint.js.org, I want to show how to implement support for dark mode in your web applications.
20.05.2021
Project Fugu
Accessing Files & File Handler – Real-World PWA: The Making Of Paint.Js.Org – Part 4

Accessing Files & File Handler – Real-World PWA: The Making Of Paint.Js.Org – Part 4

In this fourth part of the series about the Microsoft Paint remake on paint.js.org, I want to demonstrate how you can save your drawings to your local disk, read them back later and how to add your web app as a handler for certain file extensions.
12.05.2021

Unsere Webinare

Unsere Artikel

Mehr über uns