DEV Community: noellefajt

Sorting Test

noellefajt — Tue, 14 Dec 2021 04:58:53 +0000

Overview
For my group's final project we made a sorting test. This presented the user with a question and a number of options that they could sort into the correct order by either dragging or using the up and down arrow buttons.

The user was then able to check their answers and reset as necessary.

Here is some of the code that we use to check that the users answers are right.

One of our tough challenges was getting the up arrow to disable on the top option and the down arrow to disable on the bottom option, then having them enable and disable accordingly when they are moved. We ended up making a separate check function for this and calling it every time an up or down arrow was pressed or an option was dragged. Here is the code we implemented.

Next steps
Our group is working on the bonus to have the user be able to switch to and from another language. We are also working on the HAX aspect on the project.

Passion Project

noellefajt — Mon, 08 Nov 2021 17:10:26 +0000

App Scope

I would build an app that focuses on educating people on the environment and how things we are doing and what we are consuming are affecting it.

Who

I would see this app being used by any age or gender, primarily in the US but available worldwide. The US has different laws and regulations for what is allowed in our food, hygiene and make up products, and more compared to many other countries. Many of the things allowed in our products are illegal in other countries. The US is also the second biggest contributor to global warming and pollution, behind China. I think a lot of the US is not properly educated on how our decisions everyday are making a big negative impact on the world.

What would it do?

I would want to design an app that had capability to allow users to search up food and other beauty products and provide a quick analysis on them. The app would tell you how environmentally and ethically friendly the product is. Also would give you ratings on how good the food or product is for you. For example many mascaras have cancer causing chemicals or other contaminants in them. The app would ideally give you an analysis of this and provide you with other alternatives to buy instead. The app could also do an analysis for how eco friendly it is for the company to make these products. A lot of this information is hard to find and not commonly known. These products also tend to be more expensive; however, I think if this information was more easily available it would affect many people's choices. I also think if more people start making the switch to healthier options companies will be forced to make changes and regulations will be changed as well.

Another thing I would like to incorporate in the app would be how to recycle properly. Recycling can be really confusing and changes based on where you live and who the trash company is for that area. A lot of resources go into sorting recyclables and taking out items that are not abled to be recycled or recycled improperly. This shows that many people are taking the time to recycle but do not know how to do it correctly. Having an app that could use your location and provide you with detailed requirements of how to recycle in your area would be beneficial. This again is information that is hard to find and not explained properly. Having this information easy to get I think will likely persuade people to recycle more and correctly.

If money didn't matter

These are a few ideas that I would want incorporated in the app but would likely want to expand to doing analyses on specific companies and their environmental impact and climate initiatives. I would also like to add a spot where people can enter in their information and get their carbon footprint score. I would want to expand further and add more capabilities to the app or design a series of apps. This information is really important but there is no real revenue stream from it so no one wants to invest money into it or make a business out of it. However, if money is no issue than I would definitely want to do all I could to get this information in front of as many people as possible.

Slot Tags in LitElements

noellefajt — Mon, 25 Oct 2021 03:53:05 +0000

In a recent post I discussed a card project I am working on. (shown below)

To recap this card is made up of four components:

icon
banner
scaffold
card

For this project my group and I are utilizing the slot tag to make out card more dynamic and flexible. The slot tag acts a placeholder in web components that you can then populate with any mark up you would like. This allows for flexibility when creating different web components.

To do this we give the slot a name attribute. We later then can use that name to determine where to put that HTML.

Our approach is to import the icon into the banner and slot in it to the render function, as well as the main header and sub header. This will allow the program to easily fill the banner with the correct header, sub header, and icon for that specific card.

For scaffold we are importing the banner and slotting the banner, icon, and content that will be in the body of the card (below the banner)

Here is my team's repo if you want to look more in depth on how we used the slot tag and our team's progress.

Building web components

noellefajt — Sun, 10 Oct 2021 21:45:00 +0000

What to consider

When building a web component you have to take many things into consideration before the actual development begins. It is important to think about all the design aspects such as properties, states, its structure, how it will look, accessibility and security concerns and more. You want to really think through the design and functionality you want in your component. Determining these up front can also help mitigate the risk of scope creep later on. Once done with all the design considerations you can start to actually create the web component. It is very possible and likely that through designing, developing, and testing changes will have to be made to the original design.

Project Comp
My team and I are working on developing a card similar to the ones shown below.

These cards are made up of 4 elements:

Scaffolding (the card itself)
Icon
Header/banner
Body

Expected difficulties and more manageable:
I think that deciding how we want to make the card interactive may be difficult. For example my team has discussed having the card change or flip when clicked on or hovered over. We also discussed having the icon, header, and body of our card switch if the user slides the card. I think determining exactly what we want to do without making it feel overwhelming to the user will be challenging. In addition, these are interactions that we have not worked with prior to this project. I also have limited experience with web components. Trying to figure out how everything works together has been challenging. Beginning with creating a button will definitely help with the creation of the card. The button project has allowed me to get more comfortable with css, HTML, and JS. It also has given me practice with web components and looking at other people’s code to get a better idea of how to do something.

