Project realized for the Start2Impact "Javascript Advanced" course , by Claudio
At startup, the application will have to display the list of the latest news available by displaying the title, the link and the date of the news. He will then have to contact the API (as per the documentation) of the external Hacker News service to retrieve the list of latest news IDs. For each ID, the application will have to contact another API of the Hacker News service to obtain the information to be displayed such as the title, link and date of the news.
See here for example where 27933223 represents the ID present in the previous call to the service.
Note: the first API to get the list of the latest news (newstories), returns about 500 elements (see documentation). In order not to have performance problems, after having retrieved the list of the latest news, the application will have to show only the details (title, link and date) of the first 10 news. Through a button (Load more), the application will allow the user to go and view the information of the next 10 news.
Example: At startup, the application calls https://hacker-news.firebaseio.com/v0/newstories.json, this returns a list of 500 ids: 27971502, 27971498, 27971497, 27971488, …. Take only the first 10 ids, and for each of them go and retrieve the detail of the news and view it on the page: https://hacker-news.firebaseio.com/v0/item/27971502.json https://hacker-news.firebaseio.com/v0/item/27971498.json …. If the user clicks on the "Load more" button, the application will have to take the next 10 ids from the list and make the API call for the detail.
I first tried to make everything work with a version with no particular graphical identity. I first made small projects to manage LODASH and AXIOS independently, I wanted to understand how to manage libraries correctly, both with CDNs and installing them with NPM. I later implemented them in the general program. The list with the 500 news IDs is loaded when the page is loaded and kept in memory, it is reloaded and completely updated only when the page is refreshed from the browser or by pressing on the site title "HACKER-NEWS". at this point I began to understand how to manage WEBPACK5 and I did several days of study on the subject because I had underestimated it, it is very interesting but its logic in the first instance left me with many doubts and perplexities, which is why I dedicated it to dedicated in-depth study days. Up to this point I hadn't yet started managing API keys externally but simply using constants within the main JS code. I therefore decided to add the management of an ".env" file where to save the keys for the API calls which in this exercise case can be seen explained in the "README / Requests" section for educational purposes only, but are passed to the program via an .env file, which is also added as an exclude in ".gitignore"; in the BUILDING WEBPACK5 phase it manages the .env situation thanks to the "dotenv-webpack". I managed to manage everything on GithubPage implemented a "deploy" branch where only the "DIST" folder is passed.
in this project the thing that took me the most effort was the correct and orderly management of the files, the management of the .env file and the management of webpack with the installation and correct management of the necessary plugins including the correct implementation in the webpack.config.js file with the various options needed to complete correctly and understand their meaning.
here are some images to summarize the management just mentioned:
once the project was made functional I wanted to give it a more appropriate graphic aspect. The idea is to do something suitable for technology enthusiasts and I came up with the idea of a retro style terminal, the application will be a single page obviously and I chose to make the header and footer sticky leaving it scrollable the central part with the news. HP is inspired by several open source projects, then customizing them all with graphics that are consistent with each other and the project:
the "MORE" button to load another 10 news items is green in idle status, while the data from the API is being downloaded, the button takes on orange shades and the writing becomes "LOADING".
The design of the project has gone through many intermediate stages, one of the latest stages of progress is for example this: Provisional version
Screenshots OLD VERSION :
i redoing the project a couple of times with the excuse of the design helped me to better understand and fix all the management of npm, webpack5,.env and the necessary external libraries.
for the creation of the side scroll bar customized in shape and color I noticed that there are some differences between the chromium base browser and firefox, so I had to manage it in 2 different ways and the result is also slightly different: while in chrome the result is as seen in the main screenshot, in firefox it looks like this:
since it was made explicit by the requests for the exercise, I left a separate link (the green arrow) in each block of each piece of news, but I also made the title of each piece of news clickable to send back to the source of the news because it seemed very natural for any user.
HTML5
CSS
JAVASCRIPT
SASS
External libraries used for the project are:
- AXIOS
- LODASH
- DOTENV
Claudio Dall'Ara : Portfolio, Linkedin, Github.
-update correction-
-tolto il file nv perche' non essenziale in quanto le api sono free e non servono chiavi -aggiunto il try catch che mancava come da correzione