DEV Community: Murtaza Nathani

How the TypeScript Record Type Works

Murtaza Nathani — Sun, 29 Jan 2023 22:38:38 +0000

The Record type in TypeScript is used to create a dictionary of key-value pairs, where the keys and values can have specific types. A Record type is essentially an object type, but it provides a way to specify the types of the keys and values for better type checking and code readability.

The basic syntax for creating a Record type is:

let myRecord: Record<KeyType, ValueType>;

Where KeyType and ValueType are the types of the keys and values, respectively.

For example, consider a scenario where you want to create an object that represents a score board in a game of rock-paper-scissors. You can define a Record type with the keys being the possible moves (e.g. "A X" for opponent's move being Rock and user's move being Scissors) and the values being the scores for each combination of moves.

const scoreBoard: Record<"A X" | "A Y" | "A Z" | "B X" | "B Y" | "B Z" | "C X" | "C Y" | "C Z", number> = {
  "A X": 4,
  "A Y": 8,
  "A Z": 3,
  "B X": 1,
  "B Y": 5,
  "B Z": 9,
  "C X": 7,
  "C Y": 2,
  "C Z": 6,
};

In this example, the keys of the scoreBoard object are of the type "A X" | "A Y" | "A Z" | "B X" | "B Y" | "B Z" | "C X" | "C Y" | "C Z", which represents the possible combinations of moves in the game. The values of the object are of the type number.

With the Record type, you can enforce that only valid combinations of moves are used as keys in the object. If you try to access a key that doesn't exist in the object, you'll get a type error, helping you catch errors early in the development process.

const score = scoreBoard["A Z"]; // score is of type number

const invalidScore = scoreBoard["D X"]; // Type 'undefined' is not assignable to type 'number'

Additionally, the Record type provides better code completion and documentation in your IDE, making it easier to understand the expected keys and values in your objects.

You can also use a Record as a type for a function's parameter or return type:

function myFunction(data: Record<string, number>): Record<string, number> {
    // do something with data
    return data;
}

Another use case for Record is when you want to create an object with a fixed set of keys and specific types for the values. This can be useful when working with configuration objects or data that should only have a specific set of keys and values.

Using the Record type in your code provides several benefits, including:

Improved code readability: The Record type makes it clear what types of keys and values are expected in the object, making it easier for other developers to understand your code.
Better type checking: TypeScript will catch errors if you try to assign a value of the wrong type to a key in the object.
Consistency:
The Record type enforces consistency by ensuring that all keys and values in the object have the same types, reducing the likelihood of bugs caused by inconsistent data.

In conclusion, the Record type in TypeScript is a powerful tool for defining objects with specific types for keys and values. By using the Record type, you can write more readable, type-safe code that is less prone to bugs caused by inconsistent data.

Optimizing to find the top 3 numbers from an array

Murtaza Nathani — Tue, 24 Jan 2023 15:00:24 +0000

How to find the the top 3 largest number in an array parsing from a file..

There were many solution popping... like sorting and grabbing the top 3 elements,
That would require:

parsing the file to an array --> O(n)
sorting the array --> O(n)
getting top --> c (constant time)

Doing this was boiling my blood.. and i was at unrest, so i wanted to optimize it by:

parse the file and keep record of top 3 in an array [0, 0, 0] and keep comparing the current with top 3 to update them. --> O(n)

As follows:

     // current is greater then topThree first then set the all top three  
      if (current > topThree[0]) {
        topThree[2] = topThree[1];
        topThree[1] = topThree[0];
        topThree[0] = current;
      }

     // current is greater then topThree second then set bottom two  
      if (current < topThree[0] && current > topThree[1]) {
        topThree[2] = topThree[1];
        topThree[1] = current;
      }

     // current is greater then topThree third then set the third only.  
      if (current < topThree[1] && current > topThree[2]) {
        topThree[2] = current;
      }

For more details check the code for day 1, aoc 2022 here:

https://github.com/m-nathani/aoc-2022/blob/main/src/days/day-1.ts

Looking forward to hear from you on comments to find other learnings you had for day1 or could improve the current approach more.

