DEV Community: Atul Bhatt

How We Achieved a 99 PageSpeed Score: A Real-World Web Performance Case Study

Atul Bhatt — Sun, 06 Sep 2026 10:21:32 +0000

Most web agencies and SaaS websites suffer from a silent conversion killer: terrible mobile performance.

It’s surprisingly easy to get a 95+ score on desktop when running Lighthouse on an M3 MacBook over high-speed fiber. But when you switch that toggle to Mobile—where Google simulates an emulated budget Android device throttled to a 1.6 Mbps 4G connection with 150ms round-trip latency—the score crumbles into the 40s–70s.

When we audited the initial release of Klickspell, we hit a familiar plateau: our desktop score was 99, but mobile was lagging with sluggish paint times, render-blocking chains, and cumulative layout shifts.

We didn't want a "good enough" 85. We wanted 98–99 on Mobile and 99 on Desktop with 0 ms Total Blocking Time (TBT) and zero layout shift (CLS: 0).

Here is the exact, step-by-step engineering playbook we followed to get there.

The Audit: Diagnosing the Bottlenecks

Before touching a single line of code, we ran a thorough audit using Google PageSpeed Insights and Chrome DevTools. Here were the primary culprits flagged:

Massive Image Payloads: 30 uncompressed raster graphics totaling 49.08 MB.
Render-Blocking CSS & Chained Requests: An external stylesheet (style.css) caused a 606 ms round-trip delay.
GitHub Pages 10-Minute Cache Warning: Static files served with Cache-Control: max-age=600, triggering Lighthouse's "Use efficient cache lifetimes" penalty.
Forced Reflow / Layout Thrashing: A JavaScript breakpoint handler reading window.innerWidth during initial page parse.
1,450 ms LCP Element Render Delay: Above-the-fold entrance animations delaying text paint.
External Font Network Round-Trips: 67 KiB of Google Fonts across 10 weights requested over external connections.

Let's break down how we solved each of these.

1. Asset Optimization: 49 MB ➔ 3.3 MB (93.2% Reduction)

The biggest payload culprit was high-resolution PNG and JPG images in project mockups and case studies. Serving raw raster images to a mobile device on a 4G network is an immediate death sentence for page speed.

We ran a batch conversion using Google's cwebp encoder at quality 82:

for img in public/assets/**/*.png; do
  cwebp -q 82 "$img" -o "${img%.png}.webp"
done

The Rules We Applied to Every Image:

Format: Converted all 30 raster graphics to .webp.
Dimensions: Added explicit width and height attributes to all <img> tags to give the browser aspect-ratio context, eliminating Cumulative Layout Shift.
Lazy Loading: Added loading="lazy" and decoding="async" to every single below-the-fold image across the homepage, team page, and case studies.

Result: Total image weight dropped from 49.08 MB down to 3.33 MB—a 45.75 MB saving.

2. Inlining Critical CSS to Kill the Render-Blocking Chain

PageSpeed reported:

“Chained requests / Network dependency tree: ...css/style.css (606 ms)”

“Use efficient cache lifetimes — Est savings of 8 KiB (Cache TTL: 10m)”

The Problem:

Loading styles via an external link (<link rel="stylesheet" href="/assets/css/style.css" />) forces the browser to halt HTML parsing, initiate a new TCP connection, and download the stylesheet before painting the very first pixel. Furthermore, GitHub Pages enforces a default Cache-Control: max-age=600 (10 minutes) on static files, which triggers Lighthouse caching warnings.

The Fix:

Because our global stylesheet was compact (~9 KiB gzipped), we configured Astro to inline all CSS directly into the HTML document:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://klickspell.com',
  build: {
    format: 'file',
    inlineStylesheets: 'always' // Inlines CSS directly into <style> in <head>
  }
});

And in BaseLayout.astro, we imported the CSS directly:

---
import '../styles/style.css';
---

Result:

0 external render-blocking requests. The browser receives the markup and styling in a single HTTP response.
Cache warning eliminated. Because style.css is no longer a separate file, the 10-minute cache lifetime alert vanished.

3. Eliminating Forced Reflow / Layout Thrashing

In the diagnostic report, Lighthouse highlighted:

“Avoid forced reflow: BaseLayout.astro:101:23”

When inspecting the code, we found this innocent-looking helper:

// ❌ THE PROBLEM: Layout Thrashing in JS
function swapCTA() {
  const isMobile = window.innerWidth <= 768; // Triggers synchronous layout calculation
  document.getElementById('hero-cta-d').style.display = isMobile ? 'none' : 'inline-flex';
  document.getElementById('hero-cta-m').style.display = isMobile ? 'inline-flex' : 'none';
}
swapCTA();
window.addEventListener('resize', swapCTA);

