标签：#webdev

I'm building a small tool that converts bank CSV files into .qbo files for QuickBooks ( qbofile.com ). When a generated file is wrong, QuickBooks rejects it with vague errors and the OFX spec doesn't tell you what QuickBooks actually checks. So I ran some experiments. Notes below, in case someone else hits the same wall. The file is not XML .qbo is Intuit's version of OFX 1.0.2, which is SGML. Leaf tags have no closing tag: <TRNAMT> -42.50 <FITID> 8f3a2b... Only aggregate tags close. The file also needs a 9-line key:value header, then one blank line, then the body. Line endings are CRLF. My first bug was closing every tag like XML. "Missing bid data" means one tag: INTU.BID QuickBooks checks <INTU.BID> against an internal list of banks that pay Intuit for Web Connect. I tested three variants on QuickBooks Desktop for Mac 2024: Variant Result No <FI> block, no <INTU.BID> Rejected: "Missing bid data" Only <INTU.BID> Accepted <FI> block + <INTU.BID> Accepted So the whole <FI> block (bank name, org id) can be dropped, but INTU.BID cannot. I have only tested the Mac version. If you know whether Windows versions behave the same, I'd like to hear. FITID decides duplicates QuickBooks dedupes on FITID, not on date + amount. If a converter generates random FITIDs, re-importing an overlapping date range creates duplicate transactions. I hash account + date + amount + description, so the same transaction always gets the same FITID. Credit card statement cycles never match calendar months, so overlapping imports happen more often than I expected. QuickBooks cannot export .qbo This one surprised me. No version of QuickBooks can produce a .qbo file. The format only goes one direction, from bank to QuickBooks. Every .qbo file in the world came from a bank's download button or from a converter. That's what I have so far. The tool is free for single files and runs fully in the browser, nothing gets uploaded. I have only tested against QuickBooks Desktop — if you use QuickBooks Online

Hey DEV Community! 👋 I'm Hoang , a Technical SEO Specialist and Web Builder. I'm fascinated by the intersection of search engines, web technology, and AI. While I don't come from a formal Software Engineering background, I’ve been heavily leveraging AI-assisted development (Vibe Coding) to build custom web applications, utility tools, and micro-platforms. 🛠️ What I'm currently working on: SEO & Entity Optimization: Deep diving into Schema markup, web infrastructure, and Knowledge Graphs. Building Micro-Tools: Creating custom PHP scripts, automated quiz systems, and web utilities powered by modern AI LLMs. Server Management: Migrating and optimizing web apps directly on Nginx setups for maximum performance. 💡 Why I'm here: I joined DEV.to to share my journey as a non-traditional developer using AI tools to bring ideas to life fast, learn from experienced engineers, and discuss technical SEO best practices. Looking forward to connecting, sharing ideas, and learning with everyone here! Feel free to say hi or drop a line below! 🚀

Introduction Positioning a tooltip sounds simple. Put a small box next to a button. Done. But anyone who has built one knows that it can quickly turn into: position: absolute calculating coordinates listening for resize events handling scrolling checking whether the tooltip fits on screen and sometimes pulling in an entire positioning library Modern CSS is starting to change that. CSS Anchor Positioning lets us position one element relative to another directly in CSS. Let's look at what that means with a very simple tooltip. What Is CSS Anchor Positioning? CSS Anchor Positioning allows one element to act as an anchor and another element to position itself relative to that anchor. Think about UI components such as: Tooltips Dropdown menus Popovers Context menus Floating labels These elements usually need to appear next to another element. Instead of calculating where they belong with JavaScript, we can now describe that relationship in CSS. Conceptually, we're saying: "This button is my anchor. Position this tooltip relative to it." A Simple Example Imagine we have a button: <button class= "info-button" > More info </button> <div class= "tooltip" > Your changes are saved automatically. </div> We want the tooltip to appear directly below the button. First, let's make the button an anchor. .info-button { anchor-name : --info-button ; } We've now given the button an anchor name. Next, connect our tooltip to it. .tooltip { position : absolute ; position-anchor : --info-button ; top : anchor ( bottom ); left : anchor ( left ); margin-top : 8px ; } That's the interesting part. top : anchor ( bottom ); tells the browser: Position the top of the tooltip at the bottom of the anchor. And: left : anchor ( left ); aligns its left side with the button. No getBoundingClientRect() . No coordinate calculations. No resize listener just to figure out where the tooltip belongs. Why Is This Useful? Before Anchor Positioning, we often had to manage positioning ourselves. A simplified Jav

