DEV Community: haileyhahnnnn

Sorting Questions

haileyhahnnnn — Mon, 13 Dec 2021 02:43:54 +0000

For one of my class we had to create a web component that allows you to sort a list of questions. There were a lot of steps to be taken to finish our this whole project.

The Process:

To start out, we created a layout of how we wanted our design to look

Having the layout done first made it easy for our group to have something to work off of
knowing what needs to be done made it easier when programming by ourselves since the layout was already done

Then our team started by making on plan on how to tackle this problem:

What is the best way to go about solving this problem?
Can we divey this work up?
What is the best strategy to programming the sorting to work right?

Through the following few weeks of our project we did 2 key things to have this project run smooth:
1) Met in person twice a week to work on the project together
2) Always communicated with each other to know what everyone was working on

We were giving a comp from our professor so the outline did not take to much time. This is the standards template we are working with.

The end goal is for this template to be able to sort questions using the arrows and dragging information to different slots all shown in the template above. This was created on a basis of using Arrays that would store and sort the lists from the template. Since the Arrays created a sorted list, we were able to add on a shuffle and check answers function which has potential to be very useful for the users.

The picture shown above shows different ways we want to make our application more user interactive. To show user's when they are correct and incorrect, we implemented a color coded system. When the user answers the question correctly, that text box will turn green. On the other hand, if you answer wrong, the text box turns red. We also have a tallied count at the bottom of the sorting questions template. It shows you the number of questions that the user was correct with. Giving users different forms of feedback is really beneficial to creating a more interactive and enjoyable environment.

Breaking this down in a coding point of view, these are ways we were make this able to work:

  constructor() {
    super();
    this.title = "Gimme a title!";
    this.checked = false;
    this.questionAmount = this.children.length;
    this.correctNum = 0;
    this.correctOrder = [];
    this.currentOrder = [];

    console.log(`Children: ${this.questionAmount}`);

    //correct order of question are stored based on sq-question input
    this.querySelectorAll("sq-question").forEach(node => {
      this.correctOrder.push(node);
    });

    console.log('correct order:');
    console.log(this.correctOrder);

    //shuffles questions upon load for user
    this.shuffleQuestions();
  }

From our code shown above, you can view how we tally the correct and incorrect in which it then gets pushed to the users to view.

We tried to find the most simple way to code for this project to help make the compile and run time quicker for the users. I find this to be a better approach because a faster run time is always very important to users. If your run time is to slow, many people will not give your application the time of day.

If you would like to see more throughly what our group has done with this project please check out our project

The Technical Side Of Fitness

haileyhahnnnn — Sun, 07 Nov 2021 17:19:23 +0000

Building my Dream Application

For those who are fitness gurus like me, I never quite found an app that track everything in one app without the prescription fee. Even when it comes with a prescription fee, I still am not fully satisfied with what it entails. I have tried using a few different apps throughout the last few years like MyFitnessPal, the apple watch health and even Kayla Itsines "Sweat" app. But in the end, fitness is really about having a truly healthy lifestyle and not just working out.
I want to be able to combine the three main concepts of being healthy:

Food: cooking, baking, meal prepping
Athletics: Tracking Calories, progress, workouts
lifestyle: motivation and a safe community

How would this work?

What you eat is just as important as how you exercise. Meaning that you have to track what you eat no matter what your goals are. I want this app to give people the function to meal prep for the week while also creating their own personalized cookbook. I want to save the users favorite food/meals in their "cookbook" in which once you plan out your meals for the week, the database should be able to generate a grocery list for your week of cooking. Everyday it would be able to track your calories/macros/nutrition and more!

When it comes to the fitness aspect of the app, I would love to be able to connect the users Apple watch/fitbit to this app to keep count of the users steps, burned calories, sleep and more. Eventually I would like to create my own technology that can be more user friendly with my app and encapture more of the fitness side .

Finally, lifestyle is the last factor I would want to keep in the app. Having a healthy lifestyle is key to being a overall healthy person no matter what your goals are. I want the app to help guide people to embody the lifestyle they want or need help achieving. I want to do this by adding a somewhat social aspect to this app. I want people to be able to follow people to get inspiration and motivation. Somewhat like a mix between a pinterest feed and tiktok feed. Of course people can chose to keep their account information public or private but it would be an amazing community to join.

A Life of No Concerns

If money and time was never a concern, I would dedicate all my time and money to two things: animal shelters and creating better communities.

With what I have learned in school, I have the skills to start on this wonderful journey. I have the skills to set me off in a great start, I know I will run into problems on the way but I have built up the skills for problem solving. My end goal is to build this app and make it successful. Once it is, I would really want to spent time giving back to different communities.
Growing up I have always had a dog and had the ability to travel the world, even in college which made for an extremely active lifestyle. In other countries the one thing I had noticed was the amount of helpless stray dogs that run along the streets and the difference of lifestyles. I am grateful that I have had the ability to travel the world but going to certain countries can be really humbling. In America we always want more but we never take a second to realize the things that are truly happening around us. It is one thing to hear about it in school but it is extremely different when you see it first hand. I want to make a difference and travel back to those countries and help develop an actual community for them. These are somethings I feel like I could promote through my app. Having a dog and traveling is something that has really gave me a healthy lifestyle and I would want to promote these two aspects through my app. I also have an extreme soft spot for dogs and personally I would want to help eliminate kill shelters and find a better way to get dogs adopted. Overall this two aspects take up a lot of time and money. If my app really generated enough money these would be the two things I really want to take action on.

