Implementing g1 landing page for "Desafio Globo" using Vanilla JS, HTML, CSS and JSDoc.

[bwprado]

Overview:

This PR is part of the "Desafio Globo" and it its the recreation of the g1.globo.com landing page following the challenge directives found on Portifólio Recrutamento.

The directives were all met and completed accordingly with some amount of freedom, for example the top 3 news section was closely matched to the current g1.globo.com version.

Selected Approaches:

Some other different approaches were taken as parte of this challenge:

• Created an endpoint on the API to simulate an ads database.
• Created an endpoint on the API to simulate a top 3 request that returns the top 3 news on that day based on server business logic.
• Created a WebComponent to encapsulate the News List, that can be reused on other parts of the website.

What could be done differently?

As time as a constrain, many design and code choices were rushed, and many changes could be implemented on the future, including unit testing and better component encapsulation.

Here is the list of things that can/could be changed:

1. Testing.
2. Implement CustomElements for other components.
3. Ad alocation should be displaced to the Api so the front end would not interfere with the business logic.
4. Better BEM classes naming.
5. Maybe render on the server and hydrate later for better FCP.
6. Improve image loading for performance reasons.
7. Improve error handling on <news-list> and other parts of the code.
8. Add loading state to fetched data.