DEV Community: Frank Palmeri

IST 402 - Final Project

Frank Palmeri — Mon, 13 Dec 2021 01:06:25 +0000

For our final project, our group chose to build an application that sorts information and tests users based upon their knowledge on a given topic.

The standard template for the project is shown in the image above, where questions can be sorted using the arrows or by dragging the selection along the page.

The application was created using arrays to store the order of the list, with a shuffle function and check answer function available for the user to test themselves on the given information.

When the user choses to check their answers, incorrect choices are displayed in red, and the program lists a correct answer count and the ability to show the solutions. Our group felt that providing multiple forms of feedback for the user to engage with would be important features for a study app, these features are found throughout the program.

The correct order for each question was stored based on the order in which the user entered them, making for an easy way to access the information.

When viewed from a code standpoint, the order of the array is shown below:

If one were to view the code while a user was interacting with the program, they would be able to observe live updates to the order in which questions are displayed.

The order of questions was checked through the use of the method checkQuestions(), where a series of boolean expressions were ran to count and list the amount of correct answers.

After answers are checked, the user is given the ability to take another attempt.

Overall, the success of this project was largely due to the conceptualization that went into organizing and moving the date throughout the array.

GitHub Repo:

IST-402-Group-1 / sorting-question

The Ideal App

Frank Palmeri — Fri, 05 Nov 2021 18:25:08 +0000

If I were able to build an app that would solve a prominent problem in society, it would be an app that tracks the actions and behaviors of the user to identify aspects of their life that need to be improved or eliminated in order for them to function at the highest possible capacity. For example, vaping. The app would track not only the money spent on vaping products coming out of the user’s bank account, but the damage it does to their physical health and create a profile to classify the significance the action has on their overall well-being. Actions that have an extreme adverse effect on the user will be blocked (through blacklisting vendors and disabling nicotine devices), the only way to disable the block being through unsubscribing to the service or receiving a medical clearance from a doctor to continue the activity in question. I witness so many young people developing habits that will unknowingly affect them for the rest of their lives, and as someone who greatly values my health and well-being, I would go to great lengths to prevent it from happening to more people in the future. In addition - the app would provide a large emphasis on the user being incentivized to pursue new hobbies and explore their interests. I find it very common for people to live sedentary lives and engage in recreational activities that are also sedentary, such as watching TV, playing video games and other non-physical activities which I feel must be limited to a very, very small portion of one’s daily routine. One of my favorite quotes of all time is by Socrates, in which he states “No man has the right to be an amateur in the matter of physical training. It is a shame for a man to grow old without seeing the beauty and strength of which his body is capable.” I find this to be especially true today - far more than in the past, and I strongly believe that no human will ever be able to feel at their best without some degree of physical exertion and struggle in their lives. Struggle is a necessary part of the human psyche, both physically and mentally, and avoiding it will only make one weaker throughout the progression of their lives. The app would target people of all shapes, sizes and age groups that genuinely want to improve themselves overall and would most likely require an external accessory such as a bracelet to closely monitor the activities of the user. The information would be encrypted - data stored on the blockchain to maintain confidentiality, collected on an individual basis, and would be used only on the app, not to be sold to other companies and advertising agencies to sell products for money. Helping the people around me better themselves and become better every day has always been one of my greatest passions, and I hope that one day I will be able to create something that is powerful enough to positively influence people the way that apps negatively influence people today. This is what motivates me.

Slot Composition

Frank Palmeri — Sun, 31 Oct 2021 21:24:55 +0000

In developing our card web-component, our group has had the opportunity to familiarize ourselves with the <slot> element on html.

Application

The <Slot> function allows for code to be passed along multiple elements found throughout a component. In the context of the card, content such as headers, icons, and text are scaffolded in order to be displayed in the correct position on the page.

Example

The following code contains the information our group chose to display on our learning cards

updated(changedProperties) { changedProperties.forEach((oldValue, propName) => { if (propName === 'type' && this[propName] === 'science') { this.myIcon = 'beaker'; this.header = 'UNIT 1'; this.subheader = 'CHEM CONNECTION'; } else if (propName === 'type' && this[propName] === 'idea') { this.myIcon = 'lightbulb'; this.header = 'UNIT 1'; this.subheader = 'LEARNING OBJECTIVES'; } else if (propName === 'type' && this[propName] === 'question') { this.myIcon = 'question'; this.header = 'UNIT 1'; this.subheader = 'DID YOU KNOW?'; } }); }

As you can see, the use of the commands this.myIcon, this.header, and this.subheader are used on each card, calling upon the information that is needed to be displayed pertaining to the categories 'LEARNING OBJECTIVES', CHEM CONNECTION', AND 'DID YOU KNOW'.

In order for the underlying information to be rendered under the correct header and sub-header, it is called upon using this.type and scaffolded using <slot> to format.

Example:

render() { return html` <learning-scaffold> <learning-banner slot="banner" type=${this.type}> <div class="header" slot="header">${this.header}</div> <div class="subheader" slot="subheader">${this.subheader}</div> </learning-banner> <learning-body slot="body"> <slot></slot> </learning-body> </learning-scaffold> `; }

The use of a <slot> eliminates the need to manually input information throughout each element, making the development of a web component less redundant and more efficient.

The result of the code above has yielded the following result:

The repo containing the code used in the examples can be found below, and I encourage those who are looking to learn more about the <Slot> element on HTML to check it out.

IST-402-Group-1 / project-two

Cards as Web Components

Frank Palmeri — Wed, 27 Oct 2021 21:03:11 +0000

The Project

Our group will work to build a web component version of a card. Each card will contain multiple elements: a header, banner, icon, and body, which will be grouped according to topic and displayed accordingly.

Considerations

In completing this project, our group is aware that we must be able to combine and display each element found on the card while taking into account considerations such as adaptive page sizing, scrolling, customization, and correctly grouping the elements on the card.

Having completed the CTA button from the last project, we are confident that the implementation of action events and state changes will be a strength going into this project, but we are fully prepared to take the necessary steps to familiarize ourselves with concepts that we have not yet worked with - such as accessibility, security, content flexibility and named slots.

We are exited to begin our work on this project, and look forward to learning more about web components.

Web Component - Progress

Frank Palmeri — Wed, 27 Oct 2021 20:15:47 +0000

The Web Component

The Web Component that my group has been assigned to work on is a CTA (Call To Action) button, essentially found on every well-designed website on the internet that allows the user to interact navigate to another page. They may contain functions such as hover, displaying that the clicker is on the button - prompting a response in appearance in the button, as well as other characteristics that provide visual feedback to the user.

Concepts

As I have not worked directly on the technical aspects of web design before this class, getting to learn about all of the different components that go into a CTA button has been a very informative experience. Some concepts that have proved to be difficult during the completion of the project were in positioning the button on the page, linking the button to the external website, implementing an icon, and resolving merge conflicts on GitHub.

Working in an open-source environment has been extremely beneficial in getting inspiration from peers, and for resolving issues with code on a timely basis. Overall, working on a web component for the first time has allowed me to learn a lot about the way websites function, and about the complexity that goes into creating simplicity on an interface.

GitHub Repo

IST-402-Group-1 / FPHHbutton

Web Components

Frank Palmeri — Wed, 27 Oct 2021 19:12:07 +0000

During Week 3 of class, our group installed four boilerplates in the repo: Angular, Vue, React, and StencilJS.

While some boilerplates are easier to find than others, there are use-cases for each and commonalities among them.

Similar Characteristics

Each boilerplate contains a package.json file, and are all used to create a web component. Each bring about their own unique benefits, and the choice to use one over another varies from project to project.

Ease of Use

When determining which boilerplate is the easiest to use, it can be said that using Vue would allow the user to create a web component from the command line without the use of another GitHub repo, making it a solid choice in terms of starting up a new project. This accessibility would make Vue the DX I would prefer to use for building an app.

GitHub Repo:

IST-402-Group-1 / IST402

Installing open - wc on Mac

Frank Palmeri — Sun, 29 Aug 2021 21:47:17 +0000

What you will need

Mac computer with administrative rights
NodeJS/NPM
VSCode IDE

Step-by-Step

Once you have downloaded and installed the correct versions of NodeJS (https://nodejs.org/en/) and the VSCode IDE (https://code.visualstudio.com/download) on your computer, create a folder on your desktop and name it something applicable to the projects you will be working on. For the sake of the tutorial, I will be naming it "projects". Once your folder is created, 'Ctrl' + click on it and select the setting "New terminal at folder" to access the terminal.

Once the terminal is open, enter the command:

npm install -g yarn

followed by

npm init @open-wc

If errors occur with either input, type "sudo" followed by the command that was displaying an error.

Example:

sudo npm install -g yarn

sudo npm init @open-wc

Once you are prompted with the screen that displays Open Web Components Recommendations:

Use the arrow key to navigate towards the option that says "Scaffold a new project"

Once you have selected it, you should then select "Web Component" to Scaffold

At the next prompt, use your spacebar to toggle each of the options Linting, Testing and Demoing using your arrow key to select each

When prompted if you would like to use typescript, select "No"

When asked what you would like to name your web component, input "hello-world" exactly

When asked if you would like to write the file structure to the disk, select "Yes"

When you are prompted with the option to install dependencies, select the option "Yes, with yarn"

If done correctly, your screen should display a message that says "You are all set up now!"

All you will need to do from there is run the command cd hello-world, followed by npm run start to launch your browser.

IST 402 - Introduction

Frank Palmeri — Sun, 29 Aug 2021 21:06:15 +0000

Background

My name is Frank Palmeri and I am from Long Island, New York. Over the past three years as an Information Sciences and Technology major at Penn State, I have completed courses covering a wide variety of topics such as application development, human centered design, database configuration, enterprise systems integration, and many others that have provided me with an insight on the various ways in which humans interact with technology. Through working on a diverse set of projects, I have been able to learn multiple programming languages such as Python, Java, and SQL that I am able to use on future projects. Over the summer, my internship with Penn State provided me with the opportunity to collaborate on projects pertaining to information security, data migration, and project management that will have allowed me to further expand upon my skillset in the technology space.

Why web development?

As online exposure quickly becomes a metric in which a businesses success can be measured, it goes without saying that web development is a commodity that increases in demand by the day. As I have learned many skills throughout my academic career that have become a prevalent part of business transactions and operations, learning JavaScript will provide me with the ability to create functional tools and websites that will allow me to add to my portfolio of work and expand upon my knowledge of the industry. I look forward to learning new skills throughout the semester and completing some new projects in this class.