Project 2 Intro

• Writing the 1st article in a series about the scope of what your going to be building

In this project we will need to improve this webpage in a number of ways. On the front end, we will need to make this webpage a lot more user friendly by including search and filtering which will aid the user in finding individuals with valid credentials for which they are looking for. In this starting state, the user will have to manually click on each profile and hope that the profile has the credential they are looking for. On the back end, we will have to do some “micro scaling” in the code to make it easier to update.

In its current state, should the creator of this webpage leave the company while the webpage needs a massive update to remain relevant, we would be in a compromising situation since only the creator could make such changes to the monolithic structure of the webpage. If we microscale different aspects of the webpage, let’s say the badges themselves, then when an update is needed we can change the very aspects of the webpage without disturbing the whole structure.

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

When it comes to encapsulating the project, the overall webpage would be a top-level element. This means that it would be equivalent to the card-list or index.html files in Project 1 in terms of hierarchy. We could call it “badge-list.” Next, we should have three second-tier element types. The first of these would be the individual badges. We could just name this element “badge.” The second would be the search bar that is necessary on the website, and it could be called “search-bar.” The last would contain the function necessary to transform JSON data into usable text. This could be called “badge-information.” Finally, the third-level of elements would include all of the property values that are needed to represent reusable and scalable variables.

The most important of these properties would be the one carrying our image data through the Meme-Maker web component. It could be called “badgeImage.” These would be initialized inside of the “badge” element in order to allow structuring of the element. However, the data for each field would be transmitted by the “badge-information,” which gets its information from JSON files instantiated inside of the /api/ directory. We could name the main file in the folder “information.json.” This performs an important job by allowing serverless functions to take place.

• What properties do you think you'll need

We would need a title property of type String for the visible name of each badge. A badgeImage property of type String is also needed for the icons and pictures to have an address to render. Additionally, a description property of type String is required for placeholder text in a tag. The same is necessary for creatorName, completionValue, and stepInfo properties.

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

Concerning the backend, we will have to know the variables related to all the badges. This will make things a lot easier since the badges contain similar variables such as; who made them, description, links to relevant sources, and steps needed to complete. However, these variables change between the different badges so in order to make this aspect of the project most efficient we’ll require a map of which variables for which badge. It’ll be a pain since maps have never been my partner or my own specialty. While the design structure will be decided by the properties on the frontend, the actual data that they display will need to be loaded in from an API on the backend.

• Either using a screen cast, taking screen shots, links to your code, show how you'll apply concepts from the Homework Relate it to what you'll have to do in order to pull this off for Project 2

This is how we’ll import the images need for the badges

This is how we will implement the descriptions for each of the badges. Although it won’t be exactly the same, I will use some selectors to get the descriptive variables.

This demonstrates the basic setup for an API’s JSON data:

This demonstrates the “badge-information” file which acts as an interpreter for the API:

• 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

In order to accomplish these changes for project two we will have to change many aspects of our first project. The first thing to come to mind is to find out which components work the best and simply change the variables to fit the variables of the new project. However, since this new project must look exactly like the format of our given examples, we will need to do extensive work in CSS to make the presentation look presentable.

Concerning the JavaScript portion, we will have to make some changes, especially concerning the collapsible features, but in many cases we will be working from scratch to properly display the progress of each badge. The most difficult portion in my opinion is the filtering of badges which will require extensive google searches. This makes the coming project difficult but not overly daunting.