Wait, Pause: Web Components

Tom Varughese — Fri, 02 Apr 2021 16:44:29 +0000

Some Background:

I’ve been working with web components a lot the past year. Mostly meeting and talking about specs, new components, best practices with a bunch of developers at work. I had a feeling that the concept seemed really familiar to me, but it was hard to put something to it, until I was asked a random question from a friend: Which is your favorite power ranger series?

I was a little taken back at this question because there was no related context in the convo we were having. But it was almost like that question was a key that unlocked this mystical box from my childhood and then it all started flooding back to me. We talked for an hour or more about the different series, what we remember and then something else hit me.

One of my big tech passion projects I help contribute to is HAX, the Headless Authoring eXperience made out of web components. Everyone makes the comparison that Web Components are like legos. While I do agree, I think we can do one better. Web Components are Super Sentai. The end. Thanks for coming to my TED Talk.

Wait, pause. What is a “Super Sentai”?

Super Sentai is a superhero genre or metaseries that come from the combination of 2 words:

Super (/ ˈsü-pər /):

High Grade or quality or

large or powerful

Sentai(戦隊): Japanese for squadron, taskforce

The term might not be familiar to you, but you have seen its shows. Power Rangers or Sailor Moon ring a bell? Well for this imma stick with Power Ranger examples, but the ideas can also translate to Sailor Moon as well.

The reason why I dont like the lego comparison is because you can't do anything with a single lego brick, you need a bunch of them. A single Power Ranger is bad-ass and can handle their own.

Like a web component, there are key aspects that help define what a Power Ranger is.

HTML Template and Custom Elements:

These two are intertwined, so I'll talk about them in the same section. allows us to store some markup and styling of the component, that we can later clone, reuse, etc. You gotta use slots to make a placeholder since elements render in the shadow root. This would be akin to morphers and the morphing grid. Do power Rangers just walk down the street and buy groceries (when we were allowed to do that)? No. They are people who morph into rangers when the time occurs. But what good is a morpher if you don't have a power ranger who can use it. That’s where Custom Elements come in.

We can make a power rangers class and use a connectedCallback to connect it to our shadow to the template and figure out how we define our behaviors. This is where we get into custom elements. Each Power Ranger has behaviors, Attributes and functions specific to that ranger. We can make a custom element and give the ranger whatever color, weapon, and zord we want to assign. Think back to when Tommy Oliver lost his Green Ranger Powers. Zordon and Alpha used the Power Ranges template and created a new Custom Element (New Ranger) with unique properties specifically to it. This is how we got the White Ranger! Our element comes with Saba, The White Tiger Zord, and the White Tiger MegaZord

Just like Rangers needing a morpher and the morphing grid, we need HTML Templates (and slots) to make our Custom Elements.

The Shadow DOM:

Each element is encapsulated and rendered separately from the main DOM. This way you can keep features and styling of each element independent of each other and the other parts of the DOM. This is like the power ranger theme or color. There are only one of each color ranger in a team. (No Time Force did not have 2 red rangers. One was the Red Ranger, the other was the Quantum Ranger… and Ninja Storm had the Red and Crimson Ranger. Totally different).

As you can see, the <red-ranger> and <crimson-rangers> are similar, but independent of each other, all thanks to the Shadow DOM.

Thanks to all the parts of the spec: HTML Template, Custom Elements, and Shadow DOM we get our own badass <power-ranger>!

IT'S GIT INIT TIME

But the cool thing about web components is when you combine them!!

Like every Super Sentai series, the support and skills of the group are what defeats the villain at the end of the episode. Web Components are better when they work together. Hey sometimes power rangers from different series make guest appearances to help each other out.

I hope after this you see why I believe Web Components and Power Rangers are a much better comparison.

Go Forth and Build. Stay Spicy and Keep Moving

@tom_var

HAX-the-Code-base: pre-code

Tom Varughese — Mon, 10 Feb 2020 05:52:56 +0000

I am not a developer. I can certainly write and understand code but I wouldn't call myself a coder. I definitely have a lot to learn... like backing up my website before nuking multiple blog post and not having a second copy somewhere... hypothetically.

~~
Small Backstory:

About 2 years ago I graduated from University with no idea what I wanted to do with a not so easy to describe tech business hybrid degree and long story short Bryan Ollendyke aka #EdTechJoker introduced me to Rick Manelius. (Def check them out, they are really cool people)
~~

Rick writes absolutely amazing blog post on his website. One that hit me was his 3 words for 2020 (I highly encourage you to read his post because I won't tl;dr it for you lazy people). I was tired of kicking leaves for the last year or so in my career so I decided to give it a shot. While not 3 words, I did stick to 3 themes:

contemplation without confusion
distancing distasteful distractions
i am important

So what does this mean? I want to learn more about code and better understand why a developer would choose something like lit-element vs polymer. I want to be able to talk to someone about the advantages to web components passed the surface level "its scales better and works in all browsers". While I can just search these in [insert your favorite search engine] I thought the best way for me to learn is to ask the developers themselves (think something akin to "Into the Actor's Studio" but with developers). So what has stopped me from doing this a year ago? Thinking I would waste someone's time by asking stupid questions, distracting myself with random things, and overall being indecisive by being stuck in my head (hence 2020 goals above).

What does it mean to be a developer/coder/programmer? What are these things called Web Components and why do they matter? Tabs or Spaces? Honey Dew or Cantaloupe?! I don't know the answers but I do know that the only way for me to demystify the code/concepts is to just decode the developer. And the best place to start is the people I did my internship with my senior year of College... the HAX Project by the @elmsln team. Hope you're ready to <hax-the-code-base> with me :)