DEV Community: kxm5816

How to install open-wc on Mac

kxm5816 — Mon, 13 Dec 2021 03:51:00 +0000

open-wc tutorial Mac:

Before beginning the installation of open-wc on Mac, it is important to verify what version of Nodejs is installed on your computer. Node 14 (14.15.5) is the correct version to download in order for the rest of the steps to work. To check for updates, visit here:
https://nodejs.org/en/.

Then to install npm on your machine, you type in the terminal:

"npm install -g npm"

Typing "node -v" will let you know what version you have and if you have successfully installed npm.

After that, you want to install yarn onto your computer. Go to the command terminal and type in:

"npm install -g yarn"

Similar to node, type in "yarn -- version" to see what version you have and if the download was successful.

Finally, go to the command line and type:

"npm init @open-wc"

Go through the rest of the instructions:

-Create new project scaffold
-Web Component
-Linting, Testing, Demoing
-Does NOT use Typescript
-Name "hello-world"
-Installed via yarn

Confirmation message will appear if all is done correctly.

Final Project - Trading Card

kxm5816 — Mon, 13 Dec 2021 03:47:56 +0000

The Project:
The project we chose to work on was to create trading cards that display multiple statistics pertaining to each card and for the user to have the ability to create their own card from a template. In order for the user to be able to create their own card, we needed to implement HAX so the elements were able to be manipulated. The card had to look similar to an asset looking like this:

Progress So Far:
So far, we have made solid progress as a group and the cards are starting to come together. As of right now, the cards look like this:

We still may change some of the properties around and make overall improvements towards the card. The card does work with HAX in the demo, and users are able to customize and create their own trading card.

The array called 'cardData' is where we pull most of the information from like the name, image, age, power, and speed.

'cardData' also is where the formatting for the statistics and image rendering is done. The CSS in 'cardData' is done in a way to make the images look more like conventional trading cards.

Arrays are then rendered via mapping to be updated and printed according to our specifications. The mapping was somewhat tricky to figure out, but we are glad we did because it makes the rest of the project easier to work with. HAX was also pretty cool to work with and giving users the ability to change elements to accommodate their preferences is an interesting and forward-thinking concept.

NPM:

https://www.npmjs.com/package/@paddyshub/project-3

Github:

PaddysHub / project-3

Build Any App

kxm5816 — Mon, 08 Nov 2021 04:48:50 +0000

If I Could Build an App...

I would want to build an app that would help people sell each other junk that they do not need anymore to those who need it. People would put a search out for an item that they would like, and they will be recommended items that are exact matches or very similar to the request.

Who would it be for?

The app would be for those who do not want to spend lots of money on brand new items and are looking for things that have been used and feature a reduced price tag.

How Would They Use It?

It will search those nearby first, and then those outside of an approximate radius, to reduce the need for shipping. The application is used on mobile devices and algorithms will help find similar results if exact results are not found. Requests will stay active on the application and an alert will be given if a match is made.

How Would You Use It?

I would use it to find obscure collectibles or maybe even vintage clothes. I will try and find things that I like/want, without having to pay the full price.

If money was no concern, time no concern; what would you do with your life and the skills you've assembled if you could dedicate it to one thing?

I would really like to become a web developer one day and create contemporary and interactive websites. I think design is a very interesting area to work in, and it would keep my creativity active.

Font Adjustment

kxm5816 — Mon, 25 Oct 2021 04:04:27 +0000

We decided this well to change around some of the fonts, as well as the font sizes. We will continue to work on other font adaptations in the future, but we are generally testing right now. We did not address any of the "swap" features, but will look into further this week.

https://github.com/PaddysHub/project-two

Web Component Considerations

kxm5816 — Mon, 11 Oct 2021 03:43:14 +0000

Web components have many variables and properties that disseminate a good web component from a bad one. Good and bad can also be thought of as arbitrary in the design sense, as these are subjective ideas and not objective. For this case, we will look at what the general development community deems good and bad.

The Comp

For the class, we are making card components.

The card will consist of a few elements:
-A header
-An icon
-A body
-A banner

How we utilize these elements is important, and the customization of each will be interesting.

I expect that the first part of building the foundation of the card may be difficult, but once the foundation is established, customizing the different properties to a use we desire should be achievable. Similar to the button, multiple states will be implemented and the animations/transitions will be exciting for me. I believe that since the buttons had features like animations/transitions, the card should not have difficulties with such features. Also, using HTML, CSS, and Javascript with the last project should provide some relevant familiarity with this project.

Button Project Update

kxm5816 — Mon, 27 Sep 2021 03:31:23 +0000

So far, I feel I have learned a fair amount about web components and I have thoroughly enjoyed learning/practicing front-end concepts. It has been somewhat difficult to learn the syntax and proper coding formats, but honestly it has not been the hardest I have seen so far. Experimenting with different tools and researching different methodologies has been fun and fairly time-consuming. Creating the button at first was pretty difficult because I felt like I did not know where to start, but once I gained some momentum I felt confident in modifying and improving my button. The concept of pushing to Github from my local device has been tricky to learn, but certainly useful. The use of icons I feel is a nice addition to the tool belt.

PaddysHub / Button1

View on GitHub

Boilerplate Blog

kxm5816 — Tue, 14 Sep 2021 22:13:00 +0000

Similarities:

There were a decent amount of similarities found between the boilerplates in Angular, React, VueJS, and StencilJS frameworks. One similarity I noticed initially was the composition and organization of folders contained within the boilerplate. For instance, they were mostly organized containing similar files/folders like .editorconfigs and package.jsons. The README.md files were also formatted in a similar way, with an explanation presented at the top, and example code/instructions presented towards the bottom. They also had licenses that elaborated to the user the functions in which they are permitted to use the product, and a disclosure of which person/people are granting these permissions.

Easiest DX:

I believe the easiest DX to use would be React. I feel as though it looks somewhat easier to employ regularly and has a large community presence. The large community presence will be useful for research and tutorials so I may learn React quicker and easier than other frameworks that have less of a presence. Although React primarily uses Javascript and JSX, I believe that Javascript will be useful for me to learn and help me in other areas besides developing in React. If I was to develop an app tomorrow, I would most likely use React because Angular has a steep learning curve whereas React has an easier learning curve and is quicker to learn. Also, React has more improved mobile cross-platform framework solutions compared to Angular.

kxm5816 / boilerplates

PaddysHub / boilerplates

React Boilerplate Github:

react-boilerplate / react-boilerplate

🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Myself and Web Development

kxm5816 — Sun, 29 Aug 2021 18:58:45 +0000

My name is Khory Mull and I am a Senior majoring in Information Sciences and Technology with a focus in Design and Development. I am from a small town outside of Philadelphia called Kennett Square, and I currently enjoy living in the State College area. I am excited to learn more about web devlopment and the components that make up web development. Web development plays a prominent role more than ever and to learn about something that has such rapid functional evolution and massive social influence in our society keeps me heavily interested and invested. I hope to learn the right web development fundamentals so that one day I can innovate technology and hopefully provide help to those who need it. I have always been pretty interested in learning about different facets of technology, and web development is an especially interesting one. The Back-End aspect will certainly be interesting and important to hone and improve upon, but I am most looking forward to the Front-End area of web development. I want to create beautifully intricate and interactive web pages, and find a perfect balance between art and science. Design is important to me, so incorporating it into web development will keep me passionate about my projects and should peak my interest throughout the rest of my career. Also, the idea of being able to generate an independent career utilizing only web development practices feels liberating and inspiring. I am also fascinated about the history of web development, and how it came to be what we know it as today.