Why This Hurts:

Querying window.innerWidth forces the browser engine to stop and compute geometry synchronously before the DOM is even painted. When executed alongside DOM modifications (.style.display), it causes layout thrashing.

The Fix: Pure CSS Media Queries

We deleted the entire JavaScript function and replaced it with pure CSS:

/* ✅ THE SOLUTION: Zero-JS Responsive Toggle */
#hero-cta-d, #cta-d { display: inline-flex; }
#hero-cta-m, #cta-m { display: none; }

@media (max-width: 768px) {
  #hero-cta-d, #cta-d { display: none !important; }
  #hero-cta-m, #cta-m { display: inline-flex !important; }
}

Result: 0 ms JavaScript execution, zero layout recalculations, and an instant response during viewport changes.

4. Killing the 1,450 ms LCP Element Render Delay

In our mobile LCP breakdown, Lighthouse reported:

“Element render delay: 1,450 ms — <p class="hero-note-mobile">”

Why Was Text Rendering Delayed?

We had styled our hero section with subtle entrance animations:

/* ❌ Starts at opacity: 0 with sequential delays */
.hero-headline-mobile { animation: fadeUp .7s .1s ease both; }
.hero-sub-mobile      { animation: fadeUp .7s .2s ease both; }
.hero-actions         { animation: fadeUp .7s .3s ease both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

Because fadeUp starts at opacity: 0 with sequential delays up to 0.4s, the throttled mobile CPU kept the text transparent or moving during the first 1.4 seconds. Lighthouse measures LCP at the moment an element finishes animating to its final state and opacity.

The Fix:

On desktop, smooth animations add polish. On mobile, instant clarity matters more. We disabled entrance animations for mobile hero elements:

@media (max-width: 768px) {
  .hero-headline-mobile,
  .hero-sub-mobile,
  .hero-note-mobile,
  .hero-actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .floating-cards { display: none !important; }
}

Result: Text paints at 100% opacity on frame zero. Mobile LCP dropped from 2.7s down to 1.4s.

5. Self-Hosting Fonts: Erasing Third-Party Latency

Our initial setup loaded typography from Google Fonts:

<!-- 3 external requests, 2 DNS lookups, 67 KiB payload -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" />

On slow 4G mobile connections, negotiating SSL handshakes with fonts.googleapis.com and fonts.gstatic.com and downloading 10 separate font weights consumed ~1.8 seconds.

The Solution:

Switch to a Variable Font: Downloaded a single manrope-variable.woff2 (just 24 KB) that natively supports every weight from 200 to 800.
Self-Host Everything: Placed the font files in /assets/fonts/ directly on our own domain.
Preload Critical Typography:

<!-- BaseLayout.astro -->
<link rel="preload" href="/assets/fonts/manrope-variable.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/assets/fonts/instrument-serif-regular.woff2" as="font" type="font/woff2" crossorigin />

And in CSS:

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-variable.woff2') format('woff2');
}

Result:

0 third parties in the entire Lighthouse network tab.
First Contentful Paint (FCP) dropped from 2.7s down to 1.1s.

6. Zero JavaScript on the Mobile Main Thread

Modern browsers on touch devices already have hardware-accelerated 120Hz momentum scrolling. Loading smooth-scrolling libraries (like Lenis) or custom cursor tracking loops on mobile achieves nothing while draining battery and hogging the main thread.

We refactored our client scripts to run strictly on desktop devices with fine pointers:

// Run custom cursor and Lenis only on desktop mouse devices
if (window.matchMedia('(pointer: fine)').matches) {
  import('/assets/js/lenis.mjs').then(({ default: Lenis }) => {
    const lenis = new Lenis({ lerp: 0.08, smoothWheel: true });
    // ...
  });
} else {
  // Pure native scroll listener for mobile
  window.addEventListener('scroll', () => {
    document.getElementById('nav')?.classList.toggle('scrolled', window.scrollY > 40);
  }, { passive: true });
}

Additionally, we deferred our third-party Cal.com scheduling embed until first user interaction (scroll, touchstart, or idle):

function loadCal() {
  if (window._calLoaded) return;
  window._calLoaded = true;
  // Initialize embed script...
}
['scroll', 'touchstart', 'mousemove', 'click'].forEach(evt => 
  window.addEventListener(evt, loadCal, { once: true, passive: true })
);

