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
elmsln
/
lrnwebcomponents
@lrnwebcomponents Monorepo for NPM based element definitions
lrnwebcomponents
Welcome to the lrnwebcomponents project!
ELMS:LN produced web components for any project
Quick-start
Notice: You will need to use Node version 6.0 or higher. Verify that you have yarn enabled — if not install yarn globally. These web components are written in ES6 and build routines compile to es5 to encompass legacy browsers.
Quick Install
$ curl -fsSL https://raw.githubusercontent.com/elmsln/lrnwebcomponents/master/scripts/lrnwebcomponentsme.sh -o lrnwebcomponentsme.sh && sh lrnwebcomponentsme.sh
Manual Install
$ 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
Syncing Your Fork
$ git remote add upstream https://github.com/elmsln/lrnwebcomponents.git
$ git fetch upstream
$ git pull
Windows
Git bash should already be installed on your Windows machine and can be found by searching through your computer's applications or by right-clicking anywhere inside of the File Explorer Cygwin command line is lightly tested,…
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.
Top comments (0)