DEV Community: Santhanakrishnan

Check this

Santhanakrishnan — Tue, 08 Sep 2026 05:14:32 +0000

Sep 8

The 5-Minute Daily Ritual That Saved My Engineering Focus

6 min read

The 5-Minute Daily Ritual That Saved My Engineering Focus

Santhanakrishnan — Sun, 06 Sep 2026 00:00:00 +0000

BLUF: Most software engineers start their morning in reactive mode: scrambling to remember what they finished yesterday for the 9:30 AM standup, staring at 15 scattered Jira tickets, and fighting Slack notifications all day. After building and dogfooding my own offline daily companion (DailyScroll) in production for 30 consecutive workdays, I discovered that productivity is not about managing more tasks. It is about establishing a five-minute daily ritual. In this article, I break down how restructuring my daily workflow around three operational time blocks, automated standup generation, and single-task focus sprints completely transformed my workday.

If you are a developer juggling sprint tickets, morning standups, and pull request reviews every single day, then this article is for you.

Operational Cadence · Daily Workflow LoopZero Context-Switching

01 · 9:15 AM
5-Min Ritual

Triage sprint tasks into 3 buckets; isolate top focus.

→

02 · Morning
Deep Flow Sprints

1-click standup sync, then 25-min timers on complex code.

→

03 · Afternoon
Collaborative Ops

PR code reviews, meetings, and unblocking teammates.

→

04 · 5:30 PM
Shutdown Ritual

1-click defer stragglers to Tomorrow; close laptop clean.

1. The 30-Day Dogfooding Experiment

A few months ago, I wrote about Why Developers Need a Daily Companion. The idea was simple: build a tiny, zero-latency local tool using localStorage to escape the bloat of project management software.

I committed to dogfooding it every single working day.

For the first two weeks, it felt liberating. No logins, no loading spinners, no heavy cloud sync. But as real sprint deadlines hit, cracks began to show. A flat list of 12 unorganized tasks quickly turned into an intimidating wall of text.

Here is what actually happened during real workdays:

The 9:25 AM standup scramble : Five minutes before the daily scrum, I would open git logs, closed pull requests, and my browser tabs trying to piece together: “What did I actually ship yesterday?”
The midday context-switch trap : A critical bug would come in, or a teammate would request a review on a 500-line PR. My flat task list could not tell me what to tackle first versus what belonged in the afternoon.
The guilt of unfinished tasks : At 5:30 PM, seeing 4 uncompleted checkboxes made the day feel like a failure, even if I had spent 4 hours fixing a production outage.

In other words, a flat task list only records chaos—it does not resolve it. To survive real engineering work, the tool needed to adapt to how developers actually think and work.

2. Automating the Daily Standup

The first major bottleneck was the daily scrum. Every engineer knows the ritual: Yesterday, Today, Blockers. Yet we repeatedly waste 10 minutes every morning manually typing it into Slack or Teams channels.

I updated DailyScroll to make standup generation an instant, one-click operation. Because the app already tracks which tasks were checked off and which remain pending, generating the report is just data transformation.

For example, when an engineer flags a task with !blocked or !blocker in the quick palette, the parser extracts that blocker immediately:

// Parsing blockers and priorities with zero regex overhead
const isBlocked = /\!(blocked|blocker)\b/i.test(rawText);
const cleanText = rawText.replace(/\!(blocked|blocker)\b/gi, '').trim();

const task: Task = {
  id: crypto.randomUUID(),
  text: cleanText,
  blocked: isBlocked,
  completed: false,
  createdAt: Date.now()
};

When you click Export Standup at 9:28 AM, you get instant, clean Markdown or Slack-formatted text ready to paste:

*Yesterday:*
• Fixed race condition in token refresh handler
• Reviewed PR #342 for auth middleware

*Today:*
• Implement time-block grouping in task list

*Blockers:*
• Waiting on DevOps for staging Redis cluster credentials

It turns 10 minutes of mental effort into a 2-second click. It’s me from the experience 😉 — starting your morning standup with zero panic sets a calm tone for the rest of your workday.

3. The Power of Three Operational Time Blocks

One of the biggest mistakes developers make is treating an 8-hour workday as one continuous block of time.

In reality, your brain operates in distinct energy states:

Morning : Peak cognitive energy. Best for complex algorithms, architecture design, and deep work.
Afternoon : Collaborative energy. Best for meetings, PR reviews, and unblocking teammates.
Evening : Wrap-up energy. Best for documentation, testing edge cases, and clearing quick tickets.

Instead of staring at 15 items in a single column, we introduced Time Blocks: @morning, @afternoon, and @evening.

[☀️ MORNING] 3 tasks (Deep work & core features)
[🌤 AFTERNOON] 2 tasks (Code reviews & sprint meetings)
[🌙 EVENING] 2 tasks (PR merges & tomorrow prep)

You can type Fix memory leak @morning or drag tasks between blocks. When your tasks are grouped by time of day, you stop worrying about 2:00 PM meetings while writing code at 10:00 AM. You only focus on the current block in front of you.

4. Protecting Flow State with 25-Minute Sprints

Getting into flow state takes roughly 15 to 20 minutes of uninterrupted focus. But getting kicked out of flow takes one Slack notification.

To solve this, we integrated an active Focus Sprint directly onto individual tasks. Clicking the stopwatch icon (⏱) or selecting any task and pressing P launches a 25-minute countdown bar pinned to the top of your workspace.

// Synchronizing remaining sprint time directly to the tab title
useEffect(() => {
  if (focusSession && isTimerRunning) {
    const mins = Math.floor(timerSeconds / 60);
    const secs = String(timerSeconds % 60).padStart(2, '0');
    document.title = `(${mins}:${secs}) DailyScroll`;
  } else {
    document.title = "DailyScroll - Developer Command Center";
  }
}, [timerSeconds, focusSession, isTimerRunning]);

This tiny detail is surprisingly powerful: because developers spend most of their day in VS Code or a terminal, you don’t want to keep switching browser windows to check your timer. A quick glance at the browser tab title gives you your exact remaining sprint time.

When the timer hits zero, instead of loading heavy third-party audio files or making network requests, we synthesize a dual-frequency chime locally using the Web Audio API:

// Synthesizing an audio chime with zero external audio assets
const ctx = new (window.AudioContext || (window as any).webkitAudioContext)();
const osc = ctx.createOscillator();
const gain = ctx.createGain();

osc.type = 'sine';
osc.frequency.setValueAtTime(587.33, ctx.currentTime); // D5 tone
osc.frequency.setValueAtTime(880.00, ctx.currentTime + 0.12); // A5 tone
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.7);

osc.connect(gain);
gain.connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 0.7);

There are zero network requests, zero audio file lag, and it functions completely offline. Similar to our work on Evolving the JSON Formatter, keeping utility tools completely independent of network calls makes them feel instantaneous.

5. Keyboard Execution and Saying No to UI Bloat

During the design phase, we initially tested adding explicit up and down arrow buttons next to each task for reordering.

On paper, it sounded convenient. But once we tested it in real daily use, it became immediately obvious that it was a mistake. Having arrow buttons on every single row added unnecessary visual clutter and cramped the mobile layout.

We stripped the arrow buttons out and chose a cleaner engineering approach:

Desktop power users : Press Alt + ArrowUp or Alt + ArrowDown to move any selected task instantly with zero mouse clicks.
Mobile users : Configured touch-action: none; on the drag handle, allowing smooth touch dragging on phones without triggering viewport scrolling.

You can navigate with J and K, complete tasks with X, defer with D, and search with /. You can able to run your entire day without ever lifting your hands from the keyboard.

6. The 5:30 PM Shutdown Ritual

The final piece of the ritual happens right before you close your laptop.

Unfinished tasks are inevitable in software engineering. Scope expands, dependencies fail, or urgent production issues interrupt your planned work. If unfinished tasks stay on your screen overnight, you start the next morning with yesterday’s mental baggage.

With the new 8-day navigation strip, wrapping up takes 30 seconds:

Review any remaining pending tasks from today.
Click the quick defer button (→) or hit D on your keyboard to roll them directly into tomorrow’s plan (TMR).
If you accidentally defer or delete an item, hit Ctrl + Z to instantly undo it.
Close your browser tab.

When you open DailyScroll the next morning, today is fresh, yesterday’s finished tasks are ready for standup, and your momentum is already waiting for you.

Conclusion

Productivity tools often trap developers in endless configuration. We spend hours tweaking Notion databases, organizing Jira epics, or testing complex plugins, when all we really needed was a clear, distraction-free game plan for the next eight hours.

By turning our daily routine into a lightweight 5-minute ritual—plan in the morning, execute in focused sprints, and roll over at shutdown—you protect your energy and ship meaningful code.

Take five minutes to test the upgraded DailyScroll on your next workday. Try running your morning standup through it, test the focus timer, and let me know how it changes your daily velocity. Trust me, having a calm, organized workday makes all the difference!

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 ! "