After wrapping up the first couple of weeks in my virtual internship, I got a basic understanding of web components. Throughout that time, I created my first web component, which I illustrated in my first entry. Since writing that post, I added some details to my web component like social media icons using scalable vector graphics (SVG). Once I felt satisfied with the design, I published it to NPM so other developers can use my web component.
Below is what my updated web component looks like. You can see the added social media icons that is linked to a users respectable social media pages.
For more information here is the GitHub repo:
<bio-card>
This webcomponent follows the open-wc recommendation.
Installation
npm i bio-card
Usage
<script type="module">
import 'bio-card/bio-card.js';
</script>
<bio-card></bio-card>
Tooling configs
For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
Local Demo with es-dev-server
npm start
To run a local development server that serves the basic demo located in demo/index.html
Now, as I am more familiar with web components and web development, I am eager to start working on a real project to directly impact HAXcms. The first assignment I have been given is to build a better left-hand menu. This is an in-depth project so I will be creating a separate series where I walk you through what I am doing such as learning about the problem, conducting research, creating mockups/wireframes, implementation stages, etc. I will still be regularly updating the “My Virtual Career” series, as well as writing in my new series. If you are interested in the user interface or user experience then I recommend checking that series out so you can follow along my journey from start to finish. I am excited to start this new task, so let’s work!
View my first post in my new series, "UX/UI Menu Fix"
Top comments (0)