Things learned from AdventOfCode 2022

Murtaza Nathani — Tue, 24 Jan 2023 15:00:11 +0000

What is AdventofCode (aoc) ?

Its series of 25 leetcode / problem solving question that you can solve to learn and enjoy.

Its writtern by Eric Wastl, please follow and support his work.

For more insights check the link below:
https://adventofcode.com/2022/about.

Lets Jump to learnings ! :D

Adventofcode has total 25 question, from which to the date of writing i am attempted few out of it.

Can check the implementation here: https://github.com/m-nathani/aoc-2022/

Day 1 : code
Day 2 : code

Moreover, have learned / revised things i could not have done with the regular programming i do at work

I was motivated on attempting the aoc last year in 2022 by my colleague @hendriklammers, who i admire of how he is keen to learn different techs and solving problems. So thank you. :)

Regards.

Are you dealing with IMPOSTER SYNDROME ?

Murtaza Nathani — Fri, 02 Dec 2022 21:11:52 +0000

Purpose of this article:

What is imposter syndrome ? and You are not alone in this syndrome
Chance to start sharing with others and thinking about how imposter syndrome is wrapped up in your own life.
How to handle the syndrome and reduce the effects of it!

Introducing the syndrome 🥺

“I’m a fraud”

Imposter syndrome is loosely defined as doubting your abilities and feeling like a fraud. It disproportionately affects high-achieving people, who find it difficult to accept their accomplishments.

Albert Einstein

The exaggerated esteem in which my lifework is held makes me very ill at ease. I feel compelled to think of myself as an involuntary swindler.

Kate Winslet

Sometimes I wake up in the morning before going off to a shoot, and I think, I can’t do this. I’m a fraud.

“They’re going to find me out”

Most of us have experienced feelings of doubt and unworthiness at some point in our lives. But when your accomplishments are a result of your own knowledge, hard work, and preparation and you still feel inadequate ... you're probably suffering from impostor syndrome.

Maya Angelou

I have written 11 books but each time I think ‘Uh-oh, they’re going to find out now. I’ve run a game on everybody, and they’re going to find me out.

“Everybody else knows more than me”

It's the feeling that everyone else knows exactly what they're doing, but you feel lost.

Margaret Chan, Director-General, World Health Organisation 2006

There are an awful lot of people out there who think I’m an expert. How do these people believe all this about me? I’m so much aware of all the things I don’t know.

“I’m about to embarrass myself”

Sandberg, Chief Operating Officer, Facebook 2021

Every time I was called on in class, I was sure that I was about to embarrass myself. Every time I took a test, I was sure that it had gone badly. And every time I didn’t embarrass myself — or even excelled — I believed that I had fooled everyone yet again. One day soon, the jig would be up

This is imposter syndrome 🚨

Imposter syndrome and you

Let's openly talk about it, and share that you are not alone with this feeling, your comment will help others feel better and come out of imposter syndrome.

Poll please 🗳️

Do you experience imposter syndrome?

Yes
Sometimes
No
Don’t know enough about imposter syndrome to say
Other

Does it affect your professional life? 💼

A lot
A bit
No
Don’t know

Looking forward to hear from you in the comments 📝

Lets overcome this shit 💪

Share your feeling, talk about it, it's the first step towards overcoming the syndrome.
Recognize the skills you have already.
Identify your fears and doubts and make a plan to work on them
Create a career timeline that works for you and keep track of your accomplishments
Onboarding is designed to take time. So don't worry if you have joined a new company and it's taking time to adjust.
Check in with your peers or manager
Compare with your past self
Find your place on the Dunning-Kruger curve.

The purpose of Dunning-Kruger curve is to understand people's inability to recognize their lack of experience. Because a lack of knowledge leads to not knowing what are you talking about and confidence makes it impossible to realize it. The graphic shows ability curve, overconfidence and competency.

It never ends:

handle imposter syndrome as you progress ! 🎉

Murtaza NathaniFollow

Passionate to share what i learn. I feel it's my responsibility as the community has given many help for developing my career !

Delete all node_modules folders from your system ? 🤔

