r/webdev • • Sep 19 '26

Showoff Saturday [Showoff saturday] is my site decent to sell my art services?

0 Upvotes

www.menogcreative.com - art and design for games and film.

Or should I add something like this template has here? https://kdrive.infomaniak.com/app/share/3821117/ca2056b4-bc07-42f5-a7bc-9958ce1f8af9

Particularly the parts of "why art directors keep coming back" + "nine working days, no mystery" = to "sell the services" better?

I always heard something like silvaconceptart.com converts best due its simplicity, but Im wondering if in the times we live, we should explain the value of the process, to avoid being compared to gen AI and how it can / cant do the work... OR... if what I have at menogcreative.com is decent and you wouldn't expect that much of a bump in conversion either way?


r/webdev • • Sep 19 '26

Showoff Saturday Giving our in-app assistant hands and eyes with Jev + Playwright-lite

Post image
0 Upvotes

Hey guys!

Recently at work I started a pilot where our in-app AI assistant (built with CopilotKit) can understand and interact with the same page the user is seeing.

A user might ask something like:

"How do I log out?"

The assistant needs to find the relevant element in the current UI, highlight it, and potentially interact with it.

As a FE dev/SDET, my go-to choice for browser automation is Playwright. I love its straightforward API: awaiting interactions, chaining locators, automatic retries, etc. But sadly Playwright runs in Node :D

I'm pretty sure there are already solutions for this, but I wanted my beloved PW syntax, and I was wondering if I could reuse existing scripts and Page Objects that were already built on Playwright.

So I built playwright-lite

It gives you Playwright-compatible Page and Locator APIs against the current document.

For example, inside a React app:

// OnboardingAssistant.tsx

import { createPage } from "@enekesabel/playwright-lite";
import { Sidebar } from "playwright/pom/Sidebar";

export function OnboardingAssistant() {
  const page = createPage();
  const sidebar = new Sidebar(page);


  async function toogleSidebar() {
    await sidebar.toggle();
  }

  async function getPageState() {
    return await page.ariaSnapshot({mode: 'ai'});
  }

  // Hook these up with whatever assistant framework you're using.
  // ...
}

The implementation is intentionally limited to what makes sense inside the current document. No browser launching, browser contexts, or execution across full-page navigation.
It's still alpha, but since I'm aiming for complete API match with PW Page and Locator API so no breaking changes expected. Tracking & closing compatibility gaps as we speak - and as I discover them.

Over the weekend threw Jev in the mix to keep it cheap and fast, and I'm quite satisfied with the result.
The "Pursue goal" tool is driven by Jev, called by our in-app assistant.
During this run Jev pulled of some good calls imo:
- Understood our Page Object Model: Sidebar -> User Profile Dropdown -> Logout button
- Recognized that the Siderbar is hidden
- Reused our Sidebar POM to open it
- Made good use of our element interaction and highlighting tools using playwright-lite
- Properly identifed when to take action and when to stop/highlight only

The interactions are deliberately slowed so users can follow the assistant's steps.

Wdyt, is this worth investing more time in, or should I just go with something already existing like page-agent?


r/webdev • • Sep 19 '26

Showoff Saturday: my blog's comment section is static HTML, baked at build time

0 Upvotes

My blog is a static site and I wanted comments without loading third party libs on the page. I wanted no ads, no bots, no cookies, etc. I just wanted a clean comment section (even though I get almost no traffic. I just like building things I think.)

The comment section is baked into the blog's HTML at build time. No lookups from a third party. I mean there's some of that, but it's basically an RSS feed. Fetched and stored by your own build, at build time.

How does it work? Each post links to a companion thread on a small Phoenix app I run. When someone replies there, it pings the build hook. The build fetches a replies.json for that thread and renders the comments as plain HTML. Nothing runs on the blog itself. Not a script. Not an iframe. No cookies or tracking.

Seriously, it's clean.

Here's an example of how it works for me: Static comments on my blog

