Not following any norms ("Norms limit creativity")

Do not follow any standards ("Standards limit creativity")

Code standards? What's that? A bunch of boring rules that stifle your creativity and make your code look just like everyone else's. If you want your code to be full of "personality" and drive the next person crazy, throw standards out the window!

Name variables however you want

Variable names? Just wing it! a, b, c are so concise, or use pinyin abbreviations like yhm (username), mima (password), or even emojis! As long as you understand it, who cares if others can't?

let a = 10; // This "a" could be age, quantity, or anything—good luck guessing!
let yongHuMing = "admin"; // Suddenly using full pinyin? Surprise!
let 🔑 = "secret"; // Emojis make it more lively. Parser crashes? That's its problem!

If there are new team members, let them figure it out. If they get it right, they deserve a medal!

The longer the function, the better

Functions should be long! 100 lines? Too short! 1,000 lines is where it's at! Stuff all the logic into one function and make readers scroll through it like a novel, struggling to find the point.

function handleUserData() {
  // Fetch data
  let data = fetch("/api/data");
  // Process data
  if (data) {
    for (let i = 0; i < data.length; i++) {
      if (data[i].status === "active") {
        // Filter
        let filtered = data.filter(item => item.id > 100);
        // Sort
        filtered.sort((a, b) => a.name.localeCompare(b.name));
        // Render
        filtered.forEach(item => {
          document.getElementById("list").innerHTML += `<li>${item.name}</li>`;
        });
      }
    }
  }
  // 800 more lines of logic...
}

Perfect! One function to rule them all. Need to modify it? Good luck reading through everything!

No comments—let the code speak for itself

Comments? Those are for weaklings! Real programmers make their code "self-documenting." If others can't understand it, that's their problem.

function x(y) { return y * y + 2 * y - 5; } // What does this do? Figure it out yourself!

Or, to be even meaner:

// This function is important—don't touch it!
function magic() {
  // Don't change this
  let x = 1;
  // Seriously, don't change this
  let y = 2;
  // This part is super important
  return x + y;
}

Comments are there, but they’re useless. Annoying, right?

Mix coding styles for "surprises"

Indentation? Sometimes 2 spaces, sometimes 4, sometimes tabs—mix them all! Quotes? Randomly switch between single and double. Semicolons? Sometimes use them, sometimes don’t—let the code crash in strict mode!

if (condition){
  console.log("hello");
} else {
    console.log('world');
}
// Next block
const obj = {
  'key1': "value1",
  key2: 'value2'
};

Reading such code is like playing "spot the difference" every time!

Global variables everywhere

Why confine variables to scopes? Global variables are so convenient! Anyone can change them, and when things break, no one knows who did it.

let config = { debug: true };

function init() {
  config.debug = false; // Sneakily changed somewhere
}

function render() {
  if (config.debug) { // Might suddenly stop working
    console.log("Debug mode");
  }
}

Good luck debugging and figuring out which function messed with your global state!

Callback hell is art

Promises? Async/Await? Too modern! Let’s use callbacks, nested 10 layers deep, turning the code into a "pyramid"!

getUser(userId, function(user) {
  getPermissions(user.id, function(permissions) {
    getData(permissions, function(data) {
      filterData(data, function(filtered) {
        renderUI(filtered, function() {
          // 5 more layers...
        });
      });
    });
  });
});

You’ll need a ruler to read this code, or you’ll lose track of which layer belongs where!

Magic numbers and hardcoding

Write numbers directly, stuff strings in raw—never define constants! Let the next person guess what they mean.

if (status === 3) { // What's 3? "Approved"? "Rejected"? Who knows!
  doSomething();
}

const url = "http://example.com/api/v1/get_data"; // If the API changes? Global search-and-replace time!

When requirements change, you’ll have to check every single occurrence. How thrilling!

No unit tests

Testing? Waste of time! If the code runs, it’s fine. If there’s a bug, fix it later—users will help you find them!

function calculateDiscount(price, discount) {
  return price - discount; // What if discount > price? Who cares!
}

When prices go negative in production, it’s time for an emergency fix. How exciting!

Modify third-party libraries freely

Don’t like how a library works? Just edit the source in node_modules! Next time you run npm install, surprise!

// Directly modify lodash
// node_modules/lodash/add.js
function add(a, b) {
  return a - b; // Haha, now addition is subtraction!
}

Now your project is a "custom edition" that no one else can run!

No code reuse—copy-paste forever

Same code? Copy-paste it! Need to change it? Modify every single instance. Miss one? That’s a feature!

function validateEmail(email) {
  // Validation logic
}

// Another file
function checkUserEmail(email) {
  // Same logic, but slightly tweaked
}

When you fix a bug, you’ll never know how many copies are still lurking around!

Use cutting-edge syntax, ignore compatibility

IE? Ancient browsers? Who cares! Use the trendiest syntax and let users’ browsers crash!

const data = [1, 2, 3];
data.forEach(item => console.log(item?.value ?? "default")); // Optional chaining + nullish coalescing—IE goes boom!

Your code looks fancy but only runs on the latest Chrome. Mission accomplished!

Never handle errors

try-catch? Ugly! Let errors crash the app. Users see a blank screen? They should upgrade their computer!

function fetchData() {
  const data = JSON.parse(localStorage.getItem("data")); // What if it's not JSON? Whatever!
  return data;
}

Your code looks clean but could explode at any moment!

Mix UI frameworks with raw DOM

Use raw DOM in React, jQuery in Vue—turn your code into a "Frankenstein"!

// React component
function MyComponent() {
  useEffect(() => {
    document.getElementById("btn").addEventListener("click", () => {
      // Direct DOM manipulation
    });
  }, []);
  return <button id="btn">Click</button>;
}

Your code is neither React nor vanilla JS—it’s a whole new art form!

No version control—edit production directly

Git? Too complicated! Just FTP your changes. Need to roll back? Not happening!

# Edit files directly on the server
vim /var/www/html/index.html

Your code is always up to date, but no one knows what changed!

Never optimize performance

for loops processing 100,000 records? setInterval running 100 times a second? Let users’ fans spin like crazy!

setInterval(() => {
  const list = document.querySelectorAll(".item");
  list.forEach(item => {
    // Insane DOM manipulation
  });
}, 10); // Every 10 milliseconds!

Your site will be the ultimate "performance benchmark tool"!