Live Coding lit-element, SVG and Web Components with Uri Shaked [1/3]
In this live coding series you will see how I implement a feature for an open-source project from scratch. As I am doing it, you will hear me speaking my thoughts, watch me google for answers and pondering about different ways to solve non-trivial problems as I'm coding.
Part 1: • Live Coding lit-element, SVG and Web Compo...
Part 2: • Live Coding lit-element, SVG and Web Compo...
Part 3: • Live Coding lit-element, SVG and Web Compo...
We'll start from explaining what we are going to create, understanding the requirements, doing some preliminary research, and then I will show you how I create the user interface for the custom element, a 4x4 keypad that is very common in Arduino starter kits. We will sketch it using Inkscape, an open-source vector graphics program, and then generate SVG code from our sketch.
Next, we will use lit-element to create a custom Web component based on our SVG code. You will learn how to deduplicate code using some advanced SVG techniques, and how to tidy up your code and make it easy to read and maintain. You will also see some power-shortcuts I use while editing code in my day-to-day life.
We will also see how to bring our creation to life by adding some interaction and responding to keyboard/mouse events. As we write the code, we will be using Storybook to see our changes (almost) immediately and test them. Finally, we will commit our new feature and push it to Github, where our CI server will automatically build it and upload it to netlify, where the world can see it.
00:00 Intro: What are we going to build?
01:20 Process overview
03:36 Setting up Inkscape
04:30 Looking at the Keypad's datasheet
05:52 Getting the dimensions right
08:40 Drawing keypad and the keys
11:40 Getting the colors right
13:40 Creating the rest of the keys
14:43 Adding the key labels
16:21 Adding the outline
18:52 Setting the page size
19:40 The Inkscape XML Editor
21:00 Exporting the optimized SVG code
22:15 Getting rid of SVG transforms
25:50 Generating the code for the lit-element component
27:18 Adding our SVG code to our new element
28:47 Viewing the result in Storybook
29:07 Summary + What's next
You can find some useful background information the following blog post, where I explain how I created one of the other components from the same library:
https://www.smashingmagazine.com/2020...
Finally, you are invited to tinker with these components by exploring the different Arduino playgrounds in wokwi.com, for instance:
https://wokwi.com/playground/dice-rol...
And if you feel inspired and want to get your hands-dirty, we have some open issues that could use some of your love:
https://github.com/wokwi/wokwi-elemen...