Murtaza Nathani — Fri, 02 Dec 2022 20:52:00 +0000

Is it giving you hard time to remove node_modules folders from each of your project ? 🙈

You never delete node_modules after finishing project due to the tedious work nature ? 🙊

Maybe you forget to delete it most of the time ? 🙉

NO WORRIES!!! 🎉

We have one simple command to delete node_modules folders inside a particular folder... or to delete all node_modules from the system then run from home directory 🔥

npx npkill

Boom! 💥, that's it.. run this command and it shows a list of the node_modules directories in your system, as well as the size they take up. Then you can select using arrow keys and spacebar to erase it fast, Yay!

For more details check ➡️ here

Two lines of CSS that boosts 7x rendering performance!

Murtaza Nathani ・ May 29 '22

#webdev #css #performance #html

Best way to learn Closure in JavaScript ?

Murtaza Nathani — Wed, 22 Jun 2022 19:14:11 +0000

There are tons of resources out on the web which explain what closure is...

I will cut the crap of giving this:

a function inside a function bla bla... is closure.

Instead what I will do is to give you a 1 minute snippet that you need to scan and understand the output of the below 👇 code will be (without running on compiler or looking into the answer).

Once done we can check the answer and learn the concept of it.
Please feel free to comment, would love to respond and learn together.

let cachedFunc = null

function log(message) {
  if (!cachedFunc) {
    // creates a function that closes over `message`
    // keep in mind `message` inside `log` is different
    // on each call
    cachedFunc = () => console.log(message)
  }
  cachedFunc();
}

log("hello")
log("goodbye")

Check the answer below compare:

Click to expand the Answer

Step by step execution:

cachedFunc is declared with null, and a function log.
On calling log("hello"), the context of calling log function is same as the cachedFunc declared, so it will find it's value to null as declared in outer scope.
Inside the if condition it will update the cachedFunc to a inline function which prints argument message to console.
Then it calls cachedFunc method which results in the message "hello".
On the second call log("goodbye") will not initialize the method again.

So it will call the method that was in previous scope, in which the value of message is "hello" and that's why it will print the same "hello" again.

Further explanation related to `Reactjs`:

Under the hood, useCallback works in a very similar way. On the first render, React saves the function you pass to useCallback somewhere and will always return that function.

Every other render will have your saved function, and will "remember" the scope it was created in, including the old value.

Without useCallback or adding dependencies to it, a new function would be created on each render or change in the dependencies, which means it would be able to refer to new with an up-to-date value.

Here is the link to codepen to further play with it :)

Regards.

How to Cache bust web app

Murtaza Nathani ・ Jun 5 '22

#webdev #javascript #react #devops

JavaScript's unsafe optional chaining is crazy |:

Murtaza Nathani — Wed, 15 Jun 2022 08:58:18 +0000

Optional chaining:

Optional chaining has made life of javaScript programmer easy by handling the checks using the syntax ?.

However, here we are NOT to discuss how awesome it is, rather solving a issue how of to safely use it.

no-unsafe-optional-chaining

no-unsafe-optional-chaining is an amazing eslint rule, which help us identify what are we doing wrong with optional chaining and disallows use of optional chaining in contexts where the undefined value is not allowed.

I have one case where I need to perform a sort operation on id which could be in string type which make sense to throw error because it could result in NaN, if order is not a number as follows:

The issue



  const sortComparer = (a, b) => (+a?.order) - (+b?.order)

My solution

However, if i do handle no-unsafe-optional-chaining as follow it still throws error and does not work:



  const sortComparer = (a, b) => (+a.order || 0) - (+b.order || 0),

The way it worked

The only way to make it work is like this:



  const sortComparer = (a, b) => (a?.order ? +a.order : 0) - (b?.order ? +b.order : 0),

Question ? :S

Does anyone know how to fix this in a better way to avoid this issue ?

Regards.

Are you dealing with IMPOSTER SYNDROME ?

Murtaza Nathani ・ Dec 2 '22

#discuss #career #community #productivity

How to Cache bust web app

Murtaza Nathani — Sun, 05 Jun 2022 18:13:20 +0000

