The Motivation Behind useEffectDependencyDebugger

While working with useEffect, developers often need to know exactly which dependency caused the hook to fire. This knowledge is crucial for debugging and optimization, particularly in complex components where effects depend on multiple state variables or props.

How useEffectDependencyDebugger Works

The useEffectDebugger is a custom hook designed to wrap around the standard useEffect hook, providing clear insights into which dependencies have changed and triggered the effect. It leverages a helper hook, usePrevious, to track the previous values of dependencies, allowing for a comparison with their current values.

Building the Tools: usePrevious and useEffectDependencyDebugger

The usePrevious Hook:

usePrevious captures and retains the previous value of a dependency across renders. It utilizes useRef to hold the value and updates it on each render through useEffect.

const usePrevious = (value, initialValue) => {
    const ref = useRef(initialValue);
    useEffect(() => {
        ref.current = value;
    });
    return ref.current;
};

**The useEffectDependencyDebugger Hook:
**This custom hook identifies and logs the dependencies that have changed since the last render. It does so by comparing the current dependencies against their previous values, captured by usePrevious. Changes are then logged for debugging purposes, before calling the original useEffect hook with the provided effect function and dependencies.

const useEffectDependencyDebugger = (effectFunction, dependencies) => {
    const previousDependencies = usePrevious(dependencies, []);
    const changedDependencies = dependencies.reduce((accum, dependency, index) => {
        if (dependency !== previousDependencies[index]) {
            const keyIdx = index;
            accum[keyIdx] = { before: previousDependencies[index], after: dependency };
        }
        return accum;
    }, {});
    if (Object.keys(changedDependencies).length) {
        console.log('[use-effect - dependency-debugger]', changedDependencies);
    }
    useEffect(effectFunction, dependencies);
};

How these 2 hooks can be used now :

// Before :
useEffect(() => {
// Effect logic here…
}, [dep1, dep2]);

//After
useEffectDependencyDebugger(() => {
// Effect logic here…
}, [dep1, dep2]);

Conclusion

The useEffectDebugger offers a simple yet effective way to pinpoint which dependencies trigger the useEffect hook, significantly easing the debugging process. By providing insights into dependency changes, developers can better understand and optimize their components, leading to more efficient and maintainable React applications.

useCallback

useCallback is a hook designed to memoize functions. This means it caches a function instance between renders, preventing the creation of a new function if the dependencies have not changed. This is particularly beneficial when passing callbacks to optimized child components that rely on reference equality to avoid unnecessary renders.

const memoizedCallback = useCallback(() => {
    doSomething(a, b);
},[a, b,] // Dependencies
);

useMemo

useMemo is a built-in React hook that accepts 2 arguments; a function compute that computes a result and the dependencies array.

const memoizedData = useMemo(() => {
    computeExpensiveValue(a, b)
},[a, b] // Dependencies
);

During initial rendering, useMemo invokes compute, memoizes the calculation result and returns it.

If during the next renderings the dependencies don’t change, then useMemo doesn’t invoke compute but returns the memoized value

Distinguishing Their Use Cases

While both hooks aim at reducing the computational cost, their application scenarios differ. Use useCallback when you need to maintain the same function instance across renders, which is crucial for performance optimization in components that rely on reference equality for prop comparisons. useMemo is your go-to for avoiding expensive recalculations, caching the result of computations instead of function instances.

Performance Considerations

It’s important to use these hooks judiciously. Overuse can lead to memory overhead because memoized values and functions must be stored. Assess the complexity of computations and the frequency of re-renders to make an informed decision about employing these hooks for optimization.

In Summary

React’s useCallback and useMemo offer powerful means to enhance your application’s performance. Choosing between them hinges on whether you’re aiming to memoize functions with useCallback or compute values with useMemo. Understanding their distinct roles and applying them wisely can significantly improve your app’s efficiency and responsiveness.

Consider the scenario where we’re importing a specific function, targetFunction, from a module called @example/library:

import { targetFunction } from '@example/library'

You might wonder how to correctly use jest.spyOn to monitor this function, especially what argument to pass first. Jest’s spyOn expects an object or module as the first parameter, and the name of the method to spy on as the second.

The trick to effectively monitoring a named export is to import the entire module’s contents as an object, then pass this object into jest.spyOn. Here’s how it’s done:

import * as exampleLibrary from '@example/library'
jest.spyOn(exampleLibrary, 'targetFunction').mockReturnValue({ key: 42 })

Be aware that attempting this might sometimes result in a TypeError: Cannot redefine property: targetFunction due to Jest’s handling of property definition. If you encounter this, it means spyOn cannot be used directly to mock this particular function. You’ll need to employ an alternate strategy for mocking in such scenarios

read more — https://www.shauryakalia.com/blog/

Instead of checking hard facts we corroborate the story told to us Confirmation Bias: we tend to uncritically accept accounts that confirm our opinions while immediately searching for reasons to ignore those that challenge them Champion Bias: reputation of the messenger outweighs the value of the info he bears Experience Bias: since we are the biggest champion to ourselves, if a story is relevant to our experience, we believe it even more Test the null hypothesis.

Attribution Error : our first impulse is to attribute success/failure to individuals, to their choices/personality but not to the circumstances. The Halo Effect : we generate an overall impression based on a few salient characteristics. Survivorship Bias : we focus on successful cases and forget the failed ones, it makes us think that risk-taking is the reason for success. We can find inspiration from the success story heroes but looking for practical lessons can be a serious reasoning error

Intuition is a poor guide to strategic decisions, intuition is based on rapid recognition of a situation that has already been experienced and memorized, even if the lesions from that experience haven’t been consciously formulated - recognition primed decision model. Dealmaking benefits from intuition, deciding which deal to make does not Decision makers intuition is relevant if : Prolonged practice with clear feedback in a high validity environment Strategic decisions are the exact opposite, they take place in a low validity environment, in which decision makers have had limited practice with delayed and unclear feedback.

In general we overestimate ourselves relative to others. Planning fallacy : when we make a plan, we don’t necessarily imagine all the reasons it could fail. We overlook the fact that success requires alignment of many favourable circumstances while a single glitch can derail everything. Consider the competition even when no one tells you to do it in advance. Where do our beliefs stop and our desires start? It’s healthy to be optimistic about what we can control, not what we can’t.

make leads to engaged leads (someone who shows interest)

how to get leads to engage?

lead magnet - a complete solution to a narrow problem given away at a significant discount ( or free ) to attract ideal customers

lead magnets get prospects one step closer to buying your stuff

