DEV Community: jmgiannetti

Final Project

jmgiannetti — Mon, 13 Dec 2021 04:34:42 +0000

Overview

The final project for our class was based on issues within HaxtheWeb. The issues were introduced by our professor and my group was given "mark-the-words". The projects goal is to be able to select words from within a paragraph and have the system count which ones are correct and which ones are wrong based on the prompt. All the user has to do is select words within the paragraph that meet the parameters and they will be marked with a "+1" however any that are considered incorrect based on the words in the system will be marked "-1". You cannot change your answers once you submit them but you can retry the task meaning all selections will be wiped and you will reselect what you believe is right. An example is provide below:

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqwecl6yr6fvwrzrtsy0.gif

Code

The compilation of code includes NodeJS, HTML, and CSS. Using imported elements from LitElement, HTML, and CSS libraries allows us to complete this project using simplistic standards. The combination of code allows us to manipulate the aesthetics of the project while making sure that there are set parameters for the user which returns correct or incorrect selections.

Using spans within the paragraph we needed to make it so when the user hit submit the code scanned their selections and related those selections to the included words field.

Final Steps

There are some small bugs that need cleaned up and some aesthetics that need tweaked in order to compliment the subject matter. The code will need to be published to NPM as well but other than that the project is coming along well.

GitHub Link

https://github.com/IST402-Group-F/proj3-haxtheweb

Implementing Fonts in Lit

jmgiannetti — Tue, 07 Dec 2021 18:46:53 +0000

The class was assigned the task of creating learning cards based on the example below.

Google Fonts

Importing fonts allows the group to custom build the task in order to add their own personality while staying somewhat professional in presentation. Google fonts is a common choice and they have several types that you can choose from. The best part is that importing google fonts is very simple all you need is the code below

After you have the font package implemented then you can style the text using options such as font-family, font-display, margin, padding, size, color, etc...

Incase of an issue the swap feature allows you to set a backup font so that everything can still render. Without that you might end up looking at a blank screen without text if there is a loading issue.

https://github.com/IST402-Group-F/Project-2-Card

The link above connects to our repo if you would like to check it out!

True Passion

jmgiannetti — Tue, 07 Dec 2021 18:16:20 +0000

Finally coming to a close in another chapter in my book of life I want to share that I typically think about what I want to do and how I can do it. What is there in the world that I can try to provide to the best of my ability?

What would I create? What would it do? How would people use it?

If it had to do with technology I would create a website to share my philanthropist ideology while still providing services to the public for as little money as possible. If I could do more I would create a form of technology that is easily usable by many in order to increase my own wealth in order to correctly allocate to current and future concerns in this world. I am not sure what this might be just yet but I would make sure that portions of the sale automatically go to areas of need. In a perfect universe the products I deploy would be for everyone who can use it in their daily lives in order to make things a bit easier. I would use it to distribute messages that are important and crucial to the development of our still growing societies.

Unlimited time and money with my life skills and passion.

If money was not a concern and I had an infinite amount of time I would spend most of my life helping all I can. Giving money and servicing communities around the globe and even larger businesses with the correct intentions. I believe that if you have the time and the money (currently the rich of our world) then you should be giving back. No one should have a ludicrous amount of money and time while others aren't even able to find a minute to kick their feet up and relax. Ideally I would love to make that kind of money in order to provide for hospitals, schools, dying communities, and even create necessary companies to provide low cost care and services for those who cannot afford it. A specific example would be that our Earth is dying because of us so I could allocate any amount of money and time to find alternate solutions that could go into effect immediately in order to remedy the damage that we have already done.

I would socialize with everyone and anyone who needed it in order to restore hope and show them that there are people that want good in the world. There are people who want to make change but might not be able to afford the time and money that it takes to make these large scale changes.

There is still time.

I know I don't have a how yet besides I could use the existing options of websites and technological innovation but I have time to apply those to the how and make dreams reality. I encourage anyone to ponder their thoughts as well and think about how they can give rather than how they can take.

