Forem: Pushpendra Singh

How are you all tracking analytics effectively with so many users on privacy-focused browsers like Arc and Brave?

Pushpendra Singh — Tue, 24 Jun 2025 07:37:54 +0000

Lately, I’ve noticed a growing number of users switching to browsers like Arc and Brave, which block trackers and strip away traditional analytics. It’s making it harder to get a clear picture of how people are actually using my website.

Is anyone else facing this? What tools, strategies, or alternative methods are you using to better understand user behavior in this evolving landscape?

Would love to hear how you’re approaching this challenge.

Building The Mindloom, Mental Wellness Platform

Pushpendra Singh — Sun, 22 Jun 2025 15:37:42 +0000

Hey Dev Community 👋

I recently launched The Mindloom — an AI-powered mental wellness platform designed to make emotional support more accessible, reflective, and human. This wasn’t just a product build for me — it was a deeply personal journey as a builder and a thinker.

🌱 The Idea

It started with a simple thought: therapy helps, but access is hard. Scheduling sessions, costs, and most importantly — the fear of being judged — can hold people back. What if an empathetic, always-available AI companion could help people check in with themselves, journal openly, and feel heard?

That seed turned into The Mindloom.

⚙️ The Tech Stack

I chose Next.js 15 as the foundation, combined with Supabase for database and auth (via Clerk), Upstash for vector embeddings, and ElevenLabs for voice interactions.

The AI backend uses OpenAI's GPT-4o, powering:

Mood-based conversations with AI companion
Check-ins with insights and mood tracking
Prompt based journaling powered by AI
A personalized dashboard that adapts to emotional trends

🛠️ The Developer Journey

The real challenges were:

Designing stateful, voice-first conversations without feeling robotic
Getting prompt engineering right for meaningful therapy-style responses
Managing data integrity with webhooks (thanks ElevenLabs 😅)
Building custom RLS policies for security and data scoping with Supabase
Creating modular UI using ShadCN and Tailwind with empathy-driven UX

I learned how small mental health features — like mood charts, guided journaling, or “soft” nudges — require real thought to make them feel safe and non-invasive.

✨ Accomplishments I’m Proud Of

Built and shipped a full-stack AI wellness app solo in weeks
Created a check-in flow that adapts emotional support based on the user’s mood
Delivered voice-first AI therapy sessions that feel warm and validating
Enabled real-time mood tracking + personalized prompts
Integrated with Paddle + Razorpay to experiment with flexible billing models

🚀 What’s Next for The Mindloom

Launching AI video companions via Tavus.io for even more personal engagement
Expanding micro-interventions — think bite-sized guided voice meditations dynamically generated from emotional insights
Improving prompt pipelines for hyper-personalized support
Open-sourcing parts of the journaling engine so others can build their own reflective tools

🙌 Final Words

The Mindloom is live in public beta. If you're curious about combining AI, voice, and care — I’d love feedback. Or just check-in and experience it for yourself.

🌐 https://themindloom.app

Thanks for reading — and take care of your mind 🧠💫

Understanding App Testing

Pushpendra Singh — Tue, 10 Sep 2024 12:30:00 +0000

This article was originally published on my blog, which you can check out here. You’ll find this and many other related articles there.

When many of us started developing applications, we often did so without writing test cases, taking pride in our work and enjoying the process. However, upon joining an organisation or beginning a project, we quickly realised that including test cases is a necessity, and how it speeds up our workflow so we can develop software faster. Understanding why testing is crucial in application development can clarify why companies emphasise writing test cases.

As a developer or maintainer, it's important to understand that testing is not just a bureaucratic requirement; it is a fundamental part of ensuring the reliability and functionality of your application. Without understanding the what, why, and how of testing, one might be tempted to skip it altogether. However, by grasping the reasoning behind testing, we can appreciate its value.

What is testing

Testing is a process where the test program throws an error when the actual result of something does not match the expected output. The goal of any testing is that you try your best to make sure that something unexpected doesn't happen, or at least what the user is expecting works fine for sure.

It is important to know that testing never guarantees that all will be fine, but rather helps you assert that certain elements of your app will be working as expected based on how good your tests are. As a start, you focus on the part which your app can't do without like the “Add to cart” button is clickable and the cart being updated after it's clicked.

Why testing is important

Testing plays a crucial role in maintaining and improving code quality by catching bugs early. Testing enables developers to identify potential issues before they escalate, leading to a more robust and maintainable codebase. As software projects grow, they naturally accumulate complexity, and the ability to refactor code safely is paramount.

The key to productivity in software development lies in reducing cognitive load. When developers have fewer things to worry about, they can focus more on solving the actual problems at hand. Automated tests serve as a form of documentation, ensuring that certain conditions remain true as the code evolves. This provides the developers with the necessary confidence to write code more freely, knowing that their tests will alert them if anything goes wrong.

Testing is essential in software development because it not only ensures that your code functions as expected, but also simplifies the development process. It boosts productivity, facilitates team collaboration, and instils confidence in developers. By making testing an integral part of the development process, teams can ensure that their software is reliable, maintainable, and scalable.

What should you test

It is essential to recognise that testing isn't about covering every line or condition of your code. Instead of merely increasing code coverage, testing should prioritise the outcomes and assess whether the code fulfils its intended purpose, meeting both your expectations and those of the user.

Code coverage is a metric that can help you understand how much of your source is tested

When users interact with your app, they engage with the interface, not the underlying code. Therefore, your test cases should focus on verifying that user interactions behave as expected. When crafting test cases, the goal should be to evaluate the product's flow: Does the app function as intended? Are user actions, such as clicks or changes, triggering the correct responses?

Also, when writing test cases, one of the most frustrating aspects is having to update them every time the code changes. This often happens because the test cases are focused on the wrong part of the code—specifically, the implementation details. When tests are too tightly coupled with the underlying implementation, even minor code changes can necessitate extensive updates to the tests.

The more your tests resemble the way your software is used, the more confidence they can give you - Kent C. Dodds

The React Testing Library, created by Kent C. Dodds, was developed with this exact concern in mind. The library emphasizes the importance of testing the app's behaviour from the user's perspective rather than focusing on the internal workings of the code. By following this approach, you can create more resilient tests that remain stable even as the implementation evolves. You can read more about it here.

