DEV Community: Vivek Pandey

Should you follow TDD?

Vivek Pandey — Tue, 18 May 2021 00:00:00 +0000

If you haven’t heard of TDD, it means Test Driven Development. What do I mean by that? Let’s talk about it today.

Let’s make sense

Test-driven development (aka TDD) is a three-step process. It’s often referred to as the “red, green, refactor cycle”

Let me explain the process:

Red : It involves writing a function to test a feature which you’re going to add in the project/app. It’ll fail onbviously and you get a red error message.
Green : Next up, we add the functionality/feature to the app in-order to pass the test and you get a green success message.
Refactor : Now we need to look at the code and refactor it to ensure it’s well-written, and easy to read/understand.

You repeat the same process over and over again until you have added all the required functionality.

Bonus: Using this cycle saves you if you break something while implementing other functionalities.

When does it make sense?

Utility Functions : If I’ve a function which has a certain set of inputs or ouputs, and of a certain complexity. I prefer setting up a test for it.
Well defined UI : If I’m trying to achieve certain UI goals in my app, I prefer setting up a test for it.
Fixing a bug : This also helps me in replicating the issue so that I can understand the problem better.

But when it doesn’t?

When you’re learning about new features and implementation (aka exploratory coding), I wouldn’t follow this cycle.
It is waste of your precious time if you’re testing the implementation details.

My conclusion

Go follow TDD if you believe you’ll be working on the project in the long run. Because I believe Time is an important resource, and you should utilize it to the fullest. Good luck!

Originally posted on: Vivek's Blog

What’s better to wrap a SVG - Object, or Img?

Vivek Pandey — Sat, 15 May 2021 00:00:00 +0000

Recently I was faced with the situation where I had to use SVG icons in my web app. What did I do next? Wrapped the SVG in <Img> tag and went with it. It worked obviously, but it had its own shortcomings. This is what I’m going to discuss today.

Let’s get started with discussing the cons of wrapping a svg in a <Img> tag:

Limited CSS based styling.
In-line styling is required for some of them to work.
External Stylesheets have no effect on them except for few basic modifications.

What should I use then?

Let’s take a look at the syntax for both of of them:

Image Tag <img src="./sample.svg" alt="Sample SVG" />
Object Tag <object data="sample.svg" type="image/svg+xml"> <img src="fallback.jpg" /> </object>

If you just need the SVG use the img tag, otherwise for an interactive SVG use object tag.

Why I used `img` inside the `object` tag?

It’s called a fallback image incase there’s an issue loading the SVG. The fallback png or jpg is used to replace it. Sounds amazing right. That’s one of the cool benefit of using a object tag.

My Conclusion

If I were to use a SVG in a everyday scenario, I would use object tag over other available tags like img, embed, or iframe.

Originally posted on: Vivek's Blog

What to use Let or Const?

Vivek Pandey — Wed, 12 May 2021 00:00:00 +0000

You must have a seen a controversial, sparking conversations on Reddit and Twitter recently. People were debating over usage of Let and Const.

It seems that netizens believe that one should use const wherever possible, only falling back to let where necessary, as can be enforced with the prefer-const ESLint rule.

Let vs Const vs Var: We generally want to use let. If we’re not using the same, we use const. (I’ve have seen codebases which force you to use const when there is only one assignment, same goes for some of the devs out there.)

Why prefer `const`?

Performance Benefits : There are some claims out there which say using const makes code faster because it knows there won’t be any re-assignment.

One Way to Do It : Sometimes it’s a bias in our head. A rule like “always use const where it works” stop us from thinking about it and can be enforced by a linter nowadays.

Reassignments May Cause Bugs : In the long-run, there can be instances where we may forget about reassignment of the variables. Therefore, const gives you confidence you’ll always “see” the same value and there will be no bug.

Learning About Mutation : When I got started with JavaScript, I got consfused with the const & immutability. It’s important to learn the difference between variable mutation and assignment anyway, and preferring const forces you to confront this distinction early on.

Why Not prefer `const`?

Confusion with Immutability : In every conversation over const, you’ll find someone who confuses with immutability. This happens because assignment and mutation use the same '=' operator.

Pressure to Avoid Redeclaring : A const based codebase creates a pressure to not use let for conditionally assigned variables. For example, you might write const a = condition ? b : c instead of an if condition, even if both b and c branches are convoluted and giving them explicit names is awkward.

Loss of Intent : If we use const everywhere, we lose the ability to clarify when something is important to not be reassigned.

What is my Conclusion?

Well I don’t have a opinion on this.

I would use whatever I need as per my situation. If you care, use a linter that automates checking and fixing this issue so that changing let to const doesn’t become a delay in code review.

Finally, remember that linters exist to serve you. Learn from your own mistakes.

Originally posted on: Vivek's Blog

My go-to React Libraries in 2021

Vivek Pandey — Mon, 10 May 2021 00:00:00 +0000

I’ve been working on React for months now, since the I’ve used tons of react libraries. To my belief, I’ve seen quite new tools slowly replacing old libraires.

For Components

Component libraries help us develop better when we don’t have strong styling directives. Most of the time, they provide us with additional features and remove a lot of biolerplate code.

1. Ant Design

This react component provides some enterprise-level products. You don’t need to worry about “not being able to do the component” You’ll be able to get it done.

Another thing to note is that Ant Design is a design system. It is meant to be opinionated. Overall, it is a fun to use compared to Material UI. There’s still some things I don’t like about Ant Design. If you want to customize Ant Design theme you need to change variables during your build. To me it feels like a lot of work for little things like changing colors.

2. Material UI

If I were not to use Ant Design, Material-UI would be the second choice. It’s components are for faster and easier web development. You can even build your own design system, or start with Material Design.

For Icons

1. React Feather

React-feather is a collection of simply beautiful open source icons for React.js. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability.

React-feather is also a collection of SVG files so you can use them in any way (image, background image, object, inline, etc.) depending upon the need. Overall, I prefer it over others.

2. Material UI Icons

It is a complete React UI framework and it provides one of the best icons support in three following ways:

Standardized Material Design Icons exported as React Components (SVG).
With the SVG Icon component, a React wrapper for custom SVG icons.
With the Icon components, a React wrapper for custom font icons.

For state management

1. Redux

You already knew this was coming, right? So, yes - Redux is de-facto “the default” of its kind. But it starts to “show its age” and if not that, then to irritate some devs. Don’t get me wrong - it’s a great library, but its size, steep learning curve, and verbose action-reducer approach to state management can make some people want to switch.

2. Hookstate

It’s the underdog of the state-management libraries. It’s small, minimal, clean, extendable, and it has a lovely hook-based API. Not only can it be used for global state, but can also enhance local useState() with additional features, handle nested state without performance loss, and deal with async data with ease!

Conclusion

Those were all my favourites, what’s your? Let me know on Twitter. Thank you for taking the time to read my blog.

Originally posted on: Vivek's Blog

DEV Community: Vivek Pandey

Should you follow TDD?

Let’s make sense

When does it make sense?

But when it doesn’t?

My conclusion

What’s better to wrap a SVG - Object, or Img?

What should I use then?

Why I used img inside the object tag?

My Conclusion

What to use Let or Const?

Why prefer const?

Why Not prefer const?

What is my Conclusion?

My go-to React Libraries in 2021

For Components

1. Ant Design

2. Material UI

For Icons

1. React Feather

2. Material UI Icons

For state management

1. Redux

2. Hookstate

Conclusion

Why I used `img` inside the `object` tag?

Why prefer `const`?

Why Not prefer `const`?