DEV Community: Vikrant Bhat

Optimize your workflow with Tailwind CSS: Get class completions and hover previews for classes assigned to variables in VScode

Vikrant Bhat — Sun, 12 Mar 2023 13:57:33 +0000

TL;DR

This article provides instructions on how to enable auto-completion and hover IntelliSense for TailwindCSS classes in VScode. To do this, users must add a regex to the VScode settings that matches the desired custom HTML attributes (variable names).

If you've been developing apps using TailwindCSS for some time, then it is inevitable that you will or must have already encountered this issue in VScode.

The problem 🚧

When you assign className to a div then you get auto-completion and the applied CSS style when you hover over the added tailwind class.

⚡️ Note: Tailwind CSS IntelliSense VScode extension must be installed in your VScode to get auto-completion and hover IntelliSense.

But if you create a variable called containerClass and then try assigning tailwind classes to it, then you won't get the same IntelliSense, which is fine for most people 🤝, but if you're a productivity fanatic like me, then this is not acceptable!

First, let's try to understand why doesn't the containerClass gets the same inference.

The why ❓

The Tailwind CSS IntelliSense VScode extension, by default only looks for class, className and ngClass HTML attributes to provide class completions, hover previews, linting, etc.

We can check this by searching for tailwindcss in our VScode settings, and the first result shows us the default HTML attributes for which class completions, hover previews, linting, etc are provided.

Hence we do not get class completions and hover previews when we assign tailwind classes to a variable.

The solution 💰

By now you've probably already understood what needs to be done to mitigate this.

In settings, after searching for tailwindcss, we need to:

Click on Add Item button
Add regex that matches the desired custom HTML attributes (variable names) - .*Class , .*ClassName .

Done! ✅

Now you should be able to get class completions and hover previews when you assign tailwind classes to a variable that ends with Class or ClassName .

Epilogue 🌻

For most people, this might not be of the utmost importance, but I am always on the lookout for the tiniest improvements in my Development Experience! Feel free to share any suggestions you might have for me 😇.

Originally, my plan was to compose a Twitter thread about this topic. However, upon further consideration, I discovered that tweets are not very searchable. As a result, I decided to write a more in-depth blog post instead.

If you like quick tips like this then you might also like my other blog posts. I also share a lot of React, Javascript, Typescript, expo, nextjs content on my twitter.

Thank you for taking the time to read this blog! Your support is greatly appreciated.

A Step-by-Step Guide to Share images from Your Expo React Native App to Instagram Stories

Vikrant Bhat — Tue, 28 Feb 2023 16:18:24 +0000

Let's get started with this step-by-step guide to share images from your Expo React Native App to Instagram Stories! With this guide, you will be able to easily install the necessary libraries - react-native-view-shot and react-native-share - and create a component with the example code. I also share some tips for debugging if you get stuck and a few resources to help you out. So, let's get started!

Steps

Step 1: Create an expo app or open an existing expo-managed app

npx create-expo-app my-app && cd my-app

Step 2: Install the following mentioned libraries:

react-native-view-shot - to capture a React Native View as an image.
react-native-share - to share the captured image as a sticker to your Instagram stories.

Step 3: Copy the following example code as a component

Ps: I've tried to explain as much as I can within the code snippet below, if there are still any questions, please feel free to ask!

import { useRef, useState, useEffect } from 'react';
import { Text, View, Button, Platform, Linking } from "react-native";
import { captureRef } from "react-native-view-shot";
import Share from "react-native-share";