Levels of Testing

Different levels of testing—Unit Testing, Integration Testing, and End-to-End (E2E) Testing—address different aspects of the application's functionality. Together, they create a robust testing strategy that covers the application from individual components to full workflows.

Unit Testing

Unit testing focuses on testing individual components or “units” of code in isolation. The goal is to verify that each part of the application behaves as expected under various conditions. Unit tests make it easier to refactor code confidently, knowing that any issues in the individual components will be caught.

Integration Testing

Integration testing aims to test how different modules or components of the application work together. It ensures that the interactions between different parts of the application function correctly. It verifies that data is correctly passed between different parts of the application.

E2E Testing

E2E testing simulates real user scenarios and tests the entire application from start to finish. By mimicking user interactions, E2E tests help ensure that the application delivers a smooth and error-free experience to the end user. This type of testing ensures that the application behaves correctly in a real-world environment, covering everything from user input to the final output. By testing the full stack, E2E tests can identify issues that might not be apparent at the unit or integration levels.

Effective Strategy: The Testing Pyramid

A commonly recommended approach is the testing pyramid:

Unit tests form the base of the pyramid with the most coverage and fastest execution time.
Integration tests take up the middle layer, with moderate coverage.
E2E tests sit at the top of the pyramid with fewer tests, focusing on core functionality and user flows.

This strategy ensures a balanced trade-off between coverage, speed, and thoroughness, offering an effective and scalable approach to web app testing.

The modern take on the testing pyramid is the testing trophy by Kent C. Dodds.

Source and Credit: Kent C Dodds's Blog

Types of testing

As we learned about different levels of testing, it's important to recognize that these are not the only types of testing. Several other testing methods play a crucial role in ensuring the quality and reliability of a web application. Some of these additional types of testing include:

Functional Testing

Acceptance Testing: Confirms that the application meets business requirements and is ready for release.
Smoke Testing: A quick check to ensure that the most critical functions of the application are working.
Regression Testing: Re-tests existing features to confirm they still work after changes to the codebase.

Security Testing

Penetration Testing: Simulates attacks to identify and fix vulnerabilities in the application.
Security Testing: Assesses the application for common security vulnerabilities like SQL injection, cross-site scripting, and more.

Performance Testing

Load Testing: Tests how the application performs under a high volume of users or transactions.
Stress Testing: Evaluates the application’s behavior under extreme conditions, beyond normal operational limits.
Scalability Testing: Checks how well the application scales with increased load.
Endurance Testing: Tests the application’s performance over an extended period, to identify potential memory leaks or degradation.

Usability Testing

Exploratory Testing: Testers explore the application to identify defects and usability issues without predefined test cases.
Accessibility Testing: Ensures that the application is usable by people with disabilities, including those who rely on assistive technologies.

Compatibility Testing

Cross-Browser Testing: Ensures that the application works consistently across different web browsers.
Cross-Platform Testing: Confirms that the application functions well on different devices and operating systems.
Localization Testing: Verifies that the application behaves appropriately in different regions, considering language, currency, and cultural differences.

Testing impact on code

Testing helps us ensure we don't break existing code when making changes. Testing also plays a critical role in helping us structure our code more effectively. By prioritising testability, we naturally improve the separation of concerns, making our code cleaner and more maintainable. However, it is important to remember that tests exist to describe the intention behind the system, not to dictate how the code is written.

Few practices you can follow to make code more testable, avoid doing real work in constructors—use them only to store passed-in dependencies. Control dependencies explicitly by using dependency injection, allowing for easy substitution with mocks during testing. Follow the Law of Demeter by passing only the necessary data to methods, reducing test complexity. Avoid global state to ensure tests are isolated and do not interfere with each other. Keep your code modular and simple, with each component having a single responsibility, and avoid closing over external variables. These practices lead to more reliable, maintainable, and easily testable code.

While these practices encourage writing good testable code, we should be cautious not to let tests influence the code in ways that hinder development. For example, it's essential to avoid tightly coupling the code with the tests, as this can make the system harder to change. Tests should verify the behaviour and outcome of the system without forcing the code into rigid patterns simply to accommodate the test.

By striking this balance, we ensure that testing enhances code quality without impeding progress or innovation in development.

Summary

Testing is a crucial aspect of web application development that ensures reliability, functionality, and user satisfaction. Here are the key takeaways:

Purpose of testing: To verify that user interactions behave as expected and the application functions as intended.
Testing approaches: Unit, Integration, and End-to-End (E2E) testing form a comprehensive strategy, often visualised as the Testing Pyramid or Trophy.
Focus on behaviour over implementation: Write tests that are resilient to code changes by prioritising user perspective over internal workings.
Testing improves code structure by encouraging separation of concerns, but should not dictate how code is written.
Effective testing provides confidence in deploying applications and ensures a smooth user experience.

In our upcoming post, we'll dive into the nitty-gritty of crafting test cases. We'll explore the essential APIs and best practices for writing effective tests, and discuss strategies for organising your test suite. We'll also peek under the hood of popular testing frameworks, examining their core APIs and fundamental building blocks. This practical guide will equip you with the knowledge to write robust, maintainable test cases for your web applications.

Code Aesthetics and Style

Pushpendra Singh — Mon, 03 Jul 2023 05:06:00 +0000

Code Aesthetics and Style

When immersing oneself in the world of coding, it is imperative to accord proper attention to the aesthetics of your code. While the immediate objective might revolve around making your code functional, it is essential to bear in mind that your code will endure and evolve over time, it will have a lifetime. The true measure of your code's quality lies in its ability to be understood effortlessly by others and facilitate seamless collaboration. Only shipping the code is merely one facet of the comprehensive software development process. In this blog post, I aim to articulate my perspective on coding style and approach, shedding light on the tools and practises to help you create a productive and sustainable development environment.

What I mean by code aesthetics

When we talk about code aesthetics, its about the structure and readability of the code you create. It's all about ensuring that fellow developers can effortlessly comprehend your work and feel at ease when it comes to making contributions. Think about it—how does the structure of your code aid others in navigating through its intricacies? Can they make sense of what you've written even in your absence? Code aesthetics primarily concerns itself with the style of your code and its alignment with established patterns and conventions. It's not primarily focused on performance enhancements and optimizations, although it's worth mentioning that these aspects can sometimes be byproducts of clean and well-structured code. The ultimate objective is to cultivate an environment where collaboration thrives and understanding flows naturally.