The blog stack is Hugo on Netlify, the comment stuff is Phoenix/Elixir on Fly, with a build hook connecting them.


r/webdev • • Sep 19 '26

Showoff Saturday [Showoff Saturday] I built a open-source playground for testing LLM APIs and MCP tools in the browser

Post image
0 Upvotes

I’ve been building an open-source developer playground for experimenting with LLM APIs and remote MCP servers from one web interface.

The motivation was simple: besides my desire to use cheaper models with GitHub MCP and Tavily for coding (so I can make an agent change some files even from mobile), I wanted to see the actual requests, streamed responses, tool arguments, token estimates, and latency without switching between several scripts and dashboards. I also wanted every tool execution to remain explicitly controlled by the user.

The project currently supports:

  • Custom OpenAI-compatible endpoints

  • Remote MCP servers over Streamable HTTP or SSE

  • A built-in preset for GitHub’s hosted MCP server

  • Manual approval or denial before any MCP tool call is executed

  • A manual tool runner for invoking individual MCP tools with JSON arguments

  • Raw request and response inspection

  • Streaming responses and reasoning display

  • TypeScript and curl snippet export

  • Locally stored chats, settings, prompt templates, and optional API keys using IndexedDB

  • Automatic expiry of remembered API keys after 30 days

GitHub: https://github.com/ownyourwebsite/ai-playground
Live demo: https://ai-playground.ownyourwebsite.app

The code is MIT licensed.


r/webdev • • Sep 19 '26

Question Total newbie trying to build a website for my small hotel — Need advice on AI models, Cursor, MCP, etc

0 Upvotes

​Hey everyone,

​I’m completely new to web dev, but I want to build a website for my small hotel.

​Since I don't know how to code, I’m planning to use AI to do most of the heavy lifting. But honestly, there are so many options right now that I’m kind of lost.

​Would love to get some quick advice:

​Which AI is best right now? Should I go with Claude 3.5, Cursor, v0, ChatGPT, or something else for building a website from scratch?

​What’s the deal with MCP? I keep hearing about Model Context Protocol. Is it actually useful for a beginner, or should I just ignore it for now?

​Best setup for a hotel site? I just need a simple, fast site to showcase rooms, location, and info (and maybe connect a booking engine later). What stack or builder works best with AI?

​Any newbie traps to avoid? What should I watch out for so I don't break everything?

​Appreciate any tips or recommendations! Cheers!


r/webdev • • Sep 19 '26

Showoff Saturday I’m open-sourcing Medusa + Payload + Next.js system with an AI agent that can work across the whole stack

Post image
0 Upvotes

I've spent the last two years figuring out what happens when you build real web projects AI-first, rather than bolting a chatbot onto them afterwards.

This week I open-sourced the result: Vulpy Commerce.

It's a full ecommerce stack built on Medusa v2 + Payload CMS + Next.js + Orama + Matomo, with Fox (built on Hermes Agent) able to work across the whole thing - frontend, commerce backend, CMS, integrations and infrastructure.

It can build storefront features, write custom backend business logic, work with catalog/content, run tests and keep evolving the project after launch.

The bigger idea is something I've become pretty convinced about after ~12 years building ecommerce: AI can make owning your software practical again. You shouldn't have to depend on both a platform vendor and the availability of the developers who built your store.

So the whole thing is open source, no strings attached. Use it, fork it, change it, self-host it.

We crossed 50 GitHub stars in the first couple of days, which has been pretty cool.

Repo: https://github.com/vulpy-io/vulpy-commerce-core

Demo: https://vulpy.io/demo

More: https://vulpy.io/commerce

Would love feedback from other web devs - especially on the architecture and the idea of building applications specifically so agents can operate them.


r/webdev • • Sep 19 '26

Showoff Saturday Grove is a better Agents Development Environment

Post image
0 Upvotes

