DevIdiot!

Show DEV: I built an AI/SaaS template with vanilla HTML, CSS and JavaScript

APEXVYRA is a front-end template for AI/SaaS products: a marketing site plus a full app dashboard, built with plain HTML, CSS and vanilla JavaScript. No framework, no build step, no backend.I wanted something you can open in an editor and change directly, without first installing a toolchain or learning someone else's component abstractions. Why vanilla?A few practical reasons:Files you can edit directly. Every page is an HTML file. Change the markup, refresh the browser.No build tooling. N

My quote feed returns two premium numbers. I only show one when they agree.

Over a week-long holiday I built a small dashboard for a narrow problem: investors in mainland China who want US index exposure.The context: many onshore Nasdaq-100 funds now cap purchases at ¥5–100 a day, or have paused them entirely. Demand moved to exchange-traded ETFs, and on Sep 30 those were trading 10–11% above their indicative NAV (IOPV). Put ¥10,000 in and you pay roughly ¥900–1,000 more than the underlying assets are worth.The page itself is simple: a list of ETFs sorted by that premiu

Your video breaks when you serve it from your own server, and 416 is usually the reason

If you moved private files off presigned URLs and started serving them throughyour own route, you have probably hit this: images are fine, PDFs are mostlyfine, and video is broken. The player loads, the timeline is dead, andscrubbing does nothing. There is no error in your logs because as far as yourserver is concerned every request was a 200.The cause is almost always Range, and specifically what you do with a rangeyou cannot serve. I got this wrong, then I read RFC 9110 properly and measuredwh

Step Caps, Timeouts and Retries for LLM Tool Loops in Node.js

To make an LLM tool loop safe for production in Node.js, you need five things. Cap the number of steps. Give every tool its own timeout. Retry only the failures that are worth retrying, with backoff. Make every tool that changes something idempotent. Log each step as one structured line. Without these, one bad answer from the model can turn into an endless loop, a stuck request or a refund that gets issued twice.This post walks through each guard in turn, with short snippets you can copy into an

Your blocklist is 2.2 MB of strings. It only needs 550 KB.

110,162 blocked domains. 550,810 bytes. Zero collisions.Those are the numbers my own Node script printed on Monday night, after it hashed a popular ad blocklist down to five bytes per domain. Then I diffed the file against the one a $2 chip downloads every week. Same bytes. A Pi-hole on a $2 chipThe chip runs esp32-c3-adblock, a DNS sinkhole for the ESP32-C3. Ad and tracker domains get 0.0.0.0 back; everything else is forwarded upstream. It hit #12 on GitHub trending this Monday with 196 st

How to Preserve Key Insertion Order in JavaScript

TL;DR: JavaScript objects do not guarantee insertion order when using integer keys. The ES6 specification forces integer-like keys (array indices) to the front of the object, sorted numerically. To maintain exact insertion order across all key types, you should use a JavaScript Map or restructure your data payload as an array.We have all been there. You write some JavaScript code, build an object, populate it with some keys, and expect them to come back in the exact order you put them in. For th

I asked an LLM which listings to skip. It kept getting the numbers wrong.

I waste a stupid amount of time reading pages just to find the one line that rules them out.A job post where the budget is hidden at the very bottom. "Brand new" headphones where the seller note, three scrolls down, says refurbished. ASo I thought, easy, I'll paste the page into an LLM with my own rules and ask "should I bother with this?" Attempt 1: just ask the modelSomething like:My rules: budget at least $500, max 3 revisions.Here's the job post: ...Should I apply? Answer yes or no and

What Is a Frontend Engineer?

⚡ TL;DR: Frontend engineering is far more than styling: it owns the browser runtime, interaction, and the human-facing layer. The takeaway is a clear map of what the role actually owns versus the backend, and the modern skills it really demands. ContentsYou can see the work, and that is the hard partA one-line definition (and a kitchen)The browser is the runtimeFrontend vs backend: who owns whatThe modern skill set (beyond "just styling")Common misconceptionsTakeawaysWhere to go next Y

Robust Error Handling and Async Route Wrappers in Express.js

title: "Robust Error Handling and Async Route Wrappers in Express.js"published: truepublished_at: "2026-11-11T09:00:00+05:30"description: "Learn how to build production-grade error handling in Express.js. Compare manual try-catch blocks, express-async-handler, and native Express 5 error propagation, while implementing custom ApiError classes and secure response formatting."tags: [express, nodejs, javascript, backend]ai_disclosure_level: some_aiHandling errors correctly in an asynchronous Node.js

JavaScript Notes:

