Automating a repetitive folder / file structure using a vscode extension

Introduction

We have a shared component library, which houses our reusable generic components as well as reusable business components. Creating reusable components to be used across multiple products is one major part of our day to day workflow. We have…


Easy to miss details in state management when consuming apis in React functional components, and some patterns to solve the issues encountered

We have a complex react codebase, and we end up using a lot of different react patterns due to the underlying complexity of the product and the data…


Optional chaining is easy to misuse and can potentially confuse future readers of your code in certain scenarios.

The optional chaining operator is a fairly recent addition to the javascript syntax. This operator makes it easier for devs to express chained nullable references in a much concise manner. …


strongly typed render props in vscode intellisense without typescript

Setup

We have a react codebase where we have many React components with the render props pattern. In this codebase we haven’t enabled typescript (yet), and we generally use prop-types for dynamic type checking. We use vscode for development and take advantage of its intellisense / autocompletion in our dev workflow.

About vscode intellisense


You have a frontend application which gets deployed to production, for millions of people to use. The source code is private, you have your development workflow all sorted out, the build and release process is working fine without any glitches, but one day you get a vulnerability report from a…


The other day I was trying to understand potential security issues with exposing secrets or tokens in the url, and how OAuth implementations protect against that. Turns out, there are a few legitimate concerns, and a few patterns in OAuth that specify how to send tokens securely.

When the browser…


<button
...
onClick={() => this.props.handleClick()}
/>

Usually when I see code like this in a PR, I suggest the dev to change it to:

<button
...
onClick={this.props.handleClick}
/>

because of unnecessary anonymous function being created in every render, which although isn’t as big a deal, but why not fix it…


Most charts usually require some kind of reference line to compare the current plotted data against. For example, a budget chart can have a reference line for 70% of the budget, to display when the expenses went over the prescribed limit and another reference line for 100% of the budget…


As we have already seen here, Recharts allows you to render any svg element as a child element of a chart container and only accepts a svg element when customizing Labels or ticks and other customizable elements (with the exception of Tooltip, as Tooltip is rendered outside the svg chart…


The top level charts in Recharts act as a container for other elements which can be rendered inside it. Some examples are LineChart, BarChart. These charts act as top level containers for other elements like Line, Bar, Tooltip, ReferenceLine, ReferenceDot, XAxis, etc.
Unlike many other charting libraries which allow all…

Gaurav Gupta

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store