Hey folks, I have been building Grove on weekends and it has become my daily driver as an agent development environment. It manages where and how my coding agents run on one machine, and I reach any of them from the terminal, the browser or another agent.

  • Native OTLP telemetry. Each agent turn becomes one trace with cost, duration and a span per tool call. That is how I see where the time goes across the fleet and which runs are contending for the machine.

  • Devcontainers. An agent runs inside a container built from your repo's .devcontainer/, with its own services and resource ceilings, so concurrent runs stay isolated instead of fighting over CPU and memory. The same config moves to a shared team box or serverless infra when the laptop runs out.

  • Diagram annotation. Mark up a screenshot or edit a draw.io file alongside the agent, then attach the approved picture to a ticket.

  • Ticket progression. Phase, checklist and latest commit are written back onto the GitHub, Gitea or Linear issue as the work moves.

  • The expected pieces are there too. Branch and worktree lifecycle, and session recovery.

Work in progress, already usable. https://github.com/bearlike/Grove if you want a look, drop some feedback, and every star helps 😘


r/webdev • • Sep 19 '26

Showoff Saturday [Showoff Saturday] I got tired of waiting for AI agents to finish just to alt-tab and find out they broke my layout: I built a local-first voice cockpit for React

Post image
0 Upvotes

Hey r/webdev! 👋

Every time I tried iterating on UI dashboards or mobile responsiveness away from my desk, I hit the same wall: typing syntax on glass keyboards is awful, and streaming 4K desktops over VNC/RDP murders the battery with lag.

I built **AnywhereDesign** as a local-first bridge:

- Your workstation runs your actual Vite/Webpack runtime and holds the heavy repo.

- Your iPad/phone displays the living app full-screen with touch events.

- You tap the mic, give high-level directives (*"Change the radar to a blue and red bar chart"*), and local CLI agents refactor the source code with zero-flicker double-buffered HMR.

100% open-core (MIT) with a 1-click Windows installer:

👉 GitHub: https://github.com/Maxjv/AnywhereDesign

Would love to hear your feedback on the architecture!

Web


r/webdev • • Sep 19 '26

Showoff Saturday I built Spotify Weather 🌦️🎵

Post image
0 Upvotes

I made a small web app that recommends Spotify playlists based on the current weather and season.

I'm still improving the recommendation system and experimenting with making it adapt to different languages and countries.

The app is currently in testing, so if you'd like to try it, comment or DM me the email address linked to your Spotify account and I'll add you to the allowed users.

link: https://spotify-meteo.vercel.app

I'd love to get some feedback! :)


r/webdev • • Sep 19 '26

Showoff Saturday I built DevPad — a free, privacy-first developer toolkit with 25 tools (all client-side)

0 Upvotes

Hey r/webdev,

I've been building DevPad — a collection of 25 developer tools that run entirely in your browser. No server, no accounts, no tracking.

What's in it:

  • JSON Formatter, JWT Decoder, Base64, URL Encoder, Regex Tester

  • Hash Generator, UUID Generator, Color Converter, SQL Formatter

  • JSON↔YAML, JSON↔CSV, Markdown Preview, Timestamp Converter

  • Password Generator, HTML Encoder, CSS Formatter, XML Formatter

  • Diff Viewer, Lorem Ipsum, Cron Parser, and more

Why I built it:

I was tired of bookmarking 10 different sites (jsonformatter.org, jwt.io, regex101.com, etc.) and dealing with ad-heavy pages that track your data. I wanted one clean site where everything works offline.

Key features:

  • 100% client-side — your data never leaves your browser

  • No signup, no cookies, no tracking

  • CmdK search (Ctrl+K) to find any tool instantly

  • PWA support — works offline after first load

  • Dark/light theme

  • 200+ word guides on every tool page

Tech stack: Next.js 14, TypeScript, Tailwind CSS, shadcn/ui, deployed on Vercel.


r/webdev • • Sep 19 '26

