DEV Community: AaronLobitana

IST 256: Project 2 DONE

AaronLobitana — Sun, 09 Apr 2023 19:06:41 +0000

My partner and I finally finished Project 2.

Our project was broken up into four different components. You could count it as five if you include badges array.

The first component was the badge-search file. It served as the home/landing page where all our other components are imported so that they can be rendered.

Our search-bar component was the first component to be rendered into our badge-search file. It took the input from the search bar and saves it into a variable. There was also a function in there that would detect whenever the input was changed.

Then, we have our badge-list component. This component included a significant chunk of the logic needed to make the entire application work. First, it had our updateBadges() function that would render the badge-array located in the API folder. This was all rendered by using a map in the body of the badge-list. When a user searches for something, that searched term is passed along to my searchThis() function. This function does the filtering based on the searched term and returns the array entries that match. Those array entries are passed on to the map to be rendered.

Those array entries would of course be useless without our badge-template component. This component has the HTML and CSS required to actually create the badges. This component was imported and rendered by our badge-list component. Then, the badge-list component is imported and rendered at the bottom of badge-search. This ensures that the badges are live updating, based on the search done by the user. The search-bar talks to the badge-list by passing in a property.

With everything put together, the badge-search component looks like this:

Now how does this look for the user? The user can type anything into the search bar like "Aaron". The filter will then look at all the properties of the badge-array and compare to "Aaron." If "Aaron" shows up anywhere in the badge, whether it was a title or a creator then the badge is returned.

If the searched term doesn't match anything, then none of the badges are returned.

I would say that there were two "hardest" parts. The first one is the conceptualization process. We were purposely given vaguer directions, since the point of the project was to emulate a real world scenario where you are given a task and it is up to you to implement it. We weren't told how to implement anything, so it was a wide open solution which made it tough for me at first. Progress was slow starting out, but once I had a clear plan in my head I was able to take it step by step.

The second "hardest" part was a technical issue. I found the search bar to be kind of difficult. To elaborate, I had trouble with taking a variable, saving it and then having that search-bar component talk to my other components. Another reason it was tough is that, once they start typing that term will keep changing so my components had to adjust to that. Admittedly, I was stuck here for a bit until I was able to get help from Professor Ollendyke.

I will say, the filtering function was easier than I expected. It was still kinda tough, but it was easier than I expected. I was fully expecting that to be my biggest hurdle. Taking Java was definitely helpful, since I kind of just treated that like I was creating a filter method in Java (with some JS tweaks of course).

Overall, it was a pretty tough project to start. But things got a little easier as I worked at it and asked for help along the way. Although it was definitely tough, it was still a pretty enjoyable project. Seeing the application work as intended was definitely a pretty cool feeling.

IST 256: Project 2 Progress Report

AaronLobitana — Sun, 02 Apr 2023 20:12:07 +0000

This weeks work was focused on the CSS and HTML parts to replicate the badges website we were tasked with replicating. There was a lot of CSS and HTML work to make sure that the page was ready for cards to be displayed. While I worked on this, Rob has been working to finish the card template. Hopefully soon, I'll be able to test my search function to see what needs to be changed or fixed.

I'm still not really sure how I am going to handle the search and rendering portions of this project. However, I do have a filter that is returning arrays, so I think thats in a pretty decent spot. I just have to figure out how to save the search bar input, and then send that over to my search/filter function and I'll go from there.

The diagram I have is my best idea so far. I think it should work but I'm hoping to do a lot of testing soon to iron things out from here. I think that we have some good parts here that we just need to put together in a way that'll accomplish our goals. Thats the biggest challenge for me right now.

I'd imagine that a microscale architecture like ours with help greatly with scalability. Rather than having this massive application with massive parts, you can split it up to make it easier to plan and implement. I'd imagine updating and revising the smaller parts would be much easier than editing one massive application.

The main thing I'm struggling with is how to connect my three components together. I've got my filter function in two different components right now because I'm not sure where to best put it. I'm working on taking user input and then send it to my function. How would that work? I'm not sure how I can transfer a variable from one component to the other. The other big problem I have is that even though my function returns the proper arrays, I'm not sure how to build the card using that information. That entire bit is very fuzzy to me and I'm not even really sure how to begin tackling that one.

