DEV Community: JoeVan21

IST 256- Joseph Vanacore & John Szwarc (End of Project 2)

JoeVan21 — Sun, 09 Apr 2023 21:08:03 +0000

How many elements did you end up going with? Why did you break it up that way?

When we first started building the code, it seemed like we only needed to work on 2 elements at most. But as we continued with progression, we saw that splitting up the different tasks into different elements was the easiest way to go about the build. We divided this code up into 4 different elements within the "src". One element contains all of the badge list aspects of the build, the second element contains a template of what the descriptions for each badge would consist of as well as links provided in that section of the build, the third element consists of the search bar functionality as well as some imports to support that element, and lastly we made an element for our step lists which holds data such as names, images, and and our arrays with some CSS to support the badges. We broke up the elements in this way to make it easier for our organizational skills and so that the overall code build would run smoother will the other elements.

What was the hardest aspect of this?

There were many challenges throughout this project, however one of the hardest aspects of this was the build and connectivity between the code and the api's functionality. My partner and I were stuck on a specific part in which the code wasn't displaying correctly on the local host visually. The badge list would display horizontality at times and the CSS would change randomly and lose color or images. This problem persisted for a day or so until we figured out the solution which include some api work and a few missed ";" to close off some lines of code fixed the issue. We also had some issues with GitHub's fork and merge work, I would try and merge some work into the build through GitHub however we kept running into many errors in which I had to delete and keep creating multiple forks so that my work would merge correctly. There were some instances where the code I implemented never transferred over, so to make it easier we primarily used one machine to complete this project. The creation of multiple code-pens for testing and examples also helped us through this issue.

What part of this project was easier than you expected?

After researching what exactly needed to be done for the project, the overall basis of making the image tags or creating the CSS behind the badge lists were the easiest part of the project. Since we had to create similar features from project one such as CSS design or HTML elements to work with JavaScript, the start of the project was way easier than expected due to our prior resources and knowledge.

Demo of Code:
Link to code: https://github.com/Jps709/badge-list

*Below are Screenshots and Explanations: *

(Result of Code)

(Here are elements plus our directory for the code build)

(Here is an example of some of our api work)

(These Next Images are Elements from src)

(Badge List)

(Badge Template)

(Search Bar)

(Step List)

IST 256- Joseph Vanacore & John Szwarc

JoeVan21 — Sun, 02 Apr 2023 23:01:01 +0000

Our Progression:

So far, my partner and I have progressed a lot from knowing nothing about card lists and API's to actually building one for the current project. We completed code front-end wise, working with badge building, making the images work with the badges, create CSS code to make the badge list look appropriate to our assigned project, and currently completing the search bar aspects and build. We still need some work on our collapse methods and API implementation but our progress has been really efficient up to our current point.

How did you get the relationship between Searching and rendering results working?

We haven't been able to successfully figure out a unique way to make the rendering and search results working yet. We have our search feature functionality however we are still working to progress on this relationship. Once the functionality is successful I will include working relationships within our results.

Draw a diagram on draw.io for user interaction pattern. What happens from user input, through machine sending value, to re-rendering on the page.

Think of a real world use-case from industry (Media streaming, youtube, corporate, cable company provider, web platform, etc) where micro-service architecture could fit into their business context. How could we use this approach to solve a real problem at a company currently using a monolithic design architecture?

There are many different companies around the world who use different types of methods and micro-service types into there security business context. They use this by incorporating websites that offer many different digital information such as design, art, descriptions that can help boosts a companies wellbeing. For example, A company such as YouTube lets the users search for there favorite types of videos and works through the front-end coding systems to give out the information requested by the user in the search filters.

IST 256 HW 11- Joseph Vanacore & John Szwarc

JoeVan21 — Mon, 27 Mar 2023 03:01:42 +0000

How did you start?

When we began drawing up different idea and patterns for our badge list, we decided to research more about badge lists, how they are created, how API's can be implemented in both the front and backend code work. We also looked at project 1 and how we can implement similar tools within HTML, CSS, and JavaScript. Overall, research and understanding API's and badge lists was our start goal so we could understand exactly what we are working on and the tools needed for the success of our project.

What did you decide to attack first?

