DEV Community: Fawaz1077

Project 2: Final Journal Entry

Fawaz1077 — Sun, 09 Apr 2023 22:49:24 +0000

Both me and my partner can both agree that this project has had it's ups and downs, but we are happy with our ability to produce the final outcome. Making sure everything was perfect down to the minute detail taught us that following orders and not being creative really does take a toll on your mental health, but it teaches you a thing or to about life.

For our project we ended settling for about 12 elements within our main HTML as you can see below. The creation of these elements allowed us to create the outcome of the badges that are displayed on the screen. From the design, to images, to content, these elements allowed us to effectively display the badges in a presentable manner.

  constructor() {
    super();
    this.version = 'STARTING';
    this.badgeName = 'Amazon Cognito';
    this.badgeIcon = new URL(
      "https://www.drupal.org/files/styles/grid-3-2x/public/project-images/553dbabbd287c26ca83aef42.jpg?itok=ruAqqobg"
    ).href;
    this.badgeDescription = 'Learn the basics of how Amazon Cognito works, and how you can use it to create User Sign In, Sign In, Access Control, User Pools, and Identity Pools';
    this.link = 'https://docs.aws.amazon.com/cognito/latest/developerguide/tutorials.html';
    this.creatorName = 'Joshua Hantman';
    this.badgeCompletionTime = '4.0 hours';
    this.stepOne = 'Creating your first Lamda Function';
    this.stepTwo = 'Putting in your Hello Lamda Node.js code';
    this.hoursCompletionStepOne = '2.0 hours';
    this.hoursCompletionStepTwo = '2.0 hours';
    this.hyperLinkText = 'Amazon Cognito Info Link';
    this.pfpImg = 'https://pbs.twimg.com/profile_images/1605284457602338822/xISpy4TU_400x400.jpg';
  }

The hardest part of this project, as many others within our class can agree with, was getting the search bar to actually work. The designing process of the cards and filling them with content and creating the API and making sure everything looked presentable were all no match for the mighty search bar function. The idea of it lingered through our minds week after week as we got everything else within our project in order. And as the clock was ticking, and the project was set to be due, a singular video, dropped by Mr. Bryan Ollendyke himself saved us all. Getting the search bar to actually search for stuff on the page was nothing but a mystery to us but once we were given an example of how this may work, we implemented it and got it to work!

And on the other side of that, an easier portion of this project was managing the content within the badges to look neat and tidy, as all this took was some simple CSS and dedication.

 firstUpdated() {
    const ach = this.shadowRoot.querySelector(".accord-header");
    ach.addEventListener("click", () => {
      const accordianContent = ach.nextElementSibling;
      const accorianImg = ach.querySelector('.dropDown');

      accordianContent.classList.toggle("collapse");
      accorianImg.classList.toggle('rotate');

      if (accordianContent.classList.contains('collapse')) {
        ach.style.borderRadius = "6px";
      }
      else {
        ach.style.borderRadius = "6px 6px 0px 0px";
        accordianContent.querySelector('.accord-body').style.borderRadius = "0px 0px 6px 6px";
      }

    }, false);
  }

Overall, this project has been a great learning experience, and gave me a glimpse of how through suffering and a deadline, you can produce something that looks half-decent.

Journal Entry 3 - Obstacles, Success, Misery.

Fawaz1077 — Mon, 03 Apr 2023 03:05:10 +0000

Real progresss has been made towards the final goal of project 2. My partner and I have brainstormed and formulated outcomes that gave us decent looking outputs to what is required of us.

Firstly, the thing we needed to get down first was the badge itself, and that had it's own obstacles that we had to overcome. The main issue we rain into was getting the card to collapse and uncollapse all together instead of having two seperate blocks just parallel to each other.