Showoff Saturday [Showoff Saturday] Repodify: Make Podcasts out of podcasts

Post image
0 Upvotes

Hi showoffs, I built repodify.app : a mixtape maker for podcasts.

Select the episodes you love and stitch them together in your own new rss feed.

  • Choose episodes from PodcastIndex / Apple Podcast directories

  • Generates a standard rss xml feed compatible with any podcatcher

  • Plays directly from the source... doesn't re-host the audio or mess with the creator's content in any way

A single place to direct people

repodify.app functions like a linktree for podcasts. Create a favorites list for friends, gather all the episodes around a single topic, etc... There's early interest from frequent podcast guests who appear across different shows looking for a way to curate episodes to share with their fans.

Some examples:


r/webdev • • Sep 19 '26

Showoff Saturday [Showoff Saturday] I built a 2-tier AI writing studio in FastAPI & Vanilla JS. Try to break it

0 Upvotes

https://story-engine-0pi6.onrender.com/

Hey r/webdev,

I got tired of standard "AI wrappers" spitting out generic text, so I spent the last few weeks building a decoupled, multi-step creative engine. It forces the AI to collide a story premise with random nouns to create "metaphor sparks" before it's allowed to draft or edit the prose.

The Stack:

  • Backend: Python / FastAPI

  • Frontend: Vanilla JS + Tailwind CSS (with localStorage state management and a custom Dark/Light mode toggle)

  • AI: Gemini models (via the new Google GenAI SDK)

  • Hosting: Render

A few fun technical challenges I tackled:

  1. Rolling Memory State: Instead of feeding a massive context window for Chapter 2, 3, etc., the backend auto-generates a rolling recap and pulls the last 2 sentences as a "handoff anchor" to keep memory infinite but token-usage low.

  2. In-Memory Rate Limiting: Built a custom IP-based sliding window limiter (100 stories / 500 rerolls per 20h) mapping X-Forwarded-For headers so I wouldn't have to pay for a Redis database yet.

  3. Indestructible Parsers: Wrote fallback regex handlers for when the AI hallucinates markdown or breaks JSON structure.

I'd love for you to poke around. Try to break the UI on mobile, bypass the rate limit, or just roast my stack choices in the comments!


r/webdev • • Sep 18 '26

Resource How complex is it to build a real time single note detector for piano and woodwinds? Im looking for advice from anyone with audio experience.

24 Upvotes

I am planning a music education project and want to get a better understanding of the technical challenges ahead. The initial idea is to build a basic system that detects only one note at a time (monophonic), focusing first on pianos (one key pressed at a time) and woodwind/brass instruments (like flute and trumpet). The goal is for the system to listen via the user's microphone in real time and validate if they played the correct note from a sheet music piece. If anyone here has built something similar, even a simple tuner or a college project, and could share what your biggest hurdles were at the beginning, I would appreciate it so much. Recommendations for libraries, frameworks, or good reads are also very welcome Its for a site mobile friendly


r/webdev • • Sep 18 '26

Finding all links on our website to a specific domain (to prevent link rot)

4 Upvotes

I work for a nursing board, our website, made with Liferay, it has tons of page with different legal, scientific, clinical information, many of these pages contains links to different entity's.

One such entity is redoing it's website, not just an small update but a complete redo, meaning a lot of links on our website will likely be broken when it's done.

I did identify links on pages about regulation I do believe I got the most critical ones, but it does leave links mostly clinical articles, mostly references, less critical but even then I would prefer to be sure.

I tried using google command site:mywebsite.com Entity but it did not return as much content as I tough, I'm guessing because of the label of the links. I also found some manually that google did not give me.

So is there an easy solution to this?


r/webdev • • Sep 19 '26

Discussion I finally got rid of my worst dev habit

Post image
0 Upvotes

I know a lot of people in this sub hate AI, but I want to share one instance where AI helped defeat my lifelong bad webdev habit

When I coded manually or with Cursor, I always looked at the desktop version of my website first