🚀 How We Built an Instant AI Security & Code Auditor in Next.js & Convex When building security or code auditing tools, speed is everything . Developers won't wait 45 seconds for a bloated PDF report—they want instant feedback on potential bugs, security leaks, or bad practices. Over the last week, we've been building BugZ AI , a lightweight scanner designed to analyze code repos and security links in under 5 seconds . Here is a breakdown of our stack and the architecture choices behind keeping real-time scans ultra-fast. 💡 Build in Public Update: We hit 175 total developer visits today on Day 4 of building out in the open! 🛠️ 1. The Tech Stack Frontend: Next.js 15 (App Router) + Tailwind CSS Backend & Database: Convex (for real-time reactive updates without manual polling) Auth: Clerk Mobile Sync: Capacitor (wrapping web assets into native Android) ⚡ 2. Solving the Speed Bottleneck The biggest challenge was stream handling. Instead of waiting for the entire LLM response to complete before rendering analysis to the UI, we used Convex's real-time mutations paired with edge streaming. This lets the user paste a link or snippet and see initial vulnerability checks pop up in real-time within < 20 seconds . 📈 3. What We Learned Building Out in the Open Keep the UI distraction-free: Developers hate bloated dashboards when a single search bar will do the job. Real-time > Batch: Showing progress indicators reduces drop-off rates significantly compared to static loader spinners. 🧪 Try it out & Drop Your Feedback! If you want to run a quick audit on your project or test a link, check out the live demo here: [INSERT YOUR BUGZ AI LINK HERE] I'd love to hear your feedback on the scanning speed and response accuracy. What features would make this a daily part of your dev workflow?

Ruby Rose Bloom sells one-of-a-kind vintage — a self-hosted storefront, no Shopify, no marketplace underneath it. Search Console's "Merchant opportunities" report told me 3 active products weren't showing up on the Shopping tab, and I went looking for the setting to fix. There wasn't one. What I actually found, three days of digging later, is that "get into Merchant Center" is not one thing — it's several different surfaces, each fed by a different mechanism, and the one everyone talks about (the Shopping tab) turned out to be the least interesting of them. This post is the question I actually had, answered with screenshots taken today: I have a storefront. What does getting into Merchant Center buy me, and where do my products actually end up? It also has an ending I didn't plan. After three days of feed fields and structured data I opened one Search Console report I'd been ignoring and found that Google had indexed 5 of my 436 pages — and, chasing that, that essentially none of my product photos were in the image index either. Those two sections are the most useful thing here, and they're the part I'd read first if I were you. What Merchant Center actually is Before the surfaces: Merchant Center is not an ads product by default. There are two lanes. Free listings are unpaid — you register a feed, Google reviews the items, approved items become eligible to appear in Shopping-related placements at no cost per click. This is the lane a small shop should care about first, because it costs nothing beyond the engineering time to feed it correctly. Shopping ads are the paid lane on top — you attach a budget and the same feed becomes the input to a campaign. Ruby Rose Bloom is running free listings only; there is no ad spend anywhere in this post. Free listings in Merchant Center: approved items, no ad spend, click potential still "available soon" on a three-day-old account. Free listings is the whole story for this shop. Worth saying plainly since most "how to get on Goo

