Best Practices

Modern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns.

Security

HTTPS Everywhere

<img src="http://example.com/image.jpg">
<script src="http://cdn.example.com/script.js"></script>

<img src="https://example.com/image.jpg">
<script src="https://cdn.example.com/script.js"></script>

<!-- Protocol-relative (will use page's protocol) -->
<img src="//example.com/image.jpg">

HSTS Header:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

Content Security Policy (CSP)

Meta Tag (Basic)
HTTP Header (Recommended)
Using Nonces

<!-- Basic CSP via meta tag -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' https://trusted-cdn.com; 
               style-src 'self' 'unsafe-inline';
               img-src 'self' data: https:;
               connect-src 'self' https://api.example.com;">

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'nonce-abc123' https://trusted.com;
  style-src 'self' 'nonce-abc123';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'self';
  base-uri 'self';
  form-action 'self';

<script nonce="abc123">
  // This inline script is allowed
</script>

Security Headers

# Prevent clickjacking
X-Frame-Options: DENY

# Prevent MIME type sniffing
X-Content-Type-Options: nosniff

# Enable XSS filter (legacy browsers)
X-XSS-Protection: 1; mode=block

# Control referrer information
Referrer-Policy: strict-origin-when-cross-origin

# Permissions policy (formerly Feature-Policy)
Permissions-Policy: geolocation=(), microphone=(), camera=()

No Vulnerable Libraries

# Check for vulnerabilities
npm audit
yarn audit

# Auto-fix when possible
npm audit fix

# Check specific package
npm ls lodash

Keep dependencies updated:

// package.json
{
  "scripts": {
    "audit": "npm audit --audit-level=moderate",
    "update": "npm update && npm audit fix"
  }
}

Known vulnerable patterns to avoid:

Object.assign(target, userInput);
_.merge(target, userInput);

const safeData = JSON.parse(JSON.stringify(userInput));

Input Sanitization

element.innerHTML = userInput;
document.write(userInput);

element.textContent = userInput;

// If HTML needed, sanitize
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);

Secure Cookies

document.cookie = "session=abc123";

Set-Cookie: session=abc123; Secure; HttpOnly; SameSite=Strict; Path=/

Browser Compatibility

Doctype Declaration

<HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<!DOCTYPE html>
<html lang="en">

Character Encoding

<html>
<head>
  <title>Page</title>
  <meta charset="UTF-8">
</head>

<html>
<head>
  <meta charset="UTF-8">
  <title>Page</title>
</head>

Viewport Meta Tag

<head>
  <title>Page</title>
</head>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page</title>
</head>

Feature Detection

if (navigator.userAgent.includes('Chrome')) {
  // Chrome-specific code
}

if ('IntersectionObserver' in window) {
  // Use IntersectionObserver
} else {
  // Fallback
}

@supports (display: grid) {
  .container {
    display: grid;
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
  }
}

Polyfills (When Needed)

<!-- Load polyfills conditionally -->
<script>
  if (!('fetch' in window)) {
    document.write('<script src="/polyfills/fetch.js"><\/script>');
  }
</script>

<!-- Or use polyfill.io -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=fetch,IntersectionObserver"></script>

Deprecated APIs

Avoid These

document.write
Synchronous XHR
Application Cache

// ❌ document.write (blocks parsing)
document.write('<script src="..."></script>');

// ✅ Dynamic script loading
const script = document.createElement('script');
script.src = '...';
document.head.appendChild(script);

// ❌ Synchronous XHR (blocks main thread)
const xhr = new XMLHttpRequest();
xhr.open('GET', url, false); // false = synchronous

// ✅ Async fetch
const response = await fetch(url);

<!-- ❌ Application Cache (deprecated) -->
<html manifest="cache.manifest">

// ✅ Service Workers
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Event Listener Passive

element.addEventListener('touchstart', handler);
element.addEventListener('wheel', handler);

element.addEventListener('touchstart', handler, { passive: true });
element.addEventListener('wheel', handler, { passive: true });

// If you need preventDefault, be explicit
element.addEventListener('touchstart', handler, { passive: false });

Console & Errors

No Console Errors

console.log('Debug info'); // Remove in production
throw new Error('Unhandled'); // Catch all errors

try {
  riskyOperation();
} catch (error) {
  // Log to error tracking service
  errorTracker.captureException(error);
  // Show user-friendly message
  showErrorMessage('Something went wrong. Please try again.');
}

Error Boundaries (React)

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  componentDidCatch(error, info) {
    errorTracker.captureException(error, { extra: info });
  }
  
  render() {
    if (this.state.hasError) {
      return <FallbackUI />;
    }
    return this.props.children;
  }
}

// Usage
<ErrorBoundary>
  <App />
</ErrorBoundary>

Global Error Handler

// Catch unhandled errors
window.addEventListener('error', (event) => {
  errorTracker.captureException(event.error);
});

