DEV Community: Sumrit Grover

Building a Successful Career: Key Insights for Junior Developers

Sumrit Grover — Thu, 04 Jul 2024 06:30:00 +0000

Sarah had just landed her dream job as a junior developer at a promising startup. Excited and eager to prove herself, she dove headfirst into her first project. However, as weeks went by, she found herself struggling with feedback from her team lead, feeling overwhelmed by the constant need to learn new technologies, and battling fatigue from long coding sessions. Sarah's experience is not unique – many junior developers face similar challenges as they navigate the early stages of their careers.

In this blog post, we'll explore five common mistakes that junior developers often make and provide insights on how to avoid them. By understanding these pitfalls, you can set yourself up for success and grow into a more confident and skilled developer.

Ignoring Feedback

One of the most crucial aspects of personal and professional growth is the ability to receive and act upon feedback. As a junior developer, you'll receive feedback in various formats – code reviews, meetings, one-on-one sessions, and more. However, a common mistake is to ignore this feedback or take it too personally.

It's essential to understand that feedback is not a personal attack but a valuable tool for improvement. The person providing feedback is often more experienced and has insights that can help you grow. When receiving feedback, try to set aside your ego and approach it with an open mind. Take notes during meetings to better understand your shortcomings and areas for improvement.

Many junior developers fall into the trap of taking feedback personally, feeling as if others are pointing out their faults to make them feel bad. This attitude is often driven by ego or a know-it-all mentality. Such developers may fall into the 'Low Competence-High Confidence' category of the Dunning-Kruger effect, where they overestimate their abilities.

To avoid this mistake, cultivate a growth mindset. Embrace feedback as an opportunity to learn and improve. Remember that even the most senior developers continue to receive and act upon feedback throughout their careers.

Neglecting Career Development

In the daily grind of your job, it's easy to neglect the importance of continuous learning and upskilling. Many junior developers find themselves so focused on their immediate tasks that they lose sight of the bigger picture – their long-term career development.

Keeping yourself up-to-date is crucial for your career growth. The tech industry evolves rapidly, and staying current with new technologies, methodologies, and best practices is essential. However, many junior developers feel they hardly have time to enhance their knowledge beyond their immediate work.

To avoid this mistake, make a conscious effort to dedicate time to your professional development. There are many simple ways to continuously enhance your knowledge. Reading books and articles, listening to podcasts, and watching webinars can broaden your understanding of various topics. These activities don't require extensive planning and can be done during breaks or while commuting.

Don't overlook the value of coding challenges and virtual conferences. Participating in these activities can be both fun and educational, while also providing networking opportunities. Remember, investing in your skills and knowledge is investing in your future.

Rushing into Coding Without Analysis

A common pitfall for junior developers is the tendency to start coding as soon as they're assigned a task, without spending adequate time analyzing the problem at hand. This eagerness to dive into code can lead to misunderstandings, inefficient solutions, and potential rework.

To avoid this mistake, make it a habit to thoroughly analyze the requirements before writing a single line of code. Start by making a list of assumptions and validating them with your product managers or whoever assigned the task. This step ensures that you have a clear understanding of the problem you're trying to solve.

Additionally, take the time to understand the non-functional aspects of the task. Consider questions like: How many transactions per second should the feature handle? Are there any specific performance requirements? Once you have a comprehensive understanding of the task, write down all the requirements and create a checklist of what needs to be done before the task is ready for testing.

By taking this analytical approach, you'll be better prepared to write efficient, effective code that meets all the necessary requirements. This method may seem time-consuming at first, but it will save you time and effort in the long run by reducing errors and rework.

Risking Burnout

For many junior developers, coding can become an addiction. When faced with an exciting problem, you might find yourself glued to your desk, determined not to leave until you've solved it. While this dedication is admirable, it can be detrimental to your health and long-term productivity.

Burnout is a real risk in the tech industry, and its effects can be severe. Once you experience burnout, your motivation levels can plummet, making it difficult to focus on your work. To avoid this, it's crucial to maintain a healthy work-life balance and take regular breaks.

Implement a method that works for you, such as the Pomodoro Technique, where you work for focused intervals followed by short breaks. Set reminders to ensure you step away from your desk regularly. Don't be afraid to take extended leaves when needed – many developers worry about missing out, but taking time to recharge is essential for your long-term success and well-being.

Remember, sustainable productivity is more valuable than short bursts of intense work followed by periods of burnout. By taking care of your mental and physical health, you'll be able to maintain your passion for coding and perform at your best in the long run.

Misunderstanding Self-Worth