Hello World! - Building a Project While Fighting Shiny Object Syndrome Let's start simple. What is "Shiny Object Syndrome"? Here is the definition pulled straight from Wikipedia: Shiny Object Syndrome is the situation where people focus undue attention on an idea that is new and trendy, yet drop it in its entirety as soon as something new can take its place. In my own words, I would describe it as chasing the novelty and the rush of starting a new project only to lose interest when I hit the not-so-fun parts. Why does that happen? I don't know. My guess would be that I have a lot of ideas that I want to see tangible results from fast . Like, for example: I want to see my app right in front of me in one or two sessions at most. I have a lot of energy for one week straight to work on my new idea, and then I lose interest at the first boring part I encounter. Very valid reasoning, but in the end, I'm left with a bunch of unfinished projects and feeling worse than when I started. This is why I'm here: to share my progress as I try to overcome SOS. I think I perform better when I have someone watching me, waiting for my results, or when I have a real deadline that isn't enforced only by myself. I need the consequences and the pressure to commit. So, now that you know what SOS is and why it sucks, let's see how to fix it. In front of me is one of my latest Shiny Objects (SO), and I've decided that I will apply these next steps to finish it before starting on a new SO. Here's the game plan: Open the Shiny Object. If I started working on it already: document a piece of the finished work every week. DO NOT START WORKING ON THE NEXT PART UNTIL ALL FINISHED PARTS ARE DOCUMENTED HERE. Plan for the next steps of the SO. Implement them (write notes on the changes and decisions taken while implementing). Document them here. Now that we have a vague plan of what we are going to do, let me tell you about the Shiny Object in question: It is a personal file drive where users upload fi

AI agents are increasingly good at building websites, reports, dashboards, and interactive prototypes. The awkward part is often the last mile: downloading a folder, creating a repository, configuring hosting, and copying a URL back into the conversation. A simpler workflow is to let the agent publish the result itself. In this tutorial, I'll show a practical agent-to-live-URL workflow using Revdoku , free web hosting designed for AI agents. Disclosure: I'm part of the team building Revdoku. What you need An AI agent that can create website files and use tools, such as ChatGPT, Claude, Codex, Gemini, Grok, Cursor, or OpenCode A static website, single-page app, report, dashboard, documentation site, or other browser-ready files No hosting account for the first public deployment Revdoku publishes publicly by default. Permanent free accounts require no credit card. Password protection and verified-email access control are optional paid upgrades. 1. Give your agent the publishing instructions Open the Revdoku homepage and use Copy prompt for my AI . Paste those instructions into the same conversation where your agent is building the project. This gives the agent the current integration instructions instead of making you translate deployment steps manually. 2. Ask for the site and the deployment in one prompt Here is a small example: Create a responsive single-page launch page for an open-source developer tool. Include: - a clear hero section - three feature cards - an installation example - a mobile-friendly layout Use plain HTML, CSS, and JavaScript. When the site is ready, publish it with Revdoku and return the final public URL. Keep the project linked so later changes can be republished to the same URL. The key is the last paragraph. It makes deployment part of the deliverable, not a separate chore. The agent can generate the files, publish them through Revdoku's agent-facing workflow, and return a live link in the conversation. A public deployment does not require y

