In this article I will go over how to set up a Lit web component and use it to create a VSCode extension. TLDR You can find the final source here. Prerequisites # Vscode Node >= 12 Typescript Getting Started # We can start off by navigating in terminal to the location of the project…

In this article I will go over how to set up a Lit web component and use it to create a interactive canvas with CSS transforms and slots. TLDR The final source here and an online demo. Prerequisites # Vscode Node >= 12 Typescript Getting Started # We can start off by navigating in terminal…

In this article I will go over how to set up a Lit web component and use it to render musicxml from a src attribute or inline xml using opensheetmusicdisplay. Now any sheet music can be rendered based on the browser width as an svg or canvas (and will resize…

In this article I will go over how to set up a Lit web component and use it to create a HTML Table from json url or inline json. TLDR The final source here and an online demo. Prerequisites # Vscode Node >= 12 Typescript Getting Started # We can start off by navigating in…

In this article I will go over how to set up a Lit web component and use it to create a rich text editor. TLDR The final source here and an online demo. Prerequisites # Vscode Node >= 12 Typescript Getting Started # We can start off by navigating in terminal to the location of…

In this article I will go over how to set up a Lit web component and use it to create a figma plugin. TLDR You can find the final source here. Prerequisites # Vscode Figma Desktop Node Typescript Getting Started # We can start off by creating a empty directory and naming it with snake_case…

In this article I will go over how to set up a Lit web component and use it inline in the Flutter widget tree. TLDR You can find the final source here. The reason you would want this integration is so you can take an existing web app, or just…

If you are using Firebase then you are probably familiar with Firebase Cloud Messaging. The setup on Flutter web is very different than mobile and other plugins you are probably used to. Setting Up # Open your web/index.html and look for the following script. …

Flutter is a UI Toolkit from Google allowing you to create expressive and unique experiences unmatched on any platform. You can write your UI once and run it everywhere. Yes everywhere! Web, iOS, Android, Windows, Linux, MacOS, Raspberry PI and much more… If you prefer a video you can follow…