Good code is like a love letter to the next developer who will maintain it! - Addy Osmani

The codebase

Maintaining a well-structured codebase is crucial for maintaining good code style at both the file and program levels. It's essential to establish a solid code style within your codebase. When new team members join and start contributing to existing projects, they often look at the existing codebase as a reference. Similarly, newcomers to a project try to learn from the code they are working on.

That's why it's vital to ensure that code style and aesthetics are consistently maintained. Maintainers have an important role in guaranteeing the quality of the code. They should ensure that the codebase follows good practices and avoid introducing bad habits. This is crucial because newcomers can inadvertently adopt poor coding practices if the codebase lacks quality control.

On the other hand, if you are a newcomer or a fresher to a project, don't hesitate to ask questions when something is unclear or difficult to follow. Additionally, feel free to suggest refactors or improvements. Your fresh perspective can provide valuable insights that benefit the project and future contributors.

Tone of your codebase

Cognitive complexity and cyclomatic complexity are two different metrics used to analyze code quality and understand the complexity of software systems. While both metrics provide insights into the complexity of code, they focus on different aspects and have different interpretations.

Cyclomatic complexity is a metric that measures the number of linearly independent paths through a program's source code. It is based on the control flow graph and counts the number of decision points, loops, and branches in the code. The higher the cyclomatic complexity, the more complex the code is considered to be. This metric helps identify areas of code that may have a higher likelihood of containing defects or being difficult to test and maintain.

On the other hand, cognitive complexity measures the mental effort required to understand a piece of code. It takes into account factors such as nested conditionals, logical operators, and the overall structure of the code. Cognitive complexity considers the readability and maintainability of the code and aims to capture how difficult it is for a human programmer to comprehend the code. It provides a more nuanced understanding of code complexity compared to cyclomatic complexity.

Cognitive complexity is often considered a more reliable measure of code quality. While cyclomatic complexity focuses on the structure of the code

Analysis and refactoring

Churn and hotspot are two important concepts in code analysis and software development. They provide valuable insights into the complexity and change frequency of code files.

Churn, measures the number of times a file has changed. It helps identify the files that undergo frequent modifications. The more a file is changed, the higher its churn value

Hotspots, on the other hand refer to files that have higher than average complexity and have recently been changed frequently. These files are often the ones that generate a lot of churn. In other words, hotspots are the parts of the code that require attention and might have a higher risk of introducing bugs or issues.

Tools to help us

When it comes to code, it's never a one-and-done deal. You'll find yourself revisiting and reviewing your code multiple times, and the same goes for your teammates, you will hardly find any software maintained for its whole life by the original author. So, either you starting in new project or contributing to an existing, I highly recommend you use the tools to make sure you are doing it right,

Editor

The choice of your code editor sets the foundation for your entire coding journey, and it's crucial that both you and your team feel comfortable with the editor you use. In today's world, code editors have evolved into powerful tools that offer a plethora of features and functionalities. They provide an environment where you can effectively write code at your own pace, unleashing your creativity and productivity.

A good code editor should always be an enabler, empowering you to write code fluently and effortlessly. It should offer an efficient editing experience, allowing you to navigate through your codebase seamlessly and providing helpful shortcuts that save you valuable time. With a robust editor by your side, you can avoid redundancies and focus on the essence of your code.

Moreover, an ideal code editor is extensible, allowing you to customize and tailor it to your specific needs and preferences. It should offer APIs and integration capabilities, enabling you to seamlessly connect with other tools and utilities that are essential for your development workflow. This integration can enhance your coding experience, enabling you to leverage the power of complementary tools and boost your productivity.

By choosing the right code editor and becoming familiar with its capabilities, you can significantly enhance your code aesthetics. It serves as a powerful ally, empowering you to write elegant and well-structured code while promoting good coding practices.

Linters

A linter is a tool used in software development to analyze source code and flag potential errors, bugs, and stylistic issues. It performs static code analysis, which means it checks the code without executing it.

The primary purpose of a linter is to enforce coding standards and best practices within a codebase. It can catch common mistakes like syntax errors, undefined variables, unused code, improper indentation, and more. It help bring in standarization and makes code look like written by a single person.

Its your best companion when writing code. Initially linters may feel very binding but its like a guard dog, watching your every move which may look scary but after getting comfortable help you in avoid taking wrong turns. Linters enforce consistent coding styles and conventions, making the codebase more readable and maintainable for the entire development team.

Formatters

A good code formatter ensures that the code you write is in a readable format and maintains consistency throughout your project files. Formatted code has a remarkable impact. It allows you to consume the code at a glance, making it easier for your brain to navigate through the logic, and minimize the load on memory, thinking, and vision when reading a program. Plus, by using a formatter, the chances of spotting bugs, if any, multiply significantly. A well-structured layout helps you identify the different parts of the code that belong together and have dependencies on one another. It's like assembling a jigsaw puzzle, where each piece fits snugly into its rightful place.

Moreover, formatters provide you with the freedom to write code at your own pace without worrying too much about the format. You can let your creativity flow, knowing that you can instantly format your code correctly afterward.

Coding Conventions

When it comes to code aesthetics, adhering to coding conventions is a crucial aspect. Coding conventions consist of guidelines and rules that are widely understood and followed within the developer community for each programming language. They serve as a roadmap for maintaining a sense of familiarity and consistency within a codebase, especially for new members joining a project. While linters and formatters handle most conventions automatically, there is one convention that deserves explicit attention: naming.

In the realm of naming, it's essential to strike a balance between meaningful and concise names. A name should reflect its intention, neither being too short nor too long. For instance, a function named getNames clearly indicates that it retrieves names. Naming is subjective to some extent, but it's important to aim for reasonableness and clarity.

✍️ It's also advisable to choose names from the problem domain, connecting the code more closely to its purpose

Consider variables, where a well-chosen identifier like isActive implies a boolean value representing an active or inactive state. This simple name can provide insights into the purpose and behavior of the variable.