What Is a Message Queue? A message queue is a buffer that stores messages between producers and consumers. Producers send data to the queue, and consumers read from it. The queue decouples the two sides so they don't need to know about each other. This is a core pattern in distributed systems. Think of it like a restaurant ordering system. You (the producer) write your order on a ticket and put it on a spindle. The kitchen (the consumer) picks tickets off the spindle when they're ready. You don't shout at the chef, and the chef doesn't wait for you. The spindle is the queue. Why Use a Message Queue? Three big reasons: Decoupling : Producers and consumers evolve independently. You can change one without touching the other. Buffering : Producers can run faster than consumers. The queue absorbs spikes and prevents overload. Scaling : You can add more consumers to handle more load, or more producers to generate more work. Core Concepts Producer : Sends messages. Consumer : Receives messages. Queue : Stores messages until consumed. Broker : The server that hosts the queue (e.g., RabbitMQ, Kafka, Redis). Acknowledgment : When a consumer tells the broker it successfully processed a message. Dead Letter Queue : Where messages go if they can't be processed after retries. Simple Example with Redis Redis has a simple list-based queue using LPUSH and BRPOP . Here's a minimal Python example using redis-py . import redis import time r = redis . Redis ( host = ' localhost ' , port = 6379 ) # Producer r . lpush ( ' tasks ' , ' send_email ' ) r . lpush ( ' tasks ' , ' generate_report ' ) # Consumer (blocking pop) while True : task = r . brpop ( ' tasks ' , timeout = 5 ) if task : print ( f " Processing: { task [ 1 ]. decode () } " ) time . sleep ( 1 ) # simulate work else : break This is a simple FIFO queue. It works for basic cases but lacks features like acknowledgments, retries, and routing. Real-World Example with RabbitMQ RabbitMQ is a full-featured broker. Here's a producer an

Here is a pattern that shows up in almost every codebase: const lastActive =...

While mass-producing web tools with an AI, I've changed how I lock the design in three stages. The previous post I wrote about that got this comment: "I'd like to see the JSON approach and the design-system approach side by side." Taken at face value, I should just put the two side by side. But first, let me add a short preface. I don't want to frame this as "the JSON approach versus the design-system approach." When I called the JSON approach a "failure" in that post, I didn't mean the method is inferior; I meant it didn't suit my particular set of tools. A page made with the JSON approach does look thin. But where that thinness comes from is easily misread. Whether the design drifts and whether it looks rich are decided separately. What stops the drift is locking the design; whether it looks rich is how much you build out. What locking with JSON removes is drift in the items you specified in the schema. Whether the screen becomes rich, on the other hand, is determined by how much you've built out the machinery that turns that JSON into a screen. So it isn't that locking with JSON is what made it look like a spreadsheet. In the previous post, too, I wrote that fattening the schema and the renderer does increase the expression itself. But that came with a caveat: past a point, it heads toward rebuilding HTML and CSS by hand. What I really want to check is one step past that. If the template sets the ceiling on expression, then building out the JSON side's template as much as the current one should produce the same screen. So what does that build-out demand? I actually built it and measured. I'll share the result, along with the JSON-approach and design-system-approach screens placed side by side under matched test conditions. I'll admit up front: at the time, I chose the design system without running this comparison. So this is me building the road I didn't take, after the fact, and measuring what that cost consists of. Same order, same one-shot So that the comparis

Introduction Modern web applications are rarely built with a single technology. A typical application combines a web server, a programming language, a framework, a database, data formats, and backend services to deliver its functionality. For anyone learning web application security, it’s important to understand these technologies at a basic level—not only to recognize them, but to understand where they sit in the architecture, how data moves through the system, and where weaknesses can be introduced. This article covers: Java Platform ASP.NET PHP Ruby on Rails SQL XML Web Services & SOAP Web Application Architecture: The Big Picture You can think of a web application as a pipeline: User (Browser) ↓ Web Server / App Server ↓ Application Code ↓ Database / Backend Services ↓ Response back to Browser A useful security question to keep in mind: Once user input enters the application, where does it go, how is it processed, and is it handled safely? 1) The Java Platform (Enterprise Web Applications) Java is widely used for large-scale enterprise applications. Java-based web apps can run on operating systems such as Windows, Linux, and Solaris and can use different application servers, frameworks, and third-party components. Simplified Flow Browser ↓ HTTP Request ↓ Java Web Container ↓ Java Application ↓ Database / Other Services ↓ HTTP Response Common Java Terms (Quick Explanations) Enterprise Java Bean (EJB) An Enterprise Java Bean is a relatively heavyweight Java component that encapsulates the logic of a particular business function. It can also handle enterprise requirements such as transaction management. Plain Old Java Object (POJO) POJO stands for Plain Old Java Object —a regular Java object rather than a specialized component like an EJB. POJOs are typically simpler and more lightweight, which is why they are common in modern Java applications. Java Servlet A Java Servlet is a Java component that receives HTTP requests and returns HTTP responses. In many Java web

