Ignore browser compatibility ("If it runs on my computer, it's fine").

Ignoring browser compatibility ("It runs on my machine") is a classic anti-pattern of defensive programming. This attitude can cause code to crash on others' devices or suddenly fail at some point in the future. Here are some classic practices and how they perfectly undermine code maintainability.

2. Only Testing on the Latest Chrome

Chrome has a large market share, but users might be on older versions or other browsers. Directly ignoring compatibility testing, for example:

// Using the latest ES2023 features without Babel transpilation
const array = [1, 2, 3];
const result = array.groupBy(x => x % 2 === 0 ? 'even' : 'odd');
console.log(result); // Throws an error in older browsers

Or relying on Chrome-exclusive APIs:

// Using the Chrome-only EyeDropper API
const eyeDropper = new EyeDropper();
eyeDropper.open().then(result => {
  console.log(result.sRGBHex); // Other browsers will throw an error
});

2. Ignoring CSS Prefixes and Experimental Features

Modern CSS features often require browser prefixes before standardization, but writing unprefixed versions directly:

/* Omitting -webkit- prefixes, causing layout issues for Safari users */
.container {
  display: grid;
  gap: 20px;
  backdrop-filter: blur(10px); /* Some browsers require -webkit- */
}

Even worse, using unsupported properties:

/* Using Firefox-exclusive CSS functions */
.element {
  color: color-mix(in lch, red 50%, blue 50%); /* Non-Firefox browsers ignore this */
}

2. Assuming All Users Have Modern Hardware

Heavy use of performance-intensive features without considering low-end devices:

// Animation that lags terribly on low-end phones
function animate() {
  const elements = document.querySelectorAll('.particle');
  elements.forEach(el => {
    el.style.transform = `translate(${Math.random() * 500}px, ${Math.random() * 500}px)`;
  });
  requestAnimationFrame(animate); // Recursively calling like crazy
}
animate();

Or outright ignoring memory leaks:

// Never-cleaning-up timers
setInterval(() => {
  const data = new Array(1e6).fill('leak');
  console.log(data.length);
}, 1000);

2. Relying on Non-Standard DOM APIs

Using browser-specific private APIs:

// Using non-standard document.documentMode to detect IE
if (document.documentMode) {
  console.log('This will break in non-IE browsers');
}

// Or directly calling WebKit-prefixed methods
element.webkitRequestFullscreen(); // Non-WebKit browsers will throw an error

2. Ignoring Internationalization Issues

Hardcoding fonts, date formats, and text directions:

<!-- Forcing the use of Source Han Sans without cross-platform consideration -->
<style>
  body {
    font-family: "Source Han Sans", sans-serif; /* Non-Chinese systems may not have it */
  }
</style>

<!-- Hardcoding date formats -->
<script>
  const date = new Date();
  console.log(`${date.getMonth() + 1}/${date.getDate()}`); // Americans won't understand 31/12
</script>

2. Using Deprecated APIs

Deliberately using APIs marked as deprecated:

// Stubbornly using deprecated document.write
document.write('<script src="outdated.js"></script>');

// Or using removed showModalDialog
window.showModalDialog('http://example.com'); // Modern browsers have removed this

2. Not Handling Browser Differences

Turning a blind eye to known browser inconsistencies:

// Ignoring addEventListener's third parameter differences
element.addEventListener('click', handler, false); // Older IE requires attachEvent

// Or ignoring XMLHttpRequest and fetch compatibility
fetch('/api').then(res => res.json()); // IE doesn't support this at all

2. Extreme Case: UserAgent Sniffing

Writing logic that entirely depends on specific browser versions:

// Fragile UserAgent detection
const isIE = /MSIE|Trident/.test(navigator.userAgent);
if (isIE) {
  // This code will mistakenly execute in IE12 (if it exists)
  document.body.innerHTML = 'Please upgrade your browser';
} else {
  // Other browsers might be misclassified
  loadModernApp();
}

2. Ignoring ES Module Compatibility

Using import/export in all environments without fallbacks:

<!-- Not providing a nomodule fallback -->
<script type="module">
  import { heavyLibrary } from './modern-only.js';
  heavyLibrary.init(); // Older browsers will throw an error
</script>

2. Perfectly Ruining Mobile Experience

Developing for desktop while completely ignoring mobile:

/* Fixed-width layout + tiny click areas */
.desktop-only {
  width: 1200px;
  margin: 0 auto;
}

.button {
  width: 10px;
  height: 10px; /* Users need a needle to click */
}

Plus ignoring viewport settings:

<meta name="viewport" content="width=1200"> <!-- Forcing desktop width -->

2. Code That Will Definitely Break in the Future

Writing code that depends on current browser implementation details:

// Exploiting Chrome's V8 engine optimization quirks
function exploitV8() {
  const arr = [1, 2, 3];
  arr[999999] = 4; // Intentionally creating a sparse array
  console.time('v8');
  arr.forEach(x => x); // Relying on engine-specific traversal optimizations
  console.timeEnd('v8');
}

Or using experimental APIs:

// Using the experimental Cookie Store API
cookieStore.set('test', 'value').then(() => {
  // This API spec might change
  console.log('Cookie set!');
});