Personal Dashboard

This is a clone of the Google Momentum Browser Extension Dashboard - Momentum

Leading up to the build up of the page I worked with various APIs while paying attention to Promise Rejections and Error Handling

Basically, It's the default page that will pop up once a user opens up a new tab on google chrome

Free APIs used in the project are :

• Unsplash photos API
• Crypto currencies API
• Weather API (User has to allow location access for the data to be rendered)
• Random Quotes/Advice API
• Sports API for the EPL Table standings

Try out the live demo

Initial appearance of the page

After a couple of improvements

Lazy Loading

Used the lazysizes JS library lazy loader CDN

<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js"></script>

This library provides lazy loading functionality for images and other media on a webpage

To enable the lazy loading on the images one needs the lazyload class to the images and change the src attribute to data-src

<img data-src="image.jpg" class="lazyload" />

For the background image one adds the data-bg attribute which will be used by the library to lazy load the background image

document.body.style.backgroundImage = `url(${data.urls.regular})`;
document.body.setAttribute("data-bg", "lazyload");

Other Features to add/Caveats :

• Include SameSite cookie attribute
• Placeholder Icons or Spinners
• Responsiveness in from Medium screen sizes
• Text Contrast

The Project hasn't been added to Google Chrome Extensions however curious developers are welcome to try this out. Find out more info on the below link

Chrome Developer Docs