When it comes to files, the name should align with the information and content present within the file. For instance, a file named trackerUtils implies that it contains utility functions and data related to tracking.

In the case of functions, a naming convention commonly used involves identifying the operation or action performed by the function, followed by appending it with the return value or parameters passed. Examples include updateProfile, fetchScore, and sortEventsByDate.

While coding conventions are not absolute and can vary between projects and organizations, they play a vital role in enhancing code aesthetics and readability. There are several published coding conventions available for reference. Here are a few examples:

HTML5 Syntax
JavaScript Conventions, Google JavaScript Style Guide
Code Formatting and Naming Conventions in Go
Java Code Conventions
Coding Style and Conventions
Kotlin Coding Conventions

These conventions provide a shared language and understanding among developers, resulting in code that is easier to read, comprehend, and maintain.

Using comments

Effective use of code comments can greatly enhance the readability and maintainability of your codebase. Comments serve as a form of documentation, providing insights, explanations, and clarifications about the code, outline complex logic, or highlight potential pitfalls. They play a crucial role during code reviews, refactoring, and future maintenance.

One of the key advantages of code comments is that they have no impact on the runtime performance of your code. Compilers and interpreters typically ignore comments when generating the final executable, ensuring that your code runs efficiently.

However, it's important to strike a balance when it comes to commenting. Too many or unnecessary comments can actually hinder readability. Comments should add value by providing information that is not immediately obvious from the code itself.

Avoiding common Code Smells

In the pursuit of code aesthetics, it's crucial to address common code smells that can hinder readability, maintainability, and overall code quality. By proactively avoiding these code smells, developers can significantly enhance the elegance and efficiency of their code. Let's explore a few of these common code smells and strategies to mitigate them:

Avoid top-level variable declarations: It's advisable to keep variable declarations within the appropriate scope, avoiding unnecessary pollution of the global namespace. By confining variables to their relevant scopes, such as within functions or classes, we can promote encapsulation and minimize unintended side effects.
Avoid writing excessively long functions: When functions become lengthy, understanding their definitions becomes a scrolling adventure. To combat this, consider breaking down complex functions into smaller, more focused ones. This not only improves readability but also enhances reusability. Each smaller function can perform a specific task, making the code more modular and easier to comprehend.
Avoid using magic numbers: Magic numbers are hardcoded numeric values scattered throughout the code. Instead of using these mysterious numbers directly, assign them to meaningful constant variables with descriptive names. By doing so, you improve the readability of your code and make it easier to understand the purpose of those values. This practice also allows for easier modification and maintenance in the future.
Avoid using long parameter lists: When a function requires a long list of parameters, it can become challenging to keep track of their order and meaning. Consider using objects or interfaces to encapsulate related parameters into a single entity. By passing a well-defined object or interface, you can improve code clarity and readability. This approach also provides flexibility when new parameters need to be added or existing ones are modified.
Avoid excessive nesting in your code. Strive to limit your code's indentation to a maximum of three levels. It promotes the creation of functions with a single responsibility, which leads to cleaner and more modular code.

By actively steering clear of these code smells, developers can not only enhances the readability and understandability of the codebase but also promotes code reusability, modularity, and ease of maintenance. Remember, the goal is to create code that is not only functional but also a pleasure to work with.

Patterns

Patterns play a vital role in code style by providing reusable solution templates for recurring problems in software design. They offer a structured approach to organizing and architecting code. Patterns provide a proven blueprint to follow, which promotes readability, maintainability, and scalability.

One of the advantages of using patterns is improved communication among developers, referring to established patterns provides a common language and a shared understanding. It facilitates effective collaboration and allows developers to express their ideas and solutions more precisely. Patterns also contribute to the overall cohesion and consistency of the codebase.

Furthermore, patterns have a lasting impact on code maintenance. By following established patterns, developers can create a code style that is familiar and intuitive to others. When another developer takes over the codebase at a later stage, they can rely on the established patterns to navigate through the code more easily.

Good to have

GIT Manners:

Commits: When it comes to code aesthetics, maintaining clean and well-organized commits is crucial. Each commit should represent a logical unit of work, addressing a specific task or feature. Avoid committing large chunks of code at once, as it can make it difficult to track changes and understand the purpose of each commit.

Branch Name: A well-named branch provides context about the purpose or feature being worked on, allowing other developers to quickly understand its significance.

Code Reviews:

PR Structure:
When submitting a pull request (PR), ensure it is well-structured and organized. Provide a clear description of the changes made, outlining the problem being addressed and the proposed solution. Add snapshots of testing, visual or automation. Additionally, include any relevant documentation or supporting materials to assist reviewers in comprehending the changes.

Comments:
Reviewers should provide constructive and actionable feedback, pointing out areas for improvement, potential bugs, or suggestions for better code structure. When leaving comments, strive to be clear, respectful, and specific. Instead of vague remarks, provide specific examples or code snippets to illustrate your points. Remember, the goal is to foster collaboration and help improve the overall quality of the code.

Conclusion

In conclusion, code aesthetics and good code style contribute to creating an inclusive and collaborative environment where developers of all backgrounds and expertise feel comfortable to contribute. By adhering to proper code aesthetics and utilizing effective tooling, you save valuable time that can be invested in solving actual problems. Additionally, good code style plays a vital role in reducing technical debt within projects. Therefore, the next time you embark on coding, consider the importance of conventions and styles. Happy shipping!

Web Caching, a quick guide.

Pushpendra Singh — Tue, 02 Nov 2021 06:17:32 +0000

Welcome, lets build fast web app. There is so much content and competition on the internet, this gives endusers many options to select from. How you make sure that the user decides to use your app, are your services good enough for users to make that decision? No matter how good your services are when a user visit your websites they have certain expectations, the one feature, today every user looks out for is an immediate response, fast feedback, on an average a user only tends to wait for 2-3 sec for a page to load before moving on. I know right, thats so impatience. But we got to work on it nevertheless. So, why the page load time is high? The time taken for a page to load is result of so many factors like parsing and execution of JS scripts, loading of assets like(images, fonts, css), data fetching etc. By reducing page load time we have a way to improve the user experience and meet their expectations. One of the solutions to this is by using caching, caching can help us solve the slow response problem to an reasonable aspect.