const App = () => {
    const viewRef = useRef(null); // ref used to mark the View to be screenshotted 📸, check the returned JSX below

    const [hasInstagramInstalled, setHasInstagramInstalled] = useState(false); // State to track if Instagram is installed on user's device or not

    useEffect(() => {
        if (Platform.OS === "ios") {
// If platform is IOS then check if instagram is installed on the user's device using the `Linking.canOpenURL` API
          Linking.canOpenURL("instagram://").then((val) =>
            setHasInstagramInstalled(val),
          );
        } else {
// Else check on android device if instagram is installed in user's device using the `Share.isPackageInstalled` API
          Share.isPackageInstalled("com.instagram.android").then(
            ({ isInstalled }) => setHasInstagramInstalled(isInstalled),
          );
        }
    }, []);

    async function captureAndShare() {
        try {
          // Capture the screenshot of the element and store it into the uri variable
          const uri = await captureRef(viewRef, {
            format: "png",
            quality: 1,
          });

          if (hasInstagramInstalled) {
            await Share.shareSingle({
              appId: "", // Note: replace this with your own appId from facebook developer account, it won't work without it. (https://developers.facebook.com/docs/development/register/)
              stickerImage: uri,
              social: Share.Social.INSTAGRAM_STORIES,
              backgroundBottomColor: "#1D1D1D", // You can use any hexcode here and below
              backgroundTopColor: "#1D1D1D",
              backgroundImage: '...', // This field is optional like the other fields (except appId) and you have to put a base64 encoded image here if you want to use it!
            });
          } else {
            // If instagram is not installed in user's device then just share using the usual device specific bottomsheet (https://react-native-share.github.io/react-native-share/docs/share-open)
            await Share.open({ url: uri });
          }
        } catch (error) {
          console.error(error);
        }
      }    

    return (
            <>
                <View ref={viewRef}>
                    <Text style={{ color: "red" }}>Hello world!</Text>
                </View>

                <Button 
                   onPress={captureAndShare} 
                   title='Capture & Share'
                />
            </>
        )
}

export default App;

Note: for testing react-native-share's functionality in your expo managed app, you will have to make use of Expo development builds.

Tips for debugging if stuck

APIs from various packages and Instagram are ever-changing, hence if you are stuck, I would highly recommend to go and search in their GitHub issues and PRs tab, it's very likely that someone has already faced it. I would also be happy to help you out if that doesn't work out 😇
Make sure that you test on both IOS and Android devices before releasing as there might be some things that don't work across platforms and you might need to handle them.

Resources

Sharing to Stories - Facebook docs for sharing from apps to stories, it does not have anything specific to react-native or expo, but it's a must-read to understand the API and values it accepts.
Create an image from a React Native component and share it on social media - This video is a little old but it gives you a good idea of the problem and the solution.
What are development builds and how to set them up - comprehensive, complete, and up-to-date docs from the expo team. [Video alternative]

Don't lose your Github contributions when you leave an organization

Vikrant Bhat — Sat, 28 May 2022 06:33:56 +0000

As Software engineers there are often times in our careers when we change jobs, now this is a good thing since you get a significant raise 💰, the excitement of joining a new organization is also there and maybe you are also re-locating (to Bangalore?) to a new place.

In this excitement, most of us forget that soon you will be kicked out of your previous Github organization, where you might have made hundreds if not thousands of commits during your tenure and once you are kicked out, all of these commits will disappear in a ✨ jiffy ✨ from you Github profile.

If you are someone like me who cares deeply about their Github profile, then you will be in deep regret (like this person) if you don't do the needful to retain those contributions on your profile.
A Github profile for software engineers is like their resume or at least I treat it like one, hence it's important to keep it up-to-date, authentic and relevant. Having a consistent contributions graph on your Github profile helps you get noticed by possible future recruiters and in general, it shows your consistency as a software engineer.

You can checkout my Github profile here

Now let's get into the meat of it 🎯

It is important to understand when commits are shown

Commits will appear on your contributions graph if they meet all of the following conditions:

The email address used for the commits is associated with your account on GitHub.com.
The commits were made in a standalone repository, not a fork.
The commits were made in the repository's default branch

In addition, at least one of the following must be true:

You are a collaborator on the repository or are a member of the organization that owns the repository.
You have forked the repository.
You have opened a pull request or issue in the repository.
✨ You have starred the repository. ✨

So what can I do to keep my hard-earned contributions?

Star the repositories you are contributing to in your organization. That way, your commits to those repositories will remain in your contributions graph even if you leave the organization that owns the repository or delete your fork of the repository.

Before you leave your company, make sure you update the following information in your personal account:

Unverify your company email address by deleting it in your Email settings. You can then re-add it without verifying to keep any associated commits linked to your account.
Change your primary email address from your company email to your personal email.
Verify your new primary email address.