A person who pays with their time now is more likely to pay with their money later

trade bad problems for better problems - problem solution circle - a problem solved will lead to a newer problem

pick who and what narrow problem you want to solve

lead magnet types: reveal problem, free trial, free step 1 of X

delivery mechanisms : software - give them a tool to see the delta of where they are and where they can be

information - teach them something

services - work for free for them, provide a free service

physical products - something they can relate to and have value in

after you’ve written your headline you’ve spent 80% of your advertising dollar

Engage your leads, run ads, run polls, do it on every platform

make post and ask people to comment

DM people in your list asking

Make it fast and easy

software - accessible on phone, computer and multiple formats

information - use all consumption preferences - videos / audiobooks/ books / etc

service - available more times , more ways, more days

physical products - simple to open and use

market judges you on your free stuff

people buy based on expectation of future value, so get people value before they actually buy

make CTA ( call to action )

CTA should be clear simple what to do, give reasons to do it right now, make it scarce + urgent

2 types of audiences :

warm : gave you permission to contact them, they need to know you, friends/family

cold: strangers

2 type of communication :

1:1 (private) : outbound, call / email / mail blast / text / dm

1:many (public) : inbound, billboard / podcast / posts

one person can only tell others about anything in core four ways:

warm outreach - 1:1 , people who know you, cheapest and most reliable have a story prepared and how it works get a list of these people personalize : find out what’s happening in their life and ask about it ( humanize ), let them talk about themselves, act like you actually want to talk to them and not working a lead reach out : 100 reach outs a day , when: first four hours of your day ACA - Acknowledge what they said then restate it to show you’re listening, Compliment on whatever they tell you (tie it to a positive character trait if you can) , Ask next question - lead the conversation to your direction of offer make your offer - act like you’re offering to someone they know (hey, do you know someone who is looking for… give them what dream outcome you are offering with an example who used your offer before and how good it was for them, describe the same struggle. Pause and at end ask does anyone come to mind?) ask them to leave reviews / feedback and send in their friends/family

cold outreach - 1:1, strangers

post free content - 1:many , people who know you

more scalable - needs more skill

helps grow warm audience, makes all other advertising more effective, just costs time

hook → retain → reward (reason to consume content) (pay attention) (satisfy them for consuming the content)

hook : redirect their attention to us from whatever they were doing

pick good topics

far past : life lessons recent past : calendar breakdown present : real time capture ( tweets/email )

trends : apply your lens to something happening in the area of your expertise manufactured : turn a crazy idea to reality

pick good headlines

recency - as recent as possible

relevancy - personally meaningful , eg. nurses will pay more attention to things that affects nurses not accountants

celebrity - including prominent people

proximity - close to the person geographically

conflict - of opposing ideas, opposing people/nature etc

unusual - bold, unique, rare, bizarre

ongoing - stories still in progress are dynamic, evolving and have plot twists

match the format that’s rewarded them before make content that’s performing on that particular platform that you’re targeting

retain : retain through curiosity, what happens next

use lists, steps and stories format to retain consumers

Lists: things/facts/topics/opinions/ideas presented one after another and follow a theme. eg. “Top 10 mistakes” , “5 biggest money makers”

Steps: actions that occur in order and accomplish a foal when completed, if the early steps are clear and valuable the person will want to know how to do them all. eg. “7 steps to get things done”

Stories: events real or imaginary, stories worth telling have some lesson or takeaway for the listener. Stories on things that have happened, might happen or will never happen.

reward : how good your content is depends on how often it rewards your audience in the time it takes them to consume it, ie bring value for the consumer in your content

hook the right audience

clearly satisfy the reason the content hooked them to begin with

make your content so that even a new person coming to your content can consume it without being confused

start with short form and build to long form

Monetizing Give: Ask ratio - jab jab jab right-hook social media : 4 posts content then 1 advertisement give in public, ask in private how to ask integrated - in 4:1 ratio of your single content follow give:ask (keep low frequency) intermittent (better for short form content) - once in a while one of your content ask, 4 give content 1 ask content

example : I have 11 more tips that have helped me do this, go to my site to grab a pretty visual of them. then on my site in the thank you page will be a lead magnet to display my paid offer with some video explaining how it works

Scale Content (depth then width): post on a relevant platform, post regularly

maximize quality and quantity of content, short form.

then add another platform

switch from “How To…” narrative to “How I…” narrative

people need to be reminded more than need to be taught

run paid ads - 1:many, strangers

const initialState = caluclateValue(props);

const [someStateVal, setSomeStateValue] = React.useState(initialState);

We can lazy initialize useState with a function like this:

const getInitialState = (props) => caluclateValue(props);

const [someStateVal, setSomeStateValue] = React.useState(initialState);

In this case, React will only call the function when it needs the initial value. that is once at the time of the first render. This is called “lazy initialization.”

Play with it or test it out here!

Originally published at https://www.shauryakalia.com.

Deep Work: “Professional activities performed in a state of distraction-free concentration that pushes your cognitive capabilities to their limit. These efforts create new value, improve your skill, and are hard to replicate.” The Deep Work hypothesis: “The ability to perform Deep Work is becoming increasingly rare at exactly the same time it is becoming increasingly valuable in our economy. As a consequence, the few who cultivate this skill, and then make it the core of their working life, will thrive.” Shallow Work: “Non-cognitevly demanding, logistical style tasks, often performed while distracted. These efforts tend to not create much new value in the world and are easy to replicate.”

Some famous Deep Workers: Richard Feynman, Carl Jung (see Bollingen Tower), Bill Gates, Mark Twain, Woody Allen, among others.

“Instead of a novel that will be around for a long time...there is a bunch of e-mail messages that I have sent out to individual persons. ” - Noel Stephenson on the importance of Deep Work.

Why Deep Work is “the superpower of the 21st century” (As regarded by business writer Eric Barker) To quickly hone complicated skills. The current information economy places heavy reliance on complex systems that change rapidly. This is important to remain valuable. The digital network revolution greatly enhances our reach. To effectively garner a large audience, “you have to produce the absolute best stuff you’re capable of producing”.

Both of these tasks require depth.

Some pointers about Deep Work Requires long periods of uninterrupted thinking Network tools negatively impact deep work A skill that you cultivate (and get better at) with time & practice

Part 1: The Idea Chapter One of Three: Deep Work is Valuable