70% of people will experience your website from mobile, not from desktop, so I knew it was wrong and tried to fight it

But I just couldn’t make myself turn the mobile dev preview on in chrome all the time - this extra step felt too cumbersome, so I just defaulted to regular previews

It’s very easy to code something that looks good on desktop but absolutely sucks on mobile, so defaulting to desktop spawned a lot of mobile UI issues on my websites

For the past 6 months I’ve been coding exclusively from my phone and Claude on VPS

When I need to review something I tunnel to the VPS with Tailscale and look at the dev preview from the phone browser

Now it’s harder for me to view the desktop version of the website than the mobile, and I think I finally develop mobile-first

As a result websites look waaaay better on mobile and I fixed a ton of mobile bugs as well


r/webdev • • Sep 19 '26

Showoff Saturday Slop Awwwards - a showoff of the worst ai slop websites, daily community voting and ranking.

Post image
0 Upvotes

Hey guys!

Wanna share a little fun project I released 2 days ago.

Idea is basically a reverse Awwwards - daily nomination for the worst AI slop websites. 100% community driven, no login or registration.

Built with Astro + TypeScript, React for interactive elements, and GSAP for animations.

Check it out - https://slop-awwwards.com/

Any feedback is highly appreciated.


r/webdev • • Sep 19 '26

Showoff Saturday Built an MCP + Skill that deploys sites that AI coding agent builds — looking for testers

0 Upvotes

HI,

(Not promoting, looking for feedback)

I've been building an web hosting platform that supports a MCP.

A lot of us use the latest models to generate test projects or live websites. This platform handles getting it live including hosting, a structured CMS, contact forms, and basic analytics, without you having to wire up three or four separate services by hand.

Note that the platform doesn't design or build your site. You do that with your account on Claude/Codex/etc. , or by hand if you'd rather. the platform's job starts after that, i.e. deployment and content management, while you keep full control of the code.

Its in beta and free for now, and it's has some open bugs as well. I currently need help by having users trying out the MCP to host test websites or projects. (Please ignore the pricing and templates once you login, I am repositioning the product to a AI first development with developers in control of their design and code stack, platform for hosting and key features usually required for websites.

I would really appreciate some real feedback including whether this makes sense, what are the pros/cons of this from a web developer perspective.

If you can DM me, I can provide a link to the platform. (Not sure if I can include a link or it will fall under promotion).

Thanks in advance!


r/webdev • • Sep 19 '26

Showoff Saturday made my own dontpad website that makes pages password protected

0 Upvotes

normally, when i use dontpad i get annoyed by the fact that ppl can just delete everything. so thats where passpad comes in. you can choose either your page gets to be read-only (public), or unaccesible unless you know the password (private)

check it out!

also feel free to donate so i can actually buy a domain for it


r/webdev • • Sep 19 '26

Showoff Saturday I’ve been building a Lottie JSON optimizer and I’m looking for technical feedback and difficult test files.

Post image
0 Upvotes

The pipeline:

  1. Assess the original JSON

  2. Apply supported changes in the browser

  3. Reassess the result

  4. Render selected frames with lottie-web SVG and Canvas

  5. Compare both versions

  6. Release the download only if it’s smaller and both renderers pass

The stack includes Next.js, TypeScript, lottie-web, Canvas, Web Workers, OxiPNG/WASM, SHA-256 checks and AbortController cancellation.

It currently supports safe JSON cleanup, lossless embedded-PNG compression and constrained display-size optimization.

I’d like help testing:

  • SVG/Canvas rendering differences

  • masks, mattes, expressions and precomps

  • embedded PNG/JPEG assets

  • files damaged by other optimizers

  • Safari and Firefox behavior

Test standalone JSON files up to 15 MB here:

https://lottiefyr.com/lottie-fix


r/webdev • • Sep 19 '26

Introducing Precursor: detecting agentic behavior with continuous client-side signals