When it comes to web performance and app optimization, caching is one of the common solutions you cannot overlook, caching is something which is built into Browsers and HTTP requests and is natively available to us the developers to integrate into our app without much configuration overhead, lets learn when & how to use it.

What is caching,

Take a look at your desk and you will find some commonly used items there, like pens, notepad, snack bars, water bottle, mobile charger etc. Since your desk has a limited space you only keep stuff which you find important and frequently used on it, while the other stuff you keep in cupboard or somewhere nearby, your fridge 😉.

So in above setup when you feel thirsty you don't always have to getup and walk to kitchen to drink water, you can simply grab the bottle on your desk. This definitely saves us time and effort.

Caching is also something similar, its concept when you store a copy of the frequently used data closest to your user to avoid the re-fetching. In caching we tend to identify data which we know won't change that often or data that is repeatedly accessed by user to near proximity of the access point that is our application. The data i.e. stored or copied during caching is know as cache.

A desk setup as a cache store is very contrived example but it helps with mental model. 🤷‍♂️

Its not only about response time, caching also help us with

Performance, it reduces the latency between requests and response, and when using cached data for our pages, the startup time decreases
it reduces the server load, request to server decreases(rpm)
it also consumes less network bandwidth, cutting the cost

When implementing caching its should be known not all request happening from client will be captured at server thus server metric will not give true picture of client behavior.

Types

Before moving on with the implementing caching lets understand where in our architecture we can have a cache store. Caching can be introduced at multiple levels of an app ecosystem,

Browser cache : It is a cache system that’s built into a browser(memory cache or disk cache), it is available in the user system and is fastest and closest to user. Chrome
Proxy Cache : In this caching methodology the cache is shared by multiple users sharing same proxy. When using proxy cache the network trip to origin(server) is avoided. The proxy server pulls the content from origin server once a while. Proxy Server, Reverse Proxy(CDNs)
Application Cache : It is a cache stored at application level and data can be served directly from cache storage. It frees up compute resources. Redis, memcached, local storage

States

When we are using the stored data instead of fetching it on every usage, we should be aware of its state on the network

Cold cache: A cold cache is empty and results in mostly cache misses, a cache miss is when data has to be fetched from the origin.
Warm cache: The cache has started receiving requests and has begun retrieving objects and filling itself up.
Hot cache: All cacheable objects are retrieved, stored, and up to date.

Working with the Caching

The browser inspects the headers of the HTTP response generated by the web server, to decide which request response it should cache in the system.

Expire

Expire header can be seen in many sites, it was introduced in HTTP 1.0 but it's not very common today,

Expires have a expiration date after which the asset is considered invalid, this is an absolute value to all the clients
As a date is used for validation, the cache life is dependent on the time zone of the user. Web server date should be in sync with client date
After the expiration date, cache is not used and browser makes request to the server
All the same resources for multiple clients will expire at same time and can result in DDOS.

Cache Control

Introduced in HTTP 1.1 which accepts comma-delimited string that outlines the specific rules, called directives. The Cache-control header allows you to set whether to cache or not and the duration of the cache.

public
- can be stored on shared cache
private
- Cache is intended for the single user, can't be store on shared cache (proxy servers)
no-store
- Header value used is no-store cache is not stored in browser or server under any condition
- When the cache is missing or not used during the request.
- New Request is made every time
no-cache
- Header n-cache is used, cache created at browser but not used
- When the cache is available but considered stale and validation is required.
- New request is made every time for validation if its not expired then used.
max-age
- in seconds, time for which cache will remain fresh
- Preferred over Expire header as it stores time in relative to request made.
- No time zone and DDOS attack issue as time is relative and not an absolute date
s-maxage
- Used by the proxy
must-revalidate
- Browser must re-validate and can't used stale cache
no-transform
- Some CDNs have features that will transform images at the edge for performance gains, but setting the no-transform directive will tell the cache layer to not alter or transform the response in any way.

Before HTML5, meta tags were used inside HTML to specify cache-control. This is not encouraged now as only browsers will be able to parse the meta tag and understand it. Intermediate caches(proxy servers, cdns) won’t.

Browser won’t make a call to the origin regardless of whether the content has changed or not till the cache is not expired or invalidated.

Validations

ETag (Entity Tag)
- Etags are hash values associated with the request
- Multiple logic can be used for etags formation, like file size, file content etc.
- If etags are changed then cache is considered to be expired, and server sends latest data
- 304 response is sent in case Etag is not changed
Last Modified
- Is a date timestamp value of content last modified, which can be used to decide whether the cache is valid or not.
- As date is involved content must be time stamped.
- Timestamp should be independent of zone.
Files name usually changes when a site is built again, because of hash names. In this case, all files from previous build are considered expired and not used again by browser.

Sometimes, when using caching we had to serve user with stale content.

Out of the box solution to scale

Since caching is such a powerful optimizations technique, web/app architecture have a layer for caching and this layer is occupied by Content Delivery Networks(CDN).

CDNs

A content delivery network (CDN) is a group of geographically distributed servers, also known as points of presence (POP). CDNs are used to cache static content closer to consumers. This reduces the latency between the consumer and the content or data needed

A CDN can achieve scalable content delivery by distributing load among its servers, by serving client requests from servers that are close to requesters, and by bypassing congested network paths.

Distance reduction – reduce the physical distance between a client and the requested data
Hardware/software optimizations – improve performance of server-side infrastructure, efficient load balancing, RAM and SSD are used to provide high-speed access to cached objects and
Reduced data transfer – employ techniques such as minification and file compression to reduce file sizes so that initial page loads occur quickly. Smaller file sizes mean quicker load times.
Security – keep a site secured with fresh TLS/SSL certificates which will ensure a high standard of authentication, encryption, and integrity. They also provide protection against DoS attack

CDN Cache Hit Ratio, this is the amount of traffic, both total bandwidth and sheer number of transactions, that can be handled by the cache nodes versus the number that gets passed back to your origin servers.

CDN offload = (offloaded responses / total requests)

Origin servers still have an important function to play when using a CDN, as important server-side code such as a database of hashed client credentials used for authentication, typically is maintained at the origin.

