DEV Community: Santhanakrishnan

Whiteboard Reality Check: Why AI Won't Save Your Next Interview

Santhanakrishnan — Sat, 04 Jul 2026 00:00:00 +0000

BLUF: AI coding tools are making us lazy. If you are a senior developer relying on agents to write your code every day, you might be setting yourself up for failure. I recently went for a senior-level MERN stack walk-in interview (5 to 10 years experience), and I lost my chance because I stumbled on a basic array sorting algorithm when asked to write it down on a piece of paper. Relying on AI coding tools creates a false sense of security that breaks down completely under pen-and-paper interview constraints.

Here is the outline of what we will cover:

The MERN Stack Interview Questions
The Pen and Paper Whiteboard Trap
Why AI Agents are Creating a False Sense of Competence

1. The MERN Stack Interview Questions 🛠️✨

Before we talk about the paper-and-pen hurdle, let’s see the technical questions they asked during the first round. Since this was for a senior role, the focus was heavily on state management architecture and request lifecycle details.

React lifecycle in functional components

They asked about how we handle lifecycle methods in functional components. In functional components, this is handled by the useEffect hook, which is nothing but a unified API for managing side effects.

Instead of writing separate lifecycle methods, we configure the dependency array:

Empty dependency array [] behaves like componentDidMount.
A dependency array with variables [data] behaves like componentDidUpdate.
Returning a cleanup function from the hook behaves like componentWillUnmount.

For senior roles, they expect you to mention cleanup handlers, which helps you to prevent memory leaks by aborting active fetch requests or clearing active subscriptions when a component unmounts.

Context API vs. Redux

This is a classic question, the main difference lies in how they propagate changes. Context API is a tool for dependency injection, which helps to avoid prop drilling. It is not a state management system.

When a value in a Context Provider changes, React triggers a re-render for all components that consume that context. This is fine for low-frequency updates like themes or language settings.

Redux uses a centralized store with a publish-subscribe model. By using Redux selectors, you can able to subscribe only to the specific slice of state your component needs. If other parts of the store change, your component will not re-render.

State management decision matrix

For a new project, how will you decide what to use? If your application has simple state requirements and low-frequency updates, Context API is more than enough.

But if you have high-frequency state updates, complex business logic, or a large team working on different features, Redux or Zustand is the right choice. It keeps the store decoupled from the UI components.

Node.js middleware lifecycle

In Express, middleware is nothing but a function that has access to the request object (req), the response object (res), and the next function in the application’s request-response cycle.

// Example of a basic logging middleware
app.use((req, res, next) => {
  console.log(`${req.method} request received at ${new Date().toISOString()}`);
  next(); // Pass control to the next middleware
});

Middleware acts as an interceptor. It executes code, makes changes to the request and response objects, ends the request-response cycle, or calls next() to pass control down the chain.

Authentication vs. Authorization

In simple terms, authentication is verifying who you are (e.g., validating a password or JWT token). Authorization is verifying what you are allowed to do (e.g., checking if the authenticated user has admin access to delete a resource).

2. The Pen and Paper Whiteboard Trap 📝❌

After answering the architectural questions, they handed me a pen and a piece of paper. They asked me to write a custom function to sort an array without using any built-in sorting method like Array.prototype.sort().

I thought I knew this very well. I started writing a standard bubble sort. But suddenly, my hand stopped. I realized I was doubting the inner loop index boundaries.

For example:

// sorting-algorithm.js
function bubbleSort(arr) {
  let len = arr.length;
  // Outer loop to run through the entire array
  for (let i = 0; i < len; i++) {
    // Inner loop stops before already sorted elements
    for (let j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        // Swap elements using a temporary variable
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

I had written 90% of the logic, but I could not run it. In a real editor, you write the loop, run the test, and see if it fails with an off-by-one error. The feedback loop is instant. On paper, under the eyes of two interviewers, you have to compile the code in your head.

Because I had not written code by hand for more than a year, I hesitated. That hesitation cost me the interview.

3. Why AI Agents are Creating a False Sense of Competence 🧠🤖

We are living in an era where AI agents and Copilot can write code in seconds. We use them for our daily project tasks, and we feel incredibly productive. But there is a hidden trade-off.

When you rely entirely on an agent to write your syntax, your brain stops doing the low-level retrieval work. You understand the code when you see it, but that is recognition, not recall. Recognition is easy; recall is hard.

When the editor, autocomplete, and AI are taken away, you are left with only your memory. If you have not practiced manual recall, your core coding muscles will rot.

Conclusion 🌟📦

Losing this chance was a major wakeup call. Even if you are using advanced coding agents to build your projects, you must maintain your manual skills.

Always keep practicing, and do not let tools make you forget the fundamentals. I am planning to share my personal interview study materials and notes in an upcoming post to help you prepare for frontend and MERN stack interviews.

What is your biggest challenge when writing code without an editor? Hit reply to the newsletter and let me know.

How to Become a Frontend Developer in 2026

Santhanakrishnan — Wed, 01 Jul 2026 00:00:00 +0000

Whether you are new to frontend development or simply beginning your career in this 2026 AI era, then this article is for you.

A lot has changed over the last few years. Today, AI assistants can write boilerplate code, generate complex Tailwind layouts, and spin up serverless routes in seconds. Because of this, many beginners ask me: Is frontend development dead? Should I still learn to code?

Trust me, the answer is a big No. The role of a frontend developer has simply evolved. We are no longer just “coders” who copy-paste layouts. In 2026, a great frontend developer is a UI Architect, a systems integrator, and a user experience orchestrator.

Let’s see what you need to master to become a successful frontend developer today.

1. The Core Invariant: Still HTML, CSS & JavaScript

Even though AI can write code for you, you still have to master the basics. Think of HTML, CSS, and JavaScript as the ocean, and AI tools or frameworks as ships that help you sail. But if you know the ocean, you can go wherever you want.

If you don’t understand how elements render or how scripts execute, you can’t debug what the AI generates. When the AI makes a mistake (and it will!), you must know what is happening under the hood to fix it.

For example, you need to understand event delegation, which is nothing but attaching a single click listener to a parent element instead of binding it to hundreds of list items:

// src/scripts/delegation.js
// By using event delegation, we attach one event listener to the parent container.
// This reduces memory consumption and prevents performance lags on slow devices.
const container = document.querySelector('.card-container');

container?.addEventListener('click', (event) => {
  const target = event.target;

  // Verify if the clicked target is a button inside our card
  if (target && target.tagName === 'BUTTON') {
    console.log('Action triggered:', target.textContent);
  }
});

Once you master these core concepts, you can able to review AI code easily and verify that it is clean, secure, and accessible.

2. AI as a Co-Pilot, Not the Pilot

In 2026, we don’t code alone. We pair program with AI agents. But the key is knowing how to direct them. Writing high-quality prompts and feeding the AI with structured context (like your design tokens or API schemas) is a new frontend skill.

Here are the essential tools you should learn to use:

AI Code Editors : Editors like Cursor or custom agent tools are standard now. They autocomplete entire blocks and help you debug errors in real-time.
Git & GitHub : Version control is even more critical when generating code rapidly. You need to keep commits small so you can easily revert AI mistakes.
Documentation Sites : Websites like MDN (Mozilla Developer Network) and CSS-Tricks are still your official source of truth to check if the generated code is correct.

3. The Shift to Static-First and Islands Architecture

For a long time, we built massive Single Page Applications (SPAs) that shipped megabytes of JavaScript to the client’s browser. That era is over.

Today, the industry is focused on performance. We build static-first applications and only add JavaScript where it is absolutely needed. This is done using Islands Architecture , which is nothing but rendering static HTML on the server and hydrating only the interactive widgets (like a shopping cart or a search bar).

Astro is currently the leading tool for this architecture. When you build with Astro, your default output has zero JavaScript. This is why websites load instantly now.

4. Accessibility & Performance are Your Real Superpowers

Because AI can generate visual layouts easily, the true value of a frontend developer lies in the details that AI cannot feel: Accessibility (a11y) and Performance.

Google and search crawlers will prioritize your site only if it meets these standards. You need to focus on:

Keyboard Navigation : Ensure every interactive element can be reached using the Tab key, and focus rings are always visible.
Screen Reader Compliance : Use proper semantic tags like <header>, <main>, <article>, and <time> instead of generic <div> blocks.
Core Web Vitals : Monitor your Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) so that elements don’t jump around when loading.

If you are good at these optimizations, you can able to create premium experiences that stand out from generic AI-generated sites.

5. Where to Learn & How to Practice

I recommend these free resources to learn and practice your skills:

freecodecamp.org — Excellent for learning the fundamentals step-by-step.
w3schools.com — Great for quick syntax references.
CodePen — Perfect for building and testing small visual CSS components from scratch.

Ahaa! that’s what am talking about… actually writing code is the best way to learn. Here are some project ideas you should practice building:

Build UI Components from Scratch : Try to build accordions, tabs, dropdowns, and carousels using raw CSS and vanilla JS before importing third-party libraries.
Build Clone Websites : Replicating complex web layouts helps you understand layout foundations (Flexbox, Grid) and spacing structures.
Build a Personal Portfolio : Create a fast, static website using Astro to showcase your projects and write about your learnings.

Conclusion

Frontend development is not going away — it is becoming more architectural. You don’t need to memorize every CSS property, but you must understand how layouts fit together, how components hydrate, and how users interact with your interfaces.

Keep practicing, learn to guide your AI assistants effectively, and focus on delivering accessible and performant UIs.

Happy coding!

Design is Simple !

Santhanakrishnan — Mon, 27 Jul 2020 15:30:01 +0000

Whenever Am working on a project or facing the UI issue in
project, I have only one thing in my mind that is "Design is
Simple".

If am facing the issue in UI firstly I don't panic and thought
it might be a simple one which I can fix in a minute and am
trying to do analysis of that cause from the root so it makes
my mind clear and lead my to go forward and I always try to
find a simple solution for that cause.

So make a thought that "Design is Simple !"
and one of my favorite Quote is -

" If you can't do great things, Do small thing in a great way ! "