DEV Community

Francesca Ansell
Francesca Ansell

Posted on • Updated on

Using web components and contributing to open source

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

GitHub logo elmsln / lrnwebcomponents

@lrnwebcomponents Monorepo for NPM based element definitions

lrnwebcomponents

License: Apache 2.0 lerna Lit #HAXTheWeb code style: prettier

Published on npm build Dependency Status Published on webcomponents.org Slack Twitter

Welcome to the lrnwebcomponents project!

ELMS:LN produced web components for any project

Logo

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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,…

The creator is my professor
btopro image

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

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)