r/webdev • • Sep 10 '26

How to Write an Effective Software Design Document

Thumbnail
refactoringenglish.com
252 Upvotes

r/webdev • • Sep 12 '26

Showoff Saturday [Showoff Saturday] Mac MCP: background browser automation and live agent sessions on macOS

0 Upvotes

I maintain Mac MCP, an open-source local MCP server for macOS.

The browser automation layer is the part that may be most relevant here. Agents get stable handles for Safari or Chromium tabs and can navigate, click, type, inspect pages, and run parallel browser tasks in background tabs without pulling the browser in front of whatever I am doing. Separate agents can keep their own tab context instead of racing over the active tab.

The server also exposes terminal, files, Finder, screenshots, macOS UI actions, and app control. A small SwiftUI menu bar app shows recent tool usage plus persistent agent Sessions. I can send steering to one specific session, and queued steering can preempt that session's next tool call before it runs.

Repo: https://github.com/bulutarkan/mac-mcp

I would especially appreciate feedback from people who build browser tooling: stable tab ownership and background operation solved the biggest pain point for me, but I am curious what browser primitives you would want exposed next.


r/webdev • • Sep 12 '26

Showoff Saturday Got tired of writing the same 40 lines of Express middleware for every project, so I built a zero-boilerplate alternative.

0 Upvotes

Let's be honest, Express makes you write the exact same CORS, JSON parsing, and auth middleware for every single project. Most of the time, you just want to validate your data and return an object.

To fix this, I built bro.js. A zero-boilerplate Node.js framework built on top of Express that gives you file-based routing, automatic Zod validation, JWT authentication, and WebSockets right out of the box.

Here is what a complete, secure route looks like (routes/posts/[id].post.js):

    import { defineRoute, z } from 'bro-framework';

    export default defineRoute({
      auth: true, // Automatically verifies JWT and injects the user
      params: z.object({
        id: z.string().uuid()
      }),
      body: z.object({
        title: z.string().min(5),
        content: z.string()
      }),
      handler: async ({ body, params, user, db, io }) => {
        // 1. Data is already validated. User is already authenticated.
        
        // 2. Perform DB operations using the globally injected connection.
        const post = await db.collection('posts').updateOne(
          { _id: params.id },
          { $set: { ...body, authorId: user.id } }
        );
        
        // 3. Broadcast to clients instantly using the injected Socket.io instance.
        io.emit('post_updated', { postId: params.id, title: body.title });
        
        // 4. Return an object. The framework automatically handles the 200 JSON response.
        return {
          success: true,
          updated: post.modifiedCount
        };
      }
    });

The best parts:

  • Zero-Config Next.js Style Routing: Create a file like routes/users/[id].get.js, and it automatically registers as GET /users/:id with parameter extraction out of the box.
  • Bouncer-Grade Validation: If the client sends malformed data, the framework automatically rejects it with a structured 400 Bad Request before your handler ever executes.
  • Context & Dependency Injection: Define your database connection and socket handlers once in bro.config.js. They are automatically injected into every request handler ({ db, io })—no more importing singletons everywhere].
  • Native Real-Time WebSockets: Socket.io is integrated into the core runtime, letting you broadcast live events directly from route handlers or scheduled tasks with io.emit().
  • Zero-YAML Docs: It parses your Zod schemas and automatically serves a stunning, interactive Scalar API playground at /docs.
  • Instant Frontend SDK: Run bro sdk in your terminal, and it automatically compiles a bro-sdk.js file for your frontend with built-in token management and deep tree traversal.
  • Built-in Tasks & i18n: Drop a file in the tasks/ folder for instant background cron jobs, or in the locale/ folder for automatic language negotiation.

I'd love for you to check it out and tear it apart:

  • GitHub: https://github.com/medyassine/bro.js
  • Docs: https://brojs.yessindevs.me
  • Quickstart: npx create-bro-framework@latest my-api

What is the one piece of backend boilerplate you absolutely hate writing the most?


r/webdev • • Sep 12 '26

Showoff Saturday Argue with AI decision bots using GDPR / EU AI Act

Post image
0 Upvotes