CTA Button Success and Difficulties

jmgiannetti — Wed, 20 Oct 2021 05:31:29 +0000

Success

When it comes to the CTA button there was little success due to my lack of knowledge regarding coding in general. I understand the logic behind it however which allows me to cross reference other individuals work as well as what the professor went over in order to create something I can call my own. Presenting code in class in a step by step way was also a help, especially when it came to the icons and how to import the packages.

Difficulties

As stated before my coding strengths are not what got me this far in my IT career. I have experience with JavaScript, Java, C++, and some swift however this experience has come with great deals of struggle. For some reason this aspect of technology does not come natural and without a teacher there to actually go step by step things become impossible. There was one specific aspect regarding the button that did not make any sense to me before someone explained it and that aspect was the hover feature. I never knew there was a special command that implemented the tab key to work for those who use the keyboard for website navigation.

Despite my struggles I was still able to create a functional button that met all parameters set by the professor.

https://github.com/jmgiannetti/CTA-button/tree/master

Web Component Frameworks

jmgiannetti — Wed, 20 Oct 2021 05:08:48 +0000

What commonalities are there between the boilerplate code?

The boilerplates that we looked at were Angular, React, VueJS, and StencilJS (even though stencil is different that the other three). The commonalities between these boilerplates lays with the fact that they all utilize HTML, CSS, and JavaScript to run. On top of that each have their own index.html file for custom components. Each of the boilerplates utilize multiple dependencies as well.

Which do you think is the easiest DX to get going?

VueJS seems to be the easiest DX to get going in a sense that it has the least amount of files and can be researched very easily. The components can be understood without a large amount of knowledge for that same reason which makes customizing it much easier and more convenient.

If starting to build an app tomorrow which would you prefer and why?

Due to VueJS being very simple to operate with this is what I would have to with. It requires very little which would allow for a quick app to lay some groundwork out. If I were to dive in and make something large in scale I would then use Angular or React due to their communities for help and future progress.

Considerations of Building a Web-Component

jmgiannetti — Sun, 10 Oct 2021 23:55:57 +0000

Introduction

Before we dive into how my group will deal with this web-component I want to shed some light on the subject so that any reader can understand the basics that go into creating it.

1.) Characteristics

Simply put what does this web-component have to it? Things like color, size, text, icons, placement, etc... anything that describes the component and gives it meaning.

2.) Accessibility

Can a regular use it? How about someone who is color-blind? What about someone who is blind? Can you use the keyboard to navigate the page? When it comes to creating something you have to consider anyone who might come across it.

3.) Security Concerns

This is more back end but you cannot have your webpage being manipulated by anyone online. You want to make sure that icons are secure and data related to the page are secure. How can this be done?

4.) State

When it comes to the state of the component each element must blend and cater to the topics covered on the webpage. States relate to things like math, science, and history or even lesson 1, lesson 2, and lesson 3. Each state covers different information.

Approach to Web-Component

The web-component in discussion will be a card. My team will be sectioning this component into individual tasks and then regrouping to collaborate and critique and improve each others work. Some of the the tasks will be regarding the major elements such as the icon, banner, scaffold, and card.

Managing Inconsistency

Since the work will be divided the code might seem inconsistent due to each persons coding preference. In order to maintain consistency each member will include notes within their portion of the code so that it can be followed regardless of how it is written. If someone writes something and the group decides there is a better way to write it then it will be updates but otherwise it will be left alone.

Difficulties

Generally communication and production of the cards on schedule will be hard. This is from my point of view due to the lack of coding strength from myself. The project as a whole will require exponentially more effort and collaboration in order to maintain integrity. As stated above there is also the concern of inconsistency which can be negated as long as each member documents their code and what it does.

What is more manageable due to last project

What should be more manageable is the documentation of code and the storybook which addresses the content of the project to anyone who decides to run it.