Perry Mason in: The Case of the Drifting Timer Opening Statement You need a reactive "current time" in your Vue 3 app. A schedule grid with a red line showing "now." A live clock. A dashboard that updates every minute. Every Vue developer reaches for setInterval first. It works. But "works" and "works well" are different things. This is the story of taking a naive timer from "it ticks" to production-grade — and the four iterations it took to get there. The prosecution calls four exhibits. Let's begin. Exhibit A: The Memory Leak const currentTime = ref ( new Date ()) onMounted (() => { setInterval (() => { currentTime . value = new Date () }, 60000 ) }) It works. Sort of. The defense rests — but the prosecution is just getting started. Exhibits of negligence: The interval is never cleared. When the component unmounts, the timer keeps firing every 60 seconds forever — updating a ref nothing reads anymore, and holding its closure (and everything the ref references) in memory for the lifetime of the page. Silent. Invisible. The kind of leak that shows up in production after a user navigates around your app for 20 minutes. Exhibit B: The Cleanup That Failed const currentTime = ref ( new Date ()) let timeInterval = null onMounted (() => { currentTime . value = new Date () timeInterval = setInterval (() => { currentTime . value = new Date () }, 60000 ) }) onUnmounted (() => { if ( timeInterval ) clearInterval ( timeInterval ) }) Now we clean up. The interval is stored in a variable, cleared on unmount. A step forward — but the prosecution has three more objections: Further evidence: This only works inside components. If someone calls this logic from a Pinia store or outside a component's setup() context, onUnmounted never fires. The timer leaks silently. (Composables called synchronously during setup() are fine — Vue's docs recommend exactly that. The problem is when there's no component instance at all.) The timer fires 60 seconds after load , not at the top of the minute

Why Rust and WebAssembly Are Replacing JavaScript for Heavy AI Workloads in 2026 While JavaScript remains the reigning language for web UI rendering, high-throughput client-side compute—such as local browser AI inference, video encoding, and cryptographic verification —has completely shifted to Rust compiled to WebAssembly (WASM) . In 2026, running 1B+ parameter models directly inside the browser using WebGPU and WASM SIMD has become standard practice. ⚡ Benchmarks: JS vs WASM SIMD execution Execution Time (Lower is Better) ┌────────────────────────────────────────────────────────┐ │ JavaScript (V8 Engine) : █ █ █ █ █ █ █ █ █ █ 1,420 ms │ │ Rust WASM SIMD : █ █ 210 ms │ └────────────────────────────────────────────────────────┘ Building a Rust WASM Compute Module Add the wasm-bindgen dependency in your Cargo.toml : [package] name = "wasm_ai_engine" version = "0.1.0" edition = "2021" [lib] crate-type = [ "cdylib" ] [dependencies] wasm-bindgen = "0.2" Implement high-speed array processing in src/lib.rs : use wasm_bindgen :: prelude :: * ; #[wasm_bindgen] pub fn process_tensor_data ( inputs : & [ f32 ], multiplier : f32 ) -> Vec < f32 > { inputs .iter () .map (| & x | x * multiplier ) .collect () } #[wasm_bindgen] pub fn compute_cosine_similarity ( vec_a : & [ f32 ], vec_b : & [ f32 ]) -> f32 { let dot_product : f32 = vec_a .iter () .zip ( vec_b .iter ()) .map (|( a , b )| a * b ) .sum (); let norm_a : f32 = vec_a .iter () .map (| a | a * a ) .sum :: < f32 > () .sqrt (); let norm_b : f32 = vec_b .iter () .map (| b | b * b ) .sum :: < f32 > () .sqrt (); if norm_a == 0.0 || norm_b == 0.0 { return 0.0 ; } dot_product / ( norm_a * norm_b ) } Compile directly to WebAssembly: wasm-pack build --target web Integrating into Next.js / Frontend Stack import init , { compute_cosine_similarity } from ' ./pkg/wasm_ai_engine.js ' ; async function runVectorSearch () { await init (); const vec1 = new Float32Array ([ 0.12 , 0.45 , 0.98 ]); const vec2 = new Float32Array ([ 0.15 , 0.42 ,

