DEV Community: kapeel kokane

useReducer() hook - Redux inside your component

kapeel kokane — Fri, 14 Jul 2023 17:53:03 +0000

Hey There 👋🏾

Welcome to another post in the React demystified series.

Last week, we dug deep into the concept of Context in React👇🏾

Mastering React's Context: A Guide to Efficient State Propagation

kapeel kokane ・ Jul 9

#webdev #react #javascript #beginners

This week, we look into useReducer. Let's do it 🙌🏾

Use case for useReducer

Let us try to explore the use cases where we would think about using the useReducer hook.
Before that, let us start off with a simple example. If we had to write the code for a simple component that holds a count as state, here's how we would write it:

const [count, setCount] = useState(0)

The code above initialises the state to 0. We also have count through which we can access the current value of the state and setCount through which we can set a value of the state.

If we need to set the value of the state, it's quite straight forward, we call setCount:

setCount(10);

But, what if we want to perform several operations on the state?

Operations on the state

Let us say that we have the state and several operations that we want to perform on the state like increment, decrement, reset (to 0), and set (to a custom value).

In that case, the code could be designed in such a way that we take the state, perform an action on it: INCREMENT, DECREMENT, RESET or SET and the we get the new value.

But what we defined above is the textbook definition of a reducer function!

And thus, our use case can be accomplished with the useReducer hook because it allows us to create a reducer inside of our React component.

Writing the reducer

With that understanding, let us write our reducer function. This is the function that React will call with the current state and the dispatched event type (whenever we dispatch one).

function reducerFunc(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    case 'RESET':
      return 0;
    case 'SET':
      return action.val;
  }
}

And that's it. With just those lines of code, we've set up state management for our complex use case.

☝🏾 Do not that the example of state to be a single number is just for the sake of explaining the concept and in react world, you would have complex objects as your core state and your would have to write logic inside your reducer to manage it correctly.

With that reducer, we can then initialise everything like so:

const [state, dispatch] = useReducer(reducerFunc, 0);
return (
    <main>
      <h1>Count : {state}</h1>
// rest of the code

And, whenever we need to dispatch any changes to the state, we do something like this:

<button onClick={() => dispatch({ type: 'INCREMENT' })}>increment</button>

And React will take care of the rest.

The reducer flow

Basically, this is what happens when we call the dispatch function provided to us by useReducer:

React calls the function that you initially supplied to useReducer and passes to it the arguments we supplied to dispatch.
The reducer function then makes some calculations based on some business logic.
The value that gets returned by the reducer function becomes the new state

This graphic sums it up well:

So basically, it is like having entire redux inside the scope of your React component.

Hope that clears a lot of confusion around the useReducer hook and the basic concept of a reducer function.

Cheers! 🙌🏾

Mastering React's Context: A Guide to Efficient State Propagation

kapeel kokane — Sun, 09 Jul 2023 08:48:05 +0000

Hey There,

Welcome to the third post in this React Demystified series.

Last week, we looked into the useEffect hook and tried to understand why it's called that. And also, some fundamental questions like - What exactly is an effect?

Things that no one ever told you about useEffect() in React

kapeel kokane ・ Jul 3

#webdev #react #javascript #beginners

This week, we dig into the React's Context and the useContext hook. We will dig into the core of what we mean by Context and what is the significance of managing it throughout your React app. Let's do this! 🙌🏾

Some context about `Context`

We looked at state in our first article in this series & found out that state is something that the UX was tightly coupled with. It was that data, which if changed, would required the UX displayed to the user change as well.

So what is Context?
According to the official docs, Context is primarily an alternative to passing props:

What does that mean?
Well, I understand Context as this - It is that data which does not change frequently, is relatively small in size and can be consumed anywhere in the entire application.

An example of Context

Let us say that there is some data that does not change frequently - Like the theme associated with a website. If we create the theme at the top, like the App component and then want to use it in a button which was several layers deep, we would have to pass it down all the way.

This is more commonly known as prop drilling.

The use of Context solves this problem. Because instead of passing the piece of data through all the components where it does not get used, we only need three touchpoints:

creation - Where the Context is created
updation - Where the Context value can be updated
consumption - Where the Context value can be read.

This sketchnote below summarizes it well:

And that is what makes Context special. Because it provides us with an interface to tap into this context that is somehow magically available to us throughout the app.

Coding it up

With that theoretical understanding, let us now work with Context with some code. We will look at it from the perspective of the 3 touchpoints discussed above.

Context creation

For creating Context we use the createContext function provided to us by React.

import { createContext } from 'react';

export const themeContext = createContext('light');

Notice how the created Context is exported out from this component. That is because in order to consume the Context in any child component, we would first have to import this exported variable (which we will see next).

Context consumption

Now, in order to consume the context value created without passing it down as props, we will need to import the above context variable and call the useContext hook that will return us the current value.

import { useContext } from 'react';
import { ThemeContext } from './App.js';

export default function Button({ children }) {
  const theme = useContext(ThemeContext);
  // ...
}

The above code runs and, theme gets the value of light, which was the default value set on the context.

But, you might wonder what was the need to do all this?

We can get the same result by just creating a constant named theme and exporting it from the App.js component. But that is where the next part comes into the picture.

Context modification with `Provider`

Anywhere down the component tree below the context creation, its value can be edited using the Provider component.

So, let us say we had a button to tweak the light and dark theme. If that button was tied to a state variable, the current value of the state variable that the button controls could be provided as the value for the provider:

import { ThemeContext } from './App.js';

export default function Main({ level, children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light')
  }

  return (
    <section className="main">
      <LevelContext.Provider value={theme}>
        {children}
      </LevelContext.Provider>
      <Button /> // This button toggles theme
    </section>
  );
}

Once we have this in place, if we try to read the Context value anywhere using useContext down the component tree inside of children, we will get the value that is set by this provider. Which inturn is being set via the button.

Hope that clears a lot of concepts related to Context in React and the useContext hook.

See you in the next one!

Cheers 🙌🏾

Things that no one ever told you about useEffect() in React

kapeel kokane — Mon, 03 Jul 2023 10:37:45 +0000

Hello there!

Welcome to another React demystified post.

Last week, we covered the useState() hook. We took it to the fundamental level and asked ourselves the question - "What exactly is state?" 🤔.

Demystifying useState(): Understanding the concept of "state"

kapeel kokane ・ Jun 25

#webdev #beginners #react #programming

In this week's post, we will look at the useEffect() hook. It is one of the complicated things that you need to deal with, while working on functional React components. But once you get the hang of it, there's no looking back.

`useEffect()` is an escape hatch

Look at this seemingly harmless piece of code & tell me what you think the output is going to be:

export default function App() {
  console.log('first');

  useEffect(() => {
    console.log('second');
  });

  console.log('third');
  return (
    <main>
      <h1>Hello World</h1>
    </main>
  )
}

At first glance, it looks as though the output will be

first
second
third

But, but, but...

The actual output is

first
third
second

Let us understand why that is the case.

If you notice closely, useEffect is a function, that takes in another function as its first argument. It then calls executes that function at a future point in time. Turns out, that it always calls the function after the React component is rendered and the DOM is updated. Even in case of the first render. If you are not clear about how a React component gets translated into something on the DOM, check out this video:

The explanation

Now that we see useEffect() as a kind of escape hatch than anything else, the above behaviour makes more sense.

What happens is this:

console.log(first) is executed and we see first
useEffect is executed and we supply a function to it
console.log(third) is executed and we see third
React component is rendered, DOM update happens
useEffect executes the function we supplied & we see second

"So what is the point of the useEffect hook if it comes into the picture after the DOM is updated?", you might ask.

Well, it is to trigger side-effects (external).

According to the new React docs, it is quite clear what useEffect is meant for:

So what does this sentence - "synchronize with external system" actually mean?

Well, simply put, it means all the things that are "outside" of the React component. That includes things like:

API calls
DB interactions
Subscribing to external events

So whenever you see any useEffect, now you know that it is an escape hatch to take you out of the normal flow of code and do things that deal with external systems. Although the code is placed inside of the function component (to take advantage of the closure property & access local variables), do not think of it as something that executes in the same flow.

The usage

With that understanding in place, let us look at a few use cases of useEffect:

Side-effect on every render

This happens when we write code that looks something like the example above:

export default function App() {
  useEffect(() => {
    console.log('every render');
  });

  return (
    <main>
      <h1>Hello World</h1>
    </main>
  )
}

This kind of defeats the purpose of useEffect as it runs the side-effect every time the component is rendered.

side-effect once

If we pass an empty array as the second argument to useEffect, we are letting it know to run our function only once - right after the first render.

export default function App() {
  useEffect(() => {
    console.log('after first render');
  }, []);

  return (
    <main>
      <h1>Hello World</h1>
    </main>
  )
}

side-effect on dependency change

In this use-case, we are instructing useEffect to run the function every time a dependency is changed (by specifying the dependency in the array). This might be useful if the side-effect is dependent on the dependency.

export default function App() {
  useEffect(() => {
    console.log('count changed');
  }, [count]);

  return (
    <main>
      <h1>Hello World</h1>
    </main>
  )
}

summary

This sketchnote summarises it well:

Hope that this article cleared up a lot of things like the need for something like useEffect() in the React paradigm. Also, hope that the 3 use cases are clear and that you will feel more confident in your "effects" henceforth.

Cheers! 🙌🏾

Demystifying useState(): Understanding the concept of "state"

kapeel kokane — Sun, 25 Jun 2023 12:57:26 +0000

If you've clicked on this article link, I assume you have used React.
Also, if you've done any decent React development in the recent past (after the class components were retired), the first thing that you would've learned is the useState hook.

You understand how to use the hook but do you understand the rationale behind its existence in the first place?

Let's try to understand just that.

The static site

If the primary use case of React websites was to define static websites, the ones from the early days of the web, we would have had no need for useState. We could just do something like:

export default function StaticSite() {
  return (
    <>
      <h1>Some static header</h1>
      <p>Some static content that will never change</p>
    </>
  )
}

But, the issue is that static sites were a thing of the 90s (or maybe even before that). Nowadays, we need to have all sorts of functionality like:

Responding to user button clicks
Responding to scroll events
Changing content on route change (in case of SPA)

In short, a UX library needs to be reactive. (Is that why it's called React? 🤔)

Reactivity

This is a common word that basically means -

How does the library ensure that the UX rendered on the browser accurately represent the underlying state of the application

For instance, if you are implementing a counter web app and the user has clicked the increment button, how does the library take care that the incremented value is displayed?

And that is exactly where useState comes into the picture.

But, before getting into that, let's take a small detour and understand how React works in the first place.

A quick detour

When we use React as a library to create web apps, this is how it works:

We write some React code that faithfully represents a user interface to be shown on the browser. There are some static parts to this and some dynamic parts. In the context of a counter, this is what it would look like:

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <h1>Counter app</h1>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>increment</button>
    </main>
  )
}

