Devlog 4

The End?

I DID IT!!
I managed to implement everything I wanted to and I feel like the MainTab project is ready to be shipped!! :D

It took me quite a while to create a decent layout (it’s a bit awful so it will probably change) and implement all the features. Luckly for most problems a quick online research was enough to fix them, while for others it took me quite a while and that’s why I spent nearly 4 hours working on this since last Devlog.

BUT, I managed to do it, and I am very happy because everything works as intended!!

MainTab features:

• News Feed: Get the Top Stories from “HackerNews” right on your page, for easy access
• Weather Forecast: Get current weather conditions and a 7-day forecast!
• GitHub Profile Stats: A little widget that shows your total contributions on GitHub and your current and longest Streak!
• Search: … Well … Obviously, it lets you search anything on the Web using DuckDuckGo.
• Daily Background: Get a different background every day!
• Bookmarks: Save your most used websites for easy access!

If you want to know all the APIs used here they are:

• Open Meteo: Get weather data using Latitude and Longitude.
• BigDataCloud Reverse Geocoding: Get a precise location using Latitude and Longitude.
• Google Favicon API: This API lets you get the Icon of a website. I couldn’t find any official documentation, so here is the guide I used.
• Hacker News API: To get news from the HackerNews Feed.
• Quoteslate API: Get a random quote.
• Bing Wallpaper API: API that lets you get a daily background from the Bing.com
• GitHub Readme Streak Stats: Generate the profile stats card for GitHub

Also, data like GitHub username and bookmarks are all saved into localStorage so nothing is lost on refresh!!

Devlog 3

Bookmarks!!

Making the bookmarks took me 1 hour and a half… TOO MUCH!! But when coding the JS for my first version for the bookmarks (which should have looked like the “preview” in the screenshot attached to last devlog) I decided to just change the way I would have saved the bookmarks, and so I had to do everything from scratch again. Yayy…

The JavaScript code for the bookmarks isn’t too hard. It just creates a prompt for the user to type the link, then creates the HTML element and gets the image from a Google API which lets you get the icon of one website from the URL. To use it I followed this guide. It is quite easy to use, just look!

https://www.google.com/s2/favicons?domain=${domain}&sz=${size}

Thanks to this I am able to render the icon of the specified website. Another feature I added is the Delete button which appears when hovering on a bookmark.

OH and one more thing!

All bookmarks are saved with localStorage so that even when refreshing the page your bookmarks remain untouched!! :)

Devlog 2

Possible Layout!

After some time I managed to come up with a decent layout for the page. It is divided in three main columns:

• Left, the HackerNews feed, i changed the stories to be 20 (may change in the future)
• Middle, random quote, search bar and bookmarks space (still WIP)
• Right, Weather forecast and GitHub stats. As of now the stats loaded are mine by default but I will add the option to insert your username and get your personal stats

I’m liking this project very much because I’m making something that both feels personal and useful on an everyday basis! :)

Devlog 1

Getting Started!!

I am currently creating my New Tab Page called MainTab, because it contains all the main info I want on a page. It’s still very barebones and no CSS is applied because I am currently working on getting all the APIs to work so I can fetch the data that I need to display on the page. Right now, the information displayed are:

• Top 5 Stories from HackerNews
• One random quote
• Current weather and 7 days forecast

The goal for MainTab is for it to provide the right information that I need while maintaining a clean UI.

Fortunately implementing the APIs was quite easy thanks all the documentation and examples available online! :)