Result: Total Blocking Time (TBT) dropped to a flat 0 ms.

The Final Numbers

Metric	Before Optimization	After Optimization	Improvement
Mobile Performance	91 / 100	98 / 100	+7 Points
Desktop Performance	99 / 100	99 / 100	Rock Solid
First Contentful Paint (Mobile)	2.7 s	1.1 s	59% Faster
Largest Contentful Paint (Mobile)	2.7 s	1.4 s	48% Faster
Total Blocking Time (TBT)	54 ms	0 ms	100% Non-blocking
Cumulative Layout Shift (CLS)	0.003	0	Zero Shift
Total Asset Payload	~50 MB	~3.4 MB	93% Reduction
Third-Party Requests on Load	4	0	Completely Eliminated

Key Lessons for Web Engineers

Test mobile first and believe the throttling: Desktop scores are forgiving. If your site doesn't load fast on an emulated 4G budget device, your real-world mobile visitors are leaving.
Inline small CSS: If your stylesheet is under 15–20 KB gzipped, inlining eliminates an entire round-trip network waterfall.
Beware of entrance animations: Any CSS animation starting with opacity: 0 or moving layout elements above the fold will artificially inflate your LCP time.
Self-host your fonts: Google Fonts is great for rapid prototyping, but self-hosting variable .woff2 files eliminates external handshakes and saves 300–800ms.
Keep mobile JS-free: If an interaction (like smooth scrolling or mouse rings) doesn't apply to touchscreens, don't ship a single byte of it to mobile devices.

Performance isn't an afterthought or a plugin you toggle on at the end—it’s an engineering discipline baked into every component, style, and asset.

Const doesn't prevent immutability

Atul Bhatt — Tue, 13 Jun 2023 15:03:59 +0000

What is a variable?

In programming, a variable is a name given to a location in the #memory of the computer.

Instead of treating the value of a variable as a number, string, etc. If we start looking at the value of a variable as an address to the location in a memory, then it will make it easy to understand the concept of let and const in JavaScript.

A mental model for understanding

Consider const keyword as representation for constant word.

And let keyword as temporary.
for example, if you remember, solving equations in mathematics we often say.

let us assume value of x is 10.

Now, combining both knowledge:

value of variable is an address
const is for constant
let is for temporary

it will start making sense for the statement below:

_const doesn't prevent immutability. It just prevents reassignment. _

Examples

Now, when I do:

const a = 12
/* A memory address is assigned to a (ex: M121312)
Now the value of "a" internally is "M121312")
If I try to do again: */

a = 13 
/*A new memory space will be assigned to value 13 (ex: M121314) */

So, internally it seems like, we are trying to do reassign a value to a.

This might feel vague for now. But hold on.

Let's come to array.

const b = [1,23,45,56] 
/* b is assigned a memory address (M131314)
and when I do: */

b[2] = 24 
/* it works because the address of b is not changed. 
The value of b is still (M131314)
However, if I do:
*/
b = [1,24,45,56] 
/* it's a new value assignment, i.e., a new address (M131320) */

This is just a mental model to think about const and let that I came up with. I don't know if it's entirely correct or not.

Tell me in the comments if it makes sense!

As always thanks for reading. Stay curious!

Originally published at Klickspell Engineering

Hot Reload Fails, DOM adds an additional iframe

Atul Bhatt — Thu, 28 Apr 2022 16:41:47 +0000

Hey React Developers🙋‍♂️, this your gateway to solving this problem if you're still facing this. I've tested the solution in multiple React projects on various different devices with variety of OS and browsers. Why? Because everyone in my team was facing this issue but were not frustrated enough to solve it which I was.

I've gone through multiple github discussions and stackoverflow posts to finally reach this solution and then test it out.

Let's see the symptoms you're facing. Are they mentioned below:

Application becomes non-interactive, iframe is added to DOM.
Hot reload continues to work, but the page becomes unresponsive. Can't click or do anything unless you do a manual refresh.
process is not defined

Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at HTMLIFrameElement.e.onload (index.js:1)

You might have started facing this problem either after updating your CRA or starting a new project using create-react-app which lead to the probable lead cause of it to be react-error-overlay.

You can check the issue reported on github here

SOLUTION

npm i -D react-error-overlay@6.0.9

If this doesn't helps, check this out.

If this solution solves your problem, do like this post or comment down so that others can also get the benefit by reaching to it as early as possible. Till then safe debugging👍

Originally published at Klickspell Engineering

Useful Tips for Web Dev - Part1