👉 TL;DR: Frontend applications (SPAs, mobile apps, desktop clients) cannot securely store secrets: any embedded API key is extractable by users and attackers. The Backend for Frontend (BFF) pattern solves this by placing a server-side layer between your frontend and third-party APIs. The BFF holds the secrets; the frontend never sees them. For production deployments, use a secrets manager (AWS Secrets Manager, HashiCorp Vault) rather than environment variables to enable rotation and auditing. A BFF adds infrastructure complexity, but for any API key with financial or administrative implications, the tradeoff is worth it. Frontends are notoriously leaky environments. Cybernews found in 2022 that 56% of Android apps on the Google Play Store contained hardcoded secrets extractable through basic automation. A similar study in 2025 concluded that iOS apps are not better, with over 815,000 secrets harvested from 156,000+ apps (71% leaking at least one credential). These studies plainly expose the widespread issue of hard-coding secrets in production-deployed frontend code. This article aims to warn developers about this risk and present a simple, reusable pattern for safeguarding their applications: the Backend for Frontend (BFF) pattern. Before we start, let's be clear on the crucial point: Whether you are building a React Single Page Application (SPA), a mobile app, or a desktop client, if the code runs on the user's device, the user (and potential attackers) can always inspect it. The solution isn't to try and hide the keys better ; it's to move them somewhere safe. "Public Clients" vs. "Confidential Clients" In OAuth terminology, there are two types of clients, with completely different security models : Confidential Clients : Applications running on a secure server (e.g., a Node.js backend, Python API) that can securely store secrets (like a CLIENT_SECRET) because end-users don't have access to the server's file system or memory. Public Clients : Applications running

On July 28, the Model Context Protocol project shipped a new spec revision, 2026-07-28 . I run backend engineering at GoodBarber, and our public MCP server is a live production surface: real apps, real content, real push notifications. So for us a new revision is not a changelog to skim on a Friday. It is a migration with our name on it. We have just brought the server up to the new revision. This post is three things: the operator's cut of what changed, what upgrading a public server actually involves, and the thing we found in our logs while checking the work. The last one is the reason I'm writing. The operator's cut of 2026-07-28 The headline is the stateless core. MCP grew up as a stateful, bidirectional protocol: an initialize handshake, a negotiated session, an Mcp-Session-Id header to carry it all. The new revision retires that entirely. Every request now self-describes in _meta : protocol version, client identity, capabilities. The practical consequence is the one server operators have wanted since day one: you can put an MCP server behind a plain round-robin load balancer with no shared session storage. If you have ever kept session affinity alive with duct tape, you know exactly which muscle just relaxed. The rest, fast: Method and tool names now also travel in Mcp-Method and Mcp-Name HTTP headers, so gateways can route and meter without parsing JSON bodies. Multi Round-Trip Requests: a call can come back with resultType: "input_required" and continue over stateless connections. Mid-call questions no longer need a held-open stream. List results (tools, prompts, resources) carry ttlMs and cacheScope , so clients can finally cache your inventory honestly instead of guessing. Authorization hardening: RFC 9207 issuer validation, and Client ID Metadata Documents replacing Dynamic Client Registration. Tasks, MCP Apps, and Enterprise Managed Authorization become formal extensions instead of core features. Roots, Sampling, and Logging are deprecated, with a minim