The unprecedented growth and impact of technology are creating a massive restructuring of our economy (The Great Restructuring). In the new economy, three groups will have a particular advantage: those who can work well and creatively with intelligent machines, those who are the best at what they do, and those with access to capital. Regarded as ‘The High Skilled workers’, ‘The Superstars’, and ‘The Owners’, respectively. (As described in an analysis by MIT economists Erik Brynjolfsson and Andrew McAfee) How to thrive in the New Economy: By applying the practice of Deep Work to be able to Quickly master hard things Produce at an elite level, in terms of both quality and speed Core components of Deliberate Practice (By K. Anders Ericsson): Unwavering focus on the idea/skill you’re trying to master, as a consequence of uninterrupted concentration free of distractions Receiving feedback to evolve approaches to be most productive Neurological foundation for the concept of Deep Work: Focusing intensely on a specific skill forces relevant circuits in your brain to fire repeatedly, in isolation. Myelin is a layer of fatty tissue that grows around neurons. You get better at a skill as you develop more myelin around the relevant neurons (by repeatedly firing the specific circuits). It is important to avoid distractions because they fire up too many circuits simultaneously and haphazardly, preventing specific strengthening (myelination of certain circuits). High-Quality Work produced= Time Spent x Intensity of Focus (Thus by maximizing your intensity, you can produce more HQ work per unit time) Why ‘Switching’ (between tasks) is bad: When we switch between two tasks, our attention doesn’t immediately follow. If our previous task was of low intensity and unbounded, our attention remains divided on the old task for a while (attention residue), not allowing us to focus completely on the task at hand. Why you shouldn’t sneak a glance at your phone’s incoming messages/emails: By seeing messages that you can’t deal with at the moment, you’ll be forced to return to your task with an unfinished secondary task that still has (part) of your attention.

Chapter Two of Three: Deep Work is Rare

Big trends in business like Instant Messaging actively decrease people’s ability to perform deep work. The Principle of Least Resistance (basically: without clear feedback, we do what’s easier) gets enhanced by the effect of Metric Black Hole (basically: When metrics fall into an opaque region resistant to easy measurements- Like figuring out how many hours you actually studied when you had your phone right beside you). This explains why we support work cultures that save us from short-term discomfort of concentration and planning, at the expense of long-term satisfaction and the production of real value. Clarity about what matters provides clarity about what does not. We use Busyness as a Proxy for Productivity: Knowledge workers tend to be visible business because they lack a better way to demonstrate their value. We assume, “if it’s high-tech, it’s good.” We are a technopoly- we no longer discuss trade-offs surrounding new technologies, (discussed more in -- chapter about -- tools) Deep Work is exiled in favour of more distracting high-tech behaviours because it is built on decidedly old-fashioned values like quality and craftsmanship.

Chapter Three of Three: Deep Work is Meaningful

Knowledge work is ambiguous; it can be hard to define what a knowledge worker does and how it differs from another. The Three Arguments for Depth- Neurological Argument for depth: Our brains construct our worldview based on what we choose to pay attention to. Center our attention on the process and divert it from the outcome. We allow circumstances to dictate how we feel. Deep work allows us to focus on the small-scale details of how we spend our day. Leaves no room or attention for overthinking. Concentrating on a particular task for a long period of time prevents us from thinking about the minor unpleasant things in life. Psychological Argument for depth: Contrary to popular belief, human beings are at their best when immersed in something challenging. We assume that relaxation makes us happy but It is tough to structure free time. It does not provide us with the deep satisfaction of having done something productive or worthwhile. Does not generate a ‘flow state’- does not stretch our limits. Philosophical Argument for depth: In a Post-enlightenment world, we have tasked ourselves to identify what’s meaningful and what’s not, an arbitrary exercise that might induce nihilism. “You don’t need a rarified job. You need a rarified approach to your work.” Deep work does not generate meaning, it allows us to cultivate the skill that helps to discern the meaning that is already there.

Part 2: The Rules

Rule 1: How to integrate deep work into your life Rule 2: How to increase your deep work limit (concentration training) Rule 3: How to quit social media to improve your life Rule 4: How to drain the shallows

Rule #1: Work Deeply You have a finite amount of willpower. Distractions deplete it. Move beyond good intentions. Add routines and rituals to your working life. Set a time and quiet location for your deep work. There are 4 Depth Philosophies. Based on individual suitability and circumstances, everyone employs different depth strategies. You’d have to choose yours- Monastic Philosophy: Attempts to maximize deep efforts by eliminating or radically minimizing shallow obligations. Can only be employed by a limited number of people. -is anyone still reading the grey text?- That is if your contribution to the world is discrete, clear, and individualized. Bimodal philosophy: Divide your time into 2 distinct pursuits. Dedicate some clearly defined stretches to deep work and leave the rest for everything else. Can happen on multiple time scales. The minimum unit of time needs to be 1 full day. Rhythmic Philosophy: Make deep work a simple daily habit. Use the ‘Chain Method’ (Marking Xs on the calendar, Pg 110). Do the work every day and make an easy way to remind yourself to do the work. Saves energy in deciding if/when you’ll do deep work. Helpful in case of commitments without pressure and deadlines. Journalistic Philosophy: Fit deep work wherever you can into your schedule. Requires enough practice to be able to quickly switch in and out of deep work mode. Works if you’re confident in the value of what you’re trying to produce. Rituals minimize the friction encountered while transitioning to deep work mode. Important questions that need to be addressed- Where you’ll work and for how long- Ideally, a quiet place with no distractions and with a specific time frame in mind. How you’ll work- Creating rules and processes to structure your work efforts. Example- instituting internet bans and defining metrics for productivity How you’ll support your work- Providing support to your brain to keep it operating at a high level of depth. Food and exercise. Make Grand Gestures. Increase the perceived importance of the task. Leverage a radical change in your working environment. Couple it with a significant investment of effort and/or money. Don’t Work Alone. See the theory of serendipitous creativity (basically: when you allow people to bump into each other, smart collaborations and new ideas emerge). Adopt the hub-and-spoke approach (expose yourself to ideas in hubs on a regular basis, but maintain a spoke in which to work deeply on what you encounter). Working in collaboration with someone can help enable the whiteboard effect. Learn to Execute. The 4 DX framework (overcoming the gap between the what and how of execution)- Discipline #1: Focus on the Wildly Important. “The more you try to do, the less you actually accomplish.” Identify a small number of ambitious outcomes to pursue with your deep work hours. Discipline #2: Act on the Lead Measures. (Read: lead and lag measures, page 137) Discipline #3: Keep Score. Can be helpful to have a physical scoreboard, measuring the number of deep hours. Discipline #4: Create a Cadence of Accountability. Conduct weekly reviews to celebrate wins, understand bad weeks, and figure future strategies.