FAQs

1) Regarding the advice to star the repos before leaving, does this mean that only commits post-starring will remain? Or is starring once sufficient to retain all past commits?

Ans - all commits will remain, so star the repositories as soon as you can just in case.

2) What if commits were made using a company email?

Ans - Unverify your company email address by deleting it in your Email settings. You can then re-add it without verifying to keep any associated commits linked to your account. ( refer )

References

If this blog helped you then please share it with other engineers out there, I don't want any engineer to lose their contributions ever :)

.reduce() Polyfill

Vikrant Bhat — Sun, 09 Jan 2022 15:48:24 +0000

The full source code for the polyfill is available an the end ⬇️

What is a polyfill?

A polyfill is a piece of code used to provide modern functionality on older browsers that do not natively support it.

Polyfill for Array.prototype.reduce()

We will be writing the polyfill in steps, and in each step we will cover a test case.

Note: In first 3 cases we will handle the error conditions

Case 1: Check if `this` exists, reduce is not called on null or undefined

To write the polyfill, we will create a function called myReduce which will take two arguments which are, a callBack function and the initialValue namely.

function myReduce(callback, initialValue) {...}

In the current case, this refers to the array on which our myReduce is called.

For example,

[1, 2, 3].myReduce(...)

then, in the above example this refers to the array [1, 2, 3].

moving ahead, in the current case, we have to check if this exists and reduce is not called on null or undefined, and if it is, then throw a TypeError ☠️.

So, the code for it will look like:

function myReduce(callback, initialValue) {
    if (this === null || this === undefined) {
        throw new TypeError(
            'Array.prototype.myReduce is called on null or undefined'
        );
    }
}

Case 2: Check if `callback` is a function

To handle this case, we add another check for callback, and throw a TypeError if otherwise.

function myReduce(callback, initialValue) {
    if (this === null || this === undefined) {
        throw new TypeError(
            'Array.prototype.myReduce is called on null or undefined'
        );
    }

    if (!callback || typeof callback !== 'function') { // check for callback to exist, and it should be a function
        throw new TypeError(`${callback} is not a function`);
    }
}

Case 3: Reduce on empty array with no initialValue should throw error

To handle this case, we add another if check, and throw a TypeError if otherwise.

function myReduce(callback, initialValue) {
    if (this === null || this === undefined) {
        throw new TypeError(
            'Array.prototype.myReduce is called on null or undefined'
        );
    }

    if (!callback || typeof callback !== 'function') {
        throw new TypeError(`${callback} is not a function`);
    }

    if (!this.length) { // i.e. if array is empty
        if (arguments.length < 2) { // i.e.  if there are less than two arguments, then that means `initialValue` is missing, since callback is a mandatory argument for myReduce function. 
            throw new TypeError('Reduce of empty array with no initial value');
        }
    }
}

Note: Read more about arguments here

Case 4: Invoked on empty array with initialValue, returns initialValue

For this, we add an else if block, and check if there are exactly 2 arguments

Note: for the sake of readability, I will be only showing the the code under discussion in code snippets.

function myReduce(callback, initialValue) {
    ...
    ...

    if (!this.length) { // i.e. if array is empty
        if (arguments.length < 2) { // i.e.  if there are less than two arguments
            throw new TypeError('Reduce of empty array with no initial value');
        } else if (arguments.length === 2) { // This check means that there are exactly 2 arguments, which will namely be -> `callback` and `initialValue`
            return initialValue; // so, in that case return initialValue
        }
    }
}

For example,

function sum(a, b) {
    return a + b
}

[].myReduce(sum, 5) // here `sum` is the callback function and 5 is the initialValue.

// OUTPUT
5

Case 5: Invoked with initialValue

We initialize 2 variables:
k equal to 0
and, acc equal to initialValue (acc is short for accumulator, because it will be used to accumulate the result)

acc is set to initialValue because we want our accumulated result to already have the initialValue in it.

Note: You may be wondering why are we using the var keyword to declare variables (which is usually a discouraged practice in modern web development), well since the whole point of a polyfill is that it should run in old browsers that don't support latest features yet, hence we are using var which has been a part of JS since the start.

