标签：#webdev

I keep finding the same Stripe webhook bugs in SaaS launches Most early SaaS billing bugs are not in Stripe Checkout itself. They are in the glue around it: trusting the success redirect instead of the signed webhook parsing JSON before signature verification missing idempotency for retry events reflecting verifier errors from unauthenticated webhook routes updating subscription state without a replay/audit trail letting "Pro" access drift from the payment source of truth Over the last few days I have been shipping small public fixes around exactly this class of problem. Recent examples: Morphix: Cloudflare Worker Stripe webhook with signature verification, Supabase subscription sync, and event idempotency ledger https://github.com/yiyuanlee/morphix/pull/25 Open Mercato: hardened unauthenticated payment/shipping provider webhooks against raw verifier error reflection and missing rate limiting https://github.com/open-mercato/open-mercato/pull/2680 Covenant: webhook signatures hardened against replay and secret rotation gaps https://github.com/wienerlabs/covenant/pull/229 Volunteerflow: made a Stripe invoice.paid Founders Circle counter update transactional instead of partially committing user/counter state https://github.com/ppppowers/volunteerflow-project/pull/49 The pattern is boring in the best possible way: payment systems should be boring. The 48-hour version For a small SaaS that is about to turn on paid plans, I can take a bounded payment assurance sprint: inspect Checkout / webhook / subscription state flow verify signed webhook handling and raw-body behavior add idempotency around Stripe retry events ensure subscription status and entitlement state have one source of truth add a small regression test or smoke script leave a deploy/runbook note so the next failure is diagnosable Fixed scopes I am taking: $2,000 / 48 hours: one payment path hardened and documented $5,000 / 5 days: full launch pass across Checkout, webhook, subscription mirror, Pro gate, pricin

