DevIdiot!

investigating, debugging and solving memory leaks in javascript and react

The first time I saw it, I did not know what I was looking at. I had DevTools open on an app I was building, and the memory graph kept climbing like a staircase. Up, flat, up, flat, never really coming back down. The app felt fine for the first five minutes. After twenty, everything was sluggish. That staircase is the universal sign. Something in my code was holding onto memory it should have let go of. What a memory leak actually isJavaScript cleans up after you. When nothing references an

Node.js for Beginners: Run JavaScript on the Server and Build Your First Backend

Node.js lets you run JavaScript outside the browser — on a server. That one idea changed web development: the same language you use to make buttons interactive can now handle requests, talk to databases, and serve your whole website. If you already know basic JavaScript, Node.js is the shortest path to becoming a full-stack developer, because you do not have to learn a second language for the backend.How does Node.js work? It runs on Google's V8 engine, the same engine inside Chrome, and it hand

TypeScript for Beginners: Add Types to JavaScript and Catch Bugs Before They Run

TypeScript is JavaScript with types added on top. It is the same language you already know, plus a way to say what kind of value each variable, function argument and return value should hold — and the editor then warns you the moment you break that promise, before your code ever runs. That one idea catches a whole class of bugs that JavaScript only finds at runtime, in front of your users.How does TypeScript work? You write .ts files instead of .js, add type annotations like string, number or a

Vue.js for Beginners: Build Interactive Websites Without the Steep Learning Curve

Vue.js is a JavaScript framework for building interactive websites, and it is one of the friendliest places to start if you are new to frontend frameworks. Its biggest strength is that it feels close to plain HTML, CSS, and JavaScript, so you can read a Vue file and understand what it does without learning a whole new way of thinking first.How does Vue work? A Vue component is a single file with three parts: a template that looks like HTML, a script block with your JavaScript, and a style block

My CI Took 13 Minutes. Now It Takes 140 Seconds.

You can get a faster CI and ship more often once you know which step eats the time.1 command finds that step, and a cache on the right folder removes it.On my blog, that took a full run from 768 seconds to 140, and Astro, the framework doing the build, had nothing to do with it.If your pipeline sits above 10 minutes and you couldn't say which step eats them, you're where I was on 2 repos this week.So where did those 13 minutes actually go, and what does it cost to get them back?The first answer

Building an Agent-Aware LLM Gateway from First Principles in Node.js

🔗 GitHub Profile: github.com/sawastik7-bit 🚀 What I’m Building Right NowInstead of relying on out-of-the-box abstractions, I’m building AgentGate—a production-grade, agent-aware LLM Gateway from scratch in Node.js. Most AI implementations fall short when scaling to production because of unhandled API rate limits, provider outages, high token latency, and security leaks. My goal is to handle these infrastructure challenges right at the gateway level. 🛠️ Core Features & ArchitectureS

Playwright fullPage screenshots return one viewport when the page scrolls inside a container

page.screenshot({ fullPage: true }) on an app whose scrolling happens inside a <main> element gives you one viewport. The Playwright docs say it takes "a screenshot of the full scrollable page", and that is the document's scroll height, not the height of any inner scroller. Dashboards, docs sites and many SPA shells look like this: body is exactly the viewport and the content scrolls in a child.I wanted to know what actually works, and what each fix breaks. I tested three things on a local

CAGR in JavaScript: Don't Average Annual Returns

An arithmetic average of annual returns does not necessarily reproduce the ending value of a series. A CAGR calculation should. That difference is useful as a test when building a spreadsheet, a performance widget or a data-analysis function.This example uses four synthetic valuations, exactly one year apart:ObservationValueAnnual returnStart100Not applicableYear 1120+20%Year 290−25%Year 3108+20%There are four values and three annual return periods. The cumulative return is 8%. The arithmetic me

React Native vs Native Development: What Should Actually Drive the Decision

The choice between React Native and native Swift and Kotlin development should never hinge on developer preference or outdated performance myths. It comes down to three operational realities: how tightly your product needs to couple with device hardware, your organization's engineering topology, and your capital efficiency timeline. For most business applications, customer portals, and transaction workflows, React Native unifies product velocity across platforms while preserving native interface

Skip weekends and holidays in scheduling with a holidays API

Scheduling can be a complex task, especially when you need to exclude weekends and holidays from your calculations. Imagine building an application that calculates loan interest, but you want to make sure the interest is only applied on business days. Or perhaps you're developing a social media management tool that needs to update Open Graph images, but you don't want to do so on weekends or national holidays.The problem arises when you need to determine which days are considered business days i

Five reads in our app write to the database, and one of them fetches a logo off the open web after the response has been sent

Rendering a page should not change anything. Nakodo breaks that rule in five places, and every one of them is on purpose, so I went and wrote down the rule they actually follow.The app runs outreach campaigns for brands: it finds creators or local businesses that fit a brief, writes to them, and hands over the ones that say yes, which is the bit described on how it works. Every page in this post is behind the login, which turns out to be half the reason the pattern is safe. One: the first p

J and K are the only keyboard shortcuts in our whole app, and the only two focus() calls are a heading and a panel

Nakodo runs outreach campaigns for brands, and most of the work in it is reading a list and deciding yes or no about the thing in front of you. That shape invites keyboard shortcuts, and I have watched myself not add them for a month, so this is the audit: every key this app listens for, every time it moves focus, and the places it should and does not.One part you can try without an account. The card on the home page runs a short tour of itself, and Escape stops it. Two shortcuts, in one fi

The one page in our app that refreshes itself does it by re-rendering the server, in 68 lines

PubTrivia has three different answers to "how does this page stay current", and they are three different answers because they have three different audiences.The 79 pages in the sitemap do not stay current at all. 77 of them are prerendered at build time and sit in a cache; the other two render per request because they show prices in the visitor's own currency. A page about how to run a quiz night does not need to change while you read it.The screen a host puts on the pub television is the opposi

IncidentMind: Building an AI-Powered Incident Analysis and Management System

IntroductionIn today's digital world, software applications and online services may experience unexpected failures, errors, and performance issues. Identifying the root cause of these incidents quickly is important for maintaining reliable services.To address this challenge, I developed IncidentMind – an AI-Powered Incident Analysis and Management System.IncidentMind is designed to help users analyze incidents, understand possible causes, and generate recommendations for resolving technical prob

I packaged a multi-cursor page-building effect into a reusable React skill

Inspired by swarm-cursors, I’ve packaged the multi-cursor page-building effect into a reusable skill that you can integrate into your own React projects.The skill includes editable React source, a scene builder, and a demo project. Cursors draw shapes and lines, type text, and build sections as you scroll. The page runs directly in your project, so visitors don’t need a browser extension. Try itWith Node.js 22.20 or later, install the skill and select your coding agent:npx skills add cxyax/

I Built an AI Support Agent That Never Repeats a Failed Fix Using Hindsight

ResolveIQ is a support workflow built around that distinction. It combines ordinary operational records in PostgreSQL, a language model for drafting replies, and Hindsight for customer-level memory across conversations. The through-line is simple: a proposed fix is not a resolution. We need to know what was tried, whether it worked, and what the next response should avoid.A support agent can sound attentive while making a customer repeat the same troubleshooting step for the third time. I wanted

TanStack Start + tanstack-fetch: 6 data fetching patterns

Originally published at https://mohamadgarmabi.github.io/tanstack-fetch/blog/tanstack-start-1-0-tanstack-fetch-6-real-world-patternsTanStack Start is officially stable. If you have been waiting for the 1.0 release before building a production application, now is a good time to explore the framework.But getting a full-stack React application running is only the first step. The more interesting engineering decisions come later:Where should an API request run: in a route loader, on the server, or i

React axios vs tanstack-fetch for TanStack Query

Originally published at https://mohamadgarmabi.github.io/tanstack-fetch/blog/react-axios-tanstack-fetchStackReact 18+ · tanstack-fetch/react · @tanstack/react-queryMost React apps call axios inside useQuery, then stack a .data unwrap, an error mapper and a refresh-token queue on top. Each of those exists only because axios predates the queryFn contract: return data, throw on failure, honor AbortSignal.That gap shows up as .data unwraps, custom error mappers, and refresh-token races. tanstack-fet

My Next.js articles shipped inside a hidden div, and nothing warned me

My pages looked fine in a browser. Google was indexing them. Then I read the HTML the way a crawler reads it, with no JavaScript:curl -s https://your-site.com/some-page -A 'OAI-SearchBot/1.0'There was a header, an empty slot and a footer. The article came after the footer, inside <div hidden id="S:1">. A small inline script moves it into the slot when the page loads.Googlebot runs that script. A crawler that doesn't run JavaScript gets a hidden block at the bottom of the page. I can't see

Test an AI Visibility Parser Against Missing Answers and Citation Links

A visibility report can label a brand absent because an answer collector returned nothing. The parser may have turned a missing string into an empty string, then treated the empty string as a valid answer. Once that record reaches a percentage, a collection defect starts looking like an observed result.The executable example here rejects that substitution. It accepts a small, explicit envelope around an already saved answer. It keeps a textual mention separate from a source link and excludes fai