We also start a while loop, which runs until k is less than the array's length, and inside the while loop we update the acc variable to callback(acc, this[k], k, this) and increment k

Now, callback(acc, this[k], k, this) might seem complex at first, so let me break it down.

By definition, a callback function in reduce has to take 4 parameters:

accumulator (acc)
currentValue (this[k] i.e. the current value of of the array under iteration)
currentIndex (k)
array (this)

function myReduce(callback, initialValue) {
    ...
    ...
    ...

    var k = 0;
    var acc = initialValue;

    while (k < this.length) {

        acc = callback(acc, this[k], k, this);

        k++; // increment k
    }

    return acc;
}

For example,

function sum(a, b) {
    return a + b
}

[1, 2, 3].myReduce(sum, 1) // here 1 is the initialValue.

// OUTPUT
7

Case 6: Invoked without initialValue

For this case, we check if arguments.length is less than 2, because it means that initialValue has not been provided, and if it is less than two then we equate the accumulator to this[k++], which means the first value of the array (this[0], since k = 0 initially). We also post-increment k by using k++, because we want the while loop to start from index 1 and not from index 0 since the accumulator already has the initialValue as the value at index 0 in the array.

function myReduce(callback, initialValue) {
...
...
...

    var k = 0;
    var acc = initialValue;

    if(arguments.length < 2){
       acc = this[k++] // update `acc` and increment `k`
    }

    // rest of the code stays the same

    while (k < this.length) {

        acc = callback(acc, this[k], k, this);

        k++;
    }

    return acc;
}

For example,

function sum(a, b) {
    return a + b
}

[1, 2, 3].myReduce(sum) // no initialValue provided.

// OUTPUT
6

Complete code

function myReduce(callback, initialValue) {
    if (this === null || this === undefined) {
        throw new TypeError(
            'Array.prototype.myReduce is called on null or undefined'
        );
    }

    if (!callback || typeof callback !== 'function') {
        throw new TypeError(`${callback} is not a function`);
    }

    if (!this.length) {
        if (arguments.length < 2) {
            throw new TypeError('Reduce of empty array with no initial value');
        } else if (arguments.length === 2) {
            return initialValue;
        }
    }

    var k = 0;
    var acc = arguments.length < 2 ? this[k++] : initialValue;

    while (k < this.length) {
        if (Object.prototype.hasOwnProperty.call(this, k)) {
            acc = callback(acc, this[k], k, this);
        }
        k++;
    }

    return acc;
}

This blogpost is inspired by this youtube video which does a great job at explanation.

Thankyou for reading this article! Let's become friends on twitter🐤 also :)

How to add Environment variables in a React Native project with TS

Vikrant Bhat — Sun, 08 Aug 2021 18:49:11 +0000

There are a lot of ways in which we can use environment variables in React Native, you can look at many of them listed in this stack-overflow question

The purpose of this blogpost is to point out and explain the simplest and quickest way to make use of environment variables in your RN project with typescript type checking, you can still follow this blog if you are just using javascript.

We will be making use of the handy npm library react-native-dotenv

STEP 1: Install following packages:



npm install react-native-dotenv



yarn add react-native-dotenv

For typescript install additionally:



npm install -D @types/react-native-dotenv



yarn add -D @types/react-native-dotenv

STEP 2: update your babel.config.js

This blogpost uses an expo managed project, hence the babel.config.js will look like



module.exports = function (api) {
    api.cache(true);
    return {
        presets: ["babel-preset-expo"],
        plugins: [
            [
                "module:react-native-dotenv",
                {
                    moduleName: "@env",
                    path: ".env",
                },
            ],
        ],
    };
};

here, moduleName is the alias we can give to react-native-dotenv library so we can import like:



import { ENV_VAR } from "@env"

instead of:



import { ENV_VAR } from "react-native-dotenv"

this just makes importing a bit easier :)

STEP 3: Create a `.env` file in the root directory and add your environment variable



ENV_VAR=some-secret-value

STEP 4: Use the environment variable by importing it



import { ENV_VAR } from "@env"

STEP 5: Add typescript support