Introduction Nowadays, AI agents are becoming increasingly powerful at assisting users in their daily web activities. However, we cannot yet allow them to act completely autonomously—there is still a risk of them clicking on the wrong elements, for instance. In theory, these agents are capable of performing impressive tasks, provided they are guided step-by-step through the interface. The challenge here is not a lack of intelligence in the model, nor a shortage of web APIs to expose data to the agent. The core issue lies in the fact that the agent must currently "guess" its way through applications that were designed exclusively for humans. This is precisely the problem that WebMCP is here to solve. It is important to note that these are not intended to replace standard APIs as access points for an application. Instead, they provide a structured way for a web application to "instruct" the AI agent used in the browser on how to navigate its interface. This results in: Fewer misplaced clicks. Less trial-and-error when interacting with the UI. When utilized to their full potential, WebMCPs could redefine the user experience in the coming years. What is WEBMCP? As you may have guessed, WebMCP is a browser-side "guide/standard" for exposing tools to an AI agent directly from an active web page. During Google I/O, this new feature was introduced as a way for web applications to describe how a page functions—and what actions can be performed—to various AI agents. As a result, agents can execute these described actions faster, more efficiently, and with greater precision. Unsurprisingly, the syntax for creating these descriptions relies on JavaScript functions. These functions take natural language descriptions as parameters, along with structured schemas directly exposed from the web page. This is exactly where the power of WebMCP lies. Today, while we have Playwright (designed for end-to-end testing of web applications) and Playwright MCP (which extends this model to LLMs

built a dealer management system for a tea reseller (basically a billing/accounting app). The tech stack is: Frontend: Next.js 15 (App Router) Backend: Hono framework running on Bun Database: PostgreSQL with Drizzle ORM Auth: Better Auth (session-based, role-based access) About the business: ~400 customers (tea leaf suppliers) 5-10 staff users max Daily data entry (tea collection weights), monthly billing with deductions Database will be tiny — maybe 15 MB/year of pure text data They want it to feel like a desktop app but with data stored safely in the cloud Budget is very tight — ideally free or under $5/month What I've considered: Free tier stack (Vercel + Render + Neon) — $0 but Render free tier sleeps after 15 min, cold starts are annoying VPS (Hetzner/DigitalOcean ~$5/mo) — Hostinger Node.js hosting — doesn't support Bun or PostgreSQL PWA for the "desktop app" feel — seems like the right call My questions: For developers who build apps for small businesses in developing countries — what's your go-to deployment strategy? Is the free tier stack (Vercel + Render + Neon) reliable enough for production? Would you switch from Bun to Node.js just to have more hosting options? The Bun lock-in is becoming a pain. Is there a better approach I'm not seeing? Something between "run it on a local PC" and "pay for a VPS"? How do you handle backups for clients who can't manage their own infrastructure? Any advice appreciated. This is my first time deploying a production app for a real business and I want to get it right — it handles their financial data. submitted by /u/Iamxv [link] [留言]

tl;dr: I'm looking for a visual HTML builder - not a design tool, but something that specifically builds code Hi everyone, I feel the need to explain before anything, why I'm looking for this. Pls read the explanation before coming for me with "why don't you just write HTML and CSS normally, what's wrong with you". I've been a dev for 12+ years, mostly specializing in complex software. Give me a design system, business requirements (not even a fleshed out plan) and I'll give you something that works and is futureproof, as much as I can predict the future anyway. In all of that, I've always struggled with writing full pages with HTML and CSS. I find it hard to keep the whole context in mind and I've never come up with a way to structure it sensibly. Frameworks like Tailwind CSS drive me nuts because why do I need to memorize specific classes instead of just writing CSS? Anyway, that's not the point. Recently I realized that I need to diversify my service offering, and therefore start offering more of these custom built websites. But now I'm running into my personal limitation of being trash at HTML/CSS. AI isn't much help here because Claude Code is absolute garbage in implementing designs, and I'm not paying for 3 different AI subscriptions - that would work against my goal of making money. So now I'm looking for a more visual HTML and CSS editor. Design tools like Figma are one thing, but I'd like something that is made for people who know HTML, but just don't want to write it themselves. The workflow I imagine is something like this: I start with a blank slate. It prompts me to add fonts, colors and other foundational design system elements. This would set CSS variables. From here I can proceed to create pages or complete the design system with other components (buttons, inputs, etc) Each page contains common elements (header, footer, sidebar, whatever) + a blank area for me to drag and drop elements into. As I use the elements, I should be able to set classes, id

HELLO r/webdev , I GOT MY FIRST FREELANCE GIG =D! I was lucky enough to be in the right place at the right time, mentioned I am studying a degree in IT specialising in Web dev and design and was asked to make their e-commerce website for their new business. I am so happy and so excited, but I also have my worries. I'm worried I mess something up, especially when it comes to payment processing and data privacy. Is there ANY advice you can give a newbie, ESPECIALLY someone who is doing their first commissioned website. I'm just so anxious that I leak user data, don't put up the correct legal things (like privacy policies, etc.), mess up the storefront, all that jazz. Is there anyone who can maybe give me some helpful advice? I'm based in South Africa if that helps. submitted by /u/dvjar [link] [留言]

submitted by /u/magenta_placenta [link] [留言]

I deployed a Slack bot app built on the Claude Agent SDK to Railway, and immediately hit a string of landmines around the SDK itself. Every one of them was the "the logs don't tell you what's wrong" kind, and the second one in particular ate a lot of my time. Since other people are likely to get stuck in the same spots, I'm writing it down. This is aimed at junior-to-mid-level devs using @anthropic-ai/claude-agent-sdk ( query() ) in Node.js. TL;DR Gotcha 1 : In a root container, bypassPermissions isn't allowed, and the child process dies with code 1 . Worse, stderr is swallowed, so you can't see why. Gotcha 2 : stdio MCP servers don't wait for connection by default, so on turn 1 the tool list is empty — and the model "acts out" tool calls and fabricates the results. Gotcha 3 : haiku shows up in your API logs, but that's not the model degrading — it's by design. It's used for internal chores. Gotcha 1: bypassPermissions doesn't work in a root container What happened Code that ran fine locally started dying with code 1 the moment I deployed it to Railway — the agent did nothing and just exited. The entire error message was essentially this: Error: Claude Code process exited with code 1 That tells you nothing. The only stack trace was from my app; what the child process (the claude binary) actually said before dying was a complete black box. The cause query() spawns a claude binary internally. That binary refuses --dangerously-skip-permissions (which the SDK calls permissionMode: "bypassPermissions" ) when running as root or under sudo . It's a safety measure — skipping all permission checks as root is far too dangerous. Railway, like many container environments, runs as root by default, so if you've set bypassPermissions you will always hit this. You can't catch it locally if you're running as a normal user. Why there are no logs This is the nasty part. Unless you pass an options.stderr callback, the SDK discards the child process's stderr with "ignore" . In other wor

Announcing Limn Engine I'm excited to launch Limn Engine — a lightweight, zero-dependency HTML5 Canvas game framework for the browser. No npm install. No build step. No bloated dependency tree. Drop in a single script and start making 2D games. The Core Idea: Display + Component Limn Engine is built around two classes that cover 90% of what you need in a 2D game: Display — The Game Shell A singleton Display class that manages the canvas, runs the game loop, handles keyboard and mouse input, controls the camera, and manages scenes. Setting up a game is a one-liner: const display = new Display (); display . start ( 800 , 600 ); Let me try creating it step by step . Component — Every Object in Your Game A unified Component class that combines position, size, color/image, velocity, physics, and collision detection. No separate "Sprite" and "Body" classes — one object does it all. const player = new Component ( 40 , 40 , " blue " , 100 , 100 ); Components support three modes: Rectangle — solid color shapes for rapid prototyping Image — loaded from spritesheets or single image files Text — the Tctxt subclass for text elements with backgrounds, padding, and alignment Key Features Dual-Canvas High-Performance Rendering Call display.perform() to activate dual-canvas mode. Static backgrounds and tilemaps are drawn once to an offscreen buffer, then composited as a single drawImage() call per frame. This dramatically reduces draw calls and improves frame rates for complex scenes. display . perform (); display . start ( 800 , 600 ); Tilemap Levels Define game worlds as 2D arrays and initialize the tilemap engine with one call. Supports dynamic tile placement during gameplay — great for destructible environments and breakable blocks. display . map = [ [ 1 , 1 , 1 , 1 , 1 ], [ 1 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 9 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 1 ], [ 1 , 1 , 1 , 1 , 1 ] ]; display . tileMap (); Sprite & AnimatedSprite Load horizontal spritesheets and define named animation clips (idle,

Last Sunday I shared nestjs-docfy, a small library to move Swagger decorators out of NestJS controllers into companion *.controller.docs.ts files. The reception was better than I expected, and a lot of the feedback pointed in the same direction: the separation is nice, but writing those docs files by hand is still tedious. So I spent some time on that, and there's quite a bit new in this release. A CLI that writes the boilerplate for you The biggest addition is a generate command that reads your project with static analysis (no code execution, no ts-node overhead) and produces a pre-filled docs file for every controller: npx nestjs-docfy generate The generated file comes with inferred summaries, response types, and common error responses already in place. You edit from there instead of starting from scratch. It's idempotent by default, running it again won't touch files that already exist. When you add a new endpoint and want to merge only the new method block without losing your existing edits: npx nestjs-docfy generate --force The CLI auto-detects your project layout, so monorepos (Nx, Nest CLI, generic packages/ or apps/ structures) work without any configuration. There's also a --dry-run flag if you want to preview output before writing anything to disk. A check command for CI The other side of the workflow is keeping docs in sync as the codebase evolves. The check command exits with code 1 if any controller has undocumented methods or no companion file at all: npx nestjs-docfy check Output looks like this when something is out of sync: ✖ UsersController, undocumented methods: updateProfile, deleteAccount → run nestjs-docfy generate --force to merge new methods ✖ 2 controller(s) out of sync. Drop it into your pipeline and docs drift gets caught before it reaches main. Type-safe method keys The docs() function now enforces that every key in config.methods actually exists on the controller class. Typos are a compile error, not a silent runtime warning: docs ( User

Hi what are the checks we need to do after making a website idk what type of checks are there i made a website using claude and lovable used free version of both for backend i used supabase now i want to check if my website is all good so that i can add it in my portfolio i am a btech 1st year student have a very basic level of coding submitted by /u/Shivansh_Yadav07 [link] [留言]

Disclaimer: yeah, I work in AI visibility, so I'm definitely biased on this. But what I want to get into actually cuts against what my own industry sells, so I figure it has a place here. Back in mid-May Google put out its first real guide on how to show up in AI answers (AI Overviews, AI Mode). I saw a bunch of write-ups on it and it was always the same song, structure your headings, add Schema, the usual blah. Except there's a "mythbusting" section in the doc I haven't seen anyone pick up on, and it's the most interesting part. Google says in plain terms that the famous llms.txt file does nothing, that you should stop obsessing over Schema.org, and that chunking is smoke and mirrors. Made me smile a bit since that's basically the package some "GEO" agencies are charging for right now. What they push instead is honestly kind of obvious. They talk about "commodity" vs "non-commodity" content. Like, if an AI can write your article on its own, it'll never cite you, makes sense, it already has the answer, why would it go looking for you. What gets cited is content with something the model doesn't have. A number you actually measured, a test you really ran, lived experience basically. The example that stuck with me (not in Google's guide, somewhere else) is a small blog specialized in robot vacuums, garbage domain authority, and it outranks the New York Times in AI answers. The NYT has a domain like 3x stronger. Except the NYT puts out an affiliate listicle anyone could copy, and the blog guy films his actual tests with real measurements. Guess who gets cited. And this is where it gets useful for you I think. It means for the most part you need neither a tool nor an agency. Take your most generic page, just ask yourself "could anyone write exactly this", and if the answer is yes, add something only you know. You don't even need data. A simple "the first question every client asks me is this" and you're already standing out. It's free and it weighs more than all the tech

I set up a Claude CLI instance on a Google Cloud VM Instance, cloned all my project repos (we run a dev agency), and wired up webhooks to Linear. When a ticket gets tagged, the CLI automatically reviews the relevant repo, understands what needs to be done, and drops a detailed technical breakdown right into the ticket. It's cut ticket completion time because devs now have way more context to feed into Claude Code or Cursor and just start building. Next step: I'm trying to get Claude to actually create working PRs based on that evaluation and knock out the whole ticket end-to-end. Still figuring out if the loop can fully close. Has anyone worked on a system like this? Would love to hear your approach. submitted by /u/theTbling [link] [留言]

What are the minimum requirements to have as a beginner web developer to be able to efficently learn and work online? like should you code in a private room? what kinds of desks are appropriate and what are not? how important is the calm atmosphere inside the house and outside? I know there is something called ergonomics and I want to ask programmers who have experience with learning and working from home and coding for long hours at home, if we categorize the working environments in 3 types: inapropriate, acceptable, good. What things should be in each category? Please share your experiences with any work environments you have/had. Thanks. submitted by /u/DurianLongjumping329 [link] [留言]

For years, whenever I needed to merge two PDFs or compress a file to upload to a government portal, I would Google "compress PDF", click the first result, and inevitably hit a paywall. "You have reached your 2 free files per day limit." Worse, I was uploading sensitive documents—tax returns, medical records, and NDAs—to random servers in God-knows-where just to strip out some heavy images. I decided to build an alternative. I wanted it to be 100% free, have absolutely no daily limits, and most importantly: zero server uploads . Here is how we built PDF Pro using Next.js and WebAssembly to process PDFs entirely natively inside the user's browser. The Architecture: Why WebAssembly? Traditional PDF tools (like Smallpdf or iLovePDF) use a monolithic server architecture. You upload your file to their AWS bucket, their backend runs a Python or C++ script (usually using Ghostscript or a proprietary library) to manipulate the PDF, and then you download the processed file. This architecture is expensive (high bandwidth and compute costs) and creates a massive privacy liability. By compiling a C++ PDF manipulation library down to WebAssembly (WASM) , we inverted the architecture. 1. The Build Process We took pdf-lib and custom C++ compression algorithms and compiled them to a lightweight .wasm binary. When a user visits PDF Pro Compress , their browser downloads the ~2MB WASM file once and caches it. 2. Client-Side Processing When you drag and drop a 50MB PDF into the UI, it never hits our server. Instead, the browser's JavaScript engine passes a Pointer to the file data directly into the WebAssembly memory buffer. The WASM module executes native C++ speeds directly on your local CPU to compress or merge the document. Performance Benchmarks Because there is zero upload and zero download time, the performance metrics are staggering: 10MB PDF Compression (Cloud): ~15 seconds (Upload) + 4 seconds (Process) + 5 seconds (Download) = 24 seconds . 10MB PDF Compression (PDF Pro WASM)

My CV is a PDF, and PDFs do not answer questions. So I built ask.hiten.dev : a streaming chat grounded in my actual career history, where a recruiter can ask "why should I hire you over another senior frontend engineer?" and get a real answer. The constraint that made it interesting: the total inference budget is zero. No OpenAI bill, no hosted vector DB, nothing. Here is what that actually took. Four free providers and a failover chain No single free tier is reliable enough to put in front of strangers. Groq's free tier caps at 100k tokens/day, and I hit that cap on day one. OpenRouter's free models come and go. Cerebras occasionally queues you out at busy times. The fix is boring and effective: an ordered provider chain, all OpenAI-compatible, walked per-request until one answers. Groq (llama-3.3-70b) -> OpenRouter (gpt-oss-120b:free) -> NVIDIA (llama-3.3-70b) -> Cerebras (gpt-oss-120b) Each provider is just a base URL, a key and a model name. The API route tries each in order; the first 2xx with a body wins, and the response streams straight through. The client gets an X-Provider header so I can see who served what in the logs. Two details that mattered: Empty env vars are not unset. Docker Compose's ${VAR:-} yields an empty string, which defeats ?? defaults in Node. Every key goes through a helper that coerces "" to undefined , otherwise a provider with no key "exists" and fails every request. You cannot cheaply probe a token-per-day cap. My health check hits GET /models on each provider (auth check, 60s cache). It tells you "key works, service up", not "you have tokens left". The failover chain covers the gap: a TPD-capped provider fails fast and the next one picks up. If every provider is down, the page itself says so. The health check runs server-side at render time, and instead of a broken chat you get a short maintenance note. Never ship a chat UI that can fail after the user has typed. Open-weight models do not follow formatting orders My site's voice avoi

Let’s all assume we’re able to do whatever is possible with CSS/HTML/JS. (No typescript or node.js due to hosting restrictions) How can one use it for their animation/storyboard portfolio, unlike making something like a wall of displayed art, how can it be made interactive in a professional way? I’m more interested in ideas that use the strength of web itself, not just decorative effects submitted by /u/Enc7 [link] [留言]

submitted by /u/Impressive_Layer_867 [link] [留言]

submitted by /u/techie_e [link] [留言]

I'm working on a free SVG icon project called IconShelf and recently noticed something confusing. Analytics show decent traffic, but signups and conversions are much lower than expected. To investigate, I started reviewing sessions in Microsoft Clarity and found behaviour that makes me suspect that a significant portion of visits may be from bots, crawlers, or automated traffic. I'm already using Cloudflare Bot Management and several WAF rules. I'm curious how other developers handle this. What tools do you use to identify bot traffic? Do you rely on analytics, server logs, Clarity, or something else? How do you measure "real" traffic versus raw pageviews? Have you ever discovered that your actual human traffic was much lower than your analytics suggested? I'd love to hear what worked for you and any lessons learned from tracking user behavior and conversions. What is the solution from developer prospective? Here in the screenshot 70% are bots? https://preview.redd.it/19jsil0e5m6h1.png?width=2604&format=png&auto=webp&s=70591a9e33c635cfbaacc64c9af1b5800b6e2e74 submitted by /u/Parking_Pea5161 [link] [留言]

Background: I accidentally created a recursive loop with an AI agent that would have cost me $50+ in API calls before I noticed. Existing tools either cost money or only show you what already happened. So I built TokenFirefighter — a 100% free, local-only HTTP proxy. What it does: - Sits between your app and OpenAI/Anthropic on localhost:7272 - Tracks every API call cost in real time - Detects 4 types of runaway loops and blocks them - Has a terminal dashboard (no web UI needed) - Zero accounts, zero data collection, zero cost Install: npm install -g tokenfirefighter tokenfirefighter init tokenfirefighter start Then just set OPENAI_BASE_URL=http://localhost:7272/v1 in your .env. Would genuinely appreciate feedback from anyone who uses AI APIs regularly. GitHub: https://github.com/MohitBaghel24/tokenfirefighter submitted by /u/AdventurousMirror122 [link] [留言]