DevIdiot!
From app design to running React code, without redrawing a single screen
The slow part of building an app from a design is rarely the logic. It is rebuilding every screen by eye: which button is which, how far apart the cards sit, what happens on tap. SVG Lab (svglab.app) now hands that over three ways, and all three shipped between 10 and 19 October 2026. 1. Download the screens as a React appIn SVG Lab, switch to Prototype mode, press Build prompt and choose Download React code. You get a React app (Vite) of your screens, on every plan, for up to 200 screens,
My dashboard's "recent users" section is the admin table with the buttons turned off
On my dashboard, admins see a "Recent users" section under the stat cards. It is not a new component. It is the same UsersTable the admin Users page uses, rendered with dead handlers:<UsersTable users={recentUsers} onEdit={() => {}} onDelete={() => {}} />UsersTable is a dumb component: it takes a list and two callbacks. Hand it real callbacks and you get the admin table. Hand it no-ops and the edit/delete buttons fire into the void, so it renders as a read-only list. Same markup, sam
One modal, two modes: my add-user and edit-user forms are the same form
My admin Users page has one user form, not two. It is the same modal, driven by a single state value:const [modal, setModal] = useState(null); // 'add' | 'edit' | nullopenAdd resets the form to blanks and sets mode 'add'. openEdit pre-fills name, email and role from the row, deliberately blanks the password, and sets mode 'edit'. Everything else — the inputs, the error rendering, the buttons — is shared.The mode shows up in exactly the places where add and edit genuinely differ:<input type="
Animated SVG on a product page, without Lottie
A lot of product pages have one small moving illustration near a feature: a queue draining, a cache filling, a chart ticking up. It's usually a GIF, a video or a Lottie file. For most of these, an SVG with a few lines of CSS animation inside it is lighter, sharper and easier to keep on brand.Here's how I add them, the three ways to put one on a page, and the two things people skip: reduced motion and pausing offscreen. What "animated SVG" means hereAn SVG file is code. It can carry its own
Why my portfolio looks like a newspaper (and what that taught me about design systems)
Most developer portfolios are a dark gradient with a glowing card. I wanted something people would remember, so mine is a newspaper: The Nandan Review.Underneath it is a small design system I call The Press. This post is about how it works, why the newspaper idea held together, and what it taught me about design systems in general. If you've ever stared at a blank stylesheet wondering what shade of grey to use, this is for you. The idea: ink on paperA newspaper press is mechanical, precise
Static HTML passed on all 46 pages. Rendered in Chrome, 8 were broken
Static HTML passed on all 46 pages. Rendered in Chrome, eight of them were broken.The audit was routine: 46 new pages across four sites, all generated from templates, all with correct <title>, <h1>, canonical and structured data. A static checker would return 46/46 green. Then I loaded them in headless Chrome and measured the box model, and eight of them had a layout that no HTML validator could see. Why static checks cannot find layout bugsA static check reads the document. A l
How I Built an AI Phone Receptionist: Webhooks, Stateless Turns and Structured LLM Output
Small businesses miss a lot of calls. A plumber is under a sink, a dentist's front desk is checking in patients, a salon owner is mid-colour — and the caller hangs up and dials the next business on Google.I built an AI phone receptionist for small businesses in Canada (Aethely) to cover exactly those calls. This post walks through how a call actually flows, the design decisions that mattered, and a few things I'd tell anyone building something similar. The shape of a callThe whole thing is
🚀 Tired of switching between 10 different apps for calculations? Say hello to OmniCalc Hub!
Whether you're working on a construction site, managing property measurements, tracking your fitness, or checking live currency rates—accuracy and speed matter. That’s why I built OmniCalc Hub (https://theomnicalc.online), your ultimate all-in-one web utility platform! 💡✨ What makes OmniCalc Hub stand out?🏗️ Engineering & Construction: Precise Concrete Volume & Rebar Steel Weight calculators.📐 Smart Area & Unit Converters: Instant Distance, Length, and Property Area (SqFt, SqYd, M
BlockIt: Flexible Web Element Blocking with Full Control Over Rules
Many websites contain elements you'd rather not see: intrusive banners, pop-ups, advertisements, or simply unnecessary parts of the interface.Modern ad blockers not only use predefined filter lists but also allow users to manually select elements to block. In most cases, that's enough: select an element, create a rule, and it no longer gets in your way.But sometimes things are more complicated.For example, a blocked element may reappear after a page reload because its classes or position in the
Why crawler logs and browser analytics disagree: a five-check debugging guide
Your server logs show requests to an article. Your browser analytics dashboard shows almost nothing for that page. Which one should you trust?Start with what each system measures. A request log records requests at a particular point in your infrastructure. A browser analytics tag depends on code running and a measurement reaching its collection endpoint. Those are different events.I work on WebDecoy, where we build tools for investigating bot and AI traffic. Here is a debugging sequence you can
Passkeys for Web Developers: What Actually Happens During a WebAuthn Sign-in
Passkeys are now offered by Google, Apple, Microsoft, Amazon, GitHub and plenty of banks. If you build login flows, it's worth knowing what's really going on underneath, because the security model is very different from passwords. Here's the short developer version. A passkey is a key pair, not a stored passwordThe FIDO Alliance describes a passkey as an authentication credential based on FIDO standards that the user unlocks the same way they unlock their device (biometrics, PIN or pattern)
How to Add AI Voice to Your Django App
Why Add AI Voice to Your Django App?Voice has become the new “screen” for many users. From hands‑free navigation to accessibility, integrating AI‑generated speech can make your Django project feel more natural and inclusive. Whether you’re building a customer‑support chatbot, an audiobook generator, or a language‑learning platform, adding text‑to‑speech (TTS) is a quick way to boost engagement. What’s the Landscape of AI Voice?Text‑to‑Speech (TTS) – Convert plain text into spoken audi
Black Friday Budget Calculator: See Your Real Savings (and Your Wants) Before You Shop
Most Black Friday "savings" are just spending with a discount sticker. The fix is boring but it works: write the list and the numbers down before the sales start. I built a small free calculator that does exactly that, and here is the logic behind it in case you want to copy it into your own spreadsheet.Try it: Black Friday budget calculator (no sign-up, runs entirely in your browser, any currency). The four inputs that matterFor every item you plan to buy, enter:Regular price: what it norm
Architectural Breakdown: Encryption, Explained Properly: AES vs ChaCha20 vs Argon2id (and How to Act
# Encryption, Explained Properly: AES vs ChaCha20 vs Argon2id (and How to Actually Combine Them)Let's be honest. Most developers treat encryption like a checkbox. Install a crypto library, call one function, ship it, pat yourself on the back. Meanwhile, credentials are leaking in plaintext across three microservices because
CodeMirror Showed My HTML. The Published Post Was Empty.
Originally published on hexisteme notes.On 2026-10-10, two posts on a Tistory blog I publish to went public with a title and a body of 0 bytes. The script that prepared them had checked its own work, and the check had passed for both.Some context. Tistory asks for a human captcha on every save, so my publisher's own POST and PUT requests were coming back 400. The workaround was an assisted mode: a script drives a logged-in browser, opens the post editor, fills it, and leaves the tab for a person
Building an Interactive Rain-on-Glass Effect with Three.js and WebGL
Building an Interactive Rain-on-Glass Effect with Three.js and WebGLI've been experimenting with Three.js and WebGL while working on my personal portfolio.One of those experiments turned into Rain on Glass. An interactive effect where water droplets fall onto a virtual glass surface, slide down, leave trails and respond to mouse movement.Instead of simply animating circles with CSS, I wanted to explore how to make the water feel like part of the surface.How it worksThe effect combines a few diff
From Server-Rendered Forms to a Framework-Agnostic JavaScript Library
A few years ago, while working on a Java and Thymeleaf application, I faced an interesting frontend challenge.One of its workflows involved collecting notary-related information through a form that spanned multiple pages, with different validation requirements along the way.The challenge wasn't creating inputs or rendering HTML. It was coordinating the entire experience while preserving user progress between separate documents.That problem eventually inspired Demetria, a JavaScript library I rec
Business Name Generator: Domain & Logo Insights
Domain Availability Checker in DoAide BizNameDoAide BizName solves a common bottleneck for entrepreneurs: verifying that a chosen business name is not only unique but also has a usable domain. The domain checker is tightly integrated into the FastAPI backend and exposed through a simple React component, enabling instant feedback as users generate company name ideas. This is where business name generator pays off in practice. The ProblemWhen a startup founder or SMB owner in India brai
Compliance Management India with DoAide Comply
The Compliance Calendar: A Single Source of Truth for Regulatory Tracking ProblemIndian small‑and‑medium businesses, chartered accountants, and compliance officers face a fragmented landscape of deadlines. GST returns, ROC filings, FSSAI labelling, and labour‑law checklists all have distinct due dates, forms, and filing portals. A missed GST‑GSTR‑9 filing can trigger a ₹50,000 penalty, while an overdue ROC return can result in a ₹5,000 fine and a public notice. Traditional spreadsheet
Why your z-index doesn't work: my debugger now points to the exact line
The same evening I shipped this, Chrome opened "New in DevTools" and proudly announced DevTools for agents: AI that reads your CSS rules. Thanks Google, I'll take it as a sign I'm on the right track. Their version is for AI agents. Mine is for a 53-year-old guy pressing F6😂😂😂😂😂😂.We've all done it. A popup stays behind the header, so you write z-index: 999. Then 9999. Then 99999. Nothing changes.The problem is almost never the element you're fixing. It's one of its ancestors. The invisible b