The JSX that is returned from inside of this function is what React uses to create React element. It then compares the generated tree with the version of React DOM and then renders the result if necessary. Watch this quick video if you need more clarity on this:

Basically it's this:

Why `useState`?

With that context set, let us now explore what would happen if there was no useState.

This is what our code would look like:

export default function App() {
  const count = 0
  return (
    <main>
      <h1>Counter app</h1>
      <h2>{count}</h2>
      <button onClick={() => {count = count + 1}>increment</button>
    </main>
  )
}

While this is perfectly legal code, you will see that upon clicking the button, nothing happens.
And that is because, we are just changing a normal variable, and not a state variable.

And that is the core concept of this article. In React, the UI that is generated and shown to the user is a function of the state.

And since not all variables used in the component are state variables, the useState hook helps us define those few special variables that form the state.

It tells React to recompute the state when any of those variables changes. And whenever the state variable changes, React knows what it's time for - A UI update (if required).

Hope you learned something new today. 🙌🏾
Cheers!

100+ JavaScript concepts, same app using 7 frameworks & CSS flex explained the right way

kapeel kokane — Sun, 27 Nov 2022 11:00:45 +0000

Hey there, fellow visual learner! 🙌🏾

This is the post for the last week of November. Black friday is here and it’s a great time to buy some of those development courses that you have been eyeing for a long time. Some lifetime deals on creator tools at the end of this newsletter.

Let’s get started ⏳

❶ 100+ JS concepts in less than 13 minutes

The Fireship YouTube channel put out a fantastic video explaining 100+ JavaScript concepts. How many of these concepts do you have a grip on?

❷ Learn CSS Flex interactively

Josh Comeau released this excellent interactive CSS Flex tutorial on his blog. You can actually play around with the controls to tweak the flex parameters. Have fun!

❸ Compare 7 frameworks by building the same app

Builder.io published an article (extending some original work by Dan Shappir) where they compared the performance of 7 frameworks by building the same app. They test out React, Vue, Angular, Preact, and Svelte and compare them with Qwik's performance.

🐥 FREE web development courses

In this week’s Twitter thread, we have Madza sharing some courses you could take to level up your web development. Click on the tweet below to check out the full thread. 👇🏾

// Detect dark theme var iframe = document.getElementById('tweet-1594709712267640832-649'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1594709712267640832&theme=dark" }

🎁 Extra:

As this is the Black Friday/Cyber Monday weekend, here are some lifetime deals on creator tools that you might like:

① An AI image generator tool (similar to DALL-E).

② A social media scheduler tool (similar to Buffer, Feedhive)

③ An AI-based writer tool for generating blog articles, product descriptions, and more.

That's it for today's edition. See you in the next one.

Cheers! 🙌🏾

A free & open source tool by Facebook to create your blog site

kapeel kokane — Mon, 28 Mar 2022 18:03:00 +0000

Hey There 👋🏾

Are you looking to start a developer blog soon?

Do you already have one but you are not happy with it and want to migrate it?

I have news for you. Read along 👇🏾

Features

Before jumping into why this tool is amazing, let us first set the definition for what makes a blogging tool great.

It let's you write in markdown
There definitely needs to be code syntax highlighting
markdown is not enough, there need to be custom elements
There should be a support to create custom non-markdown pages
And off-course, a dark mode.
How about a site-wide search as well?

What if I told you that there is a framework that supports all these features right out of the box and that it is freely available?

Well, here it is: Docusaurus.

It is a documentation framework by Facebook which is used by some of the giants in the industry like: ionic, redux, react native and hundreds more as mentioned on this page. But do not assume it to be just a documentation tool.

It is an all inclusive toolkit to build full-fledged website like this one: Technical Interview Handbook

Here's the main page custom built with React:

The brilliance of the website above is that they have even customized it to show Carbon Ads in the sidebar.

Here's how a sample page in the site looks like:

Notice the green visual element. It adds a nice touch to the UI. Good enough for a blog site, right?

Interested? Want to know how to create your own?

This video will guide you with just that:

In the video:

A walkthough of docusaurus features
How to create a home page
How to utilize the blog feature
How to utilize the tutorial feature

Cheers! 🙌🏾

Five* JavaScript concepts for your next interview

kapeel kokane — Fri, 04 Feb 2022 17:49:32 +0000

Hey There! 👋🏾

Hope you are doing well.

Have you worked on several projects that use JavaScript, Node.js or React.js before but never found the time to actually study the core concepts of the language?

Do you have an interview coming up and need a quick revision?

Do not worry. You are not alone!

In today's article, we look into some super important concepts related to the language that make or break an interview.

1. Event propagation

This is an interviewer's favourite and checks your concepts related to event handlers, bubbling and capturing of events. Here is a quick summary:

2. Scope

Next up is the concept of scope in JavaScript. This is important too because it forms the basis for understanding other advanced concepts like closures.

3. Closures

This is the all-time interviewer favourite and it is so for a reason. This concept checks several other underlying concepts and an in-depth understanding of the language.

4. Prototypal inheritance

The kind of inheritance in JavaScript is different from that in other languages like Java and c++ and that is what makes it all the way more important to understand how that works.

5. Strict mode

Did you know there is a strict mode in JavaScript? Although rare, this question still comes up sometimes in an interview and it is a good idea to have some clue regarding what it is all about.

Bonus: !! Operator

This is a bonus concept and maybe it would never get asked in any interview but is still an interesting concept to know about the language!

Hope you found all those helpful. 🙌🏾

Go rock your next JavaScript interview!

Cheers!

Mint an NFT for FREE and sell it on Opensea [Complete guide]

kapeel kokane — Sat, 04 Dec 2021 12:00:46 +0000

For the past few months, we have been hearing a lot about the word web3. Experts are hinting that this is the beginning of a new era wherein decentralisation and transparency will the the key factors powered by Blockchain technology.

One of the amazing products that this technology brings to us is NFTs a.k.a (Non-fungible tokens). I'll not spend time explaining what they are and how they work. You can read this amazing article.

Earlier this week, I minted my own NFT for free and in this article, I share the steps I followed so that you can get one for yourself too! 👇🏾

// Detect dark theme var iframe = document.getElementById('tweet-1466421868706082825-954'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1466421868706082825&theme=dark" }

Let's begin 🙌🏾

1. Create a Metamask account

In order to login into Opensea, you do not need a username/password combo or an email. You need to login by linking the account with a crypto wallet.

MetaMask is one such wallet which you can create for free. If you do not want to download or install anything, just add this extension to your Chrome browser and get started. After adding the extension, follow the steps to get your MetaMask account by generating your passphrase and noting it down in a secure location.

2. Switch to Polygon network

Most of the people are not aware that the MetaMask wallet allows users to hold tokens on several networks apart from the main etherium network (Etherium mainnet). As the cost of Etherium is very high and we do not want to spend a huge amount of gas fee (the cost of minting) while creating our NFT, we will switch to the Polygon network (Matic mainnet). Here's how to do that:

Click on the dropdown that says Etherium Mainnet and click on Add Network

In the page that comes up, fill in the following details:

Network Name
Matic Mainnet

New RPC URL
https://rpc-mainnet.maticvigil.com/

Chain ID
137

Currency Symbol
MATIC

Block Explorer URL
https://explorer.matic.network/

Click save, and then select the newly added network from the dropdown which earlier showed Etherium Mainnet, which should now show Matic Mainnet.

3. Get some MATIC flowing

Once we switch the network to the Matic mainnet, we can also add some token into it by using some faucets. Faucets are free sites that provide a very small amount of tokens to you for free so that you can get started. Here are the links to two faucets:

Visit these links and follow the steps mentioned there which usually includes supplying your MetaMask ID and you will see the MATIC tokens in your wallet within a few minutes.

4. Create an OpenSea account

Now that we have the MetaMask wallet set up, and some MATICs flowing in, let us link it to our Opensea account.

Visit this link and click on MetaMask:

Select the MetaMask wallet that we created just now and provide the required details to create the Opensea account. At the end of this step, your Opensea account would be ready.

5. Mint an NFT

Now to the juicy part: Actually minting the NFT. The tough part is already over and this is quite straight forward.

Click on the Create button near the top right corner which takes you to this interface.

On this form, first upload the piece of media that you want to convert into an NFT. It could be an image, a gif or even a piece of music. I chose an infographic which I created in order to explain the concept of Habit Loop from the book Atomic Habits.

Next, provide all the mandatory information.

It is important to switch the network to Polygon from the dropdown near the bottom so that you can avoid huge gas fees.

Click Create and watch as your NFT is minted on the Polygon network in the next couple of minutes.

Once done, you can view the NFT product page which would look something similar to mine

And that's it! Congratulations! 🙌🏾

You've successfully minted your first ever NFT.

If you wish to sell this NFT, then click on the Sell button near the top right and follow the steps.

Do share your creations in the comments below so that I can check them out. See you in the next one.

Cheers!

5 reasons why you need to create technical content consistently

kapeel kokane — Sat, 27 Nov 2021 07:11:05 +0000

Hi There 👋🏾

Today, we will discuss a few factors related to content creation and why doing it everyday is what will differentiate you in the long run from others.

Although this applies to any kind of content, I will focus on JavaScript and Webdev related content in this post as that is my niche. You can extent the same principles to any other niche.

Another disclaimer: Although I am aware that creating content consistently has its own benefits, I am myself a culprit of not being able to follow it sometimes. Working on it and hoping to get better :)