If you are using Typescript in your project, so you must have observed that typescript is yelling at you in STEP 4.
To fix this, we will create an env.d.ts file in the root directory with the following content:



declare module '@env' {
    export const ENV_VAR: string;
}

Wait a second! we are almost done, phew 😅

After this, you also need to update your tsconfig.json file with:



{
    "extends": "expo/tsconfig.base",
    "compilerOptions": {
        "strict": true
    },
    "typeRoots": ["./types"] // <------ you need to add this
}

And now we are done!

Thank-you for reading this blog! The goal for me writing these specific use-case blogs is to create a directory which I can look back on in future for reference and also help the developer community while at it.
Please consider following me here or on Twitter to get updates for my latest publications :)

Free TailwindCSS components to build UI faster

Vikrant Bhat — Sun, 25 Jul 2021 10:41:06 +0000

As a frontend developer often times we want to just spit out a decently looking UI in a short span of time. The advent of Tailwind CSS has already made our jobs easier but wouldn't it be even better if we could use pre-built good looking components and that too for FREE?

That's right, this is a compiled list of free Tailwind CSS components and templates that you can use directly in your side projects or any project for that matter :)

🚨 NOTE: Please save this post as I will be updating the list as and when I stumble upon more free resources 🚀.

1. Tail-kit

Tail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 2.0. It's all compatible with React, VueJS and Angular applications.

Extra: You can even make a request for a component here. Isn't that just amazing 🥳 ?

2. Kimia-UI

Provides fully customizable UI Components compatible with Next.js, Gatsby and create-react-app.
No installation needed, Just copy and paste a component you want to use

3. Mamba UI

Mamba UI is a free, open-source collection of beautiful UI elements based on Tailwind CSS that make it easy for anyone to build a website in minutes.

4. Meraki UI

Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.

Components

5. Tailblocks

Ready-to-use Tailwind CSS blocks
60+ Blocks, Responsive, Dark Mode Support, Color Variations

Components

6. Salvia-Kit

Built with Tailwind CSS, they are fully customizable and without external dependencies. Each dashboard has 4 variants. one for create-react-app, Next.js, Vue with vite and Nuxt.

Components

NEW ADDITIONS:

7. DaisyUI

Clean HTML with component classes
Customizable and themeable
Pure CSS, No dependencies

Thankyou everyone! that is it for now, but I will be updating this list, you can also contribute to this exhaustive list by commenting below or by reaching out to me on twitter🐤, and I will add them here with credits :)

Google outage: Official explanation from Google

Vikrant Bhat — Sat, 19 Dec 2020 10:59:56 +0000

You might be aware that Google had a global level outage recently which impacted all their services from YouTube, GDrive to GCP and everything in between, infact even the Google oAuth was down, that means if you tried to login/signup into any website that uses Google oAuth then it would have failed during those 47 minutes of downtime.

Some on the Twitter rightly claimed that everyone could access YouTube without login, i.e browsing from the incognito window.
The reason why people could access YouTube without logging in was

The Google User ID Service maintains a unique identifier for every account and handles authentication credentials for OAuth tokens and cookies. It stores account data in a distributed database, which uses Paxos protocols to coordinate updates. For security reasons, this service will reject requests when it detects outdated data.

So what this basically means is that their central Authentication management system was affected and thats why everyone could stream YouTube videos from an incognito window since YouTube allows its users to view YouTube without logging in.

Check this blog for the official transcript from Google and detailed explanation of the outage.

Were you online at the time of the outage? Are you a developer? How did you do your work for those 47 minutes without Google😁? Come let's chat about this below✌️

4 PRs done, I need more!

Vikrant Bhat — Wed, 30 Sep 2020 21:39:17 +0000

I just completed my 4 hacktoberfest 2020 PRs!
Do you guys have any suggestions for open source repos that need help in React / Javascript? Please let me know 😁

7 things I learned as a Software Developer

Vikrant Bhat — Sun, 20 Sep 2020 15:25:16 +0000

Last week marked my first year as a Software Developer 🎉

I learned a lot of things, but the following 7 stick out. My hope is that at least one of them proves useful in your journey🎢.

