DEV Community: Jenesh Napit

How To Add ESLint In A React Project

Jenesh Napit — Wed, 14 Aug 2024 03:12:19 +0000

Adding Linting rules to a React project is must when it comes to improving code quality, making code more consistent and avoiding bugs.

This article was first published on MyDevPa.ge blog, check it out for helpful tutorials for Software Developers.

There is a popular open-source JavaScript linting tool called ESLint, which is used for automatically detecting incorrect patterns found in JavaScript code.

Here’s a step-by-step method to add linting rules to React projects:

Installing ESLint

First, we need to install ESLint in our React project as a devDependencies because we don’t need them in production.

To Install, we will use the command below.

npm i -D eslint

Initialize ESLint

Next, we will have to initialize ESLint configuration, by adding a configuration file .eslintrc.json in our project’s root folder.

Here is a sample example configuration.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"],
  "rules": {
    // Here we can add our custom rules.
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Inside our .eslintrc.json add extends and plugin property.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"]
}

As we have added various plugins we need to first install them as devDependencies by running the given command below.

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Adding Rules

Rules are used for configuration purposes. We can set the error level of rules in three different ways.

off or 0: This will turn off the rule.
warn or 1: This will turn the rule on as a warning.
error or 2: This will turn the rule on as an error.

🚨 JavaScript Strings cheatsheets all methods

Let’s add some rules to our configuration file, we can add any other rules as per our choice from the list of all rules mentioned above.

"rules": {
  "react/prop-types": 0,
  "indent": ["error", 2],
  "linebreak-style": 1,
  "quotes": ["error", "double"]
}

Adding Scripts for Linting

Last but not least, let’s add some commands in our package.json “scripts” property to run ESLint.

"scripts": {
  "lint": "eslint \"src/**/*.{js,jsx}\"",
  "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
}

Congrats, now if you try to run either of these commands it should do the trick!

After this you can continue to customize the linting rules to your liking to ensure code consistency and quality.

Visit MyDevPa.ge to create your free portfolio website in a minute for free!

How to Delete Files and Directories in Mac Terminal

Jenesh Napit — Tue, 13 Aug 2024 03:25:15 +0000

Deleting files and directories is usually easy with Finder for Mac users. While graphical interface works great most of the times, using terminal commands usually offers more flexibility and power. In this article we'll learn various methods to delete files and directories on macOS using the command line.

This article was first published on MyDevPa.ge blog, check it out for helpful tutorials for Software Developers.

How to Delete a File in Mac

Using the rm command

The most common way to delete a file in Mac's terminal is using the rm (remove) command:

rm filename

Replace filename with the name of the file you want to delete. If the file is write-protected or you don't have sufficient permissions, you may need to use sudo:

sudo rm filename

Securely deleting files

macOS provides a built-in command for securely deleting files, which is similar to the shred command in Linux:

rm -P filename

The -P flag overwrites the file with zeroes three times before deleting it, making it much harder to recover.

How to Delete a Directory in Mac

Using the rmdir command

To delete an empty directory, use the rmdir command:

rmdir directory_name

Using the rm command

To delete a directory and all its contents, use the rm command with the -r (recursive) option:

rm -r directory_name

Be very careful with this command, as it will delete the directory and everything inside it without asking for confirmation.

Dealing with Locked Files

If you encounter a "Operation not permitted" error when trying to delete a file, it may be locked. To unlock and delete it:

First, remove the "locked" flag:

   chflags nouchg filename

Then delete the file:

   rm filename

Handling Hidden Files

Hidden files in macOS start with a dot (.). To delete a hidden file or directory, you can use the same rm commands, but you'll need to either:

Type the full name including the dot (you can use tab to autocomplete):

   rm .hidden_file

To see hidden files in the current directory before deleting:

   ls -a

Additional Tips and Considerations

Use caution: The rm command deletes files permanently. Unlike moving files to the Trash, this action is typically irreversible.
Use the -i flag for confirmation: Add -i to rm commands to prompt for confirmation before each deletion:

   rm -i filename

Wildcard deletion: You can use wildcards to delete multiple files. For example, to delete all .txt files:

   rm *.txt

Deleting files with special characters: If a filename contains spaces or special characters, enclose it in quotes:

   rm "file with spaces.txt"

File recovery: While it's possible to recover deleted files using third-party software, it's not guaranteed. Always have backups of important data.

Conclusion

Understanding how to delete files and directories using Mac terminal commands gives you more control over your system. Remember to always double-check before deleting, especially when using powerful commands like rm -r. With practice, you'll become more comfortable managing your files efficiently from the command line.

Remember, with great power comes great responsibility. Sometimes you can't undo so always ensure you have backups of important data, and be cautious when using deletion commands, especially with sudo privileges.

Visit MyDevPa.ge to create your free portfolio website in a minute for free!