CTA Button Update

noellefajt — Mon, 27 Sep 2021 03:59:06 +0000

Current state
My group's button right now is currently changing when you hover over it and focus on it. You can click on it and have it take you to the link as well. We also have a working icon.

Difficulties
So far it has been difficult to get the icons to change if you hover over it. I also am still struggling to fully understand web components because it is so different from coding I have done in the passed. It has also been a challenge to figure out how to use npm/yarn and the command line.

Items Learned
I have definitely been learning a lot about GitHub. Before this class I had very limited experience working with it. I feel a lot more comfortable forking, making repos, and pushing/pulling code. I also was not familiar with web components or different kind of frameworks at all. I am starting to understand web components more and how they work. This class has also made me more attentive of different web pages and how they are designed. Another thing I learned was how to actually use the inspect feature. Before I knew how to inspect webpages but not how to use it to help me debug and come up with different solutions.

Here is a link to my current button: https://github.com/table-in-the-corner/invisi-button/tree/noelle

Comparing Web Component Frameworks

noellefajt — Tue, 14 Sep 2021 17:15:23 +0000

Similarities

Angular, React, VueJS, and StencilJS are all frameworks that provide a sort of template for developing web applications successfully. They make it easy to add features to a web app that have been well developed, used, and tested by others. The frameworks prevent developers from having to reinvent everything. All of these frameworks had a number of dependencies and they all have HTML files. Angular and StencilJS use Typescript. React uses JSX (an extension of JavaScript) and VueJS uses both TypeScript and JavaScript.

Easiest Developer Experience

The easiest to get going I think would be VueJS. It was quick to install and seems user friendly. VueJS is also more flexible and does not seem to have as much of a learning curve as some other frameworks.

What I would chose

If I had to start building an app tomorrow I would choose React. Although it took a long time to install, it is a lot of JavaScript which I am familiar with. Hopefully this would make it pretty easy to start developing with. It also seems to be one of the most popular frameworks meaning there is a large community of people who like it and would be many resources to refer to. React is very flexible so a number of different libraries such as, state management and http, can be used with it. My only concern would be with this flexibility it may be hard to choose between all the tools/options.
Provide a links in your post to your organization as well as the repo that you got your boilerplate from
Here is a link to our team’s boilerplate: https://github.com/table-in-the-corner/boilerplates
Here is a link to the React boilerplate example I used https://github.com/react-boilerplate/react-boilerplate

Installing open-wc on MacOS

noellefajt — Tue, 31 Aug 2021 03:16:42 +0000

Download Node.js (https://nodejs.org/en/) and when the download is done click through the agreements/ permissions. To make sure that it is all installed correctly type the commands node -v and npm -v in the terminal to see if the version numbers are returned.

Yarn (https://yarnpkg.com/)
Since you just installed npm open a new terminal and type npm install –global yarn. Because of permission and access errors on your device you may have to type sudo npm install –global yarn to override this.

Open-wc boilerplate
Create a folder where you want the project to be saved. Open up the terminal and locate the folder with command cd /. Next type npm init @open-wc and select “Scaffold a new project,” “Web Component,” “Linting,” “Testing,” and “Demoing.” Select No for Typescript. Next name it hello-world in all lowercase, then select yes to write the files to your hard drive. Then select yes with yarn. It will display “You’re all set up” in the terminal if it is set up correctly. In order to run it type the command cd hello-world and npm run start.

IST 402: Introduction

noellefajt — Mon, 30 Aug 2021 22:53:23 +0000

Hi everyone! My name Noelle Fajt and I am from Pittsburgh, PA. I am a senior majoring in Human Centered Design and Development with a focus in Enterprise Technology Integration. I have some experience in web development which sparked my interest to take this class; however, most of my experience with coding has been more backend. I worked as a web development production specialist for the College of IST at Penn State. For this job I was mostly using Wordpress and didn't have to do a lot of the coding myself. This summer I interned at TJX as a software engineer. While here I created a system to automate network configurations and deployments. I really enjoyed this internship, but I am excited to learn more about front end development since I do not have a lot of experience here. I also took IST 256, programming for the web, last semester which was my first time using Github and group coding through it. I really enjoyed that class because it was different than any other coding class I have taken so far at Penn State. I learned a lot about the combination of functional and non-functional requirements as well as designing. I would like to expand from what I learned in that class and am hoping I can do that this semester.

Outside of class I am the technology chair for my sorority Pi Beta Phi, an IST diplomat, a mentor for WIST (Women in IST), and an LA for IST 411.