A static site has no backend. That is the point of one — and it is also why the contact form is the first thing that breaks. The usual answers are a third-party form service with its own signup, a serverless function you now maintain, or a mailto: link nobody clicks. There is a third option that falls out of how static hosting already works: the host is in the path of every HTML response it serves. It can collect the form itself. On harvis.dev that is one attribute: <form harvis-form= "contact" > <input name= "email" type= "email" required > <textarea name= "message" ></textarea> <button> Send </button> </form> Deploy, and submissions show up in the dashboard. No script tag, no API key in the page, no fetch() , no JavaScript at all — the form works with JS disabled, because it is a plain HTML form doing what plain HTML forms have always done. The page I am describing is live at harvis-forms-example.harvis.dev — submit the form and see where you land. Everything below is what makes that page work. What actually happens The rewrite happens on the way out, while the HTML is being served: action and method are replaced with /__harvis/form/contact on your site's own subdomain. Same origin, so there is no CORS, no preflight, and nothing in the page has to know a project id. A honeypot field is inserted. It is positioned off-screen rather than display: none , because a bot that skips hidden inputs is a bot that would otherwise get through. Anything that fills it in gets the success page and is stored nowhere — a bot that can tell it was caught is a bot that tries again differently. data-harvis-redirect="/thanks.html" becomes a hidden field, since the handler never sees your HTML — only what the browser posts. It is re-validated on arrival, and a protocol-relative //somewhere-else is refused. The reply is a 303 , so the browser follows it with a GET and a refresh on the thank-you page cannot post the form twice. The form name is part of a URL and a dashboard heading, so it

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry . You Know What's Worse Than Not Being Able to Log In? Being told everything worked right up until you try to actually use your account. Yes, that was a real bug. And, somehow, I ended up being pulled into another authentication mystery. At this point, I’m starting to think authentication bugs have a personal grudge against me. 😅 In my previous Smash Story , I wrote about a bug where users simply couldn't log in. This time, the problem was sneakier because most of the flow looked completely healthy. The user was approved, the background task ran, the email and SMS arrived, and Cognito had a user. Then the user actually tried to use their account. And everything fell apart. It Started With Two User Pools The authentication setup was fairly large and had evolved over time, so there wasn't one shiny User Pool doing everything. We had an older Cognito User Pool supporting existing authentication flows, including mobile-based signup, while a newer User Pool handled a newer flow where users received an email containing their PIN. Both pools were intentional because they supported different parts of the authentication journey. That wasn't the problem. The interesting part was that the application database had its own representation of a user, while Cognito had another. On top of that, some of the work connecting those two systems happened asynchronously. As long as everyone agreed about who the user was, nobody cared. The moment they disagreed, authentication became very interested. The Tiny Timing Window The problem appeared in the partner and dependant journey. A member could create a partner or dependant during signup or later from the member details area. A relevant non-member user would then approve the account, which scheduled an asynchronous task called SendingEmailsAfterApprovalBot in a TaskList database table. That task ran every 15 minutes, and once it executed, the partner or depend

I kept hitting the same small friction: I'd want to quickly rewrite an email, clean up some text, or summarize a long thread — and every tool wanted me to sign up, pick a plan, or watch an ad first. For a ten-second task, that's absurd. So I built the thing I wanted: a set of free, no-signup AI text tools , each doing one job well. This is a quick write-up of the stack and the decisions behind it. 👉 Live: https://www.texttoolsai.app The core idea: one tool, one job, zero friction Instead of a single mega-app, it's a collection of single-purpose tools — rewrite, tone change, summarize, prompt generation — each on its own page. You land, paste, get output. No account, no modal, no paywall. The "no signup" rule forced good constraints: everything has to work instantly and statelessly, which kept the whole thing simple. The stack Next.js (App Router) — server components for the content/SEO pages, client components only where the tool actually needs interactivity. Vercel for hosting — the deploy story is boringly good, which is what you want. An LLM API on the backend — the browser never sees a key; requests go through a Next.js route handler that owns the prompt and the provider call. Tailwind for styling — fast to iterate, easy to keep consistent across dozens of tool pages. One decision that paid off: data-driven pages Every tool is defined as a config object (label, placeholder, system prompt, endpoint) rather than a hand-built page. Adding a new tool is mostly adding data, not wiring up new routing. That's what made it realistic to ship a lot of tools without the codebase turning into spaghetti. // simplified shape { slug: 'rewrite', label: 'Paste your text', endpoint: '/api/tools/rewriter', systemPrompt: '...' } The route handler resolves the endpoint key against a map of system prompts, so the API surface stays tiny even as the tool count grows. What I'd tell anyone building something similar Keep the API key server-side. Obvious, but easy to leak through a miscon

