DEV Community: Zach

Project 2 Final Post

Zach — Tue, 11 Apr 2023 05:38:27 +0000

Hello!

I am excited to share with you the results of my recent project to recreate the badgesapp.psu.edu website with a search function. While the project did not go entirely as planned, I am proud of what I was able to accomplish and believe that others can benefit from my work.

First, I was able to create a semi functioning website that looks and behaves much like the original. Users can view different badges, however there is a small issue with the search function.

Like I said before, I did run into some difficulties when trying to implement the search function. While I was not able to complete this part of the project as I had hoped, I was still able to learn a great deal about how search functions work and what I need to do to improve my skills in this area.

For those who are interested in seeing my work, I have made my code available on GitHub https://github.com/ADeo123/dashboard. You can browse through the various files and see how I approached different parts of the project. I hope that this can be a helpful resource for others who are working on similar projects or who are interested in learning more about web development.

I have also created a running demo of the website, which you can access at https://dashboard-adeo123.vercel.app/. This will allow you to see the website in action and get a sense of how it looks and behaves. I encourage you to check it out and let me know what you think.

Overall, I am happy with what I was able to accomplish with this project, and I believe that it can be a helpful resource for others who are interested in web development. While I did encounter some challenges along the way, I learned a great deal from the experience and am excited to continue working on new projects in the future.

Project 2 Update

Zach — Tue, 28 Mar 2023 07:16:32 +0000

We first followed the instructions from the previous assignment on setting up the api file, first we created a folder called api, and then we added a list.js file which would help us interact with the json list.
We first attacked, the list aspect of our code, once we had the api file containing list.js setup, we then created the different fields that would need to be populated for the card to work properly.
We have not come across one as of yet.
CSS and HTML aspects, we are making sure to follow a similar style of building when it comes to basic card design that will then be replecated.
Our next priority is to get the search functionality set up so that we can search for the cards in the list and making an NPM package for our card so that we can simply call it when we are programming the card functionality
We are unsure of how to solve the search functionality, and how to get it integrated with the rest of the program.

Scoping for Project 2

Zach — Tue, 21 Mar 2023 07:33:34 +0000

Here is where we are conceiving the API for the elements involved with completing this homework assignment.

The properties that I think we'll need for completing project 2 are things such as titles, descriptions, and possibly a logo or image for each of the items in the list of things that we will have to post on the web page from our api.

Specific information on things such as the pathing to an image, or the name of one of the specific list elements will need to come from the backend to be able to be displayed on the frontend or running version of the web application that we will create.

A list of information in a .json file will likely be used.

A render function to render the specific component that will make the list of items show up on the application will be created in order to format how the properties and elements will be displayed.

We will attack the problem and create a solution by using several of the things that we did in this example homework assignment to be able to successfully deploy the listed information from the api.

My perspective as a new developer

Zach — Tue, 28 Feb 2023 06:42:06 +0000

What is confusing about platforms?

Because platforms frequently have various syntax and standards, it can be challenging for new developers such as me to transition between them or learn them all, which might be confusing for inexperienced developers like me. Moreover, platforms may support web components to varying degrees, which can lead to incompatibilities.

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

By offering clear and straightforward documentation, tutorials, and examples that show how to utilize them in practical situations, web components and VanillaJS standards could be taught in a way that is more approachable. Also, including interactive tasks and tools can aid students in understanding the topics and gaining practical experience.

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)

Due to the fact that web components are built on well-known web standards like HTML, CSS, and JavaScript, some developers find them to be simple to utilize. They don't need to be used with a specialist build tool or a laborious setup procedure, and can be used with any front-end framework or library, including VanillaJS. Web components are also modular, which enables reusing them across many projects and improving the organization and maintenance of the code.
Web components have also been adopted by a number of front-end libraries and frameworks, including Angular and React, giving developers extra resources and tools to work with. It might also be simpler to start using web components and construct reusable custom elements with simplicity thanks to the availability of open-source frameworks and tools like LitElement and StencilJS. In general, using web components can be a simple and practical way to build reusable web components.

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

HTML, CSS, and JavaScript are only a few of the online standards that are used by web components. Hence, rather than offering a new language or framework to learn, tooling for web components frequently focuses on making it simpler to design and deploy bespoke pieces. In general, VanillaJS or a specific library or tool, such LitElement or StencilJS, can be used to construct web components. These libraries can offer more features and convenience, but they can also make the development process more difficult. Developers could find the following web components tools features perplexing or difficult:

Web component support: Not all browsers are compatible with web components, and some browsers need polyfills or other libraries to work properly. Developers must make sure that their web components function properly on all supported browsers and hardware.
Build tools: To bundle and optimize the code, several libraries or tools for web components demand the use of specialist build tools like Webpack or Rollup. It can be difficult to set up and configure these tools, and it can be necessary to be familiar with other languages or frameworks like TypeScript or Babel.
The use of Shadow DOM: a technology that enables programmers to encapsulate the styling and behavior of a custom element, is one of the essential characteristics of web components. However, developers accustomed to dealing with conventional HTML and CSS may find it more difficult to style and operate the component when Shadow DOM is employed.
Testing and debugging: When used in conjunction with other front-end frameworks or libraries, web components can present new testing and debugging issues. The web components that developers create must be simple to test and debug, and they must also function effectively with other application components.

Despite these obstacles, many developers believe that web components' advantages—such as reusability, modularity, and flexibility—outweigh the limitations of using them. It is feasible to build reliable and useful web components that can be utilized across various projects and platforms with the aid of specialized tools and libraries and an understanding of the underlying web standards.

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

I needed to read up on the following subjects in order to understand web components:

Shadow DOM: I had to comprehend how it functions and how it makes it possible to encapsulate styles and markup because Shadow DOM is a crucial component of web components. On the websites for Google Developers and the Mozilla Developer Network, I discovered some useful tools.
Templates: In order to provide the markup for my unique elements, I had to learn how to use HTML templates. On the Mozilla Developer Network website, the HTML Templates area proved helpful in this regard.

Overall, the additional readings improved my understanding of the principles, characteristics, and use of web components to my projects.