Why do we need to do cache busting ?

Static file gets cached and can be stored for a long period of time before it ends up expiring. So in order to get the latest features and fixes we need to remove the cache so that browsers can get the latest updates.

Additionally, have you ever felt web application like soundcloud, facebook etc..., asking to reload or upgrade after deployment, no right ? how the hell are they doing the updates ?

Making sure we have cache invalidated in CDN

Cache busting solves the CDN caching issue by using a unique file version identifier.
As discussed in the previous article we used no-cache policies on some files to bust the cache using unique files names. Hence we are sure that cloudfront will always keep the updated files..

Lets bust the browser cache

So today will cover what is the one of the best approach to seamlessly bust the cache of the frontend application in the browsers when a deployment is done, without the user feeling the app was upgraded...

The trick

The trick is we keep updating the version of the application in meta file, which never gets cached... and to seamlessly upgrade, we perform a reload on the route change so that user would feel as if they are redirecting to a different view, but in our case we are actually cache busting our application to get the new update from the build we deployed.

Let's dig in to see how its possible.

How to check if a new build is generated

To know when we have a new build in browsers we keep two version of the application.

package.json version
meta.json version

What are these version and how we manage it

Here is the command prebuild that runs before every build to manage both versions as shown below:



    "release": "HUSKY=0 standard-version",
    "prebuild": "npm run release && node ./build-version",

package.json version is kept and maintain using tools like Semantic versioning or Standard release which upgrades the package version after every deployment. Here we are using standard-version to always get our package.json upgraded.
meta.json version is created in public folder using a script build-version.js we wrote to make sure we always get a latest version after deployment.

build-version.js:



const fs = require('fs');
const { version } = require('./package.json');

fs.writeFile('./public/meta.json', JSON.stringify({ version }), 'utf8', (error) => {
  if (error) {
    console.error('Error occurred on generating meta.json:', error);
    return;
  }
  // eslint-disable-next-line no-console
  console.info(`meta.json updated with latest version: ${version}`);
});

The above scripts takes the latest version from package.json which was upgraded using npm run release and save it to meta.json using fs.writeFile.

Here is how the output of the above script will look like:

meta.json:



{ "version": "108.0.0" }

Before we proceed to the next step, let me inform you that we are using the following frameworks in our app:

Reactjs: react
Routing: react-router-dom

Code to check application is upgraded

We created a hook that could be placed in a suitable position in your application, preferably on layouts/routes:



import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { version } from '../../../package.json';

const useCacheBuster = () => {
  const location = useLocation();
  const parseVersion = (str) => +str.replace(/\D/g, '');

  useEffect(() => {
    fetch(`/meta.json?v=${+new Date()}`, { cache: 'no cache' })
      .then((response) => response.json())
      .then((meta) => {
        if (meta?.version) {
          const metaVersion = parseVersion(meta.version);
          const packageVersion = parseVersion(version);
          if (packageVersion < metaVersion) {
            if (window?.location?.reload) {
              window.location.reload();
            }
          }
        }
      })
      .catch((error) => {
        console.error('something went wrong fetching meta.json', error);
      });
  }, [location]);

  return null;
};

export default useCacheBuster;

The hooks above is doing the following:

useEffect having a deps of location, which runs on every change of the route.
parseVersion is a pure function that can format the version like "1.0.5" into a number 105, so we can compare the versions.
On changing the app route, the hook fires and fetches /meta.json files from the root of the app, important thing to note here is we are passing a date param: and cache, to make sure this file never returns the cached content on fetching.
Using the response of meta.json we are checking if packageVersion is less than metaVersion, which means the new build has deployed and the browser is using the old cached build, so the app needs to reload.
If the above condition is true then reload it!.

NOTE: if you are using a CDN then you need to cache bust in CDN by adding the meta.json to behaviours as shown here

P.S: we can optimize the fetching of meta, by conditionalizing it on certain routes rather then all.

That's it folks..., all you need to perform cache bust in browser programmatically.

Conclusion

