DEV Community: Platinumfish

Final blog post for wrapping up badge query project

Platinumfish — Mon, 10 Apr 2023 18:40:38 +0000

My code's github repo- https://github.com/platinumfishes/badge-list

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

My partner and I went with four final elements that intersected with each other in the index.html. We decided on four elements because they each played an integral enough role within the project to warrant an entire element dedicated to itself. Our four elements were (1) Badge element, (2) Badge list, (3) Search Bar, (4) Page overlay.

The badge elements were the things being queried, and was our first element that we made. The badge list functioned as the thing that displayed what our queried elements were going to be with backend parameters, it also helped display all the badges upon initial page rendering. The search bar is the key query input that works with a .json file and badge list to get the user input to display the appropriate badges. The page overlay was purely visual, and helped organize our three elements into a more aesthetically digestible format.

2- What was the hardest aspect of this?

I would say the hardest aspect of this was the javascript logic connecting the backend to frontend, and just even knowing where to begin with it. Upon seeing our professor's example video, there were a lot of functions and methods that I would have never considered or didn't know about which were necessary to make the project work.

3- What part of this project was easier than you expected?

The easiest and most fun part was making the element parameters themselves, especially the CSS of each element and watching them fit together and produce the final result that you had been trying to get all along tickled a part of my brain that normal programming doesn't get to.

Questions about creating a web query system

Platinumfish — Mon, 03 Apr 2023 17:17:15 +0000

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

My partner and I have not yet implemented a working querying system. Although the search bar and front-end looks are all there and functioning, we have not yet been able to finish the product on the backend side. This step will be done soon, within this week in fact.

2- 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

3- 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?

A lot of major tech companies are simply monolithically built and incorporate microservices when necessary. An example listed above that would benefit from micro-services would be Netflix, since there are always lots of titles that change on there. Specifically, the loading of thumbnails and descriptions for shows can be outsourced to a microservice that delivers the content when it loads. Other suggestions could be Uber delegating the price determination of a ride to an algorithm microservice that determines the price based on their set metrics.

4- More questions you have / things your stuck on

How to do backend query with search-bar :c

Blog post about recreating website badges querying system- week 11

Platinumfish — Tue, 28 Mar 2023 01:12:59 +0000

This screenshot is the current state of the project to recreate the badges page that Liz and I are working on, only frontend developed

1- How did you start?

We started trying to recreate the template by going to the home website and using a tool called SnipCSS (chrome extension) that allows us to click on an element and copy it's style/html. We did this for all the necessary elements, put it in our own code, and trimmed a lot of "fat" off of the copied code because most of it did nothing.

2- What did you decide to attack first?

The frontend looks, because without that we cannot have any coherent basis. Liz worked on the badges as I worked on the search bar.

3- What issues have you had?

Most of our current issues stem from looking at the ocean of copied code from the base website, there really was a lot of material that was completely unnecessary and only served to make understanding the site/element layout confusing.

Then with the useful bits that we had left, we had to reverse engineer each element/class/thing to look at what needed to be done to then fit it into the standard of how we wanted it to look. We encountered some dependency problems along the way.

4- What concepts translated from Project 1's card?

Project 1's card really helped with basic understanding of workflow and syntax, and where to find things. Certain concepts that translated over were mostly debugging related, like how efficiently find why an element wasn't doing what it was asked because of dependencies.

5- What's your next priority?

To flesh out the overall presentation of the frontend and polish any quirks, and then to tackle the backend when we are ready.

6- What problems are you unsure of how to solve?

Too many to name, but one would be why certain CSS attributes don't apply to certain classes in a div but others in the same div work just fine.

The backend will also be tough and we might need some direction on how to navigate it.

Thoughts as a web dev newbie after a month and a half

Platinumfish — Mon, 27 Feb 2023 16:48:57 +0000

1- What is confusing about platforms?

The parts of each platform/framework that I failed to really grasp was firstly the syntax conversion. Learning some of the individual syntax of each framework was a hassle and the resources available for learning are not particularly digestible for newcomers. The second part was how each platform fit it's niche and why there were so many conventions for the same task of web development.

2- How could web components and VanillaJS standards be taught in a way that is more approachable?

Breaking it down bit by bit and explaining the reasoning behind each part of the process of making a full web page using JS/Web components would be ideal. A platform that does a good job of this would be W3 schools, as they also provide the ability for newcomers to return to their website as an information hub for all basic syntax and logic related needs.

3- 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)

None of them were easy to work with, but the least complex was Vuejs simply because there were not as many syntax changes as compared to vanilla JS. I like web components, but each little node required to get everything working left me and some others a bit lost in terms of how to accomplish each specific thing.

4- Think back on the tooling. What parts were confusing? What clicked with you immediately?

The confusing parts included implementing concepts like css variable states, importing other tools like meme maker, the shadowroot and working around it, and the building process (npm, all the selection options when making a new project, why the vercel build was not loading and it's errors), and finally the individual rendering and assignment methods (render(), properties, reflect, constructor(), export,

The understandable parts included HTML and CSS and they don't differ much from vanilla on each platform, as well as Vanilla JS although it took a lot more time than the latter two. Where to include things in the file architecture was also self explanatory after the first few times (where to put html css)

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

When doing the remediations to fit our individual card requirements, I found myself going to youtube videos (class videos mostly, along with others that explain specific functionalities of a method for example). In terms of readings, it was hard to derive anything exactly from stack overflow but occasionally other forums like Mozilla developer web docs did a good job explaining confusing concepts.