Take notes ✏️
Everyone forgets things. You might have to revisit the StackOverflow solution or a blog that helped you understand a certain concept. Save yourself some time and create a noting system and start writing down helpful resources, advice from managers, how you solved a problem, etc.
I personally started noting down links to important resources on an excel sheet (let me know if you have a better workflow!) and it has definitely saved me some googling and re-research time.
Know the WHY ⍰
Don't just copy/paste the code without understanding what it does. It might solve your problem at hand, but you will have that knowledge gap moving forward.
You don't want massive technical knowledge debt 5 years down the road!
Speak Up for Yourself 🗣
No one knows what you need except for you - so don't expect your managers to read your 🧠. Need more support? Ask for it. Have some ideas? Discuss.
Mentor Others 👥
You don't have to wait until you're mid-level to start teaching or helping others (Even if you teach one thing that stays with them, that is mentoring! - to some, it might sound like a stretch, but it's good enough to get you started). Others who are a notch or two below your level will benefit from your knowledge. Not only that, but teaching is a great way to solidify your existing skills. 💪🏻
Ask Questions ⁉️
Don't be the dev who asks questions every 5 minutes without Googling beforehand. But also don't be the dev who holds up a feature because they were stuck on a problem and waited 2 days to ask for help.
There are no 👏🏻stupid👏🏻questions👏🏻
Have a Hobby ⚽️
No matter how much coffee you've had, your 🧠 isn't meant to code 24/7. Give your mind rest and space to be creative by doing other activities you enjoy. Otherwise, risk burnout. Besides, having other interests can make you more fun to work with.
Don't Take Things Personally 🙃
You are not your code. Learn to view it as temporary. As part of a team, you'll see it change over time for reasons that have nothing to do with your abilities - the codebase grows, business requirements change, code reviews happen, etc.

I started with React on day one, not knowing much about it. But today after a year I can confidently say that I have worked with awesome Javascript technologies & tools ranging from — ReactJS, ReactNative, NodeJS, GatsbyJS, Jest …. firebase, AWS, netlify, vercel and countless others.

No matter what gets thrown at me, I’ll strive to find a solution for it. After all thats what it means to be a Problem Solver aka Software Developer :)

I would also like to thank my mentors Akshat Gupta & Rajat Johri for giving me this wonderful opportunity. Your vision and determination in your respective fields of expertise has given me a unique perspective.

Open any public GitHub repo in Codesandbox in 3 seconds

Vikrant Bhat — Sun, 23 Aug 2020 14:44:44 +0000

If you are someone who wants to quickly just lookup some code in a GitHub repository or even fork or edit it, then this is a good handy trick to know.

NOTE: If you are not a PRO member of codesandbox then the trick will work only on Public repositories