Slot Composition

haileyhahnnnn — Mon, 25 Oct 2021 00:49:42 +0000

Project Updates:

Recently I have been working on a project that contains card components like headers, sub-headers, body and more. The image below is the format I am following to design my card's components:

What is "Slot Composition"?

So what really is a slot component...? Well, in simpler words, a slot composition is when a user passes code through multiple elements. This can be a header, body, icon, etc. It is anything that goes into the content of the card and then can be scaffolded together.
<Slot> is an HTML element that works as a placeholder for inside a web component that you had created. Within the component, <Slot> enables you to fill that component with your own markups.

Applying `<slot>` Components

There are various different ways to apply slot composition into your web components. It may sounds tricky but it is very simple concept, for example:

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

This line of code names your elements that are being basses through your header consisted within your Header. This is also an example of a "named slot" because it gives an attributed name for the element.

To keep our project design as simple as possible, I will use the <slot> attributes to pass any of our HTML into our header, sub header and body. To pass the HTML into our slots, we have must name our attributes by saying slot = body or slot = header to pass the code through to our main card.
A good example of how to use the tag in your code is shown below:

Overall slot tags are really useful when creating web components. If you want to follow up on my current project it is posted on my Github

Web Components and Element API's

haileyhahnnnn — Mon, 11 Oct 2021 02:09:57 +0000

In my IST 402 class my group was tasked with creating a card/portfolio to spec. We received a comp on what our portfolio should look like from out client and we must create it the best to our groups ability.

The Break Down

As a group we will break this down into four different elements.

Header
Icon
Banner
Body We want to make sure this user friendly and reusable as possible. To make sure we do, we have assigned one element per group remember to work on one of each. Although these elements seem rather simple, it is really vital to carrying out the security, design and overall appeal to the final product.

Difficulties Along the Way

You can never expect to have a perfect project. We expect to run into minor problems while working on our project. For one thing we have run into problems in the past with some team members being able to push to Github. It can sometimes be an easy fix but with some accesses ability rights it can be difficult to grant other teammates access. We will also have to look a little more close into the security of it because of the simplicity within our portfolio. We have to make sure we are not misusing any of the components within code to make it most secure.

Manageability

Since our group has already created the CTA button I would say that we have our best foot forward. When we started the CTA button I feel like everyone was a lot more confused on what the next step was but that project really gave us an outline on how much work goes into making a portfolio. It especially gave me a good grasp on how much time it will take to make this look appealing to the client. Overall, I personally feel that the styling will be simple and learned what takes up more time. With that knowledge from previous projects, I would say this gives me a really good outline on how the project is going to feel and how much time I need to allot myself to finish my part of the work.

Call To Action Project Update

haileyhahnnnn — Mon, 27 Sep 2021 01:06:26 +0000

Progress So Far

For my IST 402 project, we were assigned to make a call to action button that will be able to work on every platform. My partner and I have hit a few bumps in the road but overall it is going great! We have created a lot of our Javascript code in VSCode.

Difficulties

I would say our biggest difficulties lay within the terminal. For some reason running our program can be a bit harsh. We tend always run into some sort of problem. I know I have not had the most amount of experience when it comes to using the terminal so this is an amazing learning experience. We have found ourself running into problems mostly with being having the ability to push and pull to our Git repositories which is very important for our CTA button.

Success

I think we succeed most with problem solving together. When we come together we do great on finding a solution to the problem. I also find the coding not to horrible to understand since I had prior experience which is really helpful for this class.

Critical Learning Points

This project has been really great in sharpening my skills in the basic fundamentals in javascript. It is great to be able to work with HTML, CSS and more all at once. One thing I have deemed very important when making my CTA button is how the git repositories actually work. Since this is the area where I struggle most, I do find it great to use this as a learning opportunities. It is cool to see how a push and pull can update information that fast for you. I'd say it is really nice to be working in a group because we can bounce idea's off each other on how to fix whatever problem that has risen among us.

