Live Coding lit-element, SVG and Web Components with Uri Shaked [3/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.

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...