// Catch unhandled promise rejections
window.addEventListener('unhandledrejection', (event) => {
  errorTracker.captureException(event.reason);
});

Source Maps

Production Configuration

// webpack.config.js
module.exports = {
  devtool: 'source-map', // Exposes source code
};

module.exports = {
  devtool: 'hidden-source-map',
};

// Or no source maps in production
module.exports = {
  devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
};

Performance Best Practices

Avoid Blocking Patterns

<script src="heavy-library.js"></script>

<script defer src="heavy-library.js"></script>

@import url('other-styles.css');

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="other-styles.css">

Efficient Event Handlers

items.forEach(item => {
  item.addEventListener('click', handleClick);
});

container.addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e);
  }
});

Memory Management

const handler = () => { /* ... */ };
window.addEventListener('resize', handler);

const handler = () => { /* ... */ };
window.addEventListener('resize', handler);

// Later, when component unmounts:
window.removeEventListener('resize', handler);

// Or using AbortController
const controller = new AbortController();
window.addEventListener('resize', handler, { signal: controller.signal });

// Cleanup:
controller.abort();

Code Quality

Valid HTML

<div id="header">
<div id="header"> <!-- Duplicate ID -->

<ul>
  <div>Item</div> <!-- Invalid child -->
</ul>

<a href="/"><button>Click</button></a> <!-- Invalid nesting -->

<header id="site-header">
</header>

<ul>
  <li>Item</li>
</ul>

<a href="/" class="button">Click</a>

Semantic HTML

<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">Headline</div>
  </div>
</div>

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>Headline</h1>
  </article>
</main>

Image Aspect Ratios

<img src="photo.jpg" width="300" height="100">
<!-- If actual ratio is 4:3, this squishes the image -->

<img src="photo.jpg" width="300" height="225">
<!-- Actual 4:3 dimensions -->

<!-- Or CSS object-fit for flexibility -->
<img src="photo.jpg" style="width: 300px; height: 200px; object-fit: cover;">

Permissions & Privacy

Request Permissions Properly

navigator.geolocation.getCurrentPosition(success, error);

findNearbyButton.addEventListener('click', async () => {
  // Explain why you need it
  if (await showPermissionExplanation()) {
    navigator.geolocation.getCurrentPosition(success, error);
  }
});

Permissions Policy

<!-- Restrict powerful features -->
<meta http-equiv="Permissions-Policy" 
      content="geolocation=(), camera=(), microphone=()">

<!-- Or allow for specific origins -->
<meta http-equiv="Permissions-Policy" 
      content="geolocation=(self 'https://maps.example.com')">

Audit Checklist

Security (Critical)

Compatibility

Code Quality

UX

No intrusive interstitials
Permission requests in context
Clear error messages
Appropriate image aspect ratios

Tools

| Tool | Purpose | |------|---------|| | npm audit | Dependency vulnerabilities | | SecurityHeaders.com | Header analysis | | W3C Validator | HTML validation | | Lighthouse | Best practices audit | | Observatory | Security scan |

External Resources

Web Quality Audit

For comprehensive best practices audit as part of overall quality

​Best Practices

​Security

​HTTPS Everywhere

​Content Security Policy (CSP)

​Security Headers

​No Vulnerable Libraries

​Input Sanitization

​Secure Cookies

​Browser Compatibility

​Doctype Declaration

​Character Encoding

​Viewport Meta Tag

​Feature Detection

​Polyfills (When Needed)

​Deprecated APIs

​Avoid These

​Event Listener Passive

​Console & Errors

​No Console Errors

​Error Boundaries (React)

​Global Error Handler

​Source Maps

​Production Configuration

​Performance Best Practices

​Avoid Blocking Patterns

​Efficient Event Handlers

​Memory Management

​Code Quality

​Valid HTML

​Semantic HTML

​Image Aspect Ratios

​Permissions & Privacy

​Request Permissions Properly

​Permissions Policy

​Audit Checklist

​Security (Critical)

​Compatibility

​Code Quality

​UX

​Tools

​External Resources

Web Quality Audit

Best Practices

Security

HTTPS Everywhere

Content Security Policy (CSP)

Security Headers

No Vulnerable Libraries

Input Sanitization

Secure Cookies

Browser Compatibility

Doctype Declaration

Character Encoding

Viewport Meta Tag

Feature Detection

Polyfills (When Needed)

Deprecated APIs

Avoid These

Event Listener Passive

Console & Errors

No Console Errors

Error Boundaries (React)

Global Error Handler

Source Maps

Production Configuration

Performance Best Practices

Avoid Blocking Patterns

Efficient Event Handlers

Memory Management

Code Quality

Valid HTML

Semantic HTML

Image Aspect Ratios

Permissions & Privacy

Request Permissions Properly

Permissions Policy

Audit Checklist

Security (Critical)

Compatibility

Code Quality

UX

Tools

External Resources