Working with web components
Published: 2020-05-27 14:57:28

In the first week of my internship with <a href="https://www.elmsln.org/"> ELMSLN group</a>, i learned about the concepts behind web components and also created my own. Web components development is all about creating modular, re-usable, and open-source code that would work anywhere. So far i really enjoy creating my first web component. It allows me to be creative and come up with my own ideas regarding the designs and use cases for the web component i am working on. Working with web components involve using different techniques in Javascript such as Shadow Dom, Templating, and making custom elements. I had never been exposed to these before so it was exciting to learn about them.

Working with web components represent a perfect area to apply Object-Oriented Programming principles to practice on the front-end. For most of my college curriculum, OOP programming is used in the back-end context with Java and database design. Usually it is always in the context of creating class diagrams and data models that represent real-world entities. Web components present another opportunity for me to put those concepts to practice. The core techniques around web components are about creating classes for certain elements and instantiating them whenever you need to use them. This is a very modular way of creating and sharing code.

There are so many libraries, frameworks, and modules in the front-end development world. Sometimes it can feel daunting because things are always changing and developers are always coming up with new ideas. You're not exactly sure what to learn or what's outdated. Creating web components is no different. There are several libraries such as Litelement, Slim.js, Hybrids, Stencil. For now i am sticking with Litelement. Ultimately i think this is a good thing, it means the community is active, full of ideas, and always trying to improve things.

The web component i chose to made is a hero card. This is in a context of maybe a card game with DC or Marvel universe. Each card has the name of the hero, short description about them, and their powers. As a user, you can customize a variety of different aesthetics elements of each card to anyway you like using css variables. You can customize font colors and shadows, border color, insert pictures, etc...
Here are some examples that i made:
Github Repo Link: https://github.com/dtn9197/herocard
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7e5ilf7nfgx2d6bsz9zp.png)

One of the challenges i faced was working with CSS, especially with image. There are certain things such as pixel size, resolution and cropping that i had to get right in order for the image to look good. Another thing i experienced was scope creep. I kept asking myself what can i do to make it a little better and always ended up adding some extra tiny feature or re-factoring some code, and that ultimately adds up.

So far it's been fun working with web components. There is an active open-sourced community around web components full of passionate developers who want to improve the web. The open-sourced world is an outlet for developers or code enthusiasts to share ideas, teach others, and expand their skills. For me it is a joy to participate in it and i hope i will be able to contribute more in the future.