(Previously it was two blocks when hitting the collapse button now it's one unified one)

The making of the actual content within the badge was not very hard however we did run into some issues when trying to import the necessary pictures from the icons libray the first time around. However, we tried again another day and got it to work (we believe there was an issue with the icon website the first time).

The search bar seems to be the final boss for our case but we have managed to make some progress. In theory,to search through an API and render the results, we listen for the form submit event and retrieve the user input. We then use the fetch function to call the API with the user input and wait for the response. If the response is successful, we handle it by parsing the data and rendering the results in the UI.

Here is our honest attempt at a diagram showing what happens from user input, through machine sending value, to re-rendering on the page:

A thought provoking question: "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?"

Answer: Microservice architecture is a useful approach for media streaming platforms such as HBO max or Disney plus. By breaking down different components of the platform into separate services that communicate with each other through APIs, this architecture makes it easier to handle high traffic loads, scale up or down individual services as required, and improve development and deployment times. Additionally, teams can work on different services independently, which can speed up the development process. Overall, microservice architecture can help media streaming platforms to improve user experience and stay competitive.

We must power through this last week of working on this project and get everything working sharply. Our progress has been slow and steady but we will pick up the pace and grind the remaining tasks out. Tune in next time to find out whether we failed this project or not!

Journal Entry 2 - The Process

Fawaz1077 — Mon, 27 Mar 2023 00:12:52 +0000

We have commenced the work of project 2 and we're excited to share our progress so far.

To get started, we looked at Flight and Fawaz Nice Card as references for our project. Our first goal was to create a single web component that was identical to the badge component on the Penn State Badges website. We used concepts we learned from Project 1 such as the details button, card layout, and this.image to create the component.

While we have made progress, we have encountered some issues along the way. One of the main issues we are facing is that we have been unable to get the drop down button to move to the right side. We are currently working on finding a solution to this problem.

Our next priority is to fix the web component to be identical to the one on the website. We are unsure how to solve the problem of moving the drop down button to the right, but we are actively working on it.

If you take a look at our Vercel link, you'll see the problem of how it's not the same. Despite the challenges, we are making steady progress towards our goal and are determined to deliver a high-quality microfrontend that meets all the requirements outlined in the project.

As we continue working on our microfrontend, we're excited to explore more web components and see how we can use them to deliver a great user experience. We'll be sharing our progress along the way, so stay tuned for more updates!

Journal entry 1 - The making of something magical

Fawaz1077 — Mon, 20 Mar 2023 01:52:13 +0000

As we embark on our project to build a microfrontend, we are excited to share our initial thoughts and ideas with you in this first article of our series. In this article, we will be focusing on the scope of the project and our initial conception of how we will approach it.

Firstly, let us introduce ourselves. We are a group of college students working collaboratively on this project, and we are enthusiastic about learning and experimenting with microfrontend architecture.

To begin with, we have identified the main goal of our project, which is to create a searchable interface using web components that are delivered via Vercel endpoints. We plan to create at least three web components that work together to deliver the user experience we are aiming for.

As a part of our initial conception, we have identified the two UI options we will be working with - the Badge UI and the Collapse UI. We will be using the Badge UI as a dashboard for a high-level search, where we will be showing cards as "badges." The Collapse UI will be used to show details in a collapsed fieldset, which will expand when the user clicks on it. For this, we will be using either the summary/details relationship or a navigation-collapse component.

We have also created an API specification in JSON format, which will be loaded from an endpoint (/api/search). To enable users to interactively search, we will include a search input and a button to execute the search. Once the user hits the search button, we will use a .map method to update the search results visually.

As we move forward with the project, we anticipate needing specific properties for our web components. For example, the Badge UI will need an image and a title, while the Collapse UI will require a title, a summary, and a detail field. We will also need data to come from the backend to make our components work, which will be delivered via our custom API endpoint.

To give you a better idea of our initial conception, we have included a screenshot of our API specification in JSON format. This will show you how we plan to name the elements involved and what properties we anticipate needing.

We will also be using concepts from our homework, such as importing and using @lrnwebcomponents/simple-icon and @lrnwebcomponents/simple-icon/lib/simple-icons to get access to an icon library. We will be using these icons to enhance the user interface and improve the overall user experience.

In conclusion, our first article in this series has focused on the scope of our microfrontend project and our initial conception of how we will approach it. We hope that by sharing our thoughts and ideas with you, we have given you a glimpse into the process of building a microfrontend. In the upcoming articles, we will dive deeper into the technical details and share our progress as we work towards our goal of building a functional and visually appealing microfrontend.

hw 7 questions on articles

Fawaz1077 — Mon, 27 Feb 2023 02:42:12 +0000

What are the challenges associated with platforms in web development?

Platforms can present several challenges in web development due to their complexity and the lack of standardization across different platforms. Specifically, platforms like React, Angular, and Vue can be difficult to learn and use, leading to inefficiencies in web development.

How can web components and VanillaJS standards be taught in a more approachable way?

To make web components and VanillaJS standards more approachable, it is essential to provide comprehensive documentation and tutorials that simplify the language used to describe these concepts. Furthermore, using more accessible terminology can make these concepts easier to understand.

What tools are the easiest to work with in web development?

As a new developer in the field of web development, I have found that some tools are easier to work with than others. One tool that has been particularly approachable for me is Bootstrap, which is a front-end development framework that allows developers to build responsive, mobile-first websites quickly and easily. The framework provides pre-built components, such as navigation bars, forms, and buttons, which can be easily customized to suit the needs of the project.

What aspects of web development tooling are confusing and what is intuitive?

In my experience as a web developer, some aspects of web development tooling can be confusing, while others are intuitive. One aspect that can be confusing is the sheer number of tools available, as well as the varying degrees of documentation and support for each tool. This can make it difficult to know which tool is best for a particular task, and can lead to frustration and wasted time. Furthermore, some tools can be difficult to set up and configure, which can be a barrier to entry for new developers.

What additional resources are necessary to understand web development concepts?

Overall, the article suggests that a combination of documentation, tutorials, examples, and online communities can be effective resources for developers looking to gain a better understanding of web development concepts.