A playable first-person shooter generated from one prompt would have sounded absurd not long ago. Now, videos of AI-built browser games that resemble Call of Duty and Counter-Strike are spreading across social media. On August 10, Axios reported on the rise of “one-shot” AI game prompting : give a model one detailed instruction, let it produce the code, and receive something you can play. This is a real milestone. It is also easy to misunderstand. A one-prompt game can prove that a model knows how to assemble controls, graphics, physics, enemies, and a recognizable game loop. It cannot prove that the result will stay interesting after the first few minutes. The first prompt creates the demo. The decisions after that create the game. Why These Demos Feel So Important Game ideas used to face a large gap between imagination and interaction. You could describe a mechanic, draw a map, or write a design document. But discovering whether the idea actually felt good required code, assets, an engine, and enough technical work to reach a playable build. Prompt-to-game tools are shrinking that gap. This change is not limited to experimental AI demos. Roblox recently announced mobile-first creation tools that turn text prompts into basic games , giving creators a starting point they can playtest, change, share, and publish. That starting point matters. A playable failure teaches you more than a beautiful design document. You can immediately discover that the movement is slow, the arena is empty, the objective is confusing, or the central mechanic is less interesting than it sounded. The value of one-shot generation is not that the first result is finished. It is that the first result arrives early enough to challenge your assumptions. A Recognizable Game Is Not Necessarily a Good Game A model can generate the visible parts of a familiar genre surprisingly well. Ask for a browser FPS and it may produce: First-person movement Weapons and ammunition Enemies that chase or shoot Hea

You put your app behind a tunnel (or any reverse proxy) to test webhooks. Everything works. Then you notice something odd in your logs: every single request comes from the same IP address. Congratulations, you've met the X-Forwarded-For problem. What actually happens When a request flows through a tunnel, the TCP connection to your app comes from the relay, not the real client. So request.remote_addr — the value your framework uses for rate limiting, IP logging, geo-blocking, brute-force detection — is the relay's address. For every request. From every user. The consequences are quiet and nasty: Your rate limiter now rate-limits the relay, not the client. One aggressive user trips the limit and everyone gets blocked. Or worse, the limit is per-IP and effectively unlimited, because each relay node looks like one "user." * Your access logs are fiction. Security review of an incident? Every entry says the same address. * IP allowlists silently break. "Only allow my office IP" now allows nothing, or everything, depending on how it's wired. The fix (and its trap) The proxy already tells you the real client IP — in the X-Forwarded-For header. Every framework has a setting to trust it. Flask: ProxyFix . Express: app.set('trust proxy', ...) . Rails, Django, Laravel: equivalents exist. Here's the trap: trust that header blindly and anyone can spoof it. A client can send X-Forwarded-For: 1.2.3.4 directly, and if your app believes headers from anyone, your rate limiter is bypassed with a curl flag. The correct setup has two halves: 1. Trust `X-Forwarded-For` only when the immediate connection comes from a proxy you control (your tunnel relay, your load balancer). 2. Strip or ignore the header on direct connections. Most frameworks express this as "trusted proxies" — a list of proxy IPs whose forwarded headers you believe. Set it. It's five minutes of config that determines whether your security features are real or decorative. Why this matters more in the tunnel era Tunnels us