So know we know web caching comes at multiple layers and it help us improve our app performance and reduce operation cost. If your site uses static content then its a must to have solution for your web app. See how frequent and redundant those https calls are and accordingly add caching into your application arch. Lets give the user a better experience, Adios 👋

Resources

Intelligent Caching by Tom Barker
Cloudflare Learning

Getting Hang of GIT

Pushpendra Singh — Mon, 03 May 2021 17:11:37 +0000

You may have seen designers or memes showing how designers save their work with files name like design.png, design-final.png design-final-final.png and so on. 😂

When I started my journey as a developer I too used a somewhat similar approach to save my work, but thanks to the version control system we don't have to go through this forever.

A version control system helps us continue with our development by tracking and maintaining a reference to multiple versions of our work. It makes it easier for us to work with different versions of files mutually or switch between them. Irrespective of what language you are working with, a version control system is a very important part of your development journey. GIT is one of the version control tools, which is wildly adopted in the development community.

When I didn’t know GIT.

I used to keep a progressive copy of my project directory and files. I made sure that I have a copy of my previous stable code before adding any extra feature/code to it. This was my version of version control system based on what I knew then. I mean what else I could do. This trick didn't help me always, as sometimes you are confident enough to start working without a copy and then there is no going back, or sometimes you forget to make a copy. And then you end up cursing yourself 🤬

Losing lots of work, re-writing stuff again, the cursing didn’t work out well for me so, I had to find a reasonable solution, after talking around and doing some initial research(googling) I came to know about the “git”.

Meeting GIT

I heard great things about GIT, and I wanted to use it, so I started by visiting the official site for docs, and it was not much of help then. I next began to watch GIT tutorials, and Oh my git, GIT is a terminal application. I was scared of the terminals then hardly have used the terminal. I got cold feet.

I had to re-watch tutorial videos to understand the commands to grasp what’s happening despite my fear, as there were not many choices then. So, rather than using GIT directly with my main projects, I started by practising with new dummy projects.

This may sound easy now, but running these commands on the terminal was very overwhelming in starting for me. The fear of end up losing my hours of work or end up making some changes in system config 😂

Making peace with GIT.

After starting with the GIT, I knew, without it, there was no way forward. I had to know GIT to be able to work efficiently & peacefully. I tried to strengthen my understanding of GIT by comparing and putting it into real-world examples and analogies.

The mental model I developed was file management, creating files, directories and renaming them. GIT is very much similar to what I have been working with in the past. GIT takes away from us the effort of creating, copying and maintaining them and do itself. Understanding the git's basic with directory analogy.

Staring a new project.

You kick start a new project by creating a new folder in your system, where all the work will be done and files related to it will be stored.

git init

git init command does the same, GIT initializes your project and confirms that from now it will keep track of the work being done in the directory. One can assume git creates folders too to store our work and when initializing a project it creates a folder named master. In GIT vocab these folders are referred to as branch.

Making progress.

Now that you have run the git init command GIT is tracking every change you are making in your files and subdirectories. When working on your project, you add content to files if required you may add more files. GIT tracks everything so in terms of GIT vocab, the changes are being tracked right now.

git status

You can use the git status command to see all the files that are being tracked by GIT.

Saving development

Let's say you have done good enough work or you are confident of your work progress you want to save it. GIT helps you achieve this by running two commands

git add <files_path>

The git add command is used for specifying all the files you want to save. After running this command in terms of GIT vocab, the files are staged right now.

git commit -m  <message>

git commit command help you save changes with a message that you can use as a reference for what you are saving. And after running this command your files are considered saved or committed.

Falling back to saved files

After saving initial changes you can continue with your natural work. But what if you are not satisfied with the changes you have made or you want to start fresh again, you want to undo all the changes to previously saved work.

git stash

You can discard all the work you have done after the last committed changes by using the git stash command.

Making changes

You can keep making changes to your files if you want to modify them and GIT will track those changes but these changes will not be saved. To save new changes you have to again add and commit your files.

So, these are the few common GIT commands that you will be using on daily basis. All these commands will help you track, stage and commit changes in your files/directory.

Everything till now what we have done was in our local system. What if we want to share these files, we want to take them to a remote local.

Sharing the files

So, in general, when you want to share your files you upload them to dropbox, drive and share a link to that storage. GIT also helps you do the same, you can add a remote reference to your local files and upload them to that remote location.

git remote add <local ref name> <remote_link>

git remote add help you add a remote location as a reference to upload local git committed files.

After providing a remote location you have to upload these files

git push <local ref name> master

The git push command is used for uploading/sending local files to your remote storage. The common remote GIT services are Github, Gitlab and Bitbucket. You can add multiple remote links to your project and push your changes to all of them.

Updates are required

Now that you have shared your work with others, you will receive feedback on it no escape there everyone is here to judge you. After receiving the feedback you want to make some changes, but you are not confident about what you will do so what you are in the habit to do is copy your local folder somewhere and then make changes to that folder so that if update and save anything that doesn’t work out you have a copy of your previous work to have a fresh start again.

Creating a copy to update

git checkout -b <new_branch_name>

The new branch will have the content of the branch from which you are checking out.

git checkout command helps you to switch between multiple copies for your current work. After running the checkout command all your work would be tracked under the new branch and the parent branch will remain untouched.

Updating the copied version

You can then make your changes in the new branch and add, commit new changes. These changes will not affect the master copy.

Sharing the updated version

You then can share the new branch with others by pushing the new branch to a remote location.

git push <local ref name> <new_branch_name>

Bringing all in one place

Now that you have shared the updated version you can have +ve or -ve feedback if it's -ve then you make updates and share again this cycle repeats till you have satisfied your reviewer. After you know what your final version is want all the updates to be your master copy. You can copy all your work from the new branch to the master branch. This can be done in two ways locally or remotely. As you have reference to both branches in your local and remote location you can copy/move your in a new branch in both these places.

Locally

git merge <new_branch_name>

git merge command help you copy your work from one branch to another.

Remotely

In the remote location, we have a concept of pull request where you raise a request with a title saying please merge my new_branch_name to the master branch. So, it is similar to the merge command but the merge command in remote doesn’t get executed until someone/you approves that pull request. It is kind of gatekeeping to make sure no unnecessary changes are being copied into the master branch.