Add ESLint To A React Project

Jenesh Napit — Mon, 29 Jul 2024 17:15:08 +0000

Adding Linting rules to a React project is must when it comes to improving code quality, making code more consistent and avoiding bugs.

There is a popular open-source JavaScript linting tool called ESLint, which is used for automatically detecting incorrect patterns found in JavaScript code.

Here’s a step-by-step method to add linting rules to React projects:

🚨 For more tutorials visit MyDevPage

Installing ESLint

First, we need to install ESLint in our React project as a devDependencies because we don’t need them in production.

To Install, we will use the command below.

npm i -D eslint

Initialize ESLint

Next, we will have to initialize ESLint configuration, by adding a configuration file .eslintrc.json in our project’s root folder.

Here is a sample example configuration.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"],
  "rules": {
    // Here we can add our custom rules.
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Inside our .eslintrc.json add extends and plugin property.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"]
}

As we have added various plugins we need to first install them as devDependencies by running the given command below.

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Adding Rules

Rules are used for configuration purposes. We can set the error level of rules in three different ways.

off or 0: This will turn off the rule.
warn or 1: This will turn the rule on as a warning.
error or 2: This will turn the rule on as an error.

Let’s add some rules to our configuration file, we can add any other rules as per our choice from the list of all rules mentioned above.

"rules": {
  "react/prop-types": 0,
  "indent": ["error", 2],
  "linebreak-style": 1,
  "quotes": ["error", "double"]
}

Adding Scripts for Linting

Last but not least, let’s add some commands in our package.json “scripts” property to run ESLint.

"scripts": {
  "lint": "eslint \"src/**/*.{js,jsx}\"",
  "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
}

Congrats, now if you try to run either of these commands it should do the trick!

After this you can continue to customize the linting rules to your liking to ensure code consistency and quality.

If you're a Junior Software Engineer make sure you check out this article Junior to Senior Software Engineer: Helpful Tips

Vite vs Nextjs: Which one is right for you?

Jenesh Napit — Mon, 29 Apr 2024 16:21:34 +0000

Vite and Next.js are both top 5 modern development framework right now. They are both great depending on your use case so we’ll discuss 4 areas: Architecture, main features, developer experience and production readiness. After learning about these we’ll have a better idea of which one is best for your project.

1. Architecture

Vite: Vite is a build tool that aims to provide a faster and leaner development experience. Using ES module you can skip bundling during development, allowing for faster module serving. Powered by Rollup for production builds but uses native ES modules in development for rapid server start and hot module replacement (HMR).
Next.js: Next.js is a batteries included React framework that provides a range of features for building server-rendered applications, static websites, and more. You can do both client-side and server-side, with features such as server-side rendering (SSR) and static site generation (SSG). Note: Next.js uses Webpack as its module bundler.

2. Main Features

Vite:
- Fast development startup and updates through native ES module loading.
- Plugins available for features like legacy browser support, asset import, and more.
- Simple configuration with sensible defaults.
- Support for frameworks like Vue, React, Svelte, etc.
- Framework agnostic
- Minimal and customizable, smoother learning curve
Next.js:
- React framework
- Advanced routing and nested layouts based on file system
- Built in optimizations for Images, Scripts, Core Web Vitals and more
- Automatic code splitting for faster page loads.
- Built-in CSS and Sass support, with support for CSS Modules.
- API routes to build API endpoints within Next.js projects.
- Image optimization via the built-in Image component.
- Incremental Static Regeneration (ISR) and on-demand revalidation.

3. Development Experience

Vite: Designed for fast for development builds, focusing on optimizing the developer experience with instant server start and hot module replacement.
Next.js: Focuses on productivity and scalability, providing a lot of built-in functionality (like hybrid static & server rendering) that can be crucial for complex applications. Full stack solution.

4. Production Readiness

Vite: While primarily focused on improving development experiences, Vite produces optimized production builds using Rollup.
Next.js: Highly optimized for production from the start, with features tailored for performance in real-world scenarios, including extensive support for SEO and server-side capabilities. Note: With deployment to Vercel is free and comes with additional free tooling such as website analytics and more.

5. Use Cases

Vite: Best for projects where you want a fast development server and are comfortable handling some aspects of your architecture separately (like SSR if using React).
Next.js: Ideal for projects that benefit from server-side rendering, static site generation, or need built-in API handling capabilities, especially when SEO and performance are critical. All in one solution.

6. Community and Ecosystem

Vite: Rapidly growing community, with increasing plugin ecosystem and integration examples.
Next.js: Established community, extensive documentation, and a wide range of plugins and integrations from both Vercel and third parties.

Verdict:

Vite: If you are looking for a fast and efficient build tool and development server, then Vite is a great option. It is also a good choice if you want to have more control over the development process.

