DEV Community: ethan

Project 2 Final Post

ethan — Mon, 10 Apr 2023 03:53:26 +0000

How many elements did you end up going with? Why did you break it up that way? I ended up with 3, although it was recommended to use 4. The badge template itself needs an element, the list, and the search button. The optional one was the overarching "app" to make communication easier but I tried going the route without it.

What was the hardest aspect of this? Definitely the communication across the elements. Although we had similar challenges in the prior project, this seemed like a step up from that. For many reasons, communication between elements in the web is significantly harder than simply including a class and passing an instance of it like you would in an OOP language.

What part of this project was easier than you expected? Setting up the badge lists and getting that rendering, since this was our second time through, it was much faster and less troublesome this time around.

GitHub: https://github.com/ethanxo/badges-list/
Vercel: https://badges-list-ethanxo.vercel.app/

Project 2 - Week 3

ethan — Sun, 02 Apr 2023 18:07:51 +0000

Since the last blog post, we have implemented:

an improved design for the search criteria drop box
proper icons for badges as opposed to a placeholder img tags
mapping in badges dynamically from preset list as opposed to a predetermined amount of objects hardcoded

Next up to work on/finish are:

having icons work properly (likely just an issue with my updates not pushing to github properly)
implementing primary and accent colors that work dynamically for each badge (likely through a reflexive attribute of some sort on the badge tag)
having the author text field loading properly with the rest of the fields (not sure why but its staying to its default value from the constructor
implement the "searching" or rather filtering of badges instead of mapping the entire list of badges in

User interaction pattern diagram:

Real world micro-service use case(s):

Microservices are typically preferable in cases where you want to aim for speed and scalability
One example in which this helped was in Walmart in 2012 when high load caused a string of system issues during seasonal peaks of activity
Walmart re-platformed core businesses tasks to microservices to help address this, their change resulted in: hardware costs dropping between 25-50%, 40% less power usage, prevented downtime during the aforementioned seasonal peaks, and improved integration with their mobile app resulting in more sales, and in turn, revenue.

Current preview:

The current Vercel deployment and code are viewable here:

Project 2 - Week 2

ethan — Sun, 26 Mar 2023 20:55:42 +0000

My partner and I started working on the "badge directory and search project" by working on the visual and structural side of things before diving into any API work.

This included laying the project out, getting it set up on both Vercel and GitHub, designing the main page visually and structurally, and designing an example badge visually and structurally.

So far there haven't been any issues aside from my laptop refusing to pull my partners code after merging the branches, which I solved by manually making the few changes from the pull request and pushing it myself to the shared repository.

Many concepts translated from the prior project done, including designing a card-like element, designing a page to contain those card-like elements, and setting up functionality to work with API to dynamically load badges.

My next priority will be starting and continuing to work on the API handler for the project as that's all there is left to do aside from filtering / searching which isn't very complex compared to API work.

I had issues with integration of API handlers and getting them working on the previous project as its unlike how I had previously done them, so that will likely be harder than the new concept of filtering through badges based on certain critera.

Below is a rudimentary preview of how the page will work with myself having designed the badge and the dropdown, and my partner having designed the search bar and button.

Week 10: Scoping out the Project

ethan — Mon, 20 Mar 2023 01:26:28 +0000

The following was written by my partner, I assisted and drove the coding part:

Writing the 1st article in a series about the scope of what your going to be building
from base card to new project we will be adapting the information to the new ones. this could include individual data for the new cards in the search engine. these individual cards also need to have the scalibility to be individually manipulated. we're also going to need to implement the search engine with a drop down menu that will help break down exatly what the user is searching for so that not everything is displayed and only the cards in that category.

Include images of how you are conceiving the API for the elements involved and the names
we are unsure of how to respond to this

What properties do you think you'll need
badge name, badge icon, badge color accent , badge creator, badge category

What sort of information will need to come from the backend to make this work?
need information like what to search for in the frontend

Either using a screen cast, taking screen shots, links to your code, show how you'll apply concepts from the Homework
https://i.imgur.com/DIyNwrA.png
https://i.imgur.com/JEkxfBR.png

Relate it to what you'll have to do in order to pull this off for Project 2
the card from p1 to p2 will need to be its own individual property with enough customizability that it can be individually edited while maintaining its shape along with the ability to individually be brought up/taken away from the search criteria

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
the project is the search menu with the cards. things will be named generally enough so that we can call a group of cards. an example of this could be badges_energydrinks, badges_juices, and these will all be individualized but within the same category.

Week 7 Writeup

ethan — Sun, 26 Feb 2023 19:02:36 +0000

What is confusing about platforms?
Although all content is on the same web platform, much of it doesn't use the platform, it uses frameworks and build tools that pop out of the woodwork and get superseded a few years later by another.

How could web components and VanillaJS standards be taught in a way that is more approachable?
Having web components and vanilla JS be the bulk of the content on the platform that is the web instead of these other frameworks that abstract from the platform heavily.

What did you find easiest to work with on 1st stab? (You don't have to say web components, this is an honest take, if it was Vue cool, but justify it) Web components, as mentioned in the question following this one, it clicked with me instantly and seemed a lot simpler than some of the other options we toyed around with. Maybe this is because it's more simple? I don't know.

Think back on the tooling. What parts were confusing? What clicked with you immediately?
Some parts I found confusing were the repository structures, file locations and formats, and the procedures used to render the HTML and include the script for the component in the main webpage. One thing that clicked immediately was open-wcs simple repo structure and concise, easy to understand files.

What additional readings did you have to do in order to make sense of things.

https://elisehe.in/2021/08/22/using-the-platform