1.Spread Operator (...):​Used to expand elements of an array or add new elements easily.Example:let arr2 = [4, 5, 6];arr2 = [...arr2, 7]; // Adding 7 to the existing arrayconsole.log(arr2); // Output: [4, 5, 6, 7]2. Array Destructuring & Rest Operator (...):​Extracting specific elements from an array into variables, and packing the remaining elements using the Rest operator.Example:const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];// 'a' gets 1st value, 'b' gets 2nd value, '...c' collects the rest!const

Build a Live Odds Comparison Dashboard with React and WebSockets in One Evening

<p>Liquid syntax error: Variable '{{% raw %}' was not properly terminated with regexp: /\}\}/</p>

React.js for Beginners: My First Step into React ⚛️

After learning HTML, CSS, and JavaScript, I started learning React.js.At first, React looked confusing because of components, props, state, and JSX. But after understanding the basics, I realized that React is a powerful way to build user interfaces.What is React?React is a JavaScript library used to build user interfaces, especially for web applications.React was created by Meta (Facebook).Instead of creating one large webpage, React allows us to divide the UI into smaller reusable components.W

Designing Human-in-the-Loop AI: Why an AI-Generated Reply Should Be a Draft, Not an Action

1. The Dangerous Shortcut Is Treating Generation as ActionAn LLM returning plausible text is a different event from an application committing that text to a customer conversation. The first produces a candidate. The second changes application state under an authenticated user's authority. Connecting the two is an architectural decision, not an inevitable next step after generation.It is tempting to connect a successful generation response directly to a message-creation request. The integra

I Built a Serverless, Offline-First Exam Simulator for the Google Cloud Architect Cert (Beta)

🧪 ArchiCloud PCA is currently in BETA. Everything below is live and working, but expect rough edges, new questions every week, and the occasional breaking change in how progress is stored. Feedback is very welcome. Studying on a train with zero barsI'm preparing for the Google Professional Cloud Architect (PCA) exam. Most of my study time happens in places with bad or no connectivity: trains, cafés, the 20 minutes before a meeting.Every tool I tried failed at least one of these:It needed a

React Router DOM

What is React Router DOM?React Router DOM is a library used in React applications to handle routing and navigation.Routing means displaying different components or pages based on the URL.For example, a blog application may have:/ → Home/about → About/blog → Blog/contact → ContactReact Router allows users to move between these pages without completely reloading the browser page. Why Do We Use React Router?React applications are often Single Page Appl

SLX Serial Check on GitHub: serial testing with React and Rust

SLX Serial Check is now available on GitHub. This new Silicon LogiX project runs repeatable serial tests on electronic boards and embedded devices. The desktop application sends command sequences, checks responses against defined acceptance criteria and retains results, timings and communication traffic in a local archive.The software is built with React, TypeScript, Rust and Tauri 2 and is distributed as Windows and Linux packages. The project shows how we connect interfaces built with web tech

How I Built ConvertLinx: 20+ Free Online Tools That Run Entirely in Your Browser

Small online tasks shouldn't need big software.I've personally run into this many times. I just need to compress an image, resize a photo for a form, convert a HEIC file from an iPhone, or generate a quick QR code. Most of the time I end up on a website full of ads, forced signups, or "free trial" popups, or I'm told to install an app for a 10-second job.As a developer, I started wondering:Why does a simple utility task need an account, an upload to some unknown server, or a subscription?T

Our 3D dice were too shiny to read — fixing glare in Three.js

Last week we shipped Dice Atelier, a 3D dice roller with twenty themed tables. Then we looked at our own dice the way a player does — mid-game, at a glance, on a phone — and had to admit something: on several finishes, you couldn't reliably read the numbers.Sakura's pale porcelain dice turned their rose-gold numerals into a suggestion. Crimson's ruby dice caught a studio light and wore it like a mirror. The dice were beautiful. They were also, in the most literal sense, failing at being dice.

Runtime CSS-in-JS deserves a rehearing

Runtime CSS-in-JS has largely been written off as too expensive for the browser.The reasons are familiar: some libraries rebuilt styles on every React render, interleaved stylesheet writes with rendering, accumulated generated CSS, and added React overhead to every styled element. Server rendering was awkward, React Server Components seemed incompatible, and build-time CSS appeared to eliminate the entire class of problems.Those concerns did not come from nowhere. In 2019, Aggelos Arvanitakis de

Node.js Microservices Architecture: Design, Communication and Scalability

Microservices architecture breaks a large application into smaller, independently deployable services. Each service owns a focused business capability, communicates through well-defined interfaces, and can evolve without requiring the entire application to be redeployed.Node.js is particularly well suited to microservices because its event-driven, non-blocking runtime handles I/O-heavy workloads efficiently. With lightweight HTTP APIs, asynchronous messaging, containers, and modern observability