DEV Community: michaelzwhang

The Friendship App

michaelzwhang — Sat, 27 Nov 2021 23:03:12 +0000

If I could build an app - the app that I would want built is a really sophisticated people matching app. The purpose of this app would be to connect people with similar interests and backgrounds together. With the use of sophisticated AI and match-making technologies, ideally the people that we would want to have connected to each other would have similar backgrounds, interests, et cetera. With the main target of users being aimed at the young adult generation - specifically those in college or recent graduates. I think that because most of the matchmaking apps are mainly focused on dating, that it would be nice to have one that would be focused on purely making and creating friendships.

The usability of this app would be quite simple, it would be accessible through whatever smart mobile device that you would expect to carry, and downloadable in the app store. When using the app, it would temporarily use your location and match you with people in the area based off of the information you listed as being your interests. Steps to verify who you say you are could be done through a facial recognition system that users would have to certify through when first signing up to the app and every so often.

If money was no concern and time was no concern, I would assemble my life skills to master a specific craft in tech - whether it be in the inner workings of cybersecurity or innovative things such as web or application development. I strongly believe that any master of a specific trade within tech can make a big impact on the world if they are able to manifest and put their skills on the table for good and productivity. Personally, for me, I've been studying in cybersecurity for 4 years at Penn State. So, as I'm already familiar with this as opposed to other things, I would want to further develop my skills within this trade. I think that being a part of a groundbreaking company or an organization that is changing the way we look at cybersecurity would be something fascinating to do - a company with work that puts users' steps ahead of threat actors as opposed to it being the other way around.

Blog: Slot Composition

michaelzwhang — Sat, 27 Nov 2021 22:43:00 +0000

Slot Composition Defined:
Essentially what slot composition is, is when a user passes code through elements. Examples of what this code could be includes things such as a header, icon, et cetera. It essentially is everything and anything that goes within the makings of a card that can be interconnected with each other.

Using Components:
There are different ways in which we can utilize slot composition within the web components we work on.
An example of this is simple as:

<slot name = "Header"><p>None</p></slot>

What this does is, it essentially identifies and uses the naming convention to name the elements that are being passed through the header that you are using.

Example of Slot Composition:

<user-card>
  #shadow-root
     <div>Name:
          >slot name="username"></slow>
     </div>
     <div>Birthday:
        <slot name="birthday"></slot>
     </div>
<span slot="username">Jon Smith</span>
<span slot="birthday">01.01.2001</span>
</user-card>

Source:
https://javascript.info/slots-composition

Considerations for Web Components

michaelzwhang — Sat, 27 Nov 2021 22:24:46 +0000

General:
When designing a web component card there are some key elements that need to be included:

Header
Icon
Banner
Body

The header will contain the icon, as well as any additional titles or subtitles that may need to be included. The icon itself will be represented by an SVG file. The banner of the card includes a colored background for the header, subheader, and the icon to rest on. The body contains any images or texts that may need to be included.

For our group, because it's a team of 4, the plan would be for each one of the team members to handle an element of the task. Any members that finish early, can assist other members in the progress and completion of their work in order to ensure a successful development process.

Unfortunately, I do not have much previous experience with web development prior to having taken this class, so there is a lot to be learned with each project and task that we've been assigned to work on. Getting through the button task has really helped me become more familiar with how the development of web components go and what I can expect in this line of work.

CTA Button: The Easy Button

michaelzwhang — Sat, 27 Nov 2021 22:06:32 +0000

Despite the fact that the task was to develop a simple CTA button - there is a lot that is involved when developing one on JavaScript. Within each process of the design, there are many considerations that need to be taken into account in order to come out with a successful end product. My team worked on a button that would be rendered and operate off a page on the web.

Through this task, we have come across some successes and obstacles. One of the easiest successes that we took as a team, was the fact that the design process for the button was straight forward and stream lined in an easy to do way. We simply started out on similar terms with the open-wc boilerplate that we had previously worked on. We also knew that the design template was going to be based off of Staple's infamous "That was easy" button. This allowed us to have an idea and sense of what we were aiming on creating as a team.

As mentioned, obstacles did come however. Initially when we first began the task, we did not have a grasp and understanding on how to properly make changes and edits to the styles that had already been built to the open-wc boilerplate in which we had started on. We thought that we would have to do things the old-fashioned way and make implementations of constructors in a certain manner, but using CSS was going to be enough for the styling of our application.

Overall, there are some key things that I could take away from this assignment from the get go. One of the primary takeaways was that the way the development process is for web components is drastically different from the processes we see being utilized within the Python and Java programming worlds. Identifying the many states and characteristics of the CTA button was something that required thinking beyond the keyboard. Extra time allows for the developers to consider the endless attributes and characteristics that can be added -- so ultimately time was also something I noted as a beneficial thing to have on your side.

Repository:
https://github.com/Viable-Slime/Button

Boilerplates

michaelzwhang — Sat, 27 Nov 2021 20:35:37 +0000

There are several similarities that can be identified among the four boilerplates that we're looking at in class - React, Stencil.js, Vue.js, and Angular. The components within each seem to be a commonality for these frameworks - they all contain and utilize CSS, HTML, and JavaScript files. Additionally, they all are heavily reliant on many dependencies. Between VueJS and Angular however - they are only a handful of files that can be found in both, such as package.json. Both also involve an index.html file.

In my personal opinion, between VueJS and Angular, I believe that VueJS is the best pick if you're just getting started. Because of the fact that the Angular boilerplate has more complexities and a lot more to it. If I were assigned to have a web application built tomorrow - VueJS would be the one that I would have to pick. VueJS involves these visual components which are easy to pick up and integrate into your work.

Viable Slime Organization Repo:
https://github.com/Viable-Slime/BoilerPlate

Angular Repo:
https://github.com/jbutko/AngularJS-Boilerplate

Installing: open-wc

michaelzwhang — Sat, 27 Nov 2021 20:17:28 +0000

To begin the process, you would have to install the most recent version of Node.js (https://nodejs.org/en/). The instructions should come along with the Node.js setup pop-up. This will install npm with Node.

From here, you can install yarn. This of which may be done by entering the following into the Windows Cmd Prompt:

npm install --global yarn

Now identify and move to the folder you are going to be using for your Cmd Prompt and type in:

npm init @open-wc

Wait patiently for everything to setup on its own. Once it's ready, options will appear on the screen. Make selections to: scaffold a new project, web component, linting, no (to typescript), the name of your web component ("hello-world"), review the file location (click yes to confirm it looks good), and then finally make a selection to "Yes, with yarn" for the dependencies to be installed.

Once this is in order, you should be all done!

Hello class!

michaelzwhang — Tue, 07 Sep 2021 18:11:32 +0000

My name is Michael and I am a senior at Penn State University. Currently I am majoring in Cybersecurity Analytics & Operations and minoring in Information Science & Technology.

This past summer and overlapping into the first week of the semester, I had the opportunity to intern at CrowdStrike, where I was working as a threat intelligence analyst. Though I am not so sure how much web component work I will do in my future career, I am optimistic and excited to learn in this class and discover where I will be able to apply this knowledge in the future.