Be Lazy. Idleness is necessary to get any work done. Inject regular and substantial freedom from professional concerns into your day. Shut down work thinking. Because downtime aids insight. (Read: UTT - Unconscious Thought Theory) Helps recharge the energy needed to work deeply (Read: ART - Attention Restoration Theory) Work replaced by evening downtime is usually not that important. Inculcate a shutdown ritual (Read: The Zeigarnik effect - incomplete tasks dominate our attention) Understand that you don’t need to complete a task to get it off your mind. Take a final look at the inbox, review incomplete projects, ensure nothing urgent’s left. Can include a ‘shutdown phrase’.

Rule #2: Embrace Boredom - Concentration Training

Concentration is a habit and skill that needs to be trained. People who multitask all the time can’t filter out irrelevancy. They can’t manage a working memory. Don’t take breaks from distraction. Take breaks from focus. Example- schedule internet time in advance, then avoid it altogether outside those hours. “The use of a distracting service does not, by itself, reduce the brain’s ability to focus. It’s instead the constant switching... that teaches our mind to never tolerate an absence of novelty.” Rules for internet blocks: The total number or duration of your internet blocks don’t matter as long as the integrity of the offline blocks remains intact. If your work requires you to spend a lot of time online, that’s fine. This simply means you would have to place more internet blocks in your schedule. If it’s necessary to use the internet to complete a task in an offline block, try to switch to another offline activity. In case you must go online, do so after enforcing a gap of at least 5 minutes. This separates the sensation of wanting to go online from the reward of actually doing so. Schedule internet use even in your free time. Resisting distraction and returning our attention to a single well-defined task strengthens our distraction-resisting muscles.

Rule #3: Quit Social Media

Network tools fragment our time and reduce our ability to concentrate. However, it is unfeasible to think that we can quit the internet. It is important to accept that some online tools can be vital to your productivity or life. We use the Any-Benefit Approach while selecting network tools (the idea that we’re justified in using a tool as long as we can identify any benefit associated with it). Instead, adopt the craftsman approach to tool selection (performing a harm-benefit analysis of network tools in our life). Apply the law of the vital few (the 80/20 rule)- Have a small number of goals in your personal and professional life. Then list 2 or 3 most important activities that help you satisfy the goal. Attempt to assess the impact of various tools and understand if they work for or toward the detriment of your goals. All activities, regardless of their importance, consume your same limited store of time and attention. Stop using all social media for 30 days and join back only if your days would have been notably better with them. Put more thought into your leisure time. Plan it out with activities such as structured hobbies, a set program of reading, exercise, or enjoyment of good company.

Rule #4: Drain the Shallows When you have fewer hours, you usually spend them more wisely. Once you’ve hit your deep work limit for a day, you’ll experience diminishing rewards if you try to cram in more. Schedule every minute of your day. We spend our days on auto-pilot. Divide the hours of your workday into blocks and assign activities to them. Batch similar things into generic task blocks. The minimum length of a block should be 30 minutes. When you’re done scheduling, every minute should be part of a block. Your estimates might prove wrong and sudden new obligations can make it impossible to follow through with your plan. Counter this by being realistic about the time it takes for you to complete a task. Additionally, set overflow blocks with split purposes or alternate uses. Allow spontaneity. Continually ask yourself “what makes sense for me to do with the rest of my time?”. Determine how much shallow work you do in a day and quantify the depth of your activities by asking- “How long would it take to train a smart recent college graduate with no specialized training to complete this task?” Tasks that leverage expertise are deep tasks. Fixed schedule productivity- don’t work past a certain time by maximizing the efforts you produce in your working hours. Place a hard limit on the amount of less urgent obligations you allow to slip insidiously into your schedule.
Reducing shallow work commitments frees our time and mental resources that can then be dedicated toward deep commitments. Do more work when you send or reply to emails to reduce unnecessary back and forth. Send fewer emails and ignore the ones that aren’t easy to process. It’s the sender’s responsibility to convince the receiver that a reply is worthwhile. Let small bad things happen. Makes time for life-changing big things.

Conclusion Deep work gets valuable things done. Deep work necessitates hard work and drastic changes to your habits and routines. Requires you to leave behind the comfort of social media and email messaging. Opens you to confront the possibility that the best work you’re capable of producing is not that good (yet). But depth generates a life rich with productivity and meaning. Allows you to push yourself to your cognitive limits and achieve your best working potential.

General JavaScript functions can’t be interrupted in the middle of function execution, that is, there is no interruption from the time the function is invoked until function execution completes. When we want to execute functions which can be interrupted or which can execute after a while once execution starts, then we can use a new type of function called generator functions which came into place with ES6.

Fun fact: Async Await is built on top of generator functions

Declaring a generator function:

function* generate() {}

The yield keyword introduced in ES6 is used to stop the execution inside the generator function. It can be used only inside the generator functions and can’t be used inside the general JavaScript functions.

A generator function will always return the iterator object, when the iterator calls a next() method, then the function starts execution till the 1st yield statement. The next() returns an object with two properties:

1. value (any): The value returned by the function till the first yield statement.

2. Done (boolean value): Returns a boolean value true or false which defines whether the function execution is completed or not.

Whenever we use the return statement in the middle of generator functions, it indicates the function is done with the execution and is complete. Whenever we call the next() method, it executes the generator function until the 1st yield statement, and later it executes the next yield for every next() method call and continues until all the yield statements are executed.

Sample :

Originally published at https://www.shauryakalia.com/blog*.*

Ever since reviving my blog I have been planning to add a discussion forum of sorts to it as well. Found Disqus as the right choice for now, although I would have gone for an open sourced alternative but after evaluating the other choices I ended up adding Disqus just to try out the free trial version for now. I might even build an open sourced alternative myself soon if this doesn’t work out well for me.

First and foremost, you’ll need a Disqus account and register a site so that you can access it via the shortname. A shortname is the unique identifier assigned to a Disqus site. All the comments posted to a site are referenced with the shortname. The shortname tells Disqus to load only your site’s comments, as well as the settings specified in your Disqus admin panel.

1. Register your site here

2. Enter a sitename to be used as reference

3. Check the image below

Next step is to open your Gatsby app’s codebase and install gatsby-plugin-disqus

yarn add gatsby-plugin-disqus

Once that is done successfully, update your gatsby-config.js to contain the following