The solution above is useful for the scenarios when you have a frequent deployment to production.
Moreover, in my understanding for apps used in webview or apps saved on homepage could also be similarly busted with different reload methods...

Please feel free to comment on the approach, would love to hear your feedback on this.

Regards.

Plugin to make micro frontend using create react app

Murtaza Nathani ・ Dec 26 '21

#javascript #react #webdev #programming

How to Cache web app?

Murtaza Nathani — Sun, 05 Jun 2022 12:54:36 +0000

I would like to share my learning on how we were able to cache web app and then bust the cache on every deployment so that the users can experience the latest changes.

Why do we need to cache ?

Well obviously why would you do the same work again, if you can save and reuse it.

In other words, lets say you need something and have to travel a long distance, so you keep it somewhere near to access it quickly.

Before I go into more details, would like to brief you on my tech stack:

React app using create-react-app
Using aws s3 to upload and host the static build
Cloudfront to cache it on the edge locations, with s3 origins

How did we cached before and why it was not a good approach

We have created a script that was used in our pipeline to deploy our app to s3:

What's happening in above script ?

We are using aws cli to upload build to s3 using s3 sync command which upsert and delete files.

Important thing to notice is that we are handling the cache on s3 with static folder being cached and rest is not.

Well coming back to tech stack we are using s3 to upload builds and cloudfront to cache, then why the hell are we using s3 to cache.. :D

How did we manage to change the approach

Using one of the rule of SOLID is single usability principle

Robert C. Martin describes it as:

A class should have one, and only one, reason to change.

Using s3 to just upload the files, of what is purpose is like:

#!/bin/bash

if [[ "$1" != "" ]]; then
    S3BUCKETNAME="$1"
else
    echo ERROR: Failed to supply S3 bucket name
    exit 1
fi

aws s3 sync build/ s3://$S3BUCKETNAME --delete

and using cloudfront to create Cache behavior using unique path patterns in the order of priority to apply.

As shown in the above image we created three behaviors, with its specific purposes to cache or not cache. Make note that index.html is not cached because its entry point of our app and we want this file to be always updated on new deployment, hence it will always refetch from s3 origin.

Moreover, you can use existing cache policies provided by AWS or create your own here

P.S: if you want to use a cache header such as no-cache in CloudFront to perticular resource in origin, then we can add headers to s3 origin, as I couldn't find a equivalent way to do the following in CloudFront:

aws s3 cp build/index.html s3://$S3BUCKETNAME/index.html --cache-control no-cache

Additionally, Note: no-cache doesn't mean "don't cache", it means it must check (or "revalidate" as it calls it) with the server before using the cached resource.

Cache Busting

Well one of advantages of using build produced from CRA is that it generates a unique hash with file names which automatically gets cache busted on cloudfront when we upload to s3.

Well another approach to cache busting is invalidating the cache, which is not a good approach as it's relatively slow, and could get expensive fast seeing as cloudfront gives you just 1,000 free invalidation's per month, and then charges $0.005 per invalidation path requested as at the date of writing.

Besides, it’s pretty clear that CloudFront recommends Object Versioning or unique file names over invalidation…

If you’ll want to update your files frequently, we recommend that you primarily use file versioning

Conclusion

Here we learned how to manage cache using cloudfront, rather than writing your own bash scripts and managing it
Making full use of cloudfront to update and reuse the cache policies between different origins or distributions
Can add your own regex as path in cache behavior
No need of invalidating cache, as its expensive and not a best approach

Would love to hear your thoughts with this approach.
Regards,

Two lines of CSS that boosts 7x rendering performance!

Murtaza Nathani — Sun, 29 May 2022 09:45:04 +0000

I'll cut the crap out and jump directly to the two line of css that you need to add to improve your performance by approx 7x:



{
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}

Why do you need this?

Website's nowadays need to be optimal and performant, users on the web have very short attention span. According to Doherty threshold response time to be 400 milliseconds.

Now imagine a website like Facebook,Instagram etc.. taking more time then the threshold ? No one would be coming back to these sites again.

When would you use this?

Most common use cases for this is when you have huge list/grid of data that needs to render at the mount of the application.

