Automating a repetitive folder / file structure using a vscode extension

Photo by Pankaj Patel on Unsplash

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 implemented the component library as a independently versioned monorepo (using lerna). Since we work with components a lot, over the years we have discovered some standards / patterns that are required to be implemented every time we create a reusable component. Some of these include:

  • creating a README file for…


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

Photo by Anelale Nájera on Unsplash

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. Recently we noticed a subtle bug when using an api call in the parent and passing the state of the api call to children. …


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

screenshot of code snippet showing optional chaining usage

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. For example, instead of:

if(bookStore && bookStore.bookShelf && bookStore.bookShelf.book) {...} 

You can simply write

if(bookStore?.bookShelf?.book) {...}

This syntax is objectively much easier to write, and arguably easier to read and understand.

All these benefits aside, after using it for some time, I have come to realize that though it is easy to…


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

vscode uses typescript internally, and in most cases, it can automatically infer types from type-definitions, JSDoc comments or proptypes. For function components, vscode can offer code completion suggestions by default, and if you have proptypes for the function component, it can infer the type of the props as well.

Case…


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 researcher that your source code can be recreated because your .git folder is reachable through the production URLs, like https://myapp.com/.git/ . …


Photo by Markus Spiske on Unsplash

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 (or any other client) makes a request to a server, there are some intermediate servers which your request goes through, and they can see the URL, unless you use https. These can be any intermediate routers, CDNs, reverse proxies, etc. Some of these might be malicious and if they can…


Photo by Markus Winkler on Unsplash
<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 if you easily can?

Though I have been doing this for quite some time now, it was only recently that I realized that my understanding about both these snippets being functionally similar, is a bit flawed, though it works as expected in most of the cases. …


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, Or , a chart showing the monthly rainfall in cm can have a reference line for average rainfall in cm to show in which months the rainfall was more than average. …


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, so it can accept regular html), but there are a lot of things that are just way easier to render with html. svg allows this using the foreignObject svg element and since Recharts can render any svg elements, Recharts allows this as well. …


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. …

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