DEV Community: Zakir

10 cool habits that helps frontend developer to code faster (React + TS Edition)

Zakir — Thu, 22 May 2025 06:12:16 +0000

Hey folks,

I've been working with React, Redux, and TypeScript for years now, and if you're anything like me, you've probably hit that point where it's less about learning what to do — and more about how to do it faster and better.

So here are 10 habits/tools/processes I’ve picked up over the years that have genuinely helped me code faster and more confidently as a frontend dev.

Let’s dive in.

1. Set up proper snippet shortcuts (and actually use them)

VSCode snippets are like second brains. I have shortcuts for common stuff like:

rfce → React Functional Component with export  
rtsx → React.FC with TS and props  
dux → Redux slice boilerplate

Using these religiously saves hours every week.
Use Popular Extensions
ES7+ React/Redux/React-Native snippets
👉 Extension ID: dsznajder.es7-react-js-snippets
🔗 Install from Marketplace

2. Use a component library (your own or one like shadcn/ui)

As a senior, you’re either:

Building components again and again 😩
Or reusing tested ones 🙌

Pick the second one. Personally, I love shadcn/ui for React/TS projects. If you’re working in a team, push for a design system + Storybook combo early.

3. Automate imports with `@` paths and aliases

This tiny tsconfig.json tweak avoids spaghetti imports:

"paths": {
  "@components/*": ["src/components/*"],
  "@hooks/*": ["src/hooks/*"]
}

Now you import with:

import { Button } from '@components/ui'

Cleaner. Faster. Less hunting in folders.

4. Have your “starter repo” ready

Have a private GitHub template with:

Vite + React + TS
Prettier + ESLint + Husky
Tailwind (optional)
Zod + Zustand / Redux Toolkit setup

One click, and I’m 30 mins ahead in any new project. Big time-saver.

5. Use AI coding tools — but don’t outsource your brain

Yes, I use GitHub Copilot. Yes, it sometimes guesses better prop names than I would 😅.
But I never accept a block without reading it.

It’s a speed assist, not an auto-pilot.

6. Master your debugger, not just `console.log`

Seriously — put breakpoints, inspect call stacks, step through logic.

It took me way too long to realize debuggers are made for humans like us, not backend-only devs.

7. TypeScript is your best friend. Make types strict early.

I used to avoid as const and Record<string, string> like the plague. Now I use them to lock in assumptions early, so bugs don’t creep in later.

Start strict, not lazy.

8. Get fast at Git (CLI + GUI hybrid)

I use the CLI for speed but also love a good GUI like GitHub Desktop or LazyGit when resolving conflicts.

Pro tip: git commit -S -m "feat: add payment button" with commit signing = 🔒 + ✅

9. Use Chrome DevTools like a pro

cmd + shift + p → Power commands
$$("selector") → Run jQuery-style selection in console
Device emulation, network throttling, performance profiling = gold for frontend polish.

10. Write TODOs like a breadcrumb trail

Instead of just:

// TODO: refactor this later

I now write:

// TODO [Auth Refactor Q3]: This login check should move to middleware

It’s so much easier for Future Me (and teammates) to understand what's going on.

That’s it! These aren’t magic tricks — just small changes with big impact over time. I hope a few of these resonate with you.

Got a tip I should add to my workflow? Drop it in the comments — I’m always tweaking my setup.

Happy coding! 👨‍💻⚡

Level Up Your JavaScript Error Handling: From `try...catch` to Custom Errors

Zakir — Mon, 23 Sep 2024 06:09:11 +0000

Error handling is one of those things every JavaScript developer encounters, but not everyone dives deep into mastering it. If you’ve been relying on simple try...catch statements, it's time to elevate your game. This post will take you through the journey from basic error handling to crafting custom errors, making your code more resilient and easier to debug.

1. The Basics: `try...catch`

Let's start with the classic try...catch:

try {
  const data = JSON.parse('{"name": "John"}');
  console.log(data.age.toUpperCase()); // This will cause an error
} catch (error) {
  console.error("Something went wrong:", error);
}

This is simple and effective. The try block lets you run code that might throw an error, and the catch block captures it, allowing you to handle it gracefully.

However, as your application grows, relying solely on this can lead to less informative error messages, which makes debugging a nightmare. This is where custom error handling shines.

2. Understanding Native Error Types

JavaScript comes with built-in error types, such as:

Error: The generic error object.
TypeError: Thrown when a variable is not of the expected type.
SyntaxError: Thrown when code contains a syntax mistake.
ReferenceError: Thrown when referencing a non-existent variable.

Example:

try {
  let result = myUndefinedFunction();
} catch (error) {
  if (error instanceof ReferenceError) {
    console.error("ReferenceError detected:", error.message);
  } else {
    console.error("Unexpected error:", error);
  }
}

By utilizing these types, you can start building more descriptive error handling paths. But what if you want to define errors specific to your application logic? That's where custom errors come in.

3. Creating Custom Errors

Why Custom Errors?

Custom errors help in identifying specific issues within your code, making it much easier to debug. For example, if you're building an API, you might want to differentiate between ValidationError, AuthenticationError, or DatabaseError.

How to Create Custom Errors

Let’s create a ValidationError as an example:

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

try {
  const age = -5;
  if (age < 0) {
    throw new ValidationError("Age cannot be negative!");
  }
} catch (error) {
  if (error instanceof ValidationError) {
    console.error("Validation Error:", error.message);
  } else {
    console.error("Unexpected error:", error);
  }
}

By extending the Error class, we're able to create a more meaningful ValidationError. This approach gives clarity about the nature of the problem, making debugging easier and your code cleaner.

4. Enriching Custom Errors with More Information