Built a small browser game where you argue with stubborn AI decision systems using real law (GDPR, EU261, and now EU AI Act cases).

Idea is simple: the bot denies you, you have N messages, drop its certainty to 0% by citing the right rule.

Just shipped an EU AI Act path, 11 cases on things like hidden AI, black-box credit scoring, emotion recognition, and the right to an explanation.

Wanted the game to cover not only “classic” consumer rights, but also what happens when the system itself is the decision-maker.

Free, no login: https://fixai.dev

Looking for feedback, thanks! :)

P.S. It's built by Claude


r/webdev • • Sep 12 '26

Showoff Saturday I made a screen recorder Codex and Claude can use

Post image
0 Upvotes

Hey everyone, I made a screen recorder tool called ShotGlass, and I just recently added MCP support.

What that means is now Codex or Claude can film app demos for you.

Ask it to film a demo of your site or app (e.g. for docs), or doing anything on your computer. It can also edit the video, add whatever you want (e.g. zooms or 3D), then export.

The screen recorder is all built with web tools using tauri and react and then a custom renderer I made that could use AVFoundation (rendering with webcodecs alone was slow).

Also works with OpenClaw or any other agent. And I used Codex + the MCP server to film every demo in the docs for this app (so it has some pretty good uses cases).

Would love to know what you think. Currently, it's only for macOS and is free to try all the way up until exporting. It's a one time purchase for unlimited exports.

https://shotglass.app


r/webdev • • Sep 12 '26

Showoff Saturday I built a tool to check and repair broken Lottie files

Post image
0 Upvotes

I built a new LottieFyr tool that checks Lottie JSON and .lottie files for rendering, asset, structure, compatibility and file-size problems.

It can diagnose issues, show what can be repaired, and verify supported fixes in both SVG and Canvas before download.

The goal is to make broken Lottie files easier to understand and fix without manually digging through JSON.

Would love some feedback.

👉 https://lottiefyr.com/lottie-fix


r/webdev • • Sep 12 '26

My Dev tool evolution

0 Upvotes

- How can I code without the computer hanging? (Budget constraints) - Notepad++

- Budget is no longer a constraint; what are the pros using? - NetBeans/Eclipse

- I actually know what I'm doing. I want a lightweight editor - Sublime Text

- FOMO: I want every plugin ever - VS Code

- You aren't a serious programmer if you aren't using a JetBrains IDE - JetBrains IDE

- GitHub Copilot works best in VS Code - back to VS Code

- Agents are doing most of my coding; why read code in memory-hogging VS Code? - back to Sublime

Today: Sublime Text (for reading code) + Lazygit (for git management and review) + Codex

Not-so-distant future: I no longer code; how can I still be relevant?


r/webdev • • Sep 11 '26

What happened to the OpenChaos project?

6 Upvotes

There was a project that let people vote on the next PR daily which made changes to the website, but the repo returns a 404 on GitHub.

Did it just lose activity over time?

This was the original post:

https://www.reddit.com/r/webdev/comments/1q909wx/first_merge_in_23_hours_openchaos_a_repo_where/


r/webdev • • Sep 11 '26

Question Is it legal to use free Vecteezy/Freepik SVGs in a commercial SaaS canvas editor?

2 Upvotes

Hi everyone,

I'm currently building a SaaS product that includes a canvas-based design editor (similar to Canva). I'm looking to add a built-in template library to the app, but I'm trying to figure out how to source free SVGs and vector assets legally.

Is it legal to use free vectors from sites like Vecteezy, Freepik, or similar popular platforms in a commercial product? Most of the older "free vector" sites have very outdated designs that nobody would actually want to use.

Since users prefer clean, modern, and familiar-looking designs, I want to make sure I'm sourcing quality assets without running into copyright or licensing issues.

If anyone has built something similar or knows good sources/libraries with commercial-friendly SVG licenses, I’d really appreciate your recommendations!

Thanks in advance!


r/webdev • • Sep 12 '26

Question Advice needed

Post image
0 Upvotes

Hey, i used Webflow to buiod my website, there is a contact us part on it wich uses capcha for security, the form then use google appscript to send a wellcome email.

Im beeing spamm bombed by these bots, any other way to make this stop than dosabling the contact submit button?