Steps to follow (if the GIF doesn't sum it up 😜):

STEP 1: Open any Public GitHub repository.
STEP 2: Go to the URL and append 'box' to your github.com URL in-between 'hub' and '.com' and it will redirect to CodeSandbox.

Here's an example:

Change the GitHub URL: 
https://github.com/bhatvikrant/react-thumbnail-player

To: 
https://githubbox.com/bhatvikrant/react-thumbnail-player

And that's all you have to do!

Check out the Codesandbox docs to learn more

Javascript (ES2020) **Nullish Coalescing_( ?? ) and Optional Chaining ( ?. )Explained

Vikrant Bhat — Sat, 04 Jul 2020 22:41:50 +0000

Nullish Coalescing operator ( ?? )

It is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

let's see some use-cases that you might encounter frequently, where the ( ?? ) operator can make your life easier :)

Code snippet — 1.1

The most common use-case is accessing a value from a nested Object in javascript.

In Code snippet-1.1 you can see that we are trying to access the key ‘name’ from the data object, which is a nested object, and it gives us the expected result.

Code snippet — 1.2

In Code snippet-1.2 you can see that now the nested data object doesn't contain the ‘name’ key. And when we try to access the ‘name’ key from it, we get undefined.

Getting an undefined value is often not desirable. You might want to set a default value if the key that you are trying to access is sometimes undefined.

This can be tackled using the logical ‘OR’ operator ( || ), like this:

console.log(data.profile.name || ‘John Doe’)

This makes sure that if data.profile.name is undefined then ‘John Doe’ is shown. But this is still not perfect*,* lets have a look why,

Code snippet —1. 3

What if the initial value of the key ‘age’ is 0 (which is actually a valid age). In this case, we would get 21 as the output. Which is again not the desired behavior.

This happens because 0 in javascript is considered a falsy value.

So, until now what we had to do is:

if(data.profile.name == undefined || data.profile.name == null )

 { keep the value of name as ‘John Doe’}

 else{ keep the provided value of name}

This makes your code unnecessarily long, and many inexperienced programmers (including me when I was starting! 🤓 ) introduce bugs unknowingly.

#Tip: Incomplete knowledge is more dangerous than no knowledge.

But now with the introduction of Nullish Coalescing Operator ( ?? ) in ES2020, we can save a lot of time and bugs!

Code snippet —1. 4

All we have to do is use the ( ?? ) operator in the place of ( || ), as simple as that! And that's all you have to do.

Now this will log 21 only when the value of age is null or undefined. Which is what we expect.

Optional Chaining operator ( ?. )

The optional chaining operator ?. permits reading the value of a property located deep within a chain of connected objects without having to validate that each reference in the chain is valid.

let's understand this with the help of an example,

Code snippet — 2.1

We know from our previous experiences that if we try to access a key that doesn't exist inside an object, we get undefined. ( see Code snippet-2.1)

We are trying to access age (which is not present) from the data object. Hence we get undefined.

Code snippet — 2.2 🔗 check out the codesandbox

Now, what if we try to access a nested key that doesn't exist.

As you can see in the Code snippet — 2.2 that we would get an error.

So if we have two levels of undefined, then we get an error.

This issue can be resolved using the logical ‘AND’ (&&) operator, like this:

console.log(data && data.profile && data.profile.age);

When translated to words it means — if data exists — then extract data.profile — and if data.profile exists — extract data.profile.age

And now we would not get an error. So problem solved? well, wait a sec!

⚠️ Now, this is an okay workaround to solve this issue, but this gets very nasty, very fast. Just imagine if you have a deeply nested object and you want to access a key that is very deep into this object, how many times would you have to use the && operator!

Thus to simplify this we can now use the ES2020 optional chaining operator,

Code snippet — 2.3

In Code snippet-2.3 you can see how concise and easy to read our code is, which otherwise would have taken several lines.

Another observation to make is that we get the output as undefined. Which is still much better than getting an error and now we can also handle this by merging our learning of Nullish coalescing ( ?? ) and Optional chaining ( ?. ) operator!

Comment the answer to the problem below! or tweet me🐦 any questions you have!

Thanks for reading and if you liked this blog then please consider following for more posts like this!

Redux-persist (v6) in detail (React)

Vikrant Bhat — Sat, 04 Jul 2020 22:00:33 +0000

Whenever you reload your app, the javascript process has nothing in memory. You will have to re-initialize state, and maybe set some basic state based on the url (if you are in a browser). Though usually this is what you want but there are many use cases where you might want to persist your redux state even when you reload your browser window.

This idea of persisting state across refresh in web applications that use redux for global state management can be achieved using the redux-persist npm package.

The complete redux-store or some specific part of it can be persisted in the browser localstorage easily!

A very common use case for implementing redux-persist in 2020 is:

Offline First. Many users may not have stable internet connection. Persistence is the first step of offline support.

Okay so that's it for the introduction, now let's set up redux-persist in our react-redux application.

Check this out for setting up a react-redux app
or clone this repo

Step 1 - Install redux-persist

npm install redux-persist

yarn add redux-persist

Step 2 - Configure redux-store

// store.js

import { createStore, applyMiddleware } from 'redux'
import { persistStore, persistReducer } from 'redux-persist' // imports from redux-persist
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web

import rootReducer from './reducers' // Root reducer

const persistConfig = { // configuration object for redux-persist
    key: 'root',
    storage, // define which storage to use
}

const persistedReducer = persistReducer(persistConfig, rootReducer) // create a persisted reducer

const store = createStore(
    persistReducer, // pass the persisted reducer instead of rootReducer to createStore
    applyMiddleware() // add any middlewares here
)

const  persistor = persistStore(store); // used to create the persisted store, persistor will be used in the next step

export {store, persistor}

The persistConfig object needs key and storage to work properly since they are mandatory, but it can also take some other key value pairs for more customization, some of them are:

blacklist:

example:
// BLACKLIST
const persistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['navigation'] // navigation will not be persisted
};