Atul Bhatt — Wed, 27 Apr 2022 16:54:36 +0000

A lot of time there are some problems which we face occasionally but the time when that occasion become too often it becomes frustrating to keep searching those occasional problem here and there on stack overflow or documentation of the libraries. So I'm starting this series of Problems and Solutions to have my those problems all curated at one place. Let's see how it goes. Some of these problems took me to get through a lot of stack overflow answers to find the right one. I wish it saves someone's time.

1. How to change port for NPM start? or Node JS change server port?

SET PORT=8080 && npm start //windows
export PORT=4000 && npm start //MAC

2. How to find difference between 2 dates in days?

Let's say we have two dates, your date of birth and today's date and you want to find the difference between them in days. It's something I feel someone will someday definitely need to use. So here's the way to do it.

3. Some Quick Generic Web-Developer Friendly Shortcuts

Clear Console logs - developer tools (ctrl+l)
Close Tabs - (ctrl+w)
Duplicate a Tab - (ctrl+shift+k)
Open recently closed tabs - (ctrl+shift+t)
Hard Reload - (ctrl+shift+r)

4. NVM- Node Version Manager ( Windows)

If you're a JS developer then you have had or will at later point in time face the need to change the node version installed in your system because the project doesn't supports the latest. Here NVM - Node Version Manager comes to your rescue.

It allows you to have multiple Node Versions installed and toggle between them.
NVM-windows

5. Copy as CURL

When you're frontend developer you often need to integrate APIs. And a lot of time there might be issues which you would've have to communicate to the backend developer who will be needing things like the payload and header you sent with the api to** check** you passed everything correctly.
Instead, what you can do is send the CURL url to your backend developer which he can import in his API test tool like POSTMAN to check it.

These are few for now and I'll keep coming with more soon. Till then fast solving😁.

Originally published at Klickspell Engineering

Not 5 but 6 Things to ask Before Joining a new Organisation If you're a DEV or SDE.

Atul Bhatt — Wed, 27 Apr 2022 05:39:01 +0000

Often there comes a time when you've to face a situation to change your job. And there can be many reasons for that ranging from a high salary to work-life balance and many more.

So in this post I'll share some points that you can create a comparison table in order to decide which one to join and which one not.

1. Salary

Salary directly equates to money you'll earn. And you can say it's materialistic and we should not chase it. But but but...there's a catch.
You salary determines the worth of your time. It tells how much value you get for your time that you put in in your job.

Salary breakdown is also an important factor to check. Are you getting full amount in hand or there's a PF system. Because you can be a person like me who would like to have full money in hand and manage your money yourself instead of letting it be deprecated by inflation.

2. Job Location

Job location also plays a huge role when making career related decision. Location is very important as:

If you've to relocate to a new location and it's far it can be a pain to do so.
If the location is an expensive place then the salary you thought was high would actually look less in the end after all the expenditure.
Some people prefer to be around their family so now with the option to either do WFH or WFO or maybe Hybrid is now a choice based on location.
Job location also determines what kind of place or people you would like to be around. You can be working in a city which is IT Hub or a city which has good food, or maybe the mix of both world if you're that much lucky. So an awareness about the kind of lifestyle you want to have is must to make this choice.

3. Increment Structure

Increments are important to keep you motivated and hooked to the sense of making progress monetarily in your career. Therefore, it's always good to know how often increments are made, it's criteria, and what are the percentage ranges for the increment.

4. Bonuses

Adding to the increment there're annual bonuses and different other kinds of bonuses. So ask about the bonuses. They kind of add up to your annual income and hence boost your CTC.

Let's say you earn 12LPA and there are 10% annual bonus, then after completing a year you get 1Lakh and that kind of sums upto 13LPA.

5. Employee Friendly Policies and other

These are some minor things but plays a significant role in how easy it would be to carry on doing your job even if you love the job you do.

What are the leave policies? Number of leaves - paid leaves, sick leaves, etc. I even saw the option of unlimited leaves. Currently I don't know how it works but I'll update here once I do.
How flexible are timings? Do you need to pretend busy even if you're not?
Are there any coverage for health insurance or medical expenses?
Any upskilling model such as providing courses for online learning and other things?
Does the company provides you with the machine to work on or you've to use your own. Kinda sounds weird but there are some who ask you to use your own.

6. Bond and Notice Period

Firstly I would suggest that if you've multiple job offers in your hand refrain from bonds. Bonds are like handcuffs tied behind your hand.

I understand the role of bonds from the perspective of employer also as hiring is a cumbersome process so they won't want the hired employees to leave the place in early phase.

But what I also believe is that there's no good to keep someone who is not interested to be in the organisation as if they will only create a ripple effect of their negativity related to the organisation all around them inflicting their colleagues with it.
And Notice periods are also important I agree but make sure you don't sign off for more than 1 to 1.5 months.

I know a lot of these were obvious things but believe me they don't come to mind when you need them the most like the list of things we need to keep while traveling.

You feel me right?

I guess that's all for now. Comment down what you folks feel is also important to look before choosing a job. Till then happy hunting🙂.

Originally published at Klickspell Engineering

10 Cool Tech Portfolios

Atul Bhatt — Wed, 30 Mar 2022 04:30:19 +0000

There are many reasons that one should create their own tech Portfolios if they are a developer. The number one reason being - Proof of Work. So here in this post I'm going to list 10 Cool Tech Portfolios that I filtered out of many portfolios that are different, unique and awesome in their own way.
These portfolios can be an inspiration for your tech portfolio. So let's jump in.

Note: The screenshots are just for reference. They don't depict the actual hardwork and creativity of the portfolios demonstrated through - animations, loaders, fonts, transitions. Also these portfolios are not ranked!
Do check out these portfolios and comment down your best picks. Also, if you have a tech portfolio put that also down in the comment section.

I'm also looking more inspirations for creating my tech portfolio. So if you've a tech portfolio do not hesitate to comment that down. As always thank you for spending your time reading my posts.

Have an inspirational day :)

Originally published at Klickspell Engineering

No import React from 'react'. Here's Why!

Atul Bhatt — Tue, 29 Mar 2022 05:44:50 +0000

Information Source: The React Docs

So I assume if you are reading this post then you are probably a react developer or an aspiring react developer. Doesn't matter which one you're the above question is the one that you may encounter within yourself while working with react.

Now, what triggered me to write this blog post is depicted in the screenshot below and further explained below the screenshot. Let's uncover this mystery together.

So as you can see the one line without which the React didn't used to work is now treated as declared but not read or in other word used.
Yes folks, I'm talking about none other than import React from "react";

Perhaps something might have changed so what can be a possibility for that. This new warning makes sense as of now because we were always importing React even if it was not required.

So as always let's divide our post into question with the first one being-

Why do we do `import React from "react";`?

As I had already assumed that you're a react developer so I also assume that you know that React uses JSX.

However, the browser doesn't understands JSX so it has to be converted in something that browser understand and that is JavaScript, and this conversion of JSX into JS was possible because of compilers like Babel.

As now we've crossed 2020 already and React 17 is a thing which didn't introduced any new features but one thing. And that's the key to answer for our question. Can you guess what??

The support for a New Version Of JSX Transform.
I say it again.
The support for a New Version Of JSX Transform.

Now we have two JSX transform - Old and New obviously.

So before when we were doing:

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

The Old JSX transform used to do:

import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

Since, JSX was compiled into React.createElement, it was necessary for the React to be available in the scope.

Finally, one question is now answered.

But we are actually left with the original question. What's changed in new JSX transform that made it 'okay' to not import React for the sake JSX transform.

Now to import React so that it can be in the scope and just only because React.createElement can be called is not a perfect choice.

To solve this part and a few other performance improvements and simplifications (which we are not discussing here) React collaborated with the Babel to bring the new version of JSX transform into existence.

React made some changes in the React17 by adding two new entry points to the React package just to be used only by the compilers like Babel.

So now with the availability of these two new entry points that Babel uses to perform JSX transform which means the need to do JSX transform via React.createElement is no longer required.

And therefore folks, no need to do import React from "react" any longer if you are on React version greater than 16.

PS: If you're on older version of React such as React 16 or 15 or even 0 then there's a good news for you. React has released React 0.14.0, React 15.7.0, and React 0.14.10 for people who are still on the older major versions.

So now all you need to use latest JSX transform is these latest version and a supported compiler like Babel.

I hope you enjoyed reading this article and was able to calm your curious mind for some time. Meanwhile you can checkout my other posts.

Happy transforming into a curious reader.
Have a nice day folks.

Originally published at Klickspell Engineering

Breaking down `npx create-react-app` from npm to npx🥷

Atul Bhatt — Sun, 20 Feb 2022 15:05:50 +0000

Hello🙋‍♂️ to all the curious devs🤓. Today in this post I'm going to breakdown the things that npx create-react-app does for us. I know there are many other articles for the same but as always I'm documenting👻 this firstly for me and if it proves to be useful for anyone out here reading this it would make me more than happy😸.