Back to the article. Here goes 👇🏾

Consistency brings discipline

The first benefit is a subtle one. By creating content daily, making a routine out of it, you are programming your brain to do more and more of it. In other words, you are telling your sub-conscious mind that this is something dear to you and you care about it. This in turn will make you come back to doing it again and again on a daily basis.

Improve your technical skills

One of the benefits of creating technical content is that you cannot do so without a firm grasp of the topic yourself. And in order to build that understanding, you need to do your research. Which means, while creating the content and building your audience, you are also building the scope of your technical knowledge, which is the cherry on top!

Builds a positive keystone Habit

One of the concepts explained by James Clear is keystone habits. It explains how one good habit has a butterfly effect on all the other things that you do. For instance, in order to create content regularly, you might subscribe to some technical news feeds and start spending more time researching other blogs instead of mindless Instagram scrolling!

Build more connections

This is a side effect of creating content. When you share your stuff and interact with others who are doing the same, you develop connections for a lifetime. You get to interact with thought leaders in your niche and get their feedback on your work. Isn't that just amazing?

The Algorithm favours you

This is the second cherry on top of the regular cherry that is on top of your content creation cake. As you might already be knowing, platforms like Linkedin, Twitter, YouTube favour the ones who post regularly. There are examples of several folks who have grown to thousands of followers in a span of less than a year who swear by creating content regularly. Here are a few of them:

// Detect dark theme var iframe = document.getElementById('tweet-1463866934244507657-798'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1463866934244507657&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1450466671693549575-180'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1450466671693549575&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1463880823380357133-903'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1463880823380357133&theme=dark" }

With those points in mind, go ahead, start your journey to grow, learn and share with your fellow developers. All the very best.

Cheeers!

PS: If you find yourself with many great ideas but you cannot seem to be regular, there are automation tools that can help you create once and publish regularly. One such tool is Feedive, created by the amazing Simon Hoiberg which lets you schedule content on all Social platforms from single place, provide analytics etc. Also, it lets you use in-house AI based tools that help you create more!

The usual payment more is 💰subscription💰 which is quite costly if you are a beginner.

But, as a part of 🎊Black Friday🎊 promotions, Feedhive is available for $59. All yours, no questions asked! 🙌🏾

Do check it out if you think that is something which might help you stay regular on your content creation journey!

All the best :)

3 tips from "Atomic habits" that helped me on my journey to becoming a full-stack dev at Microsoft

kapeel kokane — Wed, 06 Oct 2021 18:09:22 +0000

Hey There 👋🏾

Hope you are doing well. 🙌🏾

I joined Microsoft as a full-stack developer last month and the announcement tweet went viral on Twitter.

// Detect dark theme var iframe = document.getElementById('tweet-1434792888433446927-179'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1434792888433446927&theme=dark" }

