What is a web component?

If you have taken any software engineering or coding classes professor love to talk about encapsulation. Web components are real-life examples of encapsulation. If you don't know encapsulation is basically the reuse of code in order to create more organization and usable projects. Web components are a great way to reuse code and make your life easier! For example, the web component I will use in this demo was created by another programmer, but if I was say... building my own website I could use his web component in my own project.

Find a project

For this example, I will be using Twitter Embed from

$ curl -fsSL https://raw.githubusercontent.com/elmsln/lrnwebcomponents/master/scripts/lrnwebcomponentsme.sh -o lrnwebcomponentsme.sh && sh lrnwebcomponentsme.sh

$ git clone https://github.com/elmsln/lrnwebcomponents.git
$ cd lrnwebcomponents
$ yarn global add @wcfactory/cli
$ yarn global add polymer-cli
$ yarn global add lerna
$ yarn global add web-component-analyzer
$ yarn install

$ git remote add upstream https://github.com/elmsln/lrnwebcomponents.git
$ git fetch upstream
$ git pull

Bryan OllendykeFollow

@elmsln @haxcamp @btopro #HAXTheWeb #drupal #webcomponents #edtech ✻ Full stack unicorn Adjunct professor teaching about webdev, ethics, and everything in between

Install necessary dependencies

This project requires downloading and installing yarn, as well as forking the repo and cloning it locally. No matter what project you decided to contribute to be sure to check their readme page! Personally, I use npm all the time, but this project needs yarn and cannot run with npm. If you need git instructions see my git article here.

Edit some code!

I updated the demo page for the Twitter/embed web component. A demo page can help demonstrate what the web component is supposed to do and the syntax in which to do it. This is the tweet I decided to add

WeRateDogs®

@dog_rates

This is Peyton. He was diagnosed with brain cancer back in January. He’s been so brave during his treatments and as of this week, he is officially a radiation graduate! You can help Peyton with the cost of his care by clicking below. 14/10

gofundme.com/f/help-peyton-…

16:42 PM - 26 Mar 2021

How sweet right?

Sumbitt to the development team

Just because you changed one line of code does not mean you are done. Next, you have to submit a pull request to be reviewed by the project's main development team. Github will check for any conflicts etc. that could break their project.

If you've come to this far and your request gets accepted congrats you have hopefully been able to contribute to an open-source project. Welcome to the real world.

Check out my youtube video to go with this blog post.