| name | best-practices |
| description | Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities". |
| license | MIT |
| tags | ["gsd-2","skills","best-practices","security","compliance"] |
| metadata | {"author":"web-quality-skills","version":"1.0"} |
Deprecated APIs
Avoid these
document.write('<script src="..."></script>');
const script = document.createElement('script');
script.src = '...';
document.head.appendChild(script);
const xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
const response = await fetch(url);
<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 });
element.addEventListener('touchstart', handler, { passive: false });
Console & errors
No console errors
console.log('Debug info');
throw new Error('Unhandled');
try {
riskyOperation();
} catch (error) {
errorTracker.captureException(error);
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;
}
}
<ErrorBoundary>
<App />
</ErrorBoundary>
Global error handler
window.addEventListener('error', (event) => {
errorTracker.captureException(event.error);
});
window.addEventListener('unhandledrejection', (event) => {
errorTracker.captureException(event.reason);
});
Source maps
Production configuration
module.exports = {
devtool: 'source-map',
};
module.exports = {
devtool: 'hidden-source-map',
};
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);
window.removeEventListener('resize', handler);
const controller = new AbortController();
window.addEventListener('resize', handler, { signal: controller.signal });
controller.abort();
Code quality
Valid HTML
<div id="header">
<div id="header">
<ul>
<div>Item</div>
</ul>
<a href="/"><button>Click</button></a>
<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">
<img src="photo.jpg" width="300" height="225">
<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 () => {
if (await showPermissionExplanation()) {
navigator.geolocation.getCurrentPosition(success, error);
}
});
Permissions policy
<meta http-equiv="Permissions-Policy"
content="geolocation=(), camera=(), microphone=()">
<meta http-equiv="Permissions-Policy"
content="geolocation=(self 'https://maps.example.com')">
Audit checklist
Security (critical)
Compatibility
Code quality
UX
Tools
References