whitelist:

example:
// WHITELIST
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['navigation'] // only navigation will be persisted
};

Note: if you are using react native then your persistConfig will look like this (see docs):

import AsyncStorage from '@react-native-community/async-storage';

const persistConfig = {
    >       key: 'root',
    >       storage: AsyncStorage
    >}

Step 3 - Wrap your root component with PersistGate

If you are using react, wrap your root component (Top level component) with PersistGate. This delays the rendering of your app's UI until your persisted state has been retrieved and saved to redux.

NOTE the PersistGate's loading prop can alse be null, or any react instance, e.g. loading={<Loading />}
i.e it can be any react component, so you can add your custom loader as a component here.
If null is provided as a value then it simply loads nothing until persisted state is retrieved. (Don't worry if you don't have a custom loader yet, it hardly takes fraction of a second to retrieve a simple redux state)

import {store, persistor} from './redux/store'
import { PersistGate } from 'redux-persist/integration/react'

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}> // null passed to loading, persistor is being used here
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};

Congratulations! You have successfully completed the setup of redux-persist in your react-app! It was fairly easy wasn't it? Let me know your thoughts on twitter

Additional resources

Check out this great article to know how you can do versioning in your persisted localstorage using redux-persist. This usually comes in handy when you make some big changes in your redux state and its not compatible with the previously saved localstorage in production, so redux-persist has this good to have feature for versioning built in.

Docs

API

How to setup Redux with React (2020)

DEV Community: Vikrant Bhat

Optimize your workflow with Tailwind CSS: Get class completions and hover previews for classes assigned to variables in VScode

The problem 🚧

The why ❓

The solution 💰

Epilogue 🌻

A Step-by-Step Guide to Share images from Your Expo React Native App to Instagram Stories

Steps

Step 1: Create an expo app or open an existing expo-managed app

Step 2: Install the following mentioned libraries:

Step 3: Copy the following example code as a component

Tips for debugging if stuck

Resources

Don't lose your Github contributions when you leave an organization

It is important to understand when commits are shown

So what can I do to keep my hard-earned contributions?

Before you leave your company, make sure you update the following information in your personal account:

FAQs

References

.reduce() Polyfill

What is a polyfill?

Polyfill for Array.prototype.reduce()

Case 1: Check if this exists, reduce is not called on null or undefined

Case 2: Check if callback is a function

Case 3: Reduce on empty array with no initialValue should throw error

Case 4: Invoked on empty array with initialValue, returns initialValue

Case 5: Invoked with initialValue

Case 6: Invoked without initialValue

Complete code

How to add Environment variables in a React Native project with TS

STEP 1: Install following packages:

STEP 2: update your babel.config.js

STEP 3: Create a .env file in the root directory and add your environment variable

STEP 4: Use the environment variable by importing it

STEP 5: Add typescript support

Free TailwindCSS components to build UI faster

1. Tail-kit

2. Kimia-UI

3. Mamba UI

4. Meraki UI

5. Tailblocks

6. Salvia-Kit

NEW ADDITIONS:

7. DaisyUI

Google outage: Official explanation from Google

4 PRs done, I need more!

7 things I learned as a Software Developer

Open any public GitHub repo in Codesandbox in 3 seconds

Javascript (ES2020) **Nullish Coalescing_( ?? ) and Optional Chaining ( ?. )Explained

Nullish Coalescing operator ( ?? )

Optional Chaining operator ( ?. )

Redux-persist (v6) in detail (React)

Step 1 - Install redux-persist

Step 2 - Configure redux-store

Step 3 - Wrap your root component with PersistGate

Additional resources

Case 1: Check if `this` exists, reduce is not called on null or undefined

Case 2: Check if `callback` is a function

STEP 3: Create a `.env` file in the root directory and add your environment variable