Backstory

Before I delve into it, I want to make clear that anyone can hop into the development of web-components- and you really should- with some backstory:

When I first started working with HAXtheweb over this summer, what I knew about web-components centered around what I had learned in class the semester before. Before that, I hardly knew they existed. However, when I found out that they could streamline web development, I was interested in learning more than just the few basics. At this point in my life, I hadn't really touched anything on the front end for years. I no small degree of passion in creating fun web pages high school, and it's what ultimately helped me decide to pursue my degree in the tech field. Unfortunately, none of my classes really had any emphasis on the front end side of things, and I sort of just lost those skills and really, my creativity, since I was more focused on learning coding algorithms and structures- you know, the whole technical side of things.

Tech doesn't stop evolving, and I was a little afraid to touch code again after being away from it so long. Lots of things must have changed, right? All my old sites became irrelevant, the code far outdated. But web-components was interesting. I did a bit of self-research after learning about it in class from my professor (who later connected me with HAX), and I found there were many benefits to using and creating these components. I'll spare you the details since Googling "benefits of web-components" could describe their uses way better than I could. However some things that stood out to me were that they are designed to be future-proof (any or no JavaScript framework needed), re-usable (c'mon, we all know ctrl-c and ctrl-v is 90% of our job), and standardized (less meeting time). And the biggest plus? There's tutorials and it's simple to create with a little bit of searching. Once made, it's a great shortcut when churning out pretty and streamlined web pages.

My Actual Output

So here's what I made. As a Squidward fan, I had to make something that I could use to help spread the word about his clarinet skills. Setting up web components is easy enough, there are plenty of tutorial videos on the web nowadays. I personally found my classmate Reed's tutorial super helpful (definitely recommend looking at his other videos as well!) since setting up at the start can be a bit tedious without knowing the ins and outs beforehand. This was definitely the challenging parts for me to do. After getting everything set-up, you're ready to go!

Web-components combine custom elements, shadow DOM, and HTML templates to make creation easy. I will say if you are not versed in these, it is necessary to learn a bit about them. I'd recommend take a peek at the HTML templates first because they are imperative to add in your code to make the components versatile for the user. If one knows some JS, HTML, and CSS, creating web-components will come with ease. I was able to make something relatively pretty with some basic knowledge from ages past.

I can definitely improve the some-card, but I am not afraid to continue to work on it in fears that it'll eventually become irrelevant- I know what changes I make won't be in vain.