DEV Community: Sneha M K

How do you handle errors consistently across a Node.js API?

Sneha M K — Wed, 18 Feb 2026 07:51:27 +0000

Define a base AppError class with a status code and error code, then subclass it for specific errors (NotFoundError, ValidationError, UnauthorizedError). Register a global error-handling middleware in Express (or exception filter in NestJS) that catches everything, logs it, and returns a consistent error response shape:

`class AppError extends Error {
  constructor(
    public message: string,
    public statusCode: number,
    public code: string
  ) { super(message); }
}

// Global handler
app.use((err, req, res, next) => {
  if (err instanceof AppError) {
    return res.status(err.statusCode).json({ error: err.code, message: err.message });
  }
  // Unexpected error
  logger.error(err);
  res.status(500).json({ error: 'INTERNAL_ERROR' });
});`

How does Tab Order work in the DOM?

Sneha M K — Sun, 01 Feb 2026 19:01:13 +0000

Tab order in the DOM follows these rules:
Default behavior — Elements are focused in the order they appear in the HTML source (top to bottom, left to right). Only "focusable" elements participate by default: links (), buttons, form inputs, textareas, selects, and elements with a contenteditable attribute.

The tabindex attribute overrides this in three ways:

The tabindex="0" attribute makes any element focusable and positions it in the natural DOM order. Useful for custom interactive elements like a div acting as a button.

Positive values (tabindex="1", tabindex="2", etc.) jump that element ahead of the natural order — elements with lower positive numbers come first, then the rest of the DOM flows normally after all positive-indexed elements are done. This is almost always a bad idea in practice because it creates a jarring, unpredictable experience for keyboard users.

tabindex="-1" makes an element focusable programmatically (via .focus() in JS) but removes it from the sequential tab order entirely. Handy for things like modals or dynamically shown panels that need to receive focus on demand but shouldn't be reachable via Tab key.

A quick mental model:

First, all elements with positive tabindex values, sorted ascending.
Then, everything else in DOM source order (including tabindex="0" elements).
Elements with tabindex="-1" are skipped entirely during tabbing.

if an element is hidden (display: none or visibility: hidden) or disabled, it's automatically removed from the tab order regardless of its tabindex value.

Why do keys matter in React, and how do they improve performance?

Sneha M K — Fri, 30 Jan 2026 16:04:10 +0000

Keys give React a stable identity for list elements, allowing the reconciliation algorithm to correctly match elements between renders. This minimizes DOM updates, preserves component state, and improves performance, especially in dynamic lists.

What problem do keys solve?
React uses a diffing (reconciliation) algorithm to compare:
Previous Virtual DOM
Next Virtual DOM

Without keys, React:
Compares elements by index
May assume elements changed even when they didn't

With keys, React:
Tracks elements by stable identity
Reuses existing DOM nodes when possible

How do keys improve performance?

Prevent unnecessary DOM updates
DOM operations are expensive
Keys allow DOM reuse
Preserve component state
Without keys → input loses focus/value
With keys → state preserved

3 . Enable efficient recording
Drag & drop lists
Sorting
Filtering

React moves nodes instead of destroying & recreating them

Date filter for HTML Table

Sneha M K — Fri, 11 Jun 2021 05:48:28 +0000

Following HTML table has Start Date and End Date in different columns and if we need to filter the rows between these dates with the help of a date picker.

<table class="table table-striped mt32 customers-list" id="tableData">
    <thead>
        <tr>
            <th width=40%> Name</th>
            <th>Internal Name</th>
            <th>Offer Code</th>
            <th width=30%>Start Date</th>
            <th width=30%>End Date</th>
        </tr>
    </thead>
    <tbody>
        <tr id="maintr">
            <td> Amazon Spring ADP 2020 -$5 Amazon GC </td>
            <td> PRDOFR168_livePERD </td>
            <td> SPRINGADPAMZ5GC2020 </td>
            <td> 22-JAN-20 </td>
            <td> 30-APR-20 </td>
        </tr>
        <tr id="maintr">
            <td> Indy Car Giveaway 2020 </td>
            <td> PRDOFR170 </td>
            <td> INDYCARSWEEP2020 </td>
            <td> 22-JAN-20 </td>
            <td> 15-APR-20 </td>
        </tr>
        <tr id="maintr">
            <td> Indy Car Giveaway 2020 </td>
            <td> PRDOFR170_livePERD </td>
            <td> INDYCARSWEEP2020 </td>
            <td> 22-JAN-20 </td>
            <td> 15-APR-20 </td>
        </tr>
        <tr id="maintr">
            <td> Test Offer 2 </td>
            <td> DEVOFR190 </td>
            <td> </td>
            <td> 29-JAN-20 </td>
            <td> </td>
        </tr>
        <tr id="maintr">
            <td> Test Offer 3 </td>
            <td> DEVOFR193 </td>
            <td> </td>
            <td> 29-JAN-20 </td>
            <td> </td>
        </tr>
    </tbody>
</table>

Script to filter date on 3 and 4 column

 <script>
const searchbyDate = () => {
    var startDateArr = [];
    var endDateArr = [];
    var myTab = document.getElementById('tableData');
    let InputStartDate = document.getElementById('date_input').value;
    let InputEndDate = document.getElementById('date_input2').value;
    // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
    for(i = 1; i < myTab.rows.length; i++) {
        // GET THE CELLS COLLECTION OF THE CURRENT ROW.
        var objCells = myTab.rows.item(i).cells;
        var t1 = new Date(objCells.item(3).innerHTML)
        startDateArr.push(t1);
        var t2 = new Date(objCells.item(4).innerHTML)
        endDateArr.push(t2);
    }
    var startDate = new Date(InputStartDate);
    var endDate = new Date(InputEndDate);
    startDate.setHours(0, 0, 0, 0);
    endDate.setHours(0, 0, 0, 0);
    let myTable = document.getElementById('tableData');
    let tr = myTable.getElementsByTagName('tr');
    if(+startDate > +endDate) {
        alert("Select Valid Date. Now please Refresh this page to continue to run code.");
    } else {
        for(var j = 0; j < endDateArr.length; j++) {
            var temp1 = new Date(startDateArr[j]);
            var temp2 = new Date(endDateArr[j]);
            if(startDate && !InputEndDate) {
                if(+startDate <= +temp1 || +startDate === +temp1) {
                    tr[j + 1].style.display = "";
                } else {
                    tr[j + 1].style.display = "none";
                }
            } else if(!InputStartDate && endDate) {
                if(+endDate >= +temp2 || +endDate === +temp2) {
                    tr[j + 1].style.display = "";
                } else {
                    tr[j + 1].style.display = "none";
                }
            } else if(startDate && endDate) {
                if((+startDate <= +temp1 || +startDate === +temp1) && (+endDate >= +temp2 || +endDate === +temp2)) {
                    tr[j + 1].style.display = "";
                } else {
                    tr[j + 1].style.display = "none";
                }
            }
        }
    }
}