An overview of how we use storybook to speed up development, improve the design QA process, document the design system and much more. Overview We use storybook for visual documentation of all different UI states of the component. Story driven development, in simple words, means that we use stories early (much…

Disclaimer: This is more like a transcript of a talk that I gave internally at my company, so the language might be abridged at some places. Glossary: If you are not a frontend developer, it might be helpful for you to have an understanding of these terms as these would be…

In this post, I would briefly discuss an edge case that I have recently encountered related to usage of callback refs in function components and some nuances of useCallback dependencies array, which led to infinite re-renders and hence breaking the component. TLDR; ref callback function is called every time its identity…

Context In our product, we allow users to login using 3rd party applications that we have integrated with, and for this we have a multi step async login process. the 3rd party redirects to our frontend with a token in the url, the FE extracts that token, makes an async api…

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

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…