Why stop at just a custom message? Let’s enrich our custom error with additional properties like errorCode or statusCode.

class HttpError extends Error {
  constructor(statusCode, message) {
    super(message);
    this.name = "HttpError";
    this.statusCode = statusCode;
  }
}

try {
  const response = { status: 404 };
  if (response.status === 404) {
    throw new HttpError(404, "Resource not found");
  }
} catch (error) {
  if (error instanceof HttpError) {
    console.error(`Error ${error.statusCode}: ${error.message}`);
  } else {
    console.error("Unexpected error:", error);
  }
}

This way, you can capture more context about the error, making it easier to act upon or log effectively.

5. Building a Global Error Handling Strategy

As your application scales, you’ll want a centralized way to handle errors. One approach is to create an error-handling utility that handles different error types.

function handleError(error) {
  if (error instanceof ValidationError) {
    console.error("Validation failed:", error.message);
  } else if (error instanceof HttpError) {
    console.error(`HTTP error (${error.statusCode}):`, error.message);
  } else {
    console.error("An unexpected error occurred:", error);
  }
}

try {
  throw new HttpError(500, "Internal Server Error");
} catch (error) {
  handleError(error);
}

This centralized error handling helps keep your code DRY (Don't Repeat Yourself) and ensures consistent error processing across your application.

6. Leveraging `finally` for Cleanup

Often, you might need to perform cleanup tasks like closing a database connection or clearing timeouts. That’s where finally comes in handy:

try {
  // Attempt to execute code
} catch (error) {
  // Handle errors
} finally {
  console.log("This will always execute, whether an error occurred or not.");
}

Using finally ensures that this block executes regardless of whether an error was thrown or not, making it ideal for cleanup operations.

7. Integrating with Logging Services

For production applications, it’s essential to log errors. Services like Sentry, LogRocket, or Datadog can capture errors with full stack traces, making troubleshooting much easier.

Example:

import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

try {
  // Your code that might throw an error
} catch (error) {
  Sentry.captureException(error);
  handleError(error);
}

This integration provides better visibility into issues and helps you monitor the health of your application in real-time.

Final Thoughts

By moving beyond the basics of try...catch and incorporating custom errors, you create more maintainable, readable, and robust JavaScript code. Implementing these practices will not only make debugging a breeze but also improve the overall reliability of your application.

What’s Next?

Experiment with custom errors in your current project.
Implement a centralized error handler.
Integrate error logging services in your app.

Let me know how you handle errors in your projects, or if you have any cool tips and tricks to share!

Enjoyed this post? Follow me for more JavaScript tips and tricks!

Spread and Rest Operators in JavaScript (...)

Zakir — Fri, 13 Sep 2024 09:50:51 +0000

Snack story:
Let’s say you have a basket of snacks:

const snacks = ['apple', 'banana', 'chocolate'];

Now, you want to share these snacks with your friends. But instead of giving them the whole basket, you take out each snack and give it to them one by one:

console.log(...snacks);  // Output: apple banana chocolate

The ... (spread) operator is like taking the snacks out of the basket and spreading them on the table. Your friends can now pick them up individually!

On the other hand, if your friends bring even more snacks, you can gather them all into one big basket using the ... (rest) operator:

function collectSnacks(...moreSnacks) {
  console.log(moreSnacks);
}

collectSnacks('cookie', 'chips', 'juice');  // Output: ['cookie', 'chips', 'juice']

Here, the ... operator collects all the snacks into a new basket. This is how the rest operator works!

If you're new to JavaScript, you might have come across two special syntax elements: the spread and rest operators. They both look the same—three dots (...)—but they are used in different ways. Let’s break them down with simple examples!

1. What is the Spread Operator?
The spread operator (...) is used to expand an array or an object into individual elements. It’s like unpacking an array or object into its components.

Example: Expanding an Array
Let’s say you have an array of numbers, and you want to pass them individually into a function.

const numbers = [1, 2, 3];
console.log(...numbers);  // Output: 1 2 3

You can use the spread operator to spread the array elements out!

Example: Combining Arrays
If you have two arrays and want to merge them, the spread operator makes it easy:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = [...array1, ...array2];
console.log(mergedArray);  // Output: [1, 2, 3, 4, 5, 6]

It’s like laying out all the elements from array1 and array2 into one new array.

Example: Copying an Object
You can also use the spread operator with objects:

const user = { name: "Ahmed", age: 25 };
const updatedUser = { ...user, location: "Bengaluru" };

console.log(updatedUser);
// Output: { name: "Ahmed", age: 25, location: "Bengaluru" }

Here, we copied the properties from the user object and added a new property location.

What is the Rest Operator? The rest operator is the opposite of the spread operator. Instead of expanding an array or object, it collects multiple elements into an array or object.

Example: Function with Rest Parameters
Imagine you’re writing a function that takes any number of arguments:

function addNumbers(...nums) {
  return nums.reduce((sum, current) => sum + current, 0);
}

console.log(addNumbers(1, 2, 3, 4));  // Output: 10

In this case, the rest operator ...nums collects all the arguments into an array, making it easier to work with multiple values.

Example: Destructuring with Rest
You can also use the rest operator when destructuring arrays:

const [first, ...rest] = [1, 2, 3, 4];
console.log(first);  // Output: 1
console.log(rest);   // Output: [2, 3, 4]

Here, first gets the first element of the array, and rest collects the remaining elements into a new array.

Conclusion
The spread and rest operators are powerful and versatile tools in JavaScript. To recap:

Spread (...) expands an array or object into individual elements.
Rest (...) collects multiple elements into an array or object.

Hope you understood these 2 concepts spread and rest, it will make your JavaScript code more concise and easier to read!

Happy coding :)