IST 256: Project 2 Start

AaronLobitana — Sun, 26 Mar 2023 01:20:35 +0000

Write from the perspective of including answers to these questions:
How did you start?

My partner and I started off by dividing the work amongst ourselves. Currently, Rob is working on the badges while I try to get started on the search aspect of the project. We both recognize that the actual badge is going to take much less time, so I am planning on getting as much done as I can by myself and Rob will likely jump in and help.

We decided to tackle the badge first. Creating the badge was simple enough and it was a good way of getting started. I began with doing research on filtering through an array and trying to formulate a plan to make this work. I looked through a bunch of articles and examples and found that the array.filter() function pretty promising. I managed to create this search function but I believe I'm having trouble with my object typing.

My search seems to be searching correctly, since whenever I change the searched term, the amount of [object Object] is changing. I believe that it is returning the correct sections, so I just need to figure out a way to get this to return a badge element that we created. Rob's next priority is to finish the card so we can start testing my search function. While my priority is to polish my search and make sure that its returning the way its supposed to.
Luckily, the card making skills we learned from Project 1 translated pretty well into this project. However, the search api is a new concept to us.

I'm not really sure exactly what else I need to do to fix my search, I'll likely do some more research or ask for some help during class time.

IST 256 Project 2: Scoping

AaronLobitana — Sun, 26 Mar 2023 01:08:38 +0000

We will be building a 'badges' dashboard with a high level search.

For this project, we plan to keep the naming convention to be fairly generalized. We haven't yet decided on a concrete project title, but we considered the following: Badge Card and Course Card.

For the badge:

The general plan so far is to have at least three properties. We will have a title property, description property and a creator property. The icon is most likely going to be an element. The badge itself will be its own imported element, so we will dedicate an entire js file just for the badge creation.

For the search bar:
The backend should store the information or data of the individual badge card components such as the title, name, category, etc, making the search possible, this is the information we will need from the backend. (https://github.com/AaronLobitana/badge-search)

More information will be out soon as soon as my partner and I begin working and envisioning our Project 2. Specifically the second blog post of this series should contain more information regarding the process overall.

My Experience as a New Developer

AaronLobitana — Sun, 26 Feb 2023 17:40:14 +0000

1) What is confusing about platforms?

What's really confusing about frameworks and stuff is that some of them have very different syntaxes and way of doing things. When you are first learning web development stuff, they start you off with the basics. But as you begin to explore frameworks, some of them will have you unlearn things to learn the new way that the framework handles it. Once you are done with that framework and come to use something else, you may find that some of the syntaxes and tooling in your previous framework doesn't exist in others.

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

I like the idea of hands on teaching. I feel that bookwork is important and all, but I believe nothing beats sitting down and actually practicing it. Having hands on work with the basics of VanillaJS is my best bet. Properly splitting up the standards and work is also important because you don't want to make things seems unapproachable because of their complexity. Start of with the basics, and keep building the complexity as you go. I really just feel that we shouldn't overcomplicate the easy problems when first learning. I also don't like the idea of creating highly specific and framework exclusive questions. Having a single standard agreed upon may seem impossible currently, but I feel that would be very beneficial to beginners like me. Rather than being told that this is how this framework might do this, but only for this framework.

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)

I personally found Vue the easiest to work on as a new developer. When I first began working on vue, it was very easy to identify which file I had to edit. It was called HelloWorld.vue which to me seemed like a dead giveaway. It also helped that I was able to put all my HTML, CSS, and JavaScript in one file.

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

The entire idea of tooling is still kind of fuzzy to me. My best guess right now is that it is referring to the different features that different platforms and frameworks bring. It seems like fancy new features that make life more easier in some situations. It clicked to me pretty quickly why the author of the article wanted to minimize tooling. Since this complicates things and creates highly specific framework only problems and solutions.

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

https://www.sitepen.com/blog/intro-to-html-first-frontend-frameworks
I read this article to help me understand the HTML first approach. I like the idea of shipping portions of HTML separately to at least be able to ship functional product. Then the fancy interactive bells and whistles separately. Since users should at least be able to access the content first, then they can worry about interactivity.