Repository: (https://github.com/IST-402-Group-1/FPHHbutton)

Comparing Web Components Framework

haileyhahnnnn — Sun, 12 Sep 2021 23:53:42 +0000

This week in class we delved into different web component frameworks. The four that we focused in on were: Angular, VueJS, StencilJS, React, and Angular. We had the opportunity to test all four out by taking the framework of the "hello-world" boilerplate and compare how each framework is structured.

Similarities

When going through the boilerplate codes, there were many differences and commonalities that I had noticed. In some way, I'd say all the frameworks had something in common.

To start off with the most obvious similarity: All four use JavaScript to define or create their components and work. Other common languages also commonly found would be HTML and CSS.
Every framework have a ton of dependancies and a long installation process. Things I learned the hard way: if the installation isn't long, than it probably had failed. Do not keep trying to rerun/debug, find another boilerplate.
These all also contain a /src or /app in the directory for the code. The only one that does not, I think would be VueJS.

Duplications & Overlapping

Duplicate and overlapping is quite common when it comes to frameworks. They are open source code that can be cloned/forked and used in other work. As we some people like to say it is like "borrowing" other peoples work. As well as sometimes people work can overlap with each other.

Easiest Developer Experience

In my personal opinion, I feel as though VueJS would be the best to get started with. I feel like it looks and feels more simple than the others. I say this because I feel like you can know the less code than you need for the others. You can make small components and not know too much about coding in HTML or CSS, etc.
Therefore if I were to create an App I would most likely prefer to use VueJS because of the fact I have never created one on my own. If I got stuck on how to fix/debug in VueJS, there are a lot more resources out there to help me fix my problem.

To View my groups Boilerplate click here

Tutorial: Getting Started with Open-wc

haileyhahnnnn — Mon, 30 Aug 2021 00:15:00 +0000

Open-WC, also known as Open Web-components is vital to getting you started on web-programming! It utilizes various ideas on how to build web-components and is accessible for any one interested and ready to learn! Now, let's get started.

Tools Needed
Listed bellow are the tools needed to get started with Open-wc:

A computer which you have full admin rights.
Basic understanding of how to navigate through your device
Basic understanding of how to run terminal commands

Installing VSCode
For this tutorial, we will start by downloading the IDE aka. VSCode. Some programmers prefer other IDE's which is also completely fine. VSCode is great because it is available for free downloads on Mac's and Window PC's,etc. If interested in VSCode, click this link([https://code.visualstudio.com/]) which brings you to the free download. Once you find the correct download for your computer(Windows/mac/etc), click download and install.

When you first open the application, it will ask for permission from the owner of the PC to access certain levels of your folder structure. Please grant access, otherwise the IDE cannot be used on your PC. Overall, this is usually a very easy process.

Installing NodeJS with NPM
Note: NodeJS comes with npm(node package manager) so you do not have to preform a separate installation for that.

Click here to install NodeJS: [https://nodejs.org/en/]
Once you reach the site, find the correct download for your PC and hit download. Follow the instructions to finish out the installation of NodeJS. Following the instructions are quite simple and easy. If you would like to check to make sure everything is downloaded correctly, you can proceed to your terminal and type node -v and npm-v. If you have installed everything correctly, you will receive the version number in response.

Installing Yarn
The next step is installing Yarn to your PC. To start off click this link: [https://yarnpkg.com/]
Once you have the website opened up, you must open up the terminal in your PC. Once your terminal is opened up, use the following command that utilizes the npm that we had previously installed.

npm install -global yarn

In the rare case that you run into permission error while installing Yarn, type sudo in front of your initial command line which would print as

sudo npm install -global yarn

Install Open-wc boilerplate
Congrats! You have made it to the final step of this tutorial. We are now ready to set up our open-wc with these last few steps:

Chose a location on your local machine. I prefer to use a folder on my desktop. This is where you will install and access the boilerplates.
Once you have created a folder, go back and open your terminal and navigate yourself to the correct level and folder.
Run npm init @open-wc (use sudo if you get denied access)
When the download begins you will be prompted with four questions. You want to select:
Scaffold a new project
Web Components, Linting
No(for TypeScript)
Type in LOWERCASE"hello-world" for your tag name
yes for the disk
yes for installing with yarn

Congrats, you have completed the download of open-wc! If you have any other questions/comments please leave them bellow! I hope you enjoy your web programming journey!

IST 402: Intro

haileyhahnnnn — Sun, 29 Aug 2021 00:33:53 +0000

About me:
My name is Hailey Hahn and I am currently a Senior Majoring in Information Sciences and Technology. Overall I have found myself as an extremely busy student throughout my four years here at Penn State. I am on the Division One Women's Fencing team, danced in Thon Athlete hour, was our team's SAAB rep and completed two amazing internships! This summer I interned at Hershey, working with their software, Ecommerce and web development which got extended through the Fall semester! I am excited to see what else I will be able to learn and apply from my internship to this class, Visa vera. Before my work at Hershey, I was an intern at the Penn State High Pressure Combustion lab. That was something I enjoy greatly because I was able to work on things I never saw myself doing. I was working on a level 4 laser that showed jet-fueled propagations. It was such a great experience being able to program while also learning things such as chemical reactions, conducting experiments and more! The one reason I have learned to love IST is because of the various different types of work it has brought me to. I cannot wait to see what the future holds.

Why IST 402?
I chose this class because of my internship and previous work. I have a little background in creating apps and different interfaces which I find very fun! Web development is a really great middle ground of programming and creativity that I do not always get to see in other fields of IST. This class is crucial to helping me chose whether or not I would like to continue down this path post graduation. Since I am only at the very beginning of my career, I am really excited to see what is to come of it.