Whether you're fresh out of college or a seasoned developer, understanding your self-worth is crucial. Many junior developers either overestimate or underestimate their capabilities, and neither extreme is beneficial for your career growth.

Developers who overestimate their abilities often have unrealistic expectations from their first job. They may feel they're doing the company a favor by working there, which can negatively impact their performance in interviews and their work attitude. On the other hand, those who underestimate their abilities might accept the first offer they receive without negotiating or considering if it aligns with market standards. They may also hesitate to ask about the nature of the work or whether the company culture is a good fit for them.

To avoid this mistake, strive for a balanced understanding of your skills and worth. Research industry standards for your position and location. Use resources like Glassdoor or AmbitionBox to learn about company cultures and employee experiences. Don't be afraid to ask questions during interviews about the work you'll be doing and the growth opportunities available.

Remember, knowing your worth doesn't mean being arrogant or inflexible. It means having a realistic understanding of your skills, being open to growth, and seeking opportunities that align with your career goals and values.

Conclusion

As a junior developer, navigating the early stages of your career can be challenging. By being aware of these common mistakes – ignoring feedback, neglecting career development, rushing into coding without analysis, risking burnout, and misunderstanding self-worth – you can take proactive steps to avoid them.

Remember Sarah from our opening story? By recognizing these pitfalls and actively working to overcome them, she was able to turn her challenges into opportunities for growth. She learned to embrace feedback, dedicated time to continuous learning, improved her problem-solving approach, maintained a healthy work-life balance, and developed a realistic understanding of her worth.

Your journey as a developer is a marathon, not a sprint. By avoiding these common mistakes and cultivating good habits early in your career, you'll set yourself up for long-term success and satisfaction in the exciting world of software development.

Funny JavaScript, It'll make you Laugh and Cry

Sumrit Grover — Sun, 09 Jun 2024 04:46:56 +0000

Even though Javascript is the most sought after language for developers all around the world, it is a funny language, with nuances that can turn our everyday jobs hell. Some of the nuances will even have you laughing out loud.

1. JavaScript will have you go BaNaNa

Lets start with something that most of you would mostly know, the infamous joke in JS.

'"B" + "a" + +"a" + "a"; // -> BaNaNa

Explanation

The first part "B"+"a" will be a string concatenation. the magically part would be + + 'a', here first JS will try and type cast + 'a' to a string, will would result in NaN getting concatenated to the string. The remaining would also be a simple concatenation, + 'a'.

This would make the result go BaNaNa

2. Two `[]` are not equal

Array is not equal to an array 🤯

[] == ![]; //-> true

Explanation

The abstract equality operator will convert both sides to zero but for different reasons. Arrays are always truthy, the opposite of that would be false, which would then be coerced to a 0. On the left it would be coerced to a 0, because empty array is coerced to a number without becoming a boolean first, and empty arrays are coerced to 0, despite being truthy.

3. `true` is not equal to `[]` but also not to `![]`

true == []; // -> false
true == ![]; // -> false

Explanation

For the first statement, because we are using abstract equalities, the [] would be coerced to 0 and true will be coerced to 1. Hence 1 != 0!

While in the second statement, ![] would change to false, because [] is a truthy value.

4. `Object.is()` and `===` don't work respond the same

Object.is() determines if two values have the same value or not. It works similar(not the same) to the === operator.

Object.is(-0, 0); // -> false
-0 === 0; // -> true

Explanation

In JS, -0 and 0 are strict equals but they are not the same value.

5. Minimal value is greater than zero

Number.MIN_VALUE is the smallest number, which is greater than zero:

Number.MIN_VALUE > 0; // -> true

Explanation

Number.MIN_VALUE is 5e-324, the smallest positive number that can be represented with floating point precision(closest you can get to zero).

6. Precision of `0.1` + `0.2`

This will tickle your funny bone, the addition of 0.1 and 0.2 with accuracy you couldn't imagine.

0.1 + 0.2; // -> 0.30000000000000004
0.1 + 0.2 === 0.3; // -> false

Explanation

The response is not a bug but the indented behaviour, because our systems are 2 based systems, you can clearly express fractions whose denominator only has a prime factor of 2. In binary, 1/2, 1/4, 1/8 would all be expressed cleanly as decimals, while 1/5 or 1/10 would be repeating decimals.

7. Comparing 3 numbers

1 < 2 < 3; // -> true
3 > 2 > 1; // -> false

Explanation

This all happens because of type conversions, lets try and understand what is happening with code itself