Now that your changes are merged into the remote master branch you have to download updated remote files into your local system to have the latest copy of the work.

git pull <local ref name> <branch_name>

git pull command helps you to pull/download changes from remote to local storage.

Well, that's most of the git commands which we require on daily basis in our development journey.

GIT Snacks

Before saying goodbye there are few things I would like to mention which will come in handy when working with GIT.

Repository: The remote copy of our local project directory is referred to as repository aka repo.

Conflicts: Conflicts is a scenario in GIT when two different changes are done on the same content and GIT is not sure which one to keep and have a conflict. This can happen when multiple devs are working on the same files simultaneously.

git clone: This commands helps you to create a copy of the remote project to local. You can visit Github, Gitlab or Bitbucket and can clone a repo in your local if you have access to a repo.

git log: This command provides the timeline of all the commits that have been made in the currently active branch.

.gitignore: In this file, you can mention all the files to ignore, which GIT can avoid tracking, for example, you can use .gitignore to ignore your build directories and environment files from being tracked and pushed to the remote.

HEAD: HEAD refers to the last commit in the current branch, using heads GIT can create a tree structure of your source code.

That is my comprehensive guide to the GIT. Hope this helps you with your understanding of GIT and the version control system.

Recording E2E Test in React with Cypress & GH Actions.

Pushpendra Singh — Mon, 14 Sep 2020 15:30:56 +0000

On my path to learn TDD, and making robust, resilient app I finally learned end to end testing. I added e2e test cases to the React Login Mock app using cypress.io.

I would like to add that cypress provide great developer experience.

This what a recording looks like. In the recording below I am running two test case

Successful login attempt with valid user credentials.
Error handling when server responds with an error.

My Workflow

After adding end to end test cases to my project using cypress and developing the app with confidence I wanted to make sure that every code change that is happening in my project is also e2e tested. Thanks to Cypress headless run I was able to e2e test my code for every code push and pull request using Cypress Github Action.


...

- name: Cypress run
        uses: cypress-io/github-action@v2
        with:
          browser: chrome
          headless: true
          record: true
          start: npm start
          wait-on: http://localhost:3000
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

...

Cypress Github Action also let you record your test run and upload it to your cypress dashboard.

Submission Category:

Maintainer Must-Haves, DIY Deployments

Link to Code

You can find the project along with the cypress test cases at

dreamer01 / react-login-mock

A React login mock page with input validation and unit test cases.

Additional Resources / Info

cypress-io / github-action

GitHub Action for running Cypress end-to-end & component tests

Cypress.io blog post on Github Action

Measuring Code Coverage in React, with CodeCov Github Action

Pushpendra Singh — Sun, 23 Aug 2020 15:12:40 +0000

In my previous post I added Github Workflow to run test on every commit and PR request. It was something promising for moving in direaction automation. Also adding test cases helps the code grow without bugs and updates to project are easy.

My Workflow

To the available workflow of a test run through Github Action, I added another action by CodeCov to measure my test coverage and upload it to CodeCov for better understanding and of course charts.

Submission Category:

Maintainer Must-Haves

Yaml File or Link to Code


name: Unit/Integration Test Run

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - run: yarn install
      - run: yarn test:coverage
      - name: Upload coverage to Codecov
        uses: codecov/codecov-action@v1

The test:coverage script for Create React App would be

yarn test --watchAll=false --coverage

dreamer01 / react-login-mock

A React login mock page with input validation and unit test cases.

Adding profanity check to Github comments using Github Action.

Pushpendra Singh — Tue, 18 Aug 2020 12:21:32 +0000

I started with building a comments-emoji action which would translate your issue and PR comments to emojis. The idea behind it was to get started with Github Action.

Now, new ideas keep poping and as a result here is another addition to Github Action comments-emoji, this time its something helpful for Open Source Maintainers.

My Workflow

With addition of this new feature, now user can enable profanity check using comments-emoji action.

To benefit this feature, user has to add input enablePolice flag with value "true" in there workflow.

As a result the comments-emoji action will replace all bad words with emoji 🤐.

...
      - name: Comment Emoji - action exe
        uses: dreamer01/comments-emoji@master
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          enablePolice: true

Submission Category:

Maintainer Must-Haves, This will help maintainer to maintain positive and safe environment.

Code

Complete YML file

comments.yml

name: Emoji Comments

on:
  issue_comment:
    types: [created]
  pull_request_review_comment:
    types: [created]

jobs:
  comment-emoji:
    runs-on: ubuntu-latest
    name: Emoji Comments
    steps:
      - uses: actions/checkout@v2
      - name: Comment Emoji - action exe
        uses: dreamer01/comments-emoji@master
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          enablePolice: true

Code for Github Action can be found here.

dreamer01 / comments-emoji

A Github Action to convert your comment message to emojis.

My First Github Action, using JavaScript.

Pushpendra Singh — Mon, 17 Aug 2020 13:50:57 +0000

Hackathons are inspiring, I have been wanting to explore Github Actions for a while now, but I was always able to find some reasons to push it down in my to-do list.

Since the Dev.to Github Action hackathon is announced, I couldn't resist it, I jumped right into it.

And today, I created my first Github Action using JavaScript.

My Workflow

I have managed to create a Github Action which replaces text in your Github comment with emojis, comments from issues and PRs are translated.

It was created mostly with reasons to get started with Github Actions.

I explored

Creating a Github Action using JS.
Using libraries in my action.
Using Github Context in my action.
Writing workflows.

Submission Category:

Comments Emoji will fits fine with Wacky Wildcards.

Code

Add following YML in your workflow to get started.

comments.yml


name: Emoji Comments

on:
  issue_comment:
    types: [created]
  pull_request_review_comment:
    types: [created]

jobs:
  comment-emoji:
    runs-on: ubuntu-latest
    name: Emoji Comments
    steps:
      - uses: actions/checkout@v2
      - name: Comment Emoji - action exe
        uses: dreamer01/comments-emoji@master
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

You can find the code for the action at

dreamer01 / comments-emoji

A Github Action to convert your comment message to emojis.

Resources

Creating a JavaScript Action

CI & CD in React App using Github Actions.

Pushpendra Singh — Sat, 15 Aug 2020 06:09:44 +0000