So let's start. I'll break this down in the form of questions, and below is the first.

What exactly is npx?

So all those who don't know and just kept on running the command npx create-react-app, know that npx is a node package runner😎.

Oh! that was simple. N-node, P-package and X-???
Let the X here be from executor, kind of program executor in other words program runner. So here we have it node package runner.

We are going good😁 so far, now this article is not about npm but you might be thinking, and I mean might be thinking🤨 what is npm then?

So, again the same way npm is 'Node Package Manager' - N-Node, P-Package, M-Manager.

Now let's break down what is the role of a package manager and a package runner.🤫

Node Package Manager

npm is a package manager that helps💪 you in managing the dependencies/packages you as a developer want to have in your project.

It also helps you in managing🤏 whether you want to install those packages globally (for all the projects) or locally (for the current project).

This all that we are talking about is a CLI (command line interface) that gets installed when you install Node JS in your system.

But npm is more than that.🕵🏼‍♂️

So when you install a package on your system it's fetched from online, and in online that place is the npm repository.
So npm is a package manager which is a combination of a CLI and a Repository.

With now this sorted😼, it's time to hop back towards npx.

So it's obvious that you installed a package and you wanna do something with it. Maybe uninstall it which you can easily do with npm or use it by running it.

There's a catch

How to run a package or in other words execute it. Can't we do with the help of npm? And boy we can do it.

So the answer to why we need npx in the very first place is just about to be revealed.🦹‍♂️

How to run a package with the help of npm?

Now, for those who are thinking "I've run a package with npm before and aren't be always starting react server with the help of the command - npm run start"

Yes, so if we are able to do it why in the world npx🥴🥴???

So the catch here is that - you can run only those packages using npm run those are specified in your projects package.json. And that simply means if you wanna run a npm package you gotta add that in your package.json.

You see all those inside scripts. That's the key to npm run for various packages. Like format is for the prettier.
There are other tedious way to do so, such as specifying the local path:_ npm run ./node_modules/.bin/your-package_

Now, there comes our hero🦸‍♂️ into the picture - NPX.

Let's explore what npx brings on the table🧙‍♂️ for us.

npx easily runs Node.js based executable installed via npm.
We can run a locally installed package easily, and that's what we are looking here for.
There are other perks of npx but not in this article.

Do you know you can start react server with npx also as:
npx react-scripts start

It's time for CRA (create-react-app)👩🏻‍🎨

If you're a react-dev like me. Then you might have used this command atleast once in your life - npx create-react-app

Now we know what npx is and from all our discussion it's also clear that create-react-app is an executable, so let's find out what it does for us.

CRA is a toolchain.

And now another term to breakdown🤦. What is a toolchain??

Don't worry💆 it's a simple term which holds its meaning in its name. It's a chain of tools or a collection of distinct tools that helps in achieving the process of completing the software development and sometimes deployment too.

So CRA (create-react-app) is a JavaScript toolchain or a set of software tools which are basically CLIs to help in creation of a react project.

So instead of reinventing the wheel again, I would add few content from React Docs:

A JavaScript build toolchain typically consists of:

A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.

A bundler, such as webpack or Parcel. It lets you write modular code and bundle it together into small packages to optimize load time.

A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.

So, in short a CRA offers all these functionalities. For more info on this you can refer to react docs.

Thank you folks for reading all through this article. I tried my best to breakdown the terms that would've otherwise made you feel like you are missing some context to this.

Keep reading, keep learning, and never stop being curious. See you until next time.✌️✌️✌️

Originally published at Klickspell Engineering

React Interview - (Part 3)

Atul Bhatt — Sat, 22 Jan 2022 08:54:00 +0000

So welcome🙂 again to another part of React Interview series. So we’re finally now into part-3. Before I thought to bind up this series into total of 3 parts but there are so many questions to cover because React also includes JS. So hopefully this series will have total 5 parts.

So let’s cut out the introductory crap and jump directly into some more React interview questions.

1- What does useState return?
2- What’s the difference between React Router and React router DOM?
3- What are peer dependencies?
4- Can we use React without JSX?
5- Why do we have to use className prop and can't have class as a prop to a component as a CSS selector?

  <div className= “react-interview”>
  Hi! [dev.to](http://dev.to) 
  </div>

plaintext

6- Explain the Redux lifecycle.
7- What’s the output?

     const b = 'abc' 
     b.push(d) 
     console.log(b)

8- What are events in JS and how we can play around them?
9- Explain the use of useRef?
10- Difference between the Browser Router and Hash Router?

I'll be wrapping up this part of the article here. I'll be glad to read you answers to these question in the comment section.

And don't forget to mention your approach towards taking interviews. How you approach it? And I know there might be some flaws🥺 in asking these questions so you are free to point them out.

Originally published at Klickspell Engineering

Find No of days between 2 dates using moment.js

Atul Bhatt — Sat, 25 Dec 2021 19:00:39 +0000

Time and time again I'm reminded that you can't escape time and so are the problems related to date and time. One such very common problem is to find the difference between 2 dates.

Let me give you a very simple example where we will try to find the how many days old are you?
So it feels like not a such big deal but think of writing the entire logic on your own when you know you can write but it will much less of a hassle to do it via library like moment.

I'm writing this as an article here because it took me time to find the way to do it using moment itself. I'm writing this article more for myself than for others. So consider this as a treat.

Here's the code:

  let myDob = moment("19/12/1997", "DD/MM/YYYY");
  let today = moment();
  let myAge = today.diff(myDob, "years");
  let noOfDays = today.diff(myDob, "days");

Below is the embedded sandbox to demonstrate it:

Check out the same in moment docs:
moment

Thanks for your time reading this. I hope it helped you. Have a productive day :)

PS:Moment is in maintenance mode.

You can read about the meaning of it in the article linked below.
MOMENT.JS OFFICIALLY BECOMES A LEGACY PROJECT IN MAINTENANCE MODE

Originally published at Klickspell Engineering

React JS Interview(Part-2)

Atul Bhatt — Thu, 23 Dec 2021 10:45:32 +0000

So this is the second blog post where I'm sharing some more important questions that you may stumble upon while giving a React JS or just a JS interview. Even if you don't encounter any of these questions in your interview it will be good to check them out just for finding out how many of them you know well. Let's start.

What is a pure function?
What is a HOC?
Give some examples of HOC you have used.
What is render props?
Custom Hooks?
Difference between Custom Hooks and Functions and Component?
Explain the working of Virtual DOM in detail.
What is reconciliation in react?
What are controlled and Uncontrolled components?
Which one is better-controlled or uncontrolled components?
What is Memoization and how it can be achieved in React?
Do you know what is a toolchain?
What is code splitting in React and how we can achieve it?
What is hoisting in JavaScript?
What is the difference between Array.forEach() and Array.map()?
Explain event loop?
Name one JS engine.
Is Javascript Object Oriented? If not then what type it is?

Some JS snippets to try:

Snippet1

let a = [1,2,3,4,5]
let b = a
b[3] = 10
let c = b
console.log(a,b,c)
//Output: ??

Snippet2


let obj1= {name:"atul", age:24, 
           hobbies:['reading books', 
           'writing blogs','exercising', 'poetry']}
let obj2 = obj1
delete obj2['hobbies']
console.log(obj1, obj2)

Snippet3


const aa  = 5
const bb = [12,23,543,56]
const cc = {name: "atul", age:24}
ac= 10 //What will happen? Is this Ok.
bb[3] = 9
bb[4] = 12
cc['Age'] = 'greater than 18'

Snippet4


let myself = {
  name: "atul",
  age: 24,
  hobbies: ["reading books", "writing blogs", "exercising", "poetry"],
  favourites: {
    movies: ["Iron Man", "End Game", "Spiderman"],
    Sports: ["Cricket", "Football", "Basketball", "Badminton"],
    song: ["Legends Never Die", "Chidiya: Vilen", "etc", "etc..."]
  }
};

let yourself = { ...myself };
yourself["hobbies"] = ["Guitar playing", "playing football", "Dancing"];

let newSelf = {
  ...myself
};
newSelf.favourites.movies = ["Star Wars", "Ice Age", "Batman", "Flash"];

console.log("myself:", myself);
console.log("yourself:", yourself);
console.log("newself", newSelf);

Here is link to all the questions asked above with implementation, so that you don't feel slacking off with what will happen in each case.

I will be ending this article here for now. I'll continue it in the next part with more questions that will cover more in-depth questions. So see you around here next time.👋 Have an insightful day 😄.

Originally published at Klickspell Engineering

5 Frequently used JS libraries for React

Atul Bhatt — Wed, 15 Dec 2021 10:34:46 +0000

I've seen many interns that join my company who have just basic knowledge of JS and are starting to dive into a UI library like React struggling with what to learn ahead to fasten there development journey. While there are lot of things you can learn from the internet to proceed further in your Web Development journey through React JS but I believe there are some JS libraries that you should immediately start practicing and get a grasp on. This is something I've felt after working on multiple React projects.