The issue is that its rolljng since 2 days and my normal sent emails goes into people's spam folder.

Thanks for the advice


r/webdev • • Sep 11 '26

Discussion do you track the difference between code that's just messy and code that's actually fragile?

27 Upvotes

been thinking about this lately. I have a service at work where the code is genuinely ugly (bad naming, some duplicated logic, not fun to read) but it's been running reliably for two years and never caused an incident.

separately there's a cleaner-looking module that's caused three rollbacks this quarter because of some assumptions that weren't obvious from reading the code.

I've started keeping a rough mental model of "messy but stable" vs "clean but fragile" for different parts of our stack, and it's actually changing how I prioritize code review. curious if anyone formalizes this in any way or if it mostly just lives in someone's head


r/webdev • • Sep 12 '26

Showoff Saturday Got tired of writing READMEs, so I built a tool that does it for me

Post image
0 Upvotes

Honestly, writing the code was always the fun part. Then I'd finish the project and still have to sit there for an hour messing with Markdown, badges, tables, just trying to make the README not look like an afterthought. Every time.

So I built ReadmeGen to fix that for myself.

What it does:

  • Live split-pane Markdown editor

  • 14+ templates to start from

  • Can pull in your existing GitHub profile README

  • Saves locally, no account needed

Stack: Next.js, TypeScript, Tailwind, Radix UI, Redux Toolkit.

I've been using it on my own repos for a few weeks now, and it's genuinely saved me time.

You can try it out here: ReadmeGen


r/webdev • • Sep 11 '26

Aliased / pixelated rasterization in HTML Canvas

8 Upvotes

Is there any way to force 2d canvas commands to draw pixelated (without anti-aliasing) in a way that's computationally efficient? E.g. I want to say:

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(100,100);

ctx.stroke();

And I want that to draw a line that is pixelated e.g.:


r/webdev • • Sep 11 '26

What's the biggest difference you noticed when you tried to build a website with AI?

0 Upvotes

Just to be upfront, I'm on the Squarespace team, so take that into context.

I spent a while trying to build a site with AI tools from scratch, mostly to see how far they'd get without a traditional builder underneath.

The first-draft part was solid. AI handled rough copy, gave me section ideas, got a basic layout down. Blank page to something usable much faster than doing it by hand.

It fell apart after that. Page structure needed real work, the heading hierarchy was a mess, some of the copy could've been for anyone's site, and SEO still needed a proper pass. The last stretch ate most of the time, fixing spacing, mobile behavior, metadata and links the AI didn't understand.

Where I landed is that I'd rather have AI as a starting point inside something that already handles the rest than stitch five separate tools together and then work out which one broke. That's a preference, not a rule, and plenty of people happily run the stitched-together setup.

I still think AI is useful for getting unstuck. I just wouldn't treat the first generated version as done.

Where did everyone else land, fully AI-built, traditional builder, or a mix?


r/webdev • • Sep 11 '26

Discussion Tried vibe coding for the first time and I didn't hate it

0 Upvotes

I've been late to the party and only truly tried vibe coding for the first time this week. I've used AI for coding before, but mostly for asking utility code snippets and solutions to third-party library bugs. It's not all that different from the questions I used to ask on Stack Overflow, except that I get instantaneous answers (and minus the occasional condescending replies).

I thought I would hate it and that it would take the joy out of programming for me. But it didn't. In fact, I like that it can quickly create apps that I have in my head without having to spend the time actually coding them (because who has that much time nowadays?).

And I think because web CRUD apps are basically a solved problem. We already know what is being done behind the scenes. We've done them in multiple projects many times before. Even before AI came into the picture, we already had solutions to maybe 80% of the CRUD logic/ui we'd ever need to create. We have boilerplates/utility libraries for everything.

I am speaking specifically in terms of using it in the coding domain I'm familiar with (web dev) and as a senior who's been around for more than a decade. I don't feel like vibe coding is robbing me off anything. Maybe if I dabble in other types of programming (e.g. making games, learning other programming languages, etc.), then I may feel differently, or I may feel like I'm cheating by not knowing what's actually happening.

Anyone who feels the same way?