Example: Static website like specs or documentation or travel blogs etc...

Would love hear in comments if you have any other use cases for it.

How does it work ?

The browser acts smart by skipping rendering work with the class you applied with content-visibility: auto.

Browser needs to know the layout of the DOM in order to render, those elements which are not in viewport are not rendered and infact have empty box with contain-intrinsic-size you provided.

To summarize all of the rendering is deferred until it reaches the viewport at which the browser renders the actual layout with the width, height and styles you provided.

P.S: the layout which are not outside of the viewport would have a height: 0, so when deferred layout comes to viewport it would stack on top of each other, so that's why contain-intrinsic-size is needed, However, no worries these are just a fallback values, browser will render the actual ones when it renders in viewport.

Hence one drawback of this is the scrollbars would be wacky and jump to places if the contain-intrinsic-size not given properly. :)

Browser Support

content-visibility relies on the the CSS Containment Spec. While content-visibility currently is supported on mostly chromium tech as at the date of writing.

However, content-visibility support is not bad for a good to have feature on high end systems, however with progressing web development it will soon be supported in all browsers too. Hopefully :)

Alternatives

There are alternatives to improve performance using JavaScript, such using List virtualization, but who wants to write 100's of line of js and maintain it when you could do it in 2 lines of css

Further reading; that you could do it in js:
react-window
react-virtualized

Excellent demo and explanation:

Best way to learn Closure in JavaScript ?

Murtaza Nathani ・ Jun 22 '22

#webdev #javascript #programming #beginners

Plugin to make micro frontend using create react app

Murtaza Nathani — Sun, 26 Dec 2021 07:36:55 +0000

Hello everyone, I got inspired by how micro service works on backend and helps scale, manage and brings flexibility to develop apps. So i created a plugin that would help frontend to use micro apps.

This blog is divided into three parts:

Why did I create the plugin - The Purpose.
What's micro-frontend. - The thing.
How to use it. - Getting started.

The purpose ✨ ?

Convert your CRA project into a node library without ejecting or losing update support of react-scripts...

Ummmm.. that sounds interesting.. but why ?

Well, my apps were used as a single page app in a WebView and also as node package 📦 in a react app.
I was using ejected create-react-app. For which I had to customize webpack as a tool to build app for SPA and as a library.

So far it was working fine, until apps grew... it was harder to manage and with time I have to keep updating the ejected cra dependencies and update webpack config for all the apps.. which is not a good practice and requires more resources to do it...

So after research, found two best ways to do it

craco we chose this option
vite

However, there are pros and cons for choosing each, such as with craco comes with its amazing loader and plugins and provide extensive community due to vast ecosystem of webpack and CRA.. etc
vite is using esbuild and is quite fast and less in size as compare to webpack... etc

The thing 🎯

Micro-frontend are a new pattern where web application UIs (frontends) are composed from semi-independent fragments that can be built by different teams same or using different technologies.

Benefits of Micro Frontend Architecture

Separation automation of CI/CD pipeline
Team flexibility
Single responsibility
Reusability
Technology agnosticism: Micro Frontend architecture is independent of technology. You can use components from different web development frameworks (React, Vue, Angular, etc.)
Simple learning (Smaller modules are easier to learn and understand)

Getting started :the_horns::skin-tone-4:

Craco is a api that overrides CRA and allowes to configure it. So using it I create a plugin called craco-plugin-micro-frontend that would build ours apps.

Install it:

npm install craco-plugin-micro-frontend --save-dev

Use the plugin into your craco.config.js as below:

const microFrontedPlugin = require('craco-plugin-micro-frontend');

module.exports = {
  plugins: [
    {
      plugin: microFrontedPlugin,
      options: {
        orgName: 'my-org',
        fileName: 'my-app.js', // should same as package main
        entry: 'src/index.injectable.js', //defaults to src/index.injectable.js,
        orgPackagesAsExternal: false, // defaults to false. marks packages that has @my-org prefix as external so they are not included in the bundle
        reactPackagesAsExternal: true, // defaults to true. marks react and react-dom as external so they are not included in the bundle
        externals: ['react-router', 'react-router-dom'], // defaults to []. marks the specified modules as external so they are not included in the bundle
        minimize: true, // defaults to false, sets optimization.minimize value
        libraryTarget: 'commonjs2', // defaults to umd
        outputPath: 'dist',
        customJestConfig: {}, // custom jest configurations
      },
    },
  ],
};