So without further adieu let's start with our list. This list is biased towards React so please take this list with a grain of salt.

1. Moment (https://momentjs.com/)

One thing that always seize to exist is time. One day or another day you'll definitely get a data that'll require you to deal with time. So moment is the library that's a must to learn. The library is easy and offers a lot of methods to manipulate date and time.

2. Axios (https://axios-http.com/docs/intro)

Axios is a simple promise based HTTP client for the browser and node.js. In simple words, Axios is a library that you use to perform API callings. Axios reduces the pain of API calling by providing features like:

Make XMLHttpRequests from the browser

Make http requests from node.js

Supports the Promise API

Intercept request and response

Transform request and response data

Cancel requests

Automatic transforms for JSON data

Client side support for protecting against XSRF

3. Material-UI (https://mui.com/)

There always comes a time when you have to dive into a UI library to get prebuilt components to fasten your development. And the most common UI library I've encountered in various projects I've worked on is material-ui. Apart from material-ui you can also look into core-ui.

4. React-toastify (react-toastify/introduction)

React toastify says it's usage all with its name. It's quite useful for displaying toast messages to update user on events like successful login, signup, and rest is upto your usage and imagination where you feel it can fit your usage.

5. Formik (https://formik.org/)

A web project without dealing with form feels so much incomplete. I don't intend to say that a project without form is not a project but here and there forms will be there. When it comes to dealing with form the other things that will definitely hop on are from fields validations.
Formik is a small library that helps you with the 3 most annoying parts:

Getting values in and out of form state

Validation and error messages

Handling form submission

I would like to keep this post short and would like to hear more about your top 5 picks. Of course there are other libraries which totally deserve to be in this list such as redux, core-ui, react-bootstrap, font-awesome, and many more. But let's keep them preserved for some other time. I'm really excited to know about your top picks from the comments.

Thanks for your time reading. Have a informatic day.

Originally published at Klickspell Engineering

DEV Community: Atul Bhatt

How We Achieved a 99 PageSpeed Score: A Real-World Web Performance Case Study

The Audit: Diagnosing the Bottlenecks

1. Asset Optimization: 49 MB ➔ 3.3 MB (93.2% Reduction)

The Rules We Applied to Every Image:

2. Inlining Critical CSS to Kill the Render-Blocking Chain

The Problem:

The Fix:

3. Eliminating Forced Reflow / Layout Thrashing

Why This Hurts:

The Fix: Pure CSS Media Queries

4. Killing the 1,450 ms LCP Element Render Delay

Why Was Text Rendering Delayed?

The Fix:

5. Self-Hosting Fonts: Erasing Third-Party Latency

The Solution:

6. Zero JavaScript on the Mobile Main Thread

The Final Numbers

Key Lessons for Web Engineers

Const doesn't prevent immutability

What is a variable?

A mental model for understanding

Examples

Hot Reload Fails, DOM adds an additional iframe

SOLUTION

Useful Tips for Web Dev - Part1

1. How to change port for NPM start? or Node JS change server port?

2. How to find difference between 2 dates in days?

3. Some Quick Generic Web-Developer Friendly Shortcuts

4. NVM- Node Version Manager ( Windows)

5. Copy as CURL

Not 5 but 6 Things to ask Before Joining a new Organisation If you're a DEV or SDE.

1. Salary

2. Job Location

3. Increment Structure

4. Bonuses

5. Employee Friendly Policies and other

6. Bond and Notice Period

10 Cool Tech Portfolios

No import React from 'react'. Here's Why!

Why do we do import React from "react";?

But we are actually left with the original question. What's changed in new JSX transform that made it 'okay' to not import React for the sake JSX transform.

Breaking down `npx create-react-app` from npm to npx🥷

What exactly is npx?

Node Package Manager

There's a catch

How to run a package with the help of npm?

Now, there comes our hero🦸‍♂️ into the picture - NPX.

It's time for CRA (create-react-app)👩🏻‍🎨

CRA is a toolchain.

So instead of reinventing the wheel again, I would add few content from React Docs:

React Interview - (Part 3)

Find No of days between 2 dates using moment.js

React JS Interview(Part-2)

5 Frequently used JS libraries for React

1. Moment (https://momentjs.com/)

2. Axios (https://axios-http.com/docs/intro)

3. Material-UI (https://mui.com/)

4. React-toastify (react-toastify/introduction)

5. Formik (https://formik.org/)

Why do we do `import React from "react";`?