We decided to work with more of the front-end side of the code. Our current main objective is to create functioning badge list layouts, images for the badges, and a functioning collapse/description box. So far we have been successful when it comes to building the layout for the badge lists. The images below show the code and the outcome of the layout for our badge list layout.

What issues have you had?

We have ran into some issued implementing the description drop down box to display details within each badge list. This is an issue that we are now focusing on together so a fully functioning collapse interface will work within our project. We also had some minor image issues, when trying to implement picture icons for the badges, the code doesn't process it correctly which is our next focus after we fix the collapse issue.

What concepts translated from Project 1's card?

Most of the CSS terms and code was translated over from project 1. In the build of our badges we configured CSS code such as padding and width making the badge list looks appropriate to our end goal. Currently we are also translating some HTML from project 1 and personal cards into the badge list so that it is formed on the web components properly. The picture below is an example we translated from project 1 into project 2.

What's your next priority?

Our next steps beyond fixing and finishing our current issues presented in our code right now, we want to implement new methods to the application programming interface to connect our deployment to other services. We want to ensure we succeed in creating backend code that will be successful and make out project fully functional. We will begin this process but researching topics and terms within back-end styles of code to familiarize ourselves with new terms and tools that we haven't been exposed to yet. Once we gain more knowledge within the back-end style of code, that build will begin!

What problems are you unsure of how to solve?

Some problems we don't yet know how to solve is how to implement API's that will help our codes production through the backend. With front-end work, we are confused on how to make the description function to work visually. As we work and research more about this topic, I believe we will be more successful in finding solutions to these issues.

256 HW 10- Joseph Vanacore & John Szwarc

JoeVan21 — Tue, 21 Mar 2023 16:03:52 +0000

Include images of how you are conceiving the API for the elements involved and the names

As shown in the code above, the first screenshot shows the API input information that builds that clone of the card. It includes a description, name, title, image files and text code. This connects to the local host address thus updating the card so that it looks efficient. The second image shows the end of the API file, the first line "Cache-Control" keeps the shared cache up to 1800 seconds. The other lines classified as "Access-Control" allows origin requests from specific domains allowing certain HTTP methods to be put into place. To finish the API files, the last line ensures the resource be accessed via credentials. After all of this input, the files gets shot out to vercel to be published via local host.

What properties do you think you'll need

In JS we need properties such as "name", "title" including CSS properties "color", "background-color", "font-size", "margin", and "padding".

What sort of information will need to come from the backend to make this work?

First we would need to ensure that our Object, DOM, and array properties are correctly imputed into our system. Then the backend can use specific information gained by the codes API's and database queries to build that connect between the front and backend systems of a web component.

Either using a screen cast, taking screen shots, links to your code, show how you'll apply concepts from the Homework

(Shows the different implications, strings, and Boolean types being used within the card.)

(Some mild CSS examples that can be used within project 2 to assist in organization viewpoints)

(Constructor is going to be an important part of the project 2 build)

(To ensure a drop down details/information button can be activated)

Relate it to what you'll have to do in order to pull this off for Project 2

In project 2 we will be working with some backend components that we haven't been exposed to until now. We will need to research meanings for new terms such as API and figure out ways to implement that code into our current code project so that we can see how the web-components work behind the scenes. For example, knowing how the local host is published via backend code will be a necessity to the success to project 2.
Article one is a focus on scope and the activity we did in class. What is the project, what will things be named, how will you initially conceive of attacking the problem
For this project, we will be assigned a type of comp to work with and build using not only frontend tools but backend tools as well. We will be using some familar tooling such as properties, CSS styling, and core JS code while also being exposed to new components such as API's and connecting our project to versel and NPM. When it comes to naming the specific items at use, that will depend on if we continue to use our card from project 1 as a base or if we build something brand new. Making sure everything is named with an implication is very important into making the front and backend components to work. The first step to attacking the problem first hand is research. Find definitions to new phrasing and tooling like API's, explore vercel and figure out how the publishing works and the backend work of vercel. Find examples and new terms that can make our project better than expected. Once the research is done, applying our knowledge to the code styles of front/backend and using CSS styling to ensure our web-components are styled and designed the way wanted will be the key to attacking and figuring out anny future problems or issues we will run into.