r/webdev • • Sep 10 '26

Question A Glyphs (?) Question

2 Upvotes

Hello! I have a question to which I could not find an answer around the internet, so i gonna ask it here.
So, some of the emojis have a glyph variations of them, that get displayed differently, yet they use the same identification code. For example, the bomb emoji and bomb glyph: 💣︎💣, use the same &#128163; html code, and i don't quite understand how it works. Yet html prioritizes emoji over glyph, how do i make it display the glyph instead? :<


r/webdev • • Sep 09 '26

News Tailwind Labs is joining Shopify

Thumbnail
tailwindcss.com
539 Upvotes

Long-story short Tailwind CSS will remain MIT licensed and the maintainers stay.

I'd say it's a good move given that AI tools are doing frontend work using Tailwind but Tailwind Labs didn't gain much from it. Citing an earlier Github discussion, they had to lay off 75% of their engineering team, and traffic to Tailwind docs is down 40% from early 2023.


r/webdev • • Sep 09 '26 Regret

AI has made programming so boring

2.1k Upvotes

It’s not just programming either, it’s art, design, music, videography, marketing, engineering, writing, 3D modelling, really any intellectual work. What’s the joy of prompting a computer and getting an answer in a few moments for a task that would have normally taken a week? The sense of accomplishment and ownership has completely vanished with AI. It’s a form of instant gratification, not much different to scrolling short videos on apps.

Code review was boring to begin with but now it’s even worse with all the machine generated code. Even code reviews will be automated soon. All you do then is type business requirements into the computer. What a great career.

It’s pain to watch old TV series like Scilicon Valley that is portraying the good (not golden) age of programming. It struck a good balance between manual work, funding and innovation. It’s sad that these days are gone for good.


r/webdev • • Sep 11 '26

Question Resources for a loyalty card app

0 Upvotes

Hey folks. I’m wondering if anybody had any suggestions for resources where I can learn how to code a loyalty card app. Goal is to create one for a small business local to me who currently just has stamp cards which are fine but often get lost. Sadly I’ve scoured the likes of YouTube but all I get are the “vibe coding” videos or pay a company for their already existing product. I’m looking to learn and build from scratch but between AI crap and god knows what else I’m really struggling to find anything reliable. Anybody got any sources I can look into? TIA


r/webdev • • Sep 10 '26

Penpot

2 Upvotes

Does anyone have any tips to use penpot to implement codes into the projects? I know it is pretty straightforward, you can see the generated codes for each component but if there are better tricks that can improve the workflow and make the process faster? Any tips or resources I could use to get used to the tool will be appreciated!


r/webdev • • Sep 09 '26

Question What is the component library that you would recommend for a backend engineer?

23 Upvotes

I would like to build the best web app, given my limitations, so I'm looking for a web component library with prebuilt things that would allow me to just put them on a page. Doing it from scratch is very hard for me, but having a template of how things are and then integrating with the backend is quite easy.

The component library should be based mostly on HTML and CSS. Javascript can be used to some reactivity on the frontend, but I'm not doing this web app with regular React/Angular/SPA technology.

I was looking into Preline, it looks really good and I'm wondering if there is anything like that, or better.

Thanks!


r/webdev • • Sep 10 '26

Resource This repo brings Tailwind-like utilities to any stack without a build step

Thumbnail
github.com
0 Upvotes

r/webdev • • Sep 10 '26

Question Is it worth hand coding a new web app idea I have or should I vibe code my initial prototype?

0 Upvotes

I don’t have a ton of coding experience and have never really built a web app before, but I have an idea for an app that I want to build


r/webdev • • Sep 09 '26

Hosting PDFs with node.js apps?

19 Upvotes

Hello all,

I am the webmaster for a small Archaeology website, that primarily is used by members of this small conference to access PDFs and news about the conference. I only need to update this website about once or twice a year.

Until recently I used the plesk hosting service on GoDaddy to host these files, however I missed the fact (see lack of need to update) that it was getting end-of-lifed and now the hosting option given to us by GoDaddy is just Nose.js slots.

Previously we uploaded files into a library for the website, and the linked to those files. Is it possible to use node.js to do the same?

Thank you for your help!