module.exports = {   
    plugins: [  
        {   
            resolve: `gatsby-plugin-disqus`,   
            options: {   
                shortname: `your-disqus-site-shortname`   
            }   
        },   
    ]   
}

Lastly, use the following code sample to modify your blog component and setup Disquss as you like.

That’s it, folks. It takes about 10 minutes to get a simple smooth discussion platform up and running on your Gatsby blog. Reach out to me if you face any issues or have any doubts.

Originally published at https://www.shauryakalia.com.

While working on multiple branches of a codebase I have come across multiple scenarios where sometimes I am building something and have to switch branches to fix a bug on priority and send it to production. git stash is one solution but it becomes messy if you have multiple changes stashed, maintaining node modules becomes a hassle if there are different ones on different branches, worktree makes all of this work like magic !

# Create a branch-2 dir with the branch-1 checked out
git worktree add ../branch-2 branch-1

# Then simply get to work
cd ../branch-2
git fetch && git reset --hard origin/branch-1
git checkout -b branch-2

Now I can contribute to multiple branches easily and can simultaneously test out the branches without one branch impacting the other branch at all.

Fun fact: Async Await is built on top of generator functions

Declaring a generator function

function* generate() {}

“Yield” Keyword introduced in ES6 is used to stop the execution inside the Generator function. It can be used only inside the Generator functions and can’t be used inside the general JavaScript functions.

Generator function will always returns the iterator object, when the iterator calls a “next()” method then the function starts execution till the 1st “yield” statement. The “next()” returns an object with two properties i.e… 1. value (any): The value returned by the function till 1st yield statement. 2. Done (Boolean value): Returns a boolean value true or false which defines whether the function execution is completed or not.

Whenever we use “return” statement in the middle of generator functions, it indicates the function is done with the execution and completed. Whenever we call the next() method it executes the generator function until the 1st yield statement, and later it executes the next yield for every next() method call and continues until all the yield statements are executed.

sample :

// A simple generator function that demonstrates how generators yield values
// and how execution can pause and resume between yields.
function* generator(i) {
  // The first yield immediately returns the initial value of i
  yield i; 
  console.log('first console i:', i);

  // The second yield adds 10 to i
  yield i + 10;
  console.log('second console');

  // The generator returns 15. After this return, the generator is considered done.
  return 15;

  // Even though we wrote another yield here, it will never execute because the return statement above ends the generator.
  yield i + 20;
}

// Create a generator instance, passing in the initial value 6
const gen = generator(6);

// Each .next() call continues the generator until the next yield (or return)
// 1) Returns { value: 6, done: false }
//    The generator "paused" right at yield i;
console.log(gen.next()); 

// 2) Logs 'first console i: 6' then returns { value: 16, done: false }
//    The generator "paused" at yield i + 10;
console.log(gen.next());

// 3) Logs 'second console' then returns { value: 15, done: true }
//    The generator is now done because of the return 15 statement.
console.log(gen.next());

// 4) Now that the generator is finished, subsequent calls return { value: undefined, done: true }
console.log(gen.next());
console.log(gen.next());

It is not the physical pain that hurts the most, it is the mental agony caused by the injustice, the unreasonableness of it all.

“A man's suffering is similar to the behavior of a gas. If a certain quantity of gas is pumped into an empty chamber, it will fill the chamber completely and evenly, no matter how big the chamber. Thus suffering completely fills the human soul and conscious mind, no matter whether the suffering is great or little. Therefore the "size" of human suffering is absolutely relative.”

Viktor states that we can live life in 2 ways, run after the comforts throughout all of our lives so or keep the materialistic comforts to the minimum and try to explore the other aspects of life like spirituality and helping others.And i do believe that in the end, none of these things would matter since we don’t take any of it with us in the afterlife but I also do not completely agree that “our good deeds will be with us in the afterlife as well”, that is because no one really knows what really goes on after we die, the way we chose to live will only amount to our legacy in the end, what we leave behind and how the people left behind will remember us.

Victor very rightly states that If you have a “why” to live for, you will survive any “how”.

To find this “why”, one needs to look for what motivates him, to even go through hardships and suffering for it.

“The one thing you can’t take away from me is the way I choose to respond to what you do to me. The last of one’s freedoms is to choose one’s attitude in any given circumstance.”

A new company’s most important strength is new thinking : question received ideas and rethink business from scratch

If you can identify a delusional popular belief, you can find what lies behind it : the contrarian truth. - Nietzsche Conventional beliefs only ever come to appear arbitrary and wrong in retrospect, whenever one collapses, we call the old belief a bubble. But the distortions caused by these bubbles never disappear, instead they leave us with lessons about the same . How much of what you know is shaped by mistaken reaction to past mistakes? The most contrarian thing of all is not to oppose the crowd but to think for yourself !

What valuable company is nobody building? Non monopolists exaggerate tier distinction by defining tier market as intersection of various smaller markets, whereas monopolists disguise their monopoly by framing their market as a union of several large markets. If you lose sight of competitive reality and focus on trivial differentiating factors, your business is unlikely to survive. In business, money is either an important thing or it is everything. Monopolists can care about things other than money, non-monopolists cannot. Monopolies drive progress because the promise of years/decades of monopoly profits provides a powerful incentive to innovate. Monopolies can then keep on inventing from their profits as input to new researches In business equilibrium means stasis, stasis means death. If your industry is in competitive equilibrium there will always be someone to take your place at your death. Outside economic theory , businesses are only successful if they do somethings others cannot, monopoly hence is the condition of every successful business All failed companies are similar in that way, they failed to escape competition.

Really it’s competition and not business that is like war, allegedly necessary, supposedly valiant, but ultimately destructive. If you’re less sensitive to social cues, you’re less likely to do the same things as everyone else around you Winning is better than losing, but everyone loses when the ear isn’t worth fighting.

The value of a business today is the sum of all the money it will make in future. If you focus on near term growth above all else, you miss the most important question you should be asking : will this business still be around a decade from now? You will need numbers + qualitative characteristics of your business for this Every monopoly has a combo of : proprietary tech, network effects, economies of scale and branding Proprietary tech must be 10x better than its closest substitute in some important dimension to lead to a monopolistic advantage, else it is just a marginal improvement and will be hard to sell Network effects will produce great results only if your product is valuable to its first few customers Start small and monopolize. It’s easier to dominate a small market than a large one. Small doesn’t mean non existent Dominate a niche then scale to adjacent markets, as you craft the plan to expand to adjacent markets, don’t disrupt and avoid competition. You must study the endgame before anything else

Shallow people believe in luck/circumstances, strong ones believe in cause and effect In an indefinite world, money is more valuable than what can be done with it, only in a definite future is money a means to an end, not the end itself Leanness is a methodology not a goal, making small changes to things that already exist might lead you to a local maximum, but it won’t help you find the global max. Founders only sell when they have no concrete visions for the company, a business with a good definite plan will always be underrated in a world where people see the future as random. It begins by rejecting the unjust tyranny of chance. You are not a lottery ticket

Power law : 80/20 ( best investment in a successful VC fund equals or outperforms the entire rest of the fund combined ) Applies to your career as well, an individual cannot diversify his own life by keeping dozens of equally possible careers in ready reserve You should focus relentlessly on something you’re good at doing, but before that you must think hard about whether it will be valuable in the future

SOCIAL TRENDS conspiring to root out belief in secrets Incrementalism - one by one, day by day, grade by grade. If you overachieve you won't be rewarded Risk Aversion - fear of being wrong, dedicating your life to something no one believes in and then the prospect of being lonely and wrong can be unbearable Complacency - why search for new secrets when you can comfortably collect rents on everything that has already been done Flatness - people imagine if it were possible to find something new won’t someone smarter / more creative have found it already?

If you think something hard is impossible, you will never even start trying to achieve it. Belief in secrets is an effective truth

What secrets is nature not telling you? What secrets are people not telling you?

As a founder your first job is to the the first things right, you cannot build a company on a flawed foundation Every single member of your board matters, even one problem director will cause you pain and may jeopardize your company’s future. A board of 3 is ideal, it should never exceed 5 unless the company is publicly held. Any kind of cash is more about the present that future, CEo should be aligned to making more value in the future Equity hence being the form of compensation that can effectively orient people toward creating value in the future

Since time is your most valuable asset, it's odd to spend it working with people who don't envision any long term future together. People have to be talented but more than that they have to be excited to work specifically with us You will attract the employees you need if you can explain why your mission is compelling: not why it’s important in general, but why you’re doing something important that no one else is going to get done. The second thing is how the person if perfect fit with your team, else there is no point.

Advertising doesn’t exist to make you buy a product right away, it exists to embed subtle impressions that will drive sales later Think of distribution as something essential to the design of your product. If you’ve invented something new but no way to sell it, you have a bad business no matter how good the product Total net profit on average over the course of relationship with a customer (CLV/Customer Lifetime Value), must exceed the amount you spend on average to acquire a new customer (CAC/Customer Acquisition Cost) Types Complex Sales : CAC > $10million ( CEO mostly handles all deals ) Personal Sales: CAC $10k - $100k ( Sales dedicated team ) Marketing : CAC $100 Viral Marketing : CAC $1 ( A product is viral if its core functionality encourages users to invite their friends to become users too )

7 Question that every business must answer

The Engineering Question : Can you create breakthrough tech instead of incremental improvements ? The Timing Question : Is now the right time to start your particular business? The Monopoly Question : Are you starting with a big share of a small market? The People Question : do you have the right team? The Distribution Question : So you have a way to not just create but deliver your product? The Durability Question : Will your market position be defensible 10 and 20 years into the future? The Secret Question : Have you identified a unique opportunity that others don’t see?

Shifting the perspective from “I know I’m right” to “how do i know I’m right”

Seek out the smartest people who disagree with you to understand their reasoning.

Develop, test and systemize timeless and universal principles

Balance risks so that big upside while reducing downside

Partnering your brain with a computer, to dive deeper into a field and make predictions based on the historical data provided along with assumptions.

All organizations have 2 types of people : those who work to be a part of a mission, and those who work for a paycheck.

Proper diversification - reduce risks without reducing returns

Having a process that ensures problems are brought to the surface, and their root cause diagnosed, assures that continual improvements occur.

When faced with a choice between 2 things you need that are seemingly at odds, go slowly to figure out how you can have as much of both as possible.

Look at the patterns of things that affect you in order to understand the cause-effect relationships that drive them and to learn principles for dealing with them effectively.

Embrace reality and deal with it Be a hyperrealist : 1. Dreams + Reality + Determination = Successful life ( the pursuit of dream gives life flavour, being hyperrealist will let you choose your dreams wisely and then achieve them) 2. Truth (accurate understanding of reality) is the essential foundation for any good outcome. 3. Be radically open-minded and radically transparent ( we either have to discover what’s true for ourselves or believe and follow others) 4. Look to nature to learn how reality works ( we are the only species that can go above yourself and look at yourself within your circumstances and within time including before and after your existence. Our brain is more evolved but that means it can cause more confusion too as compared to animals. While looking at a situation follow 2 approaches : 5. 1. Top down (bigger picture first), 2. Bottom up (smaller details first) 6. Don’t get hung up on your views of how things should be because you will miss out on learning how they really are. ( most people call something bad if it is bad for them or for those they empathize with, ignoring the greater good. Nature does not do that, it seems to define good as what’s good for the whole and optimizes for it) 7. To be good something must operate consistently with the laws of reality and contribute to the evolution of the whole, that is what is most rewarded. 8. Evolve or die ( evolutionary cycle is for everything - countries, economy, companies. Fail, learn and improve quickly) 9. Evolving is life’s greatest accomplishment and it’s greatest reward 10. Individual’s incentives must be aligned with the group’s goals. ptimizing for the whole - not just for you. 11. Adaptation through rapid trial and error is invaluable 12. Realize that you are simultaneously everything and nothing - and decide what you want to be. ( how do we matter and evolve? Do we matter to others who also don’t matter in the grand scope of things? Or does it not matter if we matter so we should forget about the question and just enjoy our lives while they last? ) 13. What you will be will depend on the perspective you have. 14. It is a fundamental law of nature that in order to gain strength one has to push their limits, which is painful. 15. Pain + Reflection = Progress 16. No matter what you want from life, your ability to adapt and move quickly and efficiently through the process of personal evolution will determine your success and your happiness. If you do it well, you can change your psych reaction to it so that what was painful can become a craving. 17. Weigh second and third order consequences 18. Own your outcomes ( have an internal locus of control, connect what you want with what you need to do to get it and find courage to carry it through) 19. Look at the machine from a higher level 20. Think of yourself as a machine operating within a machine and know that you have the ability to alter your machines to produce better outcomes. 21. By comparing your outcomes with your goals, determine how to modify your machine 22. Distinguish between you as the designer and you as a worker with your machine 23. Look at yourself and others objectively, to avoid bumping into your and their weaknesses again and again 24. Ask others who are strong in areas you are weak in 25. It’s difficult to see yourself objectively, so you need to rely on the input of others and the whole body of evidence.

Use the 5 step process to get what you want in life ( 5 step loop ) ( → Have clear goals, → Identify and don't tolerate the problems that stand in your way, → Accurate root cause analysis, → Design plans to get around the problems, → Do the necessary things to push the designs through to results)

Have Clear Goals 1. Prioritize, Don’t confuse goals with desires ( desires are first order consequences ) 2. Decide what you really want by reconciling your goals and desires 3. Don't mistake trappings of success for success itself 4. Never rule out a goal because you think it’s unattainable 5. Nothing can stop you if you have flexibility and self accountability 6. Knowing how to deal with setbacks is as important as knowing how to move forward 7. Identify and don’t tolerate problems 8. View painful problems as potential improvements that are screaming at you 9. Don’t avoid confronting problems because they are rooted in harsh realities that are unpleasant to look at 10. Be specific in identifying you problems and prioritize them(precise RCA) 11. Diagnose problems to get to root cause (RCA) 12. Focus on “what is” before “what to do about it” 13. Distinguish between proximate cause and root cause 14. Design a plan 15. Reflect on where you have been and how you reached the current point before designing how to move forward 16. Problems = combined outcomes of your machine 17. Imagine creating a movie, who will do what at what time for planning 18. Measure against your plan’s progress (written) 19. Push to Completion 20. Establish clear metrics to make certain you are following the plan 21. Weaknesses don’t matter if you find solutions 22. Find your biggest flaw in the above mentioned 5 step process ! 23. Find your biggest roadblock and deal with it 24. Take help when required, everyone needs it some time 25. Understand your’s and other’s mental maps and humility

Be Radically open minded 1. - Recognize your 2 barriers - ego and blindspot 2. - Understand your ego barrier, subliminal defense mechanisms that make it hard to accept mistakes and weaknesses. Find your deepest seated needs and fears which are not accessible to your conscious awareness 3. - Your 2 types of you fight to control you. Higher level you (logical/conscious) - lower level you (emotional/subconscious). If you feel anger embarrassment after doing something - the lower level you won vs the thoughtful higher level you 4. - Understand your blindspot barrier . where you don’t see things accurately. 5. - Gather the relevant information first, then decide. Considering opposing views to make decisions will only broaden your perspective. 6. - Suspend judgement and empathize to really gain someone else’s perspective 7. - Be open minded and assertive at the same time - hold and explore conflicting possibilities in your mind while moving fluidly towards whatever is likely to be true based on what you learn

The aggregation of marginal gains → tiny margin of improvement in everything you do. Break a task into the smallest components and improve each one by 1% → the result will be a tremendous increase in performance of the original big task.

1% better each day for a year → 37 times better after a year (1.01pow365 = 37.78) 1% worse each day for a year → 0 (0.99pow365 = 0.03)

Be concerned with your current trajectory than with your current results.

Habits ( like bamboo/cancer ) appear to make no difference until you cross a critical threshold and unlock a new level of performance.

Plateau of Latent Potential - habits need to persist long enough to break through the plateau where you feel no growth after a period of time, when you finally break through people call it overnight success since they majorly focus on the most dramatic event.

Setting up a good system to achieve your goals is more important than focusing entirely on the goal. Goals can give you direction but system is the one that brings progress.

Focusing entirely on goals can instead lead to problems : Winners and losers have same goal Achieving a goal is only a momentary change Goals restrict your happiness Goals are at odds with long term progress

Possible reasons for not being able to change habits : Trying to change the wrong thing Trying to change the habit in wrong way

Change can occur at 3 levels: Outcomes : changing your results : losing weight, publishing a book, winning a championship etc. Most of goals are set according to this level Process : changing your habits and systems, implementing new routines, decluttering your desk, meditation. Most of Habits are built with this level Identity : changing your beliefs, worldview, self image, judgement about yourself and others. ---> Outcomes are what you get, Processes are what you do and Identity is what you believe. It is more effective to take an identity first and outcome last approach towards changing yourself, otherwise you will set a new goal and new plan but you haven’t changed who you are and ultimately the old habits (the old you) will catch up to you.

You might start a habit due to motivation but you’ll only stick to it if it becomes a part of your identity. Identity emerges out of your experiences and habits. The more evidence you have for a belief, the more strongly you will believe it. For eg if you go to the gym even when it’s snowing you have proof that you are committed to fitness. Every action you take is a vote to the type of person you wish to be, no single instance will transform your identity, but as the votes pile up so does the evidence of your new identity.

We can boil it down to 2 steps : 1. Decide the type of person you want to be 2. Prove it to yourself with small wins

Habits hence are fundamentally not about having something but about becoming someone.

Behaviours followed by satisfying consequences tend to be repeated and those that produce unpleasant consequences are less likely to be repeated. Try, fail, learn, try different - feedback loop behind all human behaviour.

Habits do not restrict freedom, instead they create it. By making fundamentals of life easier you can create the mental space needed for free thinking and creativity.

Process of Building a Habit ( time -------> ) Problem Phase Cue - triggers the brain to initiate a behaviour, predict reward. Craving - motivational force behind the habit, without it we have no reason to act. Solution Phase Response - the actual habit you perform, can take form of thought / action. Reward - end goal of every habit → Cue triggers a craving, which motivates a response, which provides a reward which satisfies the craving and ultimately becomes associated with the cue.

4 laws of behaviour change : Make it Obvious (cue) Make it Attractive (craving) Make it Easy (response) Make it Satisfying (reward)

Whenever you experience something repeatedly your brain begins noticing the important stuff and sorts through the details and highlights relevant cues, and catalogs the info for future use. With enough practice, you can pick up on these cues that predict certain outcomes without consciously thinking about it. This is the foundation for every habit you have.

So before you build new habits you need to control your current ones. Until you make the unconscious conscious, it will direct your life and you will call it fate.

Pointing-and-calling → helps reduce error margin since you become aware of the tasks. Habit scorecard → Make a list of habits, assign them +/-/= based on if they are good/bad/neutral respectively. Categorize the habits by how they will benefit you in the long run

Implementation intention → how you intend to implement a particular habit. It leverages 2 most common cues - time and location. “ When X happens, i will perform response Y” . If you have a specific plan you are more likely to follow through. When your dreams are vague, it’s easy to rationalize little exceptions all day long and never get around to the specific things you need to do to succeed. The goal is to make the time and location so obvious that with enough repetition you get an urge to the right thing at the right time even if you can’t say why.

Diderot effect → obtaining a new possession often creates a spiral of consumption that leads to additional purchases. Use this to your benefit by habit stacking. Habit Stacking → identify a current habit you already do each day and then stack your new behaviour on top. After {current_habit}, i will {new_habit} . The specificity is important, the more tightly bound your new habit is to a specific cue, the better the odds that you will notice when the time comes to act.

Environment is the invisible hand that shapes human behaviour. Out of 11 million sensory receptors in humans, 10 million are dedicated to sight. So a small change in what you see can lead to a big shift in what you do. The most persistent behaviours usually have multiple cues. The same strategy can be applied for good habits by redesigning your environment. One Space One Use → dedicated spot for a habit and restrict it to that place. It is easier to build new habits in a new environment because you are not fighting against old cues.

People with high self control tend to spend less time in tempting situations that may cause them to break their good habits or resort to old bah habits. It’s easier to avoid temptation than to resist it. Once a habit is encoded the urge to act follows whenever the environmental cues reappear. If you’re not careful about the cues, you can cause the very behaviour you want to stop. Eg. Shaming obese people can make them stressed and hence they return to coping mechanism : overeating.

Cue induced wanting ( feedback loop of hell ) : external trigger causes a compulsive craving to repeat a bad habit. You can break a habit but you’re unlikely to forget it. Hence simply resisting temptation is an ineffective strategy. In the long run we become a product of the environment we live in.

The more attractive an opportunity is, the more likely it is to become habit forming. Habits are a dopamine driven feedback loop. Dopamine plays a central role in many neurological processes - motivation, learning, memory, punishment etc. Dopamine is relieved not only when you experience pleasure but also when you anticipate it. It is the anticipation of reward not the fulfillment of it that gets us to take action. Your brain has far more neural circuitry allocated for wanting rewards than for liking them. Desire is the engine that drives behaviour, every action is taken due to the anticipation that precedes it.

Make your habits more attractive. You are more likely to find a behaviour attractive if you get to do one of your favourite things at the same time.

Combine habits stacking with temptation building : After CURRENT_HABIT, I will do HABIT_I_NEED After HABIT_I_NEED, i will do HABIT_I_WANT

One of the most effective things you can do to build better habits is to join a culture where your desired behaviour is the normal behaviour, even better if you already have something in common with the group.

Every behaviour has a surface level craving and a deeper underlying motive. Some of the motives include : Conserve energy Obtain food and water Find love and reproduce Connect and bond with others Win social acceptance and approval Reduce uncertainty Achieve status and prestige

Motion vs Action : motion is just planning, strategizing and learning but will produce no results without actions. The key is to start with repetition, not perfection. You don’t need to map out every feature of a new habit. You just need to practice it

Long Term Potentiation - strengthening of connections between neurons in the brain based on recent patterns of activity. With each repetition, cell-to-cell signalling improves and neural connection tightens.Regions of brauns adapt as they are used and atrophy as they are abandoned.

Conventional wisdom holds that motivation is the key to habit change, but our real motivation is to be lazy and do what is convenient. Energy is precious and our brain is wired to conserve it wherever possible.

Addition by subtraction : remove everything that causes friction. Prime your environment so that it is ready for immediate use, hence reducing the friction when you actually use it. Conversely increase the friction for bad habits.

Make gateway habits that are very easy and they should in turn lead to tougher and tougher habits that you want to follow. Master the skill of showing up, else you will never be able to master the finer details.

Richer countries are generally healthier or healthier countries are richer? What made them rich? Or what made them healthy?

People in general have a predisposition that the world is in a grave state than it actually is, even without knowing the facts. Why? - outdated knowledge? No. Our cravings for drama leads us to believe into what news shows up without getting in depth facts. It almost works as an optical illusion. What we need to know is how the illusion works !

Division of developed and developing is not valid in the 21st century, 91% of the world lives in either middle-income or high-income countries. Instead we can divide them into 4 income levels based on $/day : <$2 (1billion), $2 - $8 (3 billion), $8 - $32 (2 billion), > $32 (1 billion) The so-called gap between rich and poor is actually a smooth slope, with more people on the upper range than we think.

The statement “men are better at maths than women” can be easily disapproved of with a range graph and a proper scale - there is a huge overlap. Then why is this statement still used by many? the existence of extremities also doesn’t give a clear view since a huge majority does not exist in those extremities

With proof, almost every country has improved in last few decades - To see this growth over a period of 50 years one must have lived at least that long to say and believe that the world is improving, otherwise the young believe the conditions to be getting worse since easy spread of negative news in today’s world and not being able to visualise the progress made by countries over a long period of time.

The UN data on increase in population predicts a slow growth till 2100 as compared to the previous centuries, what can be the factors that might trigger a different trend that would lead to a faster growth in population? And what can we do (if possible) to prevent those triggers from activating?11`

Fear instinct is quite strong, but it is very powerful if it leads to collaboration of people around the world to resolve the issues. For Eg, the Chicago Convention of commercial airlines. Risk != fear, risk = danger * exposure

“In the deepest poverty you should never do anything perfectly, if you do you are stealing resources from where they can be better used”

The world cannot be understood without numbers, and it cannot be understood with numbers alone.

At level 1-2 the main focus should be to provide education, nurse education and vaccinations.

A lonely number rarely is enough to deduce results, a comparison is always required to deduce better.

If you are wrong about certain facts, it is probably true that you have a very limited idea about the ecosystem around it, which could be a potential investment opportunity for you or your business.

The values we claim to be religious or country specific like patriarchy were found in countries like Sweden too, only when it was at level 2 around 60 years ago .

With regular scripts you can use defer to prevent blocking, which also delays script execution until the document has finished parsing, and maintains execution order with other deferred scripts. Module scripts use the same execution queue as regular scripts using defer. This is applicable to both inline and src scripts. There is no way to block the HTML parser when using a module script.

As with regular scripts, async causes the script to download without blocking the HTML parser and executes as soon as possible. Unlike regular scripts, async also works on inline modules.

As always with async, scripts may not execute in the order they appear in the DOM.

If you understand ES modules, you'll know you can import them multiple times but they'll only execute once. Well, the same applies to script modules in HTML – a module script of a particular URL will only execute once per page.

Unlike regular scripts, module scripts (and their imports) are fetched with CORS. This means cross-origin module scripts must return valid CORS headers such as Access-Control-Allow-Origin: *.