1 < 2 < 3; // 1 < 2 -> true
true < 3; // true -> 1
1 < 3; // -> true

3 > 2 > 1; // 3 > 2 -> true
true > 1; // true -> 1
1 > 1; // -> false

TL;DR

JavaScript is a very funny language, and understanding it can be a pain, share this with your friends to give them a headache as well

Unleashing the Power of the React Compiler

Sumrit Grover — Wed, 05 Jun 2024 06:30:00 +0000

The React team has introduced their own compiler, which aims to minimize the effort developers need to put in and significantly boost their productivity. Currently, the React compiler is an experimental feature and is not yet production-ready. But that won't stop us from exploring the exciting possibilities of the new *React Compiler*. Let's get started!

What Sets the Compiler Apart

When writing code, you no longer need to worry about memoizing your code to prevent side effects that impact performance or cause unnecessary rendering on the screen.

If you're familiar with React, you've likely encountered useCallback, useMemo, and memo. These APIs inform React that a component doesn't need to re-compute if its inputs remain the same. For a deeper understanding of these APIs, refer to the official documentation here.

While these APIs are excellent for grasping memoization and its workings, it's common to forget to use them or use them incorrectly. Even the most experienced developers can make mistakes that result in significant performance drawbacks.

The compiler leverages its understanding of JavaScript and the Rules of React to automatically memoize your components and hooks. If you inadvertently break the rules of React, the compiler will skip that file and continue compiling the remaining code.

Assumptions Made by the Compiler

Your code is valid and semantically correct JavaScript.
You adhere to the Rules of React.
You ensure that nullable/optional values and properties are defined before accessing them.

Utilizing the React Compiler

To discover how to integrate the React compiler into your existing codebase, refer to the steps outlined in the documentation.

React Compiler requires React 19 RC. Make sure to upgrade to React 19 before using the React compiler.

You can experiment with the compiler in any project that has React as a dependency. For instance, your Next.js project can seamlessly integrate with the React compiler.

Remember to install the ESLint plugin for a clearer understanding of issues you may encounter while strictly adhering to the rules of React.

Integrating with Your Codebase

Due to JavaScript's flexible nature, the compiler may not detect all possible violations and may proceed with false negatives. (The compiler may unintentionally compile files that violate the rules of React, which is not the desired behavior.)

You can start by introducing the compiler to a small portion of your extensive codebase. Adopt it in a specific directory first:

const ReactCompilerConfig = {
  sources: (filename) => {
    return filename.indexOf('src/path/to/dir') !== -1;
  },
};

For a new codebase, you can enable the compiler for your entire codebase, which is the default behavior.

TL;DR

With the React compiler, memoization is taken care of for you, eliminating the need to worry about it.
The compiler is available for experimental use but is not yet ready for production deployments.
To ensure the React compiler can work its magic, you must follow the rules of React.
The compiler can be used with any project that has React as a dependency.

Git 101 for Beginners: Learn Git Commands, Branching, and Collaboration

Sumrit Grover — Sat, 18 May 2024 14:51:02 +0000

You just got your first internship at a big shot startup, it's your first day on the job and you walk in with a bag full of enthusiasm and a head full of coding dreams, really excited to work with the few of the greatest minds of the century and build software that will put man on mars only to realise that version control is a myth in this realm.

Your manager approaches you, hands you a pendrive and says, "Welcome to the team! Here's the latest version of our codebase, or maybe I think it is". You plug in the USB drive only to be greeted by folders like version_final, version_final_v1, final_final_v2. You see everyone taking turns at a computer fixing their code directly on the production server.

You take a deep breath and somehow muster up the courage to go talk to your manager and tell them about version control and git.

"Git? Isn't that just another buzzword? We've been doing fine without it so far."

sigh

"I thought so too, but hear me out..."

"Alright, you got 5 minutes"

What is version control and git?

More than just a buzzword, git is a powerful tool that allows developers to track changes, collaborate seamlessly, and maintain a clear history of our codebase. It prevents the scenarios which causes conflicting file versions and lost changes.

With git, each developer gets a copy of their own codebase. They can make changes, try out new experiments and even work offline or async. When they are ready, they can push their changes to a central repository, where your peers can review your code and merge it in the main branch of the central repository for it to be available to everyone else working on the same codebase. They can then pull those changes to their local codebase preventing any version mismatch and lost changes. It's like a safety net for the codebase.

Push? Pull? Repository? Merge? What are these terms you must be thinking, don't worry we'll get to everything one by one

Installing Git

Installation of git can vary from machine to machine depending on what operating system you are using.

Installing git for MacOS

Using homebrew

You can install homebrew if you already don't have it, then :

$ brew install git

MacPorts

Install MacPorts if you don't already have it, then:

$ sudo port install git

XCode

If you don't want to use either of these tools to install git, then :

You can download Xcode from the Apple App Store. Apple ships a binary of git with XCode.

Installing git for Linux and Unix

There are a lot of Linux distributions and it is easiest to install Git on Linux using the preferred package manager of your Linux distribution.

You can head to this link and checkout the command to install git according to your Linux distro.

Installing git for Windows

You can head to this link and click on the Click here to download button on the website. It will download the package installer, you can open that up after it's downloaded and follow along the instructions.

The basics

Repository

A repository is the most basic element of Git. It's a place where you can store your code, your files, and each file's revision history. Repositories can have multiple collaborators and can be either public or private. The details of a git repository are stored in a .git file and each and every file and folder in the same folder as the .git file are considered a part of that repository and their changes are tracked within that repository.

To initialise a repository, you can run the command

$ git init

This will create a .git file in the current directory

Terms related to a repository

Branch

Branches are one of the most powerful feature of Git. With branches you can make changes to your code without it affecting the main codebase. Think of it like a tree with multiple branches growing out of it.

The main branch or the branch with the stable production code can be thought of as the trunk of the tree. Now we want to work on a new feature without it disturbing the stable code, that's where branching comes in. If you're working on a feature X, you can create a new branch called as feature-X from the main branch, or to fix a bug you can create a branch called as bug-fix. It's like creating a separate workspace where you can work on and experiment with new changes without it affecting the main codebase.

You can create a new branch from an existing branch using the following command

git checkout -b "branch-name"

The -b flag here tells git that this is a new branch. If you want to switch between existing branches, you can run the following command:

git checkout "branch-name"

Clone

Cloning means to download an exact copy of a repository from the server including all versions of every file and folder. To clone a repository, you can use the following command :

git clone <your-repository-url>

Merge

To take changes from one branch and apply it to another branch is called merge or merging. While merging, we go to the branch we want to merge the code into and then write the merge command with the name of the branch from which we want the code to be merged. To merge two branches, you can run the following command in your terminal :

git branch # Will display a list of all the branches
> main
> *dev #the current branch
git checkout main # Switching to the branch in which we want to merge the code into
git merge dev

After this, all the changes that you did in your dev branch will be reflected in your main branch.

Pull Request

Pull requests are one of the most important features of git and are quite similar to git merge. A pull request is essentially a way to say, 'Hey, team! I've got some changes I'd like to merge into the main codebase. Can you take a look and make sure everything looks good?'. When you create a pull request, you're opening up a conversation about your changes. It's like sending an invitation to your teammates, asking them to review your work.

Pull requests also serve as a safety net. If there are conflicts or issues discovered during the review process, you can address them directly within the pull request. It's a collaborative effort to ensure that the code being merged is of the highest quality.

CLI Commands

Now that we've covered the basics of Git and the power of branching and pull requests, it's time to dive into the nitty-gritty. Let's talk about the essential Git commands

git add

When you have made changes to your code and are ready to push them on to the repository you use git add. It's like saying, "Hey Git! Here are my changes, i want you to pay attention to them". You can manually select the files or folders that you want to add to your commit by using the following command

git add index.js ## Assuming index.js is the name of the file you're working on
git add server.js
git add src/ ## Using a `/` tells git to include the whole folder

Or,

You can let git do the job and use

git add .

Using the above command tells git to add all the changes that you've made across the whole repository, so if there are a 100 files that you have changed you need not manually add all of them

git commit

git add and git commit are like PB&J of git. Once you've staged your changes with git add, it's time to commit them. This is where git commit comes in. It's like sealing the deal, wrapping up your changes in a nice, tidy package. The command to make a commit is

git commit -m "Added Feature X"

The -m flag allows us to include a message with the commit, it's like a note to yourself and the people who are working on the same project explaining what the changes are. It's good practice to write clear and concise commit messages.

git status

This command gives you a snapshot of the current state of the repository. It tells you which files have been modified, which ones are staged(committed, ready to be pushed) and which ones are untracked(files changed but not added via git add yet). You can think of it as a progress report for your code.

git push

This command is used to push the changes from your local repository to a remote repository hosted on the cloud most probably somewhere on Github, Gitlab or Bitbucket. When you're ready to share your commits with the rest of the team you use git push.

git push origin main

By specifying the remote repository (usually named 'origin') and the branch you want to push (in this case, 'main'), you're uploading your commits to the remote repository for others to see and collaborate on.

If you're working on a new branch, let's say feature-x , this branch is present in your local repository but not on the origin, so if you do a git push, the remote will reject your push giving you the error message that the branch does not exist. To tackle this error, while making a push to a new branch we use the --set-upstream flag with the push, this tells git to setup a new upstream for this push. Here it is in action:

git push --set-upstream origin feature-x

git pull

When you want to update your local repository with the latest changes made by your teammates, you use git pull.

This command fetches the latest changes from the remote repository and automatically merges them into your current branch, syncing your work with the rest of the team.

git fetch

This command is like having a peak into what's new in the repository without merging it to your local repository unlike git pull . It allows you to review the changes and decide whether you want to merge them manually using git merge.

Summary

As we've explored the world of Git, from its basic concepts to essential commands, I hope you now see the power and potential it holds for collaborative software development. Git is more than just a version control tool; it's a catalyst for teamwork, a guardian of code integrity, and a navigator through the complex landscape of project management. By mastering Git, you'll unlock a new level of efficiency and confidence in your development workflow. So, whether you're a seasoned developer or just starting your coding journey, embrace Git, and let it be your guide. Remember, with great Git comes great responsibility—the responsibility to write clean code, craft meaningful commits, and collaborate with empathy and respect. As you venture forth, armed with your newfound Git knowledge, I have no doubt that you'll leave a positive mark on every codebase you touch. Happy coding, and may your branches always merge smoothly!

tl;dr

Git is a powerful version control tool that enables developers to track changes, collaborate seamlessly, and maintain a clear history of the codebase.
Git provides each developer with their own copy of the codebase, allowing for independent work and experimentation.
Key Git terms include repository, branch, clone, merge, and pull request.
Essential Git commands: git add stages changes, git commit wraps up changes with a message, git status provides a snapshot of the repository, git push uploads commits, git pull fetches and merges changes, and git fetch allows previewing changes.
Branches enable developers to work on features or bug fixes without affecting the main codebase.
Merging and pull requests facilitate the integration of changes from one branch to another.
Writing clear and concise commit messages is crucial for maintaining a readable and informative project history.
Use the --set-upstream flag when pushing to a new branch to establish the connection between local and remote repositories.

Make your own Custom Hooks in React!

Sumrit Grover — Sat, 12 Feb 2022 08:27:03 +0000

React provides many in-built hooks that you can use in your app

But you can also create custom hooks, which helps reduce the amount of code

Custom hooks are similar to functions but usually start with use and may call other in-build hooks as well

Need for Custom Hooks

The main reason why you should be using Custom hooks is to maintain the concept of DRY(Don't Repeat Yourself)

To understand more about DRY and WET refer to the tweet below.

Dry or Wet Code

When and How to use it

If you want to share the logic between different components, we can extract that to a separate function.

Because custom hooks are JS functions the rules of hooks apply to it as well.

Rules of Hooks are-

Never call Hooks from inside a loop or condition
Hooks should sit at the top-level of your component
Only call Hooks from React functional components
Never call a Hook from a regular function
Hooks can call other Hooks

Building your Custom Hook

Making your own hook is similar to making a JavaScript function, but its name starts with use.

Inside them, you can use any other hook, take anything as parameters, return anything you want it to return.

Put it to the test

Let us create a custom hook that uses useEffect hook that updates the title of the document

This is how you traditionally write the code

Creating the custom hook

What we would do is take out the incrementCount function and put it in a separate file and pass the count state in it.

Like this

Call the Custom hook

Call the hook in your file as you would normally call a JS function

Conclusion

This is how easy it is to make your own custom hooks and integrate them into your application

If you want to try and experiment with this code, here is the link to the same

Code Base

What are DApps

Sumrit Grover — Wed, 09 Feb 2022 19:11:40 +0000

Most apps today run on centralized networks, operated by a controlling authority. For example, social media networks, banks, and streaming services hold your data on centralized servers.

While this centralization is efficient, it generates huge amounts of user data. And that means unwanted exposure to hacks, creepy advertising.

Dapps might feel like regular apps. But behind the scenes, they have some special qualities because they inherit all of the blockchain superpowers.

Here's what makes DApps different Apps

1. No Owners

Dapp code cannot be removed once it has been deployed on Blockchain. Furthermore, anyone may utilize the dapp's functionalities. Even if the dapp's team disbanded, you may still utilize it. Once it's on Ethereum, it's there to stay.

2. Free from censorship

You can't be blocked from using a dapp or submitting transactions. For example, if Twitter was on Ethereum, no one could block your account or stop you from tweeting.

3. One anonymous login

Most dapps do not need you to divulge your real-world identity. Your account serves as your login, and all you need is a wallet.

4. Plug and Play

Dapp code is frequently available and compatible by default. Teams frequently build on the work of other teams. If you want to allow users to exchange tokens in your dapp, just copy and paste the code from another dapp.

5. No down time

The dapp will only go down if Ethereum itself goes down once it is live on Ethereum. Attacks on networks the size of Ethereum's are notoriously tough.

6. Backed by Cryptography

Assailants won't be able to fabricate transactions or other dapp activities on your behalf because of cryptography. To keep your credentials safe, you authorize dapp actions with your Ethereum account - normally via your wallet.

7. Free from censorship

It is not possible to be prevented from utilizing a dapp or submitting transactions. No one could restrict your account or prevent you from tweeting if Twitter was run on Ethereum, for example.

9 Beginner Friendly Tricks every JavaScript Dev Should know

Sumrit Grover — Mon, 24 Jan 2022 13:54:59 +0000

When I first began learning JavaScript, I kept a record of every time-saving tip I discovered in other people's code, on code challenge websites, and everywhere other than the tutorials I was following.

I'll give 9 hand-picked suggestions that I think are exceptionally brilliant or beneficial. This post is aimed for beginners, but I hope that even skilled JavaScript developers will find something valuable in this list.

Destructing assignment syntax

It is an easy and efficient way of extracting relevant information from JavaScript objects.

This syntax allows for a variety of tricks, such as changing variables in one-liners or parsing only the relevant attributes from a returned object.

const company = {
  products: ['phone', 'laptop', 'camera'],
}
const { 0: phone, 2: camera } = company.products

console.log(camera) //camera
console.log(phone) //phone

Change the size of array

If you change the length of the array you are working with then it would remove the excess elements. This can also be used to empty your array.

const array = [1, 2, 3, 4, 5]

console.log(array.length)
//5

array.length = 3
console.log(array.length)
//3

Spread Operator

You can use the spread operator to shallow copy arrays and objects!!!!

It's also a great technique to concatenate arrays or merge objects with a one-liner, rather than painstakingly iterating over each instance and merging.

const array = [1, 2, 3, 4, 5]
const company = {
  founder: 'John Doe',
}

console.log({ ...company, emp: 10 }) //{founder:"John Doe",emp:10}
console.log([...array, 6]) //[1,2,3,4,5,6]

Sorting Arrays

const array = [1, 5, 7, 9, 6, 3]

console.log(array.sort((a, b) => a - b)) //[1,3,5,6,7,9]
console.log(array.sort((a, b) => b - a)) //[9,7,6,5,3,1]

Find the time your code takes to execute

The time method accepts a timer name as an input and expects the same timer name to be given in a call to timeEnd.

The timeEnd method shows the elapsed time in milliseconds between two function calls.

console.time('timer')
for (let i = 0; i < 1e7; i++);
console.timeEnd('timer')

Convert Decimal to Binary

Want to convert your integer to Binary or Hexa or Octa values..

This is the JavaScript way to do it!!

const num = 10

console.log(num.toString(2)) //10
console.log(num.toString(8)) //12
console.log(num.toString(16)) //a

No need to write console.log again and again

Tired of writing console.log again and again.

Not anymore. See how you can shorten your console log and speed up your coding.

const c= console.log.bind()

c(455)
// 455

Filter Falsy Values

Ever need to filter falsy values out of an array?

False values such as 0, undefined, null, false, "", can be simply ignored using the following method.

const arr=[1,2,'',false]

arr.filter(Boolean)
// [1,2]

Modify Your Buttons

Use Pressable wrapper. Similar to Touchable/Highlight components, but more customizable.

A few of the press functions are
onPressIn is called when a press is activated.
onPressOut is called when the press gesture is deactivated.

Have you been hearing a lot about crypto assets and the concept of NFTs?

Sumrit Grover — Wed, 19 Jan 2022 18:19:26 +0000

Let's delve into why they are such a hot commodity.

Firstly what does NFT even stand for!!!

NFTs stand for "non-fungible-tokens".

Ops. That doesn't make it any better.
"Non-fungible" more or less means that it is unique and can not be replaced with something else.

It is like a one of a kind sneaker, if you traded it for something else, you would be having something completely different.

So how do these "NFTs" work?

At a very level, most NFTs are part of the Ethereum blockchain (or any other blockchain for that matter).Ethereum blockchain supports these NFTs, which store extra information that makes them work differently from, say, an ETH coin.

Will it become something like art collecting?

Some people would be hoping so.Like whoever paid almost $390,000 for a 50-second video by Grimes or the person who paid $6.6 million for a video by Beeple.

But you can find and download the video that a person paid millions for. You can copy a digital file as many times as you want, including the art that’s included with an NFT.

Just like this.

But NFTs are designed to give you something that can’t be copied: ownership of the work.

To put it in terms of physical art collecting: anyone can buy a Monet print. But only one person can own the original.

What is the difference between NFTs and cryptocurrencies?

NFTs are often programmed in the same way as cryptocurrency, such as Bitcoin or Ethereum, is programmed, but that's where the resemblance ends.

Physical money, stocks, and cryptos are fungible, meaning that they can be exchanged for one another.

NFTs are different. Each has a digital signature that makes it impossible for NFTs to be equal to one another.

But why would you be willing to pay big bucks for something that just might amount to a trading card?

Sure NFTs are risky and the future is uncertain in that regard.

NFT’s value is based entirely on what someone else is willing to pay for it.

Therefore, demand will drive the price rather than fundamental, technical, or economic indicators.

Thanks you for Reading the entire post. If you enjoyed and wish to read similar content do follow me on Twitter

ES2020, and what it brings to the table.

Sumrit Grover — Fri, 07 Jan 2022 09:17:29 +0000

Here are 6 new JavaScript features that you should be using

BigInt

Currently, the largest number you can store in an integer is pow(2,53)-1.

Now you can even go beyond that.

But for this to work properly, you need to append n at the end of the integer.

The n denotes that this is a BigInt and should be treated differently.

Dynamic Imports

This gives you the option to import JS files dynamically as modules that you import natively.

This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of webpack or other module bundlers.

Nullish Coalescing

The symbol for Nullish Coalescing is ??.

Nullish Coalescing gives you a chance to check for truly nullish values rather than falsey values.

You might ask what is the difference between these two.

In JavaScript, many values are falsey, like empty strings, the number 0, undefined, null, false, NaN, and so on.

There may be times where you have to check whether the variable is nullish(undefined or null), but is okay to have empty strings or false values.

Optional Chaining

Optional Chaining syntax allows you to access deeply nested objects without worrying about the property being present or not.

If the value exists amazing!!

Otherwise, it will return undefined.

Module Namespace Exports

It was already possible to import everything using the *. However, there was no symmetrical export syntax.

But now you can do that like this.

globalThis

You have different global object for different platforms, window for browsers, global for node, self for web workers.

But ES2020 brought globalThis which is considered as the global object no matter where you execute the code.

TL;DR

BigInt - play with very large integers, make sure you append n at the end of the integer.
Dynamic Import - import files conditionally.
Nullish Coalescing - Check for nullish values rather than falsey values.
Optional Chaining - check for deep nested objects without worrying about undefined values.
Module Namespace Exports - export everything using the * symbol
globalThis - considered global object no matter where you code.

You have reached the end of the post. To find more interesting content regarding JavaScript, React, React Native make sure to follow me on Twitter

Getting hooked onto React Hooks.

Sumrit Grover — Tue, 28 Dec 2021 07:02:43 +0000

useState

This hook as the name suggests is used to declare a state variable. This helps preserve values between function calls.

Whenever a state variable is changed it causes the DOM to re-render.

The first is the name of the state variable that is declared and the second is the function that is called to update the state variable.

PS- State variable is able to hold any and all types of datatypes.

useEffect

Using this hook, you tell React to do something after rendering the DOM.

React remembers the function you passed and would call that function after performing the DOM updates.

The array present at the end of the useEffect function is called the dependency array.

This dependency array defines how the useEffect would be used.

If no dependency array is provided then it will be called every time the DOM is updated.

If an empty array is provided, then the useEffect is only called once, when the DOM is mounted and is never called again.

If state variables are passed in the dependency array then useEffect is called when the state variables are updated.

useRef

This React Hook is used to create reference variables.

The values stored in useRef are also preserved between different renders, similar to useState.

But unlike useState, a change in the value of useRef doesn't cause the DOM to render.

The useRef is completely separate from the render cycle

useCallback

What to do when a function is being called again and again without any need. You use the useCallback hook

useCallback function will return a memoized version that of a callback function that only changes when you changed the dependency array.

This will help prevent unnecessary renders and optimize the child components

useMemo

This hook is similar to the useCallback hook, but here a memoized value is returned rather than the entire function.

useMemo also has a dependency array and is called once the state in the dependency array is updated.

useMemo is used to memoize costly functions so they don't have to be called every time they're rendered.

Whereas useCallback is used to improve the rendering behaviour of your React function components.

NPM packages to make your React Native project aesthetic and your life easier!!

Sumrit Grover — Thu, 23 Dec 2021 14:08:56 +0000

react-native-vector-icons

The most popular icons in the NPM GitHub package are React Native vector icons.

It offers over 3,000 vector icon sets, all of which are free to use.

These vector icons are simple to design and include in one's project.

react-native-vector-icons

react-native-responsive-screen

This library helps you create a responsive UI for your application.

You must import and utilise the widthPercentageToDP and heightPercentageToDP methods. The names are a little long, but they attempt to be descriptive.

react-native-responsive-screen

react-native-modal

Modals are an excellent way to improve user interfaces.

A modal is a screen that shows atop another screen to draw the user's attention to important information or to move them to the next stage in a process.

react-native-modal

react-native-elements

The concept behind React Native Elements is that it's more about component structure than real design.

This means less boilerplate in putting up specific elements but complete design control.

react-native-elements

lottie-react-native

Lottie is a free and open-source animation library.

Lottie-based files are less in size, yet they are still high-quality.

Lottie is used by the most popular mobile applications to give their users a better visual experience.

lottie-react-native

react-native-svg

Now, the simplest method is to simply extract the.png or.jpeg file. This will work for you, but you won't get crisp quality and your app will get bloated.

Instead of using those, you should use the SVG format.

react-native-svg

Using Flex like a Pro

Sumrit Grover — Thu, 09 Dec 2021 09:01:16 +0000

Flex defines how much that view would fill the screen.

Space would be divided according to the flex property of each element.

In the following example, the container view has flex: 1.

The red view has flex: 1, the yellow view has flex: 2, and the green view has flex: 3.

1+2+3 = 6, which means that the red view will get 1/6 of the space, the yellow 2/6 of the space, and the green 3/6 of the space.

FlexDirection

It is the property which defines the direction in which the child components are laid out.

FlexDirection -"Row"

Align children from left to right.

FlexDirection - Column(default)

Align children from top to bottom.

Web development has tons of different layout techniques and >tricks available. While in React Native your best tool for >building layouts be will be Flexbox.

DISCLAIMER
Flexbox in React Native is a bit different from CSS Flexbox. Differences are subtle but they are still there.

DEV Community: Sumrit Grover

Building a Successful Career: Key Insights for Junior Developers

Ignoring Feedback

Neglecting Career Development

Rushing into Coding Without Analysis

Risking Burnout

Misunderstanding Self-Worth

Conclusion

Funny JavaScript, It'll make you Laugh and Cry

1. JavaScript will have you go BaNaNa

Explanation

2. Two [] are not equal

Explanation

3. true is not equal to [] but also not to ![]

Explanation

4. Object.is() and === don't work respond the same

Explanation

5. Minimal value is greater than zero

Explanation

6. Precision of 0.1 + 0.2

Explanation

7. Comparing 3 numbers

Explanation

TL;DR

Unleashing the Power of the React Compiler

What Sets the Compiler Apart

Assumptions Made by the Compiler

Utilizing the React Compiler

Integrating with Your Codebase

TL;DR

Git 101 for Beginners: Learn Git Commands, Branching, and Collaboration

What is version control and git?

Installing Git

Installing git for MacOS

Using homebrew

MacPorts

XCode

Installing git for Linux and Unix

Installing git for Windows

The basics

Repository

Terms related to a repository

Branch

Clone

Merge

Pull Request

CLI Commands

git add

git commit

git status

git push

git pull

git fetch

Summary

tl;dr

Make your own Custom Hooks in React!

Need for Custom Hooks

When and How to use it

Rules of Hooks are-

Building your Custom Hook

Put it to the test

Creating the custom hook

Call the Custom hook

Conclusion

What are DApps

1. No Owners

2. Free from censorship

3. One anonymous login

4. Plug and Play

5. No down time

6. Backed by Cryptography

7. Free from censorship

9 Beginner Friendly Tricks every JavaScript Dev Should know

Destructing assignment syntax

Change the size of array

Spread Operator

Sorting Arrays

Find the time your code takes to execute

Convert Decimal to Binary

No need to write console.log again and again

2. Two `[]` are not equal

3. `true` is not equal to `[]` but also not to `![]`

4. `Object.is()` and `===` don't work respond the same

6. Precision of `0.1` + `0.2`