Next.js: If you are looking for a React framework that offers a number of features for building server-rendered and statically generated web applications, then Next.js is a good choice. It is also a good choice if you want to use a framework with a large ecosystem and a large community. Next also is better for larger applications and is better for scalability.

Summary

In summary, choose Vite if you prioritize a quick setup and a fast development experience with fewer out-of-the-box features. Opt for Next.js 14 if you need a more feature-complete framework that supports complex scenarios like SSR, SSG, and API routes, all ready from the get-go.

🚨 Do you need a Portfolio Website? 🚨

With MyDevPage you can build your own portfolio website in 1 minute. You need to focus on building great projects and enhancing your skills rather than wasting your time in building and designing a portfolio website from scratch.

MyDevPage handles everything:

Update easily on the go from your phone
Beautiful Portfolio Website
Upload your resume easily
Useful Website Analytics
Simple Customization
Add Custom Domain
Control over SEO
Contact Form

Try it out today (it's Free!) 👉 MyDevPage 👈

Burnout as a Software Engineer

Jenesh Napit — Sun, 25 Feb 2024 21:21:58 +0000

👋 Hi, this is Jenesh with this week’s post! Quick intro: I went from an Intern to an Engineering Manager in 3 years and want to help others level up in their career.

This week, we’ll dive into the infamous word in tech, “Burnout.” If you find this helpful, subscribe to my newsletter More Talking, Less Coding for weekly 💎

💭 What is Burnout? 💭

“Burnout is a state of complete mental, physical, and emotional exhaustion.” - Darling Downs Health

I've been pushing myself for the past four years and have gotten a few promotions.

But in the last few months, it finally caught up to me. I felt burned out for the first time in my career.

What does it feel like?

Imagine lacking motivation and interest in whatever you're doing, even in what you used to find fun. 😮‍💨

How do you know if you're burning out?

Here are some signs straight from WebMD that can signal burnout:

You're Exhausted
You're Turning Cynical
You're Feeling Useless
You're Depressed
You Hate Your Job
Your Mind Wanders
Sleep Is Tough to Get

Not all of the things from the list will be checked, but if most of them are, you probably are in or close to burnout.

What can you do to prevent burnout?

Start prioritizing self-care. Focus on things like:

Diet & Exercise
Good sleep habits
Cut/limit job stressors
Speak with your manager
Socializing with friends more
Taking time off (use them PTOs!)
Self-reflection (meditating, journaling)

💡 My Favorite Tool of the week 💡

Scribe - Create Step-by-Step Guides — Fast

This new tool has been my go-to for creating any step-by-step guide for work and personal use. It's so simple to use and saves everyone a lot of time. I'm a Scribe user for life.

🚨 Ask Me Anything! 🚨

I welcome you all to ask me anything by adding your thoughts and questions in the comments. I'll make sure to answer them in next week's newsletter!

5 traits to go from Junior to Senior Software Engineer

Jenesh Napit — Mon, 22 Jan 2024 14:52:15 +0000

The difference between a senior and a junior goes beyond years of experience. The way you think and work changes. I’ve narrowed it down to 5 traits, so let’s dive in.

1. Planning before Coding

As a junior, I was always eager to get coding with the first solution that came to mind. Later, I realized that a senior engineer spends more time planning and analyzing problems from many angles.

Senior engineers often have much more knowledge and experience, so they can often develop better solutions.

Is there anything a junior can do to compensate for the lack of experience? Yes, they can borrow and capitalize on a Senior’s expertise. Before coding, discussing and reviewing my approach with a Senior has saved me from writing unnecessary code toward the wrong solution.

2. Continuous Learning

Senior Software Engineers understand that technology constantly changes, so they stay updated with the latest tools, languages, and frameworks. There are many ways to learn and be on top of new tech. Some of those ways are reading books, attending conferences, or taking online courses. The key is to invest in growing their knowledge and skills.

Some great websites for learning that I use often are:

YouTube
Udemy
Medium

3. Time + Task Management

As a Junior, my tasks would finish relatively slowly. In comparison, Senior engineers were closing out tickets left and right. Over time, I realized that time management is a learned skill that Senior engineers have mastered.

My four tips for effective time management are:

Breaking down the tasks before starting
Time-boxing when working on tasks
Delegating tasks with the team
Saying “no” when needed

Time management relies heavily on Task management. So here are two of my favorite tools I use for task management:

Trello
Notion Projects

4. Collaborative Mindset

Software engineering is not a one-person game. The best work happens with collaboration with others.

As a junior, I made mistakes, thinking I had the best solution, only to find out later in the code review that it wasn’t. To avoid this kind of situation, engineers should share and collaborate often. Here’s a great article on The power of collaboration in Software Development.

5. Attention to Detail

In the world of software engineering, attention to detail is critical. Your code can be one edge case away from blowing up on-call.

Write clean and maintainable code. In the end, humans are the ones maintaining the code. Here is a detailed article on How to write clean code.

Summary
As you can imagine, there are many more traits, but these are some essential characteristics I’ve seen in Senior Software Engineers. You don’t become a Senior in a day. Everyone has a different journey and timeline. But these traits will set you up for success.

To recap the five traits again:

Planning before Coding
Continuous Learning
Time + Task Management
Collaborative Mindset
Attention to Detail

As much as I’ve enjoyed writing this article, I would enjoy hearing your thoughts even more. So, add them below in the comments, and let’s start the conversations!

P.S. If you’ve enjoyed reading this, connect with me on LinkedIn! 🎉

Join my weekly Substack newsletter with over 100 other Software Engineers. I post weekly newsletter and provide the best tips and advice for Junior to Senior Developers.

5 Underrated Skills That Will Get You Promoted

Jenesh Napit — Mon, 22 Jan 2024 01:14:49 +0000

A few days ago, I posted on LinkedIn saying:

Early in my role as a Software Engineer, I had no idea how the promotion game worked.

I thought I had to work hard and give my best on each project. I hoped my manager would notice and reward me with a promotion.

The strategy could have worked and is how most people go about it in their careers. But I asked myself, “There must be a better way?”

That better way is how I came up with my LinkedIn post a few days ago.

You step it up.

It's easier said than done, but here are five areas you can level up in:

Technical Skills
Documentation
Communication
Problem-Solving
Project Management

Let’s dive into it.

Technical Skills

The way I improve my Technical Skills is by following my SLAP method:

Seek
Learn
Apply
Preach

Seek

I get 99% of my news from LinkedIn and YouTube. I’m always on there, so I’ll automatically see relevant news from the people I follow.

Find your platform and get exposed to technical topics and tools applicable to your role.

Learn

Once you find something relevant to your role and interest, add it to your to-do list. Not all news will need this step, but it’s helpful to write things down rather than try to remember them a few days later.

I learn new things by visiting the website for documentation or a demo if they have. Then, I go to YouTube to see if someone can give me a TLDR and an in-depth tutorial.

Apply

What’s the point of learning if you never apply it?

Show your new and improved skills by starting small and iterating. If done correctly, your co-workers will begin to notice, which brings me to the 4th step.

Preach

No, you don’t need to preach to anyone. But, if you think your co-workers can benefit from your new skill, figure out a way to teach it.

You can teach by writing documentation, how-to guides, and FYIs. You can also record video tutorials or give a full-on live brown bag session.

Pro tip: You don't need to do this alone. You can teach a few co-workers and ask them to "co-author" or "co-present." This way, you can share the work.

Documentation

How do you feel when you need to know why someone made X decision two years ago? And how did they use the Y tool? After searching everywhere, you find nothing.

If you want a promotion, you must show that you are reliable and think for the future, not just the present.

When you show that you care and will take the extra time and effort to ensure “the why” and “the how,” your manager will see you from a different lens. I call that the promotion lens. 👓

If you focus on writing good work documentation now, you’ll see massive improvements in a year.

Communication

Unless you only work alone and don’t need to interact. You must invest in improving your communication.

Be a good communicator, whether you’re sending messages on Slack, Email, or in a live Video call. Some traits I’ve seen in good communicators are:

Being respectful to others

Clear and concise statements

Keeping it professional at all times

Google or look up things you can find in chat and documentation first before you ask others

Problem-Solving

There are two ways to improve problem-solving skills:

Knowledge
Efficiency

In Software Engineering, you can gain knowledge by learning how other Engineers solve problems. The key here is to have a system and framework for problem-solving.

The other way to get better with Problem Solving is through efficiency.

For instance, you can spend a week on technical documentation. Or, you can pair up with other experts in the tool.

It depends on the situation, but there is usually more than one approach for every problem.

Project Management

When I became an Engineering Manager, I started to take project management seriously.

As a software engineer, I was accustomed to being assigned a few tasks for one or two projects. However, now I am responsible for managing multiple projects, which is a significant change for me.

I took courses and invested time to improve my project management skills.

Bonus: Tell your manager you want to improve your Project Management skills - they'll appreciate your initiative and support your development.

Summary

I have listed 5 of many, but I recommend starting with 1 or 2 and creating achievable SMART goals.

Technical Skills: SLAP method
Documentation
Communication
Problem-Solving
Project Management

Thanks for reading, let me know in the comments if you have a 6th to add to the list!

As much as I’ve enjoyed writing this article, I would enjoy hearing your thoughts even more. So, add them below in the comments, and let’s start the conversations!

P.S. If you’ve enjoyed reading this, connect with me on LinkedIn! 🎉

Join my weekly Substack newsletter with over 100 other Software Engineers. I post weekly newsletter and provide the best tips and advice for Junior to Senior Developers.