Many of the fellow devs asked me for my journey and what helped me reach there. So I thought of putting this article together by listing out a few small habits that added up over time which helped me get the desired result. Many of the things that I talk about are mentioned in the amazing book Atomic habits by James Clear which I think, every human being must read at least once!

disclaimer: This article is not a place for tips and tricks or a list of important questions to crack any particular interview. It was a long & gradual process for me and I'm just listing down what worked for me. You can try it out and see if it works for you.

1️⃣ Design your environment

James talks about the power of environment design over motivation and here's how we can apply that.

Phone

People say phones are distracting and toxic. I say people do not know how to use phones. If used properly, it can act as a prime weapon in your arsenal.
Structure your home screen so that instead of Facebook, Instagram, you see dev.to, hashnode, daily.dev so that when you open your phone, the decision is easy for you to scroll some technical content instead of mindless binge-scrolling!

YouTube

Most people under-estimate YouTube's capabilities when it comes to learning. You can create a separate Google account and only subscribe learning channels through it. That way, when you switch accounts from the menu bar, you get a nicely curated feed of tutorials and tech updates that you might be interested in. Here are a few awesome channels:

Twitter

Twitter is also an amazing place to learn and connect with industry experts. If you do not have a Twitter account, create one today and ONLY follow the accounts that are creating content around the tech that you are interested in. That way, even if you wanted to binge-scroll, it will be curated. You can also follow accounts specific to a particular language like Javascript

2️⃣ Create systems

James also talks about the importance of creating systems rather that setting goals to be successful in the long run.
Hence, instead of trying to rely on motivation which comes and goes, try to set up systems. Those systems can be something like:

Set 7pm to 8pm as learning time (can be any time slot)
Listen to audio books while taking a walk
Never watch television alone

These systems, once established in your mind would make it highly improbable for you not to do the right thing. And they also take out decision fatigue. For instance, if its 7:15pm, you definitely know that you must be learning stuff right now and hence you do that, without thinking much.

3️⃣ Identity based habits

The third thing that can help you on your journey is this concept of identity based habits.

How this can help you on your tech journey is, instead of trying to build stuff using a new tech stack, you can think of becoming a curious developer.

Instead of studying about algorithms and data structure, you can become the sort of person who wonders about how stuff works.

If you are also on the path of content creation, then don't try to create content. Become a person who shares knowledge consistently.

Maybe the examples that I provided are not perfect. Go through the article link that I provided and try to come up with your own identity that would help you stick to your habit.

Conclusion

Doing these things would push you in the direction wherein over a long term, you will see yourself grow as a developer. I did. For me, cracking the interviews was not just a process for those 3 or 4 months. It was an amalgamation of the things that I did over the last 5 years. If you are in it for the long run, you will definitely succeed. And even it you don't. there is nothing to loose here! 🙌🏾

If you liked that, then consider following me on Twitter where I post content🎁 more frequently.

Cheers ✌🏽

LRU cache Illustrated - For the visual learner

kapeel kokane — Wed, 25 Aug 2021 18:22:41 +0000

Hey There 👋🏾

Today's topic of discussion is the LRU cache. A few days back, I created a twitter thread giving an introduction about the same. Here's the thread if you want to take a look. 👇🏾

// Detect dark theme var iframe = document.getElementById('tweet-1425498488649879559-599'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1425498488649879559&theme=dark" }

💁🏻‍♂️ In today's post, we will be digging in a little deeper and also look at how one can implement an LRU cache in JavaScript.

Why cache anything? 🤔

The first question that we will tackle is

why do we need to cache anything in the first place?

Well, the way software gets used by consumers follows a specific pattern. Somewhat similar to the 80-20 rule. It basically means that the data that gets queried once, is more likely to get queried on the same device again.

And that even makes sense. Whenever I open twitter, as I'm definitely sure that my user information needs to be fetched every time, it's an efficient choice to cache that information on my browser so that the next time it is required, there is a faster way to fetch it.

Why not cache everything? 🤨

The next logical question would then be

If caching is actually that good and solves all our problems, why don't we cache everything?

Well, there is the issue of space constraint. In the previous example, if the browser starts caching all the user's info that I visit, sooner or later, the browser is going to run out of memory. And hence, there needs to be a conscious thought about what to cache and for how long.

Cache replacement!

With that in mind, we now need to think about a scenario

What if the cache is at full capacity right now and we need to add another element to it?

That is where the LRU part comes into the picture. Which expands to Least recently used. The logic being that something which was used(stored/accessed) a long long time back, would most probably not be used again. There are other strategies of cache eviction (deletion) apart from the LRU one. They are:

First in first out: The one that was added first, gets deleted first, irrespective of when it got accessed.
Last in first out: The one that was added last, gets deleted first, irrespective of when it got accessed.
Least frequently used: The one that was accessed the fewest number of times, gets deleted first.
Random replacement: Any one of the cache items is randomly chosen and deleted.

There are several other strategies in addition to these. Also, there is no one-size-fits-all strategy and each of these mentioned above are suited for different use cases. But in today's article, we will be looking specifically into the LRU cache.

LRU illustrated

Let us assume that we have an LRU cache that can only hold 3 user details at a time and visualise how that would look like. using the put() method to add user to the cache and the get() method to fetch the user info from the cache. Before adding anything, this is what the cache looks like:

Let's add the 3 users. Using string value for example, can be assumed to be an object with different key/value data about the user.

cache.put('amy', "amy's details" )
cache.put('bob', "bob's details" )
cache.put('clint', "clint's details" )

The cache is now at full capacity and looks like this:

Now, If we want to add a fourth user: dylan to the cache, one of the previous users needs to be deleted. And that would be amy according to the least recently used principle.

cache.put('dylan', "dylan's details" )

But, let's say if before adding dylan to the cache, if we had accessed amy's user object, it would NOT be the least recently used item in the cache and due to that, bob would have got chucked out instead.

cache.get('amy')
cache.put('dylan', "dylan's details" )

I hope that provides you the gist of how this is working. Let's dive into the code!

Let's code

We will code this up as a JavaScript class with the get and put methods in it.

Here's what the class looks like with it's constructor

class LRUCache {
  constructor(capacity) {
    this.cache = new Map();
    this.capacity = capacity;
  }
}

Here's the get() method

get(key) {
  if (!this.cache.has(key)) return -1;

  const v = this.cache.get(key);
  this.cache.delete(key);
  this.cache.set(key, v);
  return this.cache.get(key);
};

The first line just checks whether the item is present in the cache and returns a -1 in case it is not.

But do you notice the part wherein the object is present?

We access the value, delete it from the cache and then add it again before returning its value. Well that is a trick which you'll soon understand.

Let's look at the put() method before that:

put(key, value) {
  if (this.cache.has(key)) {
    this.cache.delete(key);
  }
  this.cache.set(key, value);
  if (this.cache.size > this.capacity) {
    this.cache.delete(this.cache.keys().next().value);
  }
};

In the first part here, if the cache already has the key that we are trying to add, we delete it first and then add it again. This is confusing too, right?

The next part will make it clear.

Notice what we are doing in case the cache has exceeded capacity? we are doing this.cache.keys().next().value. Well, this is a special trick using which we are fetching the value that was written first out of all the values written to the Map.

You see, in the get() method, we deleted the key and set it again so that it ends up being the most recently added value and does not show up when we fetch this.cache.keys().next().value value as it got recently accessed.

The deletion and adding inside the put() function is serving a similar function. Basically, we are refreshing that particular value in the cache!

And that's the magic. And we have this fully functional cache written in JavaScript which we can play around with!

Hope you liked that.
Cheers! 🙌🏾

Facing writer's block? This FREE tool might help 🙌🏾

kapeel kokane — Fri, 20 Aug 2021 14:16:23 +0000

Hey There 👋🏾

Hope you are doing great 🙌🏾

In today's article, we do something different. I wanted to talk about a problem that I was recently facing and how I (almost) solved it. 🤞🏾

The pain is real

Here's the thing. I have been wanting to be a good content creator for a long time now. Notice that I say a good content creator. That's hard.

The more and more I dug into hacks, or shortcuts to become a great content creator and grow a following, the more it became clear that there is actually no secret.

The only secret is that one keeps creating content consistently, regularly and becomes great over the time. That's it.

Walking the talk

It's easy, then, right? Just keep writing an article a day and in the long run, you become great. Well, so I thought. 👀

But it's easier said than done. Once you start walking on that path, many demons raise their head.

Lack of time ⏰
Lack of motivation 😪
Lack of topics to write about ✍🏼

Solving the problems

The first 2 problems are mainly behavioural in nature. In order to solve them, I suggest you get certain very strong whys. I'll explain.

whys are the reasons for which we do something. And the stronger the why is, the stronger its emotional connect with you, the more you are inclined to do that thing. For instance

Why do you wake up early in the morning and hit the Gym? 💪🏽 You want to build a fitter body and beat the scale.
Why do you study late into the night? 🙇🏽‍♂️ You want to ace that exam and make everyone proud.

So you see, getting a strong why would solve those 2 issues. But what about the third one?

The tool

This is where the tool that I was talking comes into the picture.

See, most of the time, the topic that we want to write about is fairly clear to us. For instance, let's say I want to write about developer productivity. Now the issue is that, from here on, that topic can lead to hundreds of tangents. But once you sit down to think about it, very few come to your mind. And that leads to a lack of clarity which in turn leads to nothing ever being written.

This is where I recently found myself using this FREE tool peppertype.ai. It is basically an AI assistant that generates text based content based on the context that you provide.

Basically, you can use it for anything from generating Ad copies, Product descriptions, tweet ideas etc. But in our case, we will be using it to generate blog ides.

So I click on the "Blog ideas" Button and head to an interface that asks for a blog title and a description about what I am interested in writing about. As per my expectation, I fill in developer productivity and a brief description about it. And click Create blog ideas and viola! 🪄

This is the list of the 11 blog ideas that the tool has generated for me which I can save for later to go back to. Which covers a broad range of articles related to the topic I chose. Also, do note that these topic suggestions are optimised for SEO so that once you write out the article, it will rank high on google search. Also, you can always click on create more in order to get some more suggestions.

So go ahead, feel free to use the tool yourself to get ideas about the topics that you want to write about. But be judicious with your search and make sure that you save all the suggestions in the bookmarks because the free suggestions are capped at 10,000 worlds only.

But remember, in the beginning I said that this solved my problem, but almost. Because at the end of the day, an AI can only do so much and it is basically you who has to do the meat of the work and keep pushing until you reach your goals. So all the best with that. 🙌🏾

Hope you liked this one,
Cheers!

PS:

If you end up liking the tool and are considering subscribing to the paid version, it's available as a subscription starting from 💰 USD 25 per month.
But the good people at Peppertype have made a 🎊LIFETIME DEAL🎊 available for the product on Appsumo.com starting from USD 39 for life! 🙌🏾.

Deal link

Check out the deal link here. Do note that the link is affiliate but you end up paying exactly the same.

DEV Community: kapeel kokane

useReducer() hook - Redux inside your component

Mastering React's Context: A Guide to Efficient State Propagation

kapeel kokane ・ Jul 9

Use case for useReducer

Operations on the state

Writing the reducer

The reducer flow

Mastering React's Context: A Guide to Efficient State Propagation

Things that no one ever told you about useEffect() in React

kapeel kokane ・ Jul 3

Some context about Context

An example of Context

Coding it up

Context creation

Context consumption

Context modification with Provider

Things that no one ever told you about useEffect() in React

Demystifying useState(): Understanding the concept of "state"

kapeel kokane ・ Jun 25

useEffect() is an escape hatch

The explanation

The usage

Side-effect on every render

side-effect once

side-effect on dependency change

summary

Demystifying useState(): Understanding the concept of "state"

The static site

Reactivity

A quick detour

Why useState?

100+ JavaScript concepts, same app using 7 frameworks & CSS flex explained the right way

A free & open source tool by Facebook to create your blog site

Features

In the video:

Five* JavaScript concepts for your next interview

1. Event propagation

2. Scope

3. Closures

4. Prototypal inheritance

5. Strict mode

Bonus: !! Operator

Mint an NFT for FREE and sell it on Opensea [Complete guide]

1. Create a Metamask account

2. Switch to Polygon network

3. Get some MATIC flowing

4. Create an OpenSea account

5. Mint an NFT

5 reasons why you need to create technical content consistently

Consistency brings discipline

Improve your technical skills

Builds a positive keystone Habit

Build more connections

The Algorithm favours you

3 tips from "Atomic habits" that helped me on my journey to becoming a full-stack dev at Microsoft

1️⃣ Design your environment

Phone

YouTube

Twitter

2️⃣ Create systems

3️⃣ Identity based habits

Conclusion

LRU cache Illustrated - For the visual learner

Why cache anything? 🤔

Why not cache everything? 🤨

Cache replacement!

LRU illustrated

Let's code

Facing writer's block? This FREE tool might help 🙌🏾

The pain is real

Walking the talk

Solving the problems

The tool

Deal link

Some context about `Context`

Context modification with `Provider`

`useEffect()` is an escape hatch

Why `useState`?