NOTE: src/index.injectable.js is a wrapper around the react App file so that it would be separated from src/index.js:

import App from './App';

export default App;

Update the package.json scripts section of your app as follows:

  ...
  "main": "my-app.js",
  "files": [
    "dist/**"
  ],
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "build:lib": "REACT_APP_INJECTABLE=true craco build",
    "test": "craco test",
    "coverage": "npm run test -- --coverage --watchAll=false --passWithNoTests",
    "coverage:browser": "npm run coverage && open coverage/lcov-report/index.html",
    "analyze": "REACT_APP_INTERACTIVE_ANALYZE=true npm run build",

Conclusion

This plugin helped me manage the build process and made my life easier.. Now that CRA new version is release to v5 all I have to to do is update dependencies of craco-plugin-micro-frontend and it would update react-scripts to v5, thus all my app will upgraded too.

~~P.S: craco-plugin-micro-frontend is waiting for @craco to update its peer deps to react-script: "5.0.0" Further information at: craco-issue~~

NOTE

craco-plugin-micro-frontend now fully supports react-script: "5.0.0" 🥳

Here is the repo for the demo

Thats it, thanks!

How to Cache web app?

Murtaza Nathani ・ Jun 5 '22

#react #s3 #cloudfront #devops

DEV Community: Murtaza Nathani

How the TypeScript Record Type Works

Optimizing to find the top 3 numbers from an array

Things learned from AdventOfCode 2022

What is AdventofCode (aoc) ?

Lets Jump to learnings ! :D

Are you dealing with IMPOSTER SYNDROME ?

Purpose of this article:

Introducing the syndrome 🥺

“I’m a fraud”

“They’re going to find me out”

“Everybody else knows more than me”

“I’m about to embarrass myself”

Imposter syndrome and you

Poll please 🗳️

Do you experience imposter syndrome?

Does it affect your professional life? 💼

Lets overcome this shit 💪

It never ends:

Murtaza NathaniFollow

Delete all node_modules folders from your system ? 🤔

NO WORRIES!!! 🎉

Two lines of CSS that boosts 7x rendering performance!

Murtaza Nathani ・ May 29 '22

Best way to learn Closure in JavaScript ?

Check the answer below compare:

Step by step execution:

Further explanation related to Reactjs:

How to Cache bust web app

Murtaza Nathani ・ Jun 5 '22

JavaScript's unsafe optional chaining is crazy |:

Optional chaining:

no-unsafe-optional-chaining

The issue

My solution

The way it worked

Question ? :S

Are you dealing with IMPOSTER SYNDROME ?

Murtaza Nathani ・ Dec 2 '22

How to Cache bust web app

Why do we need to do cache busting ?

Making sure we have cache invalidated in CDN

Lets bust the browser cache

The trick

How to check if a new build is generated

What are these version and how we manage it

Code to check application is upgraded

Conclusion

Plugin to make micro frontend using create react app

Murtaza Nathani ・ Dec 26 '21

How to Cache web app?

Why do we need to cache ?

How did we cached before and why it was not a good approach

What's happening in above script ?

How did we manage to change the approach

Further reading

Cache Busting

Conclusion

Two lines of CSS that boosts 7x rendering performance!

Why do you need this?

When would you use this?

How does it work ?

Browser Support

Alternatives

Excellent demo and explanation:

Further readings:

Best way to learn Closure in JavaScript ?

Murtaza Nathani ・ Jun 22 '22

Plugin to make micro frontend using create react app

This blog is divided into three parts:

The purpose ✨ ?

The thing 🎯

Getting started :the_horns::skin-tone-4:

Conclusion

NOTE

How to Cache web app?

Murtaza Nathani ・ Jun 5 '22

Further explanation related to `Reactjs`: