This past semester at college, I had taken a course about dystopian technologies. Please keep this in mind, I have little to know knowledge on HTML, CSS, JavaScript, open source contributions, GitHub, etc. With A LOT of help from my teacher @btopro I began to understand many of these concepts, and have started to consider a career in this field. If you ever get a chance to watch one of his presentations or take his class if you are a student it, DO IT. His class and teaching style has been my favorite out of all my classes during my collegiate career. The past three weeks I have began working on a simple (well I think it is very difficult) web component.
Now what did I do?
As shown in the picture above, I created a web component for anyone who wants to just post in a picture with a border along with a description, caption, and credits. As simple as this may seem, this took me three weeks to complete. I had to figure out the code behind it. Once I actually started to understand the code, I was able to figure out what actually needed to be done. I started by combining two different web components together. One of them was from a custom element, and one of them was just a bunch of different classes used. So if you ever want to play around with this component or even use it, that would be sick. Here's the repo:
https://github.com/NovasKnowledge/image
Behind the scenes
To complete this project, I used open-wc and npm through my command prompt. This was confusing at first, but was thankfully able to figure it out. I then used visual studio to actually code all the small details of the component! Let's take a look of what I actually did.
This is the index.html area of the component. This is what one would see if they right clicked on the page to inspect the web component. This is where I am importing the image into the border. This is the HTML of the custom web component. This is just a small portion of what was put into creating .
Now we're getting into the details. The two pictures above were written inside the src portion of the component. This includes all the CSS classes that formats the picture, border, text, and background colors. These classes are then called inside of the render method. The constructer initializes the starting value for the certain this."". Then inside of the index.html, they gain certain values that can be changed to whatever the person using the web component desires.
Overall, this was not a simple project for me. On the other hand, someone who has been working on these topics could probably complete this in under 30 minutes. Although it was challenging, I really enjoyed working on it. If for whatever reason you want to use my repo, go for it. I code for the people.
Top comments (0)