Establishing a Browser Compatibility Strategy for JavaScript

{
  "title": "Establishing a Browser Compatibility Strategy for JavaScript",
  "description": "Develop a strategy for ensuring browser compatibility in JavaScript code to avoid functionality issues.",
  "category": "JavaScript Cursor Rules",
  "rules": [
    {
      "id": "js-feature-detection",
      "description": "Use feature detection to check for browser support of JavaScript features instead of relying on browser detection.",
      "recommendation": "Implement feature detection to ensure code adapts to the browser's capabilities.",
      "example": {
        "bad": "if (navigator.userAgent.indexOf('MSIE') !== -1) { /* IE-specific code */ }",
        "good": "if ('fetch' in window) { /* Use fetch API */ } else { /* Fallback code */ }"
      }
    },
    {
      "id": "js-polyfills",
      "description": "Include polyfills to provide modern functionality in browsers that lack support for certain JavaScript features.",
      "recommendation": "Use polyfills to ensure consistent behavior across all browsers.",
      "example": {
        "bad": "if (!Array.prototype.includes) { /* Custom implementation */ }",
        "good": "Include a polyfill library like core-js to add support for missing features."
      }
    },
    {
      "id": "js-avoid-arrow-functions",
      "description": "Avoid using arrow functions in code that needs to support older browsers like Internet Explorer.",
      "recommendation": "Use traditional function expressions to maintain compatibility with older browsers.",
      "example": {
        "bad": "const add = (a, b) => a + b;",
        "good": "function add(a, b) { return a + b; }"
      }
    },
    {
      "id": "js-avoid-template-literals",
      "description": "Avoid using template literals in code that needs to support older browsers like Internet Explorer.",
      "recommendation": "Use string concatenation instead of template literals for compatibility.",
      "example": {
        "bad": "const message = `Hello, ${name}!`;",
        "good": "const message = 'Hello, ' + name + '!';"
      }
    },
    {
      "id": "js-use-var",
      "description": "Use 'var' instead of 'let' and 'const' for variable declarations to ensure compatibility with older browsers.",
      "recommendation": "Declare variables using 'var' to support browsers that do not recognize 'let' and 'const'.",
      "example": {
        "bad": "let count = 0;",
        "good": "var count = 0;"
      }
    },
    {
      "id": "js-cross-browser-testing",
      "description": "Regularly test JavaScript code across multiple browsers to identify and fix compatibility issues.",
      "recommendation": "Use tools like BrowserStack or Sauce Labs to perform cross-browser testing.",
      "example": {
        "bad": "Only testing in a single browser.",
        "good": "Testing in multiple browsers including Chrome, Firefox, Safari, and Edge."
      }
    },
    {
      "id": "js-validate-code",
      "description": "Validate JavaScript code to ensure it adheres to web standards and is free of syntax errors.",
      "recommendation": "Use linters like ESLint to validate code and maintain consistency.",
      "example": {
        "bad": "Unvalidated code with potential errors.",
        "good": "Code validated using ESLint with no errors."
      }
    },
    {
      "id": "js-avoid-browser-specific-extensions",
      "description": "Avoid using browser-specific JavaScript extensions to ensure code runs consistently across all browsers.",
      "recommendation": "Stick to standardized JavaScript features and APIs.",
      "example": {
        "bad": "Using non-standard features like 'document.all'.",
        "good": "Using standard features like 'document.querySelector'."
      }
    },
    {
      "id": "js-keep-dependencies-updated",
      "description": "Regularly update JavaScript libraries and frameworks to their latest versions to benefit from improved browser support.",
      "recommendation": "Monitor and update dependencies to maintain compatibility and security.",
      "example": {
        "bad": "Using outdated versions of libraries.",
        "good": "Using the latest stable versions of libraries."
      }
    },
    {
      "id": "js-use-modernizr",
      "description": "Use Modernizr to detect HTML5 and CSS3 features in different browsers and provide fallbacks as necessary.",
      "recommendation": "Implement Modernizr to handle feature detection and ensure compatibility.",
      "example": {
        "bad": "Manually checking for feature support.",
        "good": "Using Modernizr to detect features and load polyfills accordingly."
      }
    }
  ]
}