I am learning to write test cases for React App and for that I have built small, minimal React Login app. I thought this would be a great opportunity for me to integrate Github Actions in my project for CI pipeline.

I am using React Testing Library and Jest for testing the React App.

My Workflow

For starter I have added unit cases to my App, and using Github Action I do a test run and if all test cases passes I let user to push or merge a pull request to master.

Action Used :

actions/checkout@v2
actions/setup-node@v1

test.yml


name: Unit Test Run

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x, 14.x]
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - run: yarn install
      - run: yarn test

I will be adding following feature in future as I learn and develop :

E2E testing using Cypress and Github Actions.
CD pipeline using Netlify/Vercel and Github Actions

Submission Category:

Maintainer Must-Haves

In an open-source project when a good amount of PRs are being raised then automatic Test Run can be your first line of defence to avoid introduction of bugs in your project.

Project Files

dreamer01 / react-login-mock

A React login mock page with input validation and unit test cases.

Resources

Checkout this content rich post on React Testing Librarry by Robin Wieruch.

Checkout this amazing post on getting started with Github Actions by Colby Fayock.

Measuring Performance, Lighthouse 6 and Core Web Vitals by Google.

Pushpendra Singh — Tue, 21 Jul 2020 15:23:47 +0000

As web developers, we intend to deliver best user experience over the internet, in the process of doing so we come up with new ideas and designs to make our work more interactive and creative for users. But what we misjudge is that user experience is all about the look and design, but it is more than that, it also about accessibility and interaction. To keep our users engaged and expect more visits from them we can’t just rely on the presentation of our web app, it should perform too, to user's expectations. The user's expectations are persuaded by what they are experiencing over the internet, so as a responsible developer we should meet those standards.

So what are the standards then? Because we know that performance is relative. How we make a claim that whether a web app is performing or not?

How to Measure Performance?

When talking about the performance, we generally speak in terms of time

How much time does it take for our page to load,
Time taken to perform an action requested by the user

, but there are many nuances to it.

How much time is enough for the user to wait, or what content can be considered meaningful, when the first time user interacted with the content, what was reaction time to that interaction? To answer all these questions we measure, to measure we use tools, tools that provide us with stats that makr more sense to the developer. These stats help us in identifying the issues with our web app and the reason behind poor performance. The most common, easy to use and popular of all the performance measuring tools is the Lighthouse by Google.

Lighthouse

The Lighthouse provides audits for performance, accessibility, PWA, SEO, and more. A report is generated for every lighthouse run. The performance measured by the lighthouse is distributed over many metrics, each of them has a respective weightage towards the performance score calculation. For any metric score which is not good as per Google standards, Lighthouse provides references to optimize your app. Lighthouse is also able to provide more relevant and actionable advice depending on the tools/tech used for development.

Lighthouse report's scores screenshot

One can use lighthouse in the following ways

Directly from Google Dev Tools
Using Chrome and Firefox extensions.
Using NPM module
From Command Line.

Google put great analysis and research behind metrics used for calculation of performance scores. Every metric calculated is significant to page speed and page experience. Over time Google has updated the stats available for performance calculation. The Lighthouse performance testing was initially inclined towards page speed, they now have made changes to weightage in-page experience also. The latest release of Lighthouse v6 uses a different set of metrics from successor v5. The newly added stats to v6 are now more inclined towards user experience, and factors in the metrics that matter most to users. You can find how the score is calculated in the lighthouse at https://googlechrome.github.io/lighthouse/scorecalc/

NOTE ✍🏽: If you had used Lighthouse then you should check your Lighthouse score again as v5 and v6 use different parameters to calculate performance score.

Core Web Vitals

Core web vitals are the three parameters that were introduced by Google to provide unified guidance and of which two are an addition to the latest Lighthouse v6. The Core web vitals are considered to be more user-centric and tend to measure real-world experience. These parameters will be evolving in the future as Google revaluates them over time as data is analyzed, users' behavior is monitored and development practices are updated.

Currently, core web vitals metrics include

Largest Contentful Paint (LCP) : measures loading performance. As websites are loaded in stages, we need to know when meaningful content is available for users to consume. The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, so showing loader is not good enough. LCP metric is updated for every element update happening in the viewport.

First Input Delay (FID) : measures interactivity. FID measures the time from when a user first interacts with a page to the time when the browser can begin processing event handlers in response to that interaction. This includes interaction like opening a menu, entering data to input fields or button click, or even scrolling in case of pages like a blog post.

Cumulative Layout Shift (CLS) : measures visual stability. CLS measures the total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

Unlike the Lighthouse where we generate a report for a page of our site, we can measure core web vitals live for every page load happening on our browser with real-time updates, so we know now which page needs little care.

You can use the extension https://goo.gle/vitals-extension created by Addy for web vitals metrics information.

Tip 👀 : The extension comes with an overlay feature that can be enabled from the extension’s option.

We can also use the web-vitals javascript library in our project for real user monitoring.

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics(metric) {
 const body = JSON.stringify(metric);
 // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
 (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
  fetch('/analytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

Optimize

Once we have measured the performance per page using all three core web vitals metrics, the next step is to optimize our page with the score available to us.

To optimize is to reduce.

Less of everything, less of JavaScript, less of network resources, less of the main thread, less of render time. - Justin Ribeiro

On road to optimization, you can use the following tips from industry experts

Data Fetching: Make sure you are using nearby CDN and the data processing is fast and response time for your request is low.
JS: Minimize or defer JS, remove any non-critical third-party scripts, establish third-party connections early using reconnect and prefetch.
Image: Provide dimensions for images, implement lazy loading and adaptive images.
Caching: Use caching for static assets, this helps content load faster on subsequent page visits from users.

I would highly recommend going through the following guides from Google that offer specific detailed recommendations for how to optimize our pages for each of the Core Web Vitals:

Conclusion

To deliver the best user experience from our web app, we have to factor in performance along with the fancy UI. Performance is best dealt with when it is measured, make sure to measure how it is responding to all the users whether it is the user with a requirement of accessibility, or user having poor network condition or one using not so high-end mobile device, as every user counts.

Resources

Lighthouse Page

Web.vitals Page

This post was originally posted on my blog.