Tools - rs-hash/Senior GitHub Wiki

1. Performance monitoring tools

• Chrome DevTools

• Performance Insights, Performance - Network throttling, CPU throttling

• React Profiler - built-in tool for React developers. It helps you analyze the component rendering times, identify re-renders, and pinpoint performance issues. Flamegraph - why did this render, rendered at time, Ranked, Timeline

• Lighthouse -open-source tool for auditing and improving web page quality. It evaluates your application's performance, accessibility, best practices, Progressive Web APP

• CrUX Dashboard - Real User Data

• Performance Budgeting - Establishing a performance budget is an effective way to track and limit the size and number of assets (e.g., JavaScript, CSS, images) your application loads. Tools like Webpack Bundle Analyzer and Source Map Explorer can help you analyze bundle sizes and enforce budget limits.

• Third-Party Performance Tools - Pingdom, GTmetrix, and WebPageTest allow you to analyze your web application's performance from external perspectives. They provide insights into loading times, asset sizes, and server response times.

• Webpack Analyzers - Webpack Bundle Analyzer and source-map-explorer can help you visualize and analyze the size and dependencies of your JavaScript bundles.

const webpack = require('webpack');

module.exports = {
  // Other Webpack configuration settings

  performance: {
    hints: process.env.NODE_ENV === 'production' ? 'warning' : false,
    maxAssetSize: 250000, // 250 KB (in bytes)
    maxEntrypointSize: 250000, // 250 KB (in bytes)

  },

  optimization: {
    usedExports: true, // Enable the usedExports optimization
  },
  plugins: [
    // Other plugins
    new BundleAnalyzerPlugin(), // Optional: Generates a bundle report for analysis
  ],
};

2. Security auditing tools

• ESLint: A popular JavaScript linter that can be extended with security-related rules.
• TSLint: Linter for TypeScript code that includes security-focused rules.
• eslint-plugin-security && eslint-plugin-xss -no-eval, no-inner-declarations, no-new-func
• npm audit A built-in tool for auditing Node.js packages and identifying known vulnerabilities.
• Snyk A tool to identify and fix security vulnerabilities in open-source dependencies.
• OWASP ZAP: An open-source penetration testing tool for finding vulnerabilities in web applications.
• Fortify - Static code analysis tool which lists down all vulnerabilties and possible fix
• JAF - JET Audit framework
• Blackduck
• SonarQube
• Burp Suite: A security testing tool for scanning web applications for vulnerabilities.
• Netsparker: A web application security scanner that can identify security flaws.

3. MONITORING, ERROR, LOG

• Splunk - Application, security logs - SPLUNK
• Google Analytics - digital marketing,
• Adobe Analytics - customer journey analysis
• Kibana - data visualization tool
• Datadog
• Google Analytics, Mixpanel, Segment: Tools for tracking user behavior, analyzing traffic, and gathering insights for optimization.
• Error tracking tools: Tools like Sentry, Rollbar, or Bugsnag for monitoring and tracking errors in production.

4. ACCESSIBILITY

• [react-axe] is a library that audits a React application and logs any accessibility issues to the Chrome DevTools console.
• It uses the open-source axe testing library to flag any issues and their severity.
• eslint-plugin-jsx-a11y is an ESLint plugin that identifies and enforces a number of accessibility rules directly in your JSX.
• Lighthouse: A tool for auditing web page accessibility, performance, SEO, and best practices.
• Screen readers: Testing with screen readers like NVDA, VoiceOver, JAWS to ensure accessibility for users with disabilities.
• Semantic HTML, ARIA: Using semantic HTML elements and ARIA attributes for better accessibility and screen reader compatibility.