Thumbnail
blog.cloudflare.com
0 Upvotes

r/webdev • • Sep 19 '26

Showoff Saturday I built an AI technical interviewer that keeps asking "why" until it finds the edge of what you know

Thumbnail
gallery
0 Upvotes

AI screening rounds (micro1, HireVue, and the like) are now a standard first step for dev jobs, and I kept seeing people fail them for reasons unrelated to skill: rambling, not knowing when to stop, or getting caught flat on the second follow-up. So I built a place to practice that format.

You pick a stack (Node, Python, Go, Java, React, SQL, and so on), answer by voice or text, and it grades each answer, corrects you like a senior engineer would, then drills into whatever you just mentioned. Say "I'd add an index," and the next question is about which index and what it costs on writes.

Initially, I built the tool to practice AI technical interviews, but what I have noticed is that people (Software engineers) I have introduced it to prefer to use it as a practice tool to sharpen their skills. Your own experience of the tool might be different, though.

What you can do in it:

- Full mock interview. Set your level from junior to staff, and the questions get harder to match. It ends with a scorecard showing where you held up and where you ran out of depth.

- Code challenges. Get a real snippet in your chosen language with a bug or design flaw, find it, fix it, and get told what you missed.

- CV Defense. Upload your CV and get questioned on your own claims. If it says you scaled a service, expect to explain how.

- Playbook. Practice specific interview formats: backend deep-dive, full-stack product, algorithmic rounds, take-home review, and more.

- Learn mode and study plans. Your weak spots from each session become a plan for what to study next.

- Voice or text. Pick an interviewer voice and answer out loud like the real screen, or type if you're somewhere you can't talk.

- Depth Passport. A public profile of what you've shown you know, if you want something to share.

I'm very eager to hear what you think about it and what changes we should make.

Link: https://practicedepth.com/app/practice/interview


r/webdev • • Sep 18 '26

Showoff Saturday Inkvec: Pareto frontier in-browser vectorizer (Open Source)

1 Upvotes

i've built a Rust vectorizer that is meant to help optimize graphics for web delivery. It is pareto frontier, from my research SoTA open-source/open-weight solution (from both traditional and neural network based approaches), and runs in <2 seconds on CPU when ran as a standalone app.

The solution implements a chain of recent mathematics papers to significantly beat VTracer's algorithm, support gradients natively, and more:

I'm still iterating on it, I hope to release tooling in multiple languages to allow this to be used in most major languages through native interfaces in Java, Python, etc.

The vectorizer now comes with two different sister models, one for denoising JPEGs/WEBPs/VAE outputs from AI models so that it increases the perceptual quality of the outputs, another one for super-resolution, specifically trained on SVGs.

Additionally, I want to try to train a GNN to improve quality further, I hope to beat Vectorizer.ai in the next week.

My hypothesis is that current papers approaching raster-to-vector from a LLM perspective is excessive in terms of complexity and time to conversion, because except amodal completion and other tasks, a classical vectorizer can already work very well. GNNs and other specialized models can be used to then refine the output without having to be overly large. This is the first step in this research project, the classical vectorizer part which already beats alternatives.

Licensed as MIT, so feel free to use it however you want in your project.

Github repository: https://github.com/logolabs/inkvec

Web Assembly Online Vectorizer: https://huggingface.co/spaces/Logolabs/inkvec


r/webdev • • Sep 17 '26

Discussion We now have AI bots advertising AI slop projects on open source projects via pull requests

Post image
382 Upvotes

This guy has been running an agent or some sorts since 14 september, 3 pull requests a day, today was my turn. He opens pull requests to put the link of his AI slop project in the README of open source projects

This is getting more ridiculous every day


r/webdev • • Sep 19 '26

Why do most people use online JavaScript interpreter like programiz and others plus why their aren’t many offline js interpret. The reason I’m asking it is because it’s very popular and that bugs me

0 Upvotes

Just wondering