How to become a midler: 5 habits that will boost your code

When you write code not just for the sake of the task, but with an eye to scale, readability, and teamwork, you are already approaching the middle level. In this article, we will analyze 5 key principles that distinguish the code of a beginner from a mature, project approach.

🛠 1. Project structure: break it down by meaning

Bad project — this is when everything is in one folder: components, utilities, styles, tests.

Middle approach - is a well-thought-out architecture:

• src/components — reusable components

• src/pages — pages

• src/utils — helper functions

• src/styles — global styles

• src/services — working with the API

💬 2. Documentation directly in the code

Good code explains itself, but that doesn't mean comments aren't needed. They are needed — but not obvious, and explanatory:

❌ // Increasing the counter
✅ // Update the counter to reflect the new user action in the UI

It is also worth describing:

• behavior of non-standard solutions

• input/output parameters of functions

• types, especially if you use JS without TS

📚 Midlers often do README.md at least on the base: how to run, how to assemble, where the configs are.

🧪 3. Add tests (even simple ones)

Writing code without tests is like riding a bike without brakes. You don't have to start with TDD, but here's what distinguishes the middle:

• unit tests for business logic

• testing of edge cases

• conscious approach to testability

// utils/calc.js
export function sum(a, b) {
  return a + b;
}

// utils/calc.test.js
import { sum } from './calc';
test('Adds two numbers', () => {
  expect(sum(2, 3)).toBe(5);
});

🧼 4. Clean code and uniform style

Middle cares not only about what works, but also about how it looks.

📎 Use:

• linter (ESLint, Flake8, Pylint)

• formatter (Prettier, Black)

• git pre-commit hooks

• naming conventions

💡 Stick to KISS and DRY. If you repeat a piece of code 3 times, then it's time to take it out.

🔁 5. Separation of business logic from UI

Middle understands where logic is and where representation is. A simple example:

// useTodoList.js
export const useTodoList = () => {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    fetchTodos().then(setTodos);
  }, []);
  return todos;
};

// TodoList.jsx
const TodoList = ({ todos }) => (
  <ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>
);

🚀 All this is not "rules", but the habits of a good developer

If you want to train such habits in practice, take a look at our app Code. Here you will find real projects, tasks with auto-check, modules in JavaScript, Python, TypeScript and even practice in architecture. All this — with step-by-step explanations and community support in Telegram.

Do you apply these principles in your projects? Or maybe you want a separate article on front-end architecture or folder structure?

Write in the comments — we'll figure it out together 💬