Karan Kiri
Karan is working as SDE 2 at Fabric. Currently dabbling with Design System, Micro Frontend and Frontend Infrastructure
Interests:
How to Improve Your Web Application's Security Using Mozilla ObservatoryWatch video: How to Improve Your Web Application's Security Using Mozilla Observatory
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 SystemWatch video: Measuring Coverage of React Design System
React Summit US 2023
19 min
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
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 SystemWatch video: Measuring Coverage of React Design System
React Advanced 2023
11 min
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
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