DEV Community: Kathryn Simpson

Event Badge Project

Kathryn Simpson — Sun, 12 Dec 2021 20:33:53 +0000

Summary

For this project we needed to make a web component of an event badge, that could be reusable for all events that would use a photo on their badge. We also needed to wire it up to HAX.

Getting Started

For this project we were given the comp shown above. For this component my group and I decided to brake in down into the following elements:

Event-Badge
Event-Header
Event-Photo
Event-Name
Event-Logo

We also decided that we would want to make it hockey themed instead of the media theme that was in the original comp.

Progress

As shown above this is how our comp currently looks. We still have some things to work on before it is due, but so far we have made our own banner for the header area. How I did this was by taking 4 different svg's and mixing them up in different patterns. Liz is the main developer for our project so she has do the majority of the coding. Our professor commented on how the code shown below was a cool way for solving the hole punch that we needed at the top of our badge.

.holePunch {
  margin: auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: white;
}

We still need to <slot> in the content, add support for an image, as well as add support for the name, title, company properties. When we are finished I will add in screenshot of the badge below.

HAX

As I mentioned earlier we needed to wire our component to HAX. What is HAX you may ask, well HAXTheWeb is an open source collection of web components that are reusable on all platforms. This is achieved by using a tag structure that is very semantic. The web components can be used with or without HAX after it has been created as well. As our professor is a main part of HAX, we were asked to do this project based off of issue that had been added to the HAX GitHub account.

Links

NPM:https://www.npmjs.com/package/@runtimeerrorsmadeeasy/project-three
GitHub: https://github.com/runtimeErrorsMadeEasy/Project3

In a World With No Concern For Time or Money...

Kathryn Simpson — Sun, 07 Nov 2021 16:29:04 +0000

What would I do in this type of world?

I would want to do a lot of things, but I'm just going to focus on what career path I would take for this post.

I would want to take all the knowledge that I've learned in college and create a company with individuals who would make up the different parts of a design team. The members of this team would all bring different perspectives and talents to the table. We would then design the different elements that small businesses or charities needed to make their business stand out more or even just to get them started.

I would be the front-end designer for this company, which would create whatever they needed will the help of other members of my team and use my UI/UX experience to figure out how to create something that the client would love, while also making choices that would benefit the users of the design.

As a company in a world that has no concept of time or money, we would not charge a fee for the designs we created, but let the business or charity decide if they could pay, and how much they wanted it to be.

Why would I do it?

I don't want to be the type of person who goes and works for a big company that doesn't care about me or its consumers. This is because I know this is the type of job that will kill my passion for design and being creative.

I want to be able to connect with the people I am designing for and there to be a greater purpose for my designs and them not just get people to spend money on things they probably don't really need.

I have also always had this need as well to be an owner or partner in a small business of my own, I don't know if this is because of seeing my Dad run his own small business growing up or something else entirely.

I also just want to help people who are motivated to make a change in this world, no matter how small. So that is why my design team and I would focus on small businesses and charities because they don't always have the same network or means as other bigger companies may have.

In a world with no concern for time or money, I would do my best to help make a difference for the little guys of the world, so they have a little bit better of a chance to make a change in this world.

LitElement Slot Tags

Kathryn Simpson — Sun, 24 Oct 2021 22:56:50 +0000

Intro

A '' tag is an HTML tag that allows there to be a placeholder inside a web component where you are able to place your own markup. It does this by creating separate DOM trees and then when the code is being run, presents them together.

In Use

My team and I are using slots within our web component of a card. The comp for the web component is show above. Our component is broken up into four parts:

Icon
Banner/Header
Card
Scaffold

We are using the '' tag help keep the different parts of the card flexible, like the header, sub-header, and body content so this web component can be reusable. To do this my team simple uses the name attribute as the parent element and the slot attribute as the child element. Below I have provided the link to my teams repo, so you can see examples of the '' tag in action. It is not completed yet, but progress is being made to make it as good as it can be.

Repo:https://github.com/runtimeErrorsMadeEasy/project2

Considerations of Building a Web Component

Kathryn Simpson — Sun, 10 Oct 2021 21:32:59 +0000

Details

For this project the web component that my group and I are making is a card. Shown above is the comp for the project. There are many different elements can go into a card, but for this project we are just going to focus on:

Icon
Banner
Scaffold
Card

Difficulties

Some obstacles that my team and I might face could be getting the slotting of the content to work, since I have never done that before. I also am not 100% sure how my team and I are going to keep the style feeling consistent between all of the elements of the card since that is a little bit different that styling a button.

Manageabilities

Since I now have more experience creating a web component, from my last group project of creating a button. I believe I will be able to use the knowledge I gained from that towards the creation of a card. For example I learned how to use css to make the design of the different elements look better and less like a button from the 90's.

Group Repo: https://github.com/runtimeErrorsMadeEasy/project2

IST402 CTA Button Progress

Kathryn Simpson — Fri, 24 Sep 2021 13:46:13 +0000

For our web component, my partner Liz and I are making a Penn State button that links to the Penn State hockey schedule.

Successes
We have the css for the design of the button, as well as the hover state working for our button. Thursday we also learned how to add an icon to the button. Which we plan to continue to develop along with the other parts of the button that we need.

Struggles
We're struggling a little bit with the disable part of the button, but since the professor posted a video editing another persons button which included disabling the button, that should help us be able to figure out how to get the disable part of work for our button.

Group Repo:
https://github.com/runtimeErrorsMadeEasy/ctaButton

Web Component Frameworks

Kathryn Simpson — Sun, 12 Sep 2021 23:29:22 +0000

What commonalities are there between the boilerplate code?
The commonalities between the Angular, React, VueJS, and StencilJS boilerplates are that they all have a source directory that contains HTLM, CSS, and JS to run the boilerplate. They also all have dependencies, with React and Angular taking longer to install than VueJS and StencilJS.

Which do you think is the easiest DX to get going?
I think that is VueJS the easiest DX to get going. It had the simplest directory layout for me I was able to find all the components I was looking for without having to search to hard.

If starting to build an "app" tomorrow, which would you prefer and why?
If I were to start building an "app" tomorrow, I would prefer to use VueJS because of it being the easiest developer experience for me. It has the least amount of steps to create a functioning application, which is to me a very big deal.

VueJS Boilerplate Repo: https://github.com/bdellegrazie/vue-hello-world
Groups Boilerplates: https://github.com/runtimeErrorsMadeEasy/boilerplates

Installing open-wc on Mac

Kathryn Simpson — Sun, 29 Aug 2021 17:26:52 +0000

Introduction
When installing open-wc on Mac, there are a few software installs that need to be done. The software that we will be installing are NodeJS, yarn, and the open-wc boilerplate.

Installing NodeJS
To install NodeJS just click here. Follow the instructions of the install, and since NodeJS comes with npm we do not have to install it separately. To double-check that both were installed currently you can type in node -v and npm -v into your terminal.

Installing Yarn
First, start by opening your terminal and typing npm install -g yarn. If there is a permissions error when you are trying to install yarn then you may need to type sudo npm install -g yarn instead.

Open-wc boilerplate
To finish out we are going to run a test project of hello-world. So, in your terminal, you are going to navigate to the folder you want to keep the folder in by using cd. For example, if I wanted to use my edtechjoker folder that is in my git folder which is located in my documents folder I would type cd Documents and enter it then cd git enter, and finally cd edtechjoker enter. Once you are in the folder you want you will run this command npm init @open-wc. As long as your installs are all working you should be able to scaffold a new project by using your enter key. You will then want to select web component with your return key. After that, you should be able to select all three tooling options of linting, testing, and demoing by using your space bar. Next, you will want to select no for using typescript and then set the name as hello-world with no caps or it will throw a fit. Finally, select yes to write the file structure to disk and yes with yarn to finalize the install. If the install was successful you should get a message that says it is set up.

Run Project
Just simply type cd hello-world and then npm run start.

IST 402: Introducing Myself

Kathryn Simpson — Sat, 28 Aug 2021 21:17:30 +0000

Introduction
Hello, my name is Kathryn Simpson, this is my junior year here at Penn State. I am majoring in human-centered design and development with a custom focus area as well as minoring in graphic design. When I started here at Penn State I am going to be majoring in graphic design but then decided to change my major to human-centered design and development and instead to minor in graphic design. I have lived in PA my whole life in a small town called Muncy, which is about an hour and 30 minutes away from State College. Towards Williamsport, if anyone is familiar with that area of PA. My interests outside of my academic life are hanging out with my friends and family, reading, listening to music, and photography.

My Interest In Web Development
I am interested in learning about web development through IST 402 because even though I am more focused on the design aspects of my HCDD, I still feel like it will be good to learn about the web development side of things as in today's world being able to do more than just a designer is always a good thing. I believe the more I learn in college allows me to be more prepared for my career after I graduate. While I was not very good at coding in Java, I haven't done any coding in JavaScript so I am excited to try and see how well I can do and how much I can learn from this course.