Karan Kiri

Karan Kiri

Karan is working as SDE 2 at Fabric. Currently dabbling with Design System, Micro Frontend and Frontend Infrastructure
How to Improve Your Web Application's Security Using Mozilla Observatory
React Day Berlin 2023React Day Berlin 2023
9 min
How to Improve Your Web Application's Security Using Mozilla Observatory
Watch video: How to Improve Your Web Application's Security Using Mozilla Observatory
In today's digital landscape, web application security is of paramount importance to protect sensitive user data and maintain user trust. The Mozilla Observatory is a powerful tool that can help developers assess the security posture of their web applications. In this talk we'll learn how to improve the security of web applications using the Mozilla Observatory. 
Measuring Coverage of React Design System
React Summit US 2023React Summit US 2023
19 min
Measuring Coverage of React Design System
Watch video: Measuring Coverage of React Design System
Design systems are becoming increasingly popular in modern front-end development. However, measuring the usage and coverage of these design systems is often challenging. In this lightning talk, I'll discuss about a tool that we're working on which uses react-scanner and Abstract Syntax Tree (AST) with custom scripts to generate component usage data for a React design system.

The talk will cover how we generate this data and how it is rendered in a dashboard to provide valuable insights on the coverage of the design system.

- Introduction to react-scanner
- Measuring Component Usage
- Identifying Native HTML elements and Styled Components
- Showing Tree structure of Page in terms of Components
- Highlighting Anti Patterns
- Benefits / Use Cases for this tool
Measuring Coverage of React Design System
React Advanced 2023React Advanced 2023
11 min
Measuring Coverage of React Design System
Watch video: Measuring Coverage of React Design System
Design systems are becoming increasingly popular in modern front-end development. However, measuring the usage and coverage of these design systems is often challenging. In this lightning talk, I'll discuss about a tool that we're working on which uses react-scanner and Abstract Syntax Tree (AST) with custom scripts to generate component usage data for a React design system. 
The talk will cover how we generate this data and how it is rendered in a dashboard to provide valuable insights on the coverage of the design system.
- Introduction to  react-scanner- Measuring Component Usage- Identifying Native HTML elements and Styled Components- Showing Tree structure of Page in terms of Components- Highlighting Anti Patterns- Benefits / Use Cases for this tool