Chrome Lighthouse with as site under study, with fixes

Introduction to Google Chrome Lighthouse

Version being discussed here – Lighthouse 6.2.0

  • Lighthouse is an automation tool to audit the quality of web pages.

  • Lighthouse can help you monitor a bunch of metrics on mobile & desktop-like

    • Performance
    • Accessibility
    • Best practices
    • SEO
    • PWA etc
  • Lighthouse is to be baked into the tooling pipeline so that your app quality is monitored on a regular basis.

  • There are 2 variants of Lighthouse. One is the web version & other is the nodeJS version which we can use to conveniently integrate to the tooling.

Understanding Lighthouse as a system

Purpose - Audit web pages in the tooling stage

Input - The web page

Output - Report in JSON

Configuration - Configurable in terms of what parameters to measure

Extensible - with plugins

Analysing output - can be ingested to program through JSON or human-readable with lighthouse viewer.

Programming language - NodeJS & GUI in the browser

Continue reading

Share this post

A developer review of Amazon Prime Reading, what works & what doesn't

Amazon prime reading is a book lending library for Amazon prime users. Damn, I stumbled upon this nice feature quite late.

Hey there, if you have read Russell Conwell’s book Acres of diamonds, you can feel what I am undergoing when I discovered Amazon Prime reading in India. As a bibliophile, I am always on the lookout for books and things around them. I am a proud Kindle owner from 2016 and an amazon prime user for a few years but I did not notice the prime reading feature on amazon.

Amazon prime reading somehow did not fascinate me in the beginning because my kindle was not registered on an Indian address. It was tagged to Amazon USA, so most titles were not accessible even though I was an amazon prime user in India. Since I was not buying any content on Amazon USA, I decided to move my kindle to Amazon India. Looks like a hustle right. Yes, it is. According to Amazon, I moved my kindle from the USA to India. Right now my kindle is perfectly registered on Voila, the prime reading fun begins now.

Continue reading

Share this post

Introducing Google analytics product for developers - Part 1

Google Analytics is a common product used for web analytics. I had been using google analytics since my first blog in 2010. It was google analytics which told me that I had 60,000 plus visits to my blog post related to Micromax Ezpad phone and how to share the phone internet connection with Ubuntu OS.

As a front-end engineer, you cannot get away without writing or copy-pasting analytics code. To work with analytics code effectively, developers need to understand the terms/jargon used by Google analytics. In this blog post, I will share with you an introduction to google analytics in a developer-friendly language.

Continue reading

Share this post

Chrome has browser monopoly, what it means to developers, testers & business?

“Which browsers do you support” is a lame question when it comes to frontend development. We have techniques like progressive enhancement & graceful degradation which ensures that the application behaves consistently on different browsers. The browser game has changed, Chrome browser has around 70% share in the browser market by users. Should we still support all the browsers?

Continue reading

Share this post

Server-side rendering vs client-side rendering. Which one should you choose?

Let’s understand the word rendering. Rendering in front-end engineering means, you are generating an HTML view for the user. There are different approaches to render a view. Client-side rendering, server-side rendering are 2 of them

Let us say I request a home page from the server. If the server sends the full document aka HTML to the browser then we call it server-side rendered. If you view source of the page, we can see full HTML under the body tag. This blog for example is server-side rendered theoretically. In the case of React SSR, the reacts components are rendered on the backend, and HTML is sent to the client. Hydration of components will happen on the frontend. During hydration, the event handlers are attached to the markup.

Continue reading

Share this post