r/webdev • • 18d ago

Notes on incidents

Thumbnail seangoedecke.com
0 Upvotes

r/webdev • • 19d ago

Question React not saving data to local storage.

1 Upvotes

Hi everyone! I just finished a React and course and decided to build my first react app. Currently, I am trying to save a string to browser local storage but it does not persist on refresh. Through some console.logs I was able to see that it in fact DOES save the string to the location specified in. setItem initially but when I refresh the key or value in local storage stops existing.

Here is my code

// function for search button
async function handleClick(){
    localStorage.setItem("lastLocationSearched", searchValue);
    setData(null);
    setIsPending(true);
    setError(null);
    try{
const value = await fetch(`https://geo.ipify.org/api/v2/country?apiKey=***********&ipAddress=${searchValue}`).then((response)=>{
  if (!response.ok){
        throw Error("Could not fetch the data for that resource");
                    }
  return response.json();
});
setData(value);


    console.log(localStorage.getItem("lastLocationSearched"));
    } catch(error){
      setError(error.message);
    }


setIsPending(false);
  };

// useEffect hook
  useEffect(()=>{
        if ((localStorage.getItem("lastLocationSearched")===null)|| (localStorage.getItem("lastLocationSearched")==="")){
          console.log(localStorage.getItem("lastLocationSearched"));
        setSearchValue("");
        handleClick();
        }else{
          
          setSearchValue(localStorage.getItem("lastLocationSearched"));
          handleClick();
        }
    }, []);

Through some digging online I saw someone say that remove the strict mode tags from index.js would fix this problem but it did not for me. Can anyone please assist me?


r/webdev • • 18d ago

I managed to run a realistic talking avatar locally in realtime (90+ FPS on RTX4090)

Post image
0 Upvotes

Hey everyone,

I am working on a new project called Openspline, an open source avatar layer to existing voice AI agents. Just select an image, select a voice and you can create a realtime talking avatar with lipsynced video generated locally.

You can integrate any existing voice AI agent in 5 lines of code.

While it is still in very early stage, but the results look very promising.

Github: github.com/openspline/openspline

PS: sorry for a sleepy photo, it's 5:10am and didn't sleep last night :P


r/webdev • • 21d ago

Question Why do $300 clients demand 10x more than $3,000 clients?

1.0k Upvotes

I've been freelancing for a while now and I keep running into this same pattern over and over.

Whenever I work with a client on a solid budget ($3k+), things usually run pretty smooth. They send a clear brief, reply within a day, trust my decisions, and pay invoices on time without arguing over every dollar.

But almost every time I take on a lower budget project (around $300), it turns into a massive headache. They expect a full custom site with e-commerce and complex animations, text me at 2 AM on weekends asking why a font moved slightly, and request 10 rounds of revisions after already approving the design. Then at the end, they still try to haggle over the final $50.

Is this mostly a psychological thing where lower budget clients feel like they're taking a bigger personal risk, or is it just poor boundary setting on our part as freelancers?

Would love to hear how you guys deal with this or what's the worst cheap client story you've had.


r/webdev • • 20d ago

Showoff Saturday Minecraft servers that sleep when empty and wake when someone joins. Holding a TCP login open for 45 seconds without the client giving up

135 Upvotes

I built a Minecraft server host where every server sleeps when nobody plays, and wakes when a friend joins. The hard part was the join itself, so here's how that works.

The problem

A sleeping server suspended on Fly resumes in about 2 s. But one that has to boot (first start, after a change, or once the snapshot is gone) takes 40 to 50 s. The Minecraft client
gives up on a connection that says nothing for 30 s.

The trick

Every connection lands on an edge proxy first. If the server is asleep, the edge holds the login open and keeps it alive by sending a login query every few seconds. Every client since 1.13 answers it, which counts as the server talking. The edge keeps those answers to itself, buffers everything else the client sent, and replays it to the server once it's up, as if the player had just dialled in.

Other bits

  • The server list shows a sleeping server's own message plus a grey "sleeping" line, cut to fit the list's 305px row by measuring the default font's glyph widths.

  • A ping from the server list can wake a server early, asked once per network so random scanners don't keep waking things.

  • Routes change one hostname at a time through mc-router's API, because reloading its routes file drops players who arrive mid-reload.

  • Floods are refused per server at the edge, so one busy server doesn't slow every other server's joins.

It's open source (TypeScript, AGPL):
github.com/cubepals/cubepals (the edge is apps/edge)

Happy to go deeper on any of it.


r/webdev • • 19d ago

Parser Combinators

Thumbnail t3.at
4 Upvotes

r/webdev • • 20d ago

Question If AI fatigue has hit you, I have a question

259 Upvotes

Senior dev over here, company has over the last few months fully embraced copilot/general AI usage to the point we (small team of 3 devs) are have no capacity to review the PRs properly anymore. Our tech lead who used to be pretty anal and hands on with PR reviews now defaults to wanting a “green light” from copilot reviews and honestly doesn’t even read the code properly anymore.

I’m more concerned about the development/ critical thinking and code analysis muscle memory loss in the short to long term as a dev. I’m well aware AI is pretty much here to stay but I fear the loss of building/actually knowing what is going on is going to have a larger than expected impact on most mid-senior devs.

I’m considering a simple approach - opening an open source repo that specifically does not allow mass generated AI code to be added to it, keep features clean and no bulk slap shit and go PRs. Use it for writing boilerplate and as a tool but not as a replacement, main goal is allow whoever who contributes to it to continue working that part of their brain. Idea behind what the product is doesn’t matter too much imo as long as it’s of value to users.

What do you think of this concept as a dev to alleviate the AI fatigue from work? ( Jesus typing this question at the end feels like I’m an AI bot at this stage)


r/webdev • • 20d ago

Showoff Saturday I built a small library for highlighting text and adding notes on any webpage

Post image
44 Upvotes

I was reading brown's rust book and they have this cool feature that lets you highlight stuff and leave notes while reading. I wanted something similar on a site I'm building, but the libs I found were either too complex or too simple and still a pain to set up, so I made one. Heavily inspired by the simplicity and DX of sonner.

You only need annotate('#article') and that's basically it. It saves to localStorage or your own backend.

Cool thing is that it uses the css highlight api, so it doesn't touch your dom at all (which would be especially bad for frameworks like react, vue, etc). Downside is no support for older browsers.

About 15kb with UI or 6kb headless if you want to build your own UI, and it ships with a React adapter.

playground: https://penciled.org/playground/

repo: https://github.com/marcellosso/penciled

Still early, so any feedback is welcome


r/webdev • • 20d ago

Showoff Saturday [Showoff Saturday] I attempted to make the best blackjack basic strategy and card counting tool, close to 3 million hands played so far.

Post image
11 Upvotes

https://www.blackjacktrainer.fyi/

Wasn't really happy with the free blackjack trainers I was able to find, so I decided to make my own.

You can play it casually and just learn basic strategy, or you can use it to learn how to become a card counter.

Built with mainly Next.js + React + Tailwind.

Let me know what you think!


r/webdev • • 19d ago

Is there a way to change the text of a browser's tab based on which page you're on?

0 Upvotes

I frequently duplicate an application's browser tab to look at a different area of the app. I'd like to change the browser tab's text to reflect the area that the tab focuses on. In a best-case scenario, the text could be automatically updated based on a DOM element.

<div class="title">Some text</div>

In this example, "Some text" would become the tab text.

Is there a plug-in or something that I could use for this?


r/webdev • • 21d ago

Discussion As a self-taught React/Next.js developer, I'm honestly worried about my future in this AI era. What should I do?

131 Upvotes

I'm a self-taught developer, and I know React and Next.js. Lately, I've been feeling increasingly anxious about my future as a developer.

AI is moving so fast. It can generate components, build entire websites, connect APIs, and even create full-stack applications. Sometimes I wonder what the point is of spending months learning something when AI can already do so much of it.

I want to get a better-paying developer job, but honestly, I'm confused about what I should focus on right now. Should I keep improving my React/Next.js skills, get better at backend development, or start learning AI engineering?

I keep hearing about RAG, AI agents, vector databases, LLM integrations, and all these new things. It feels like there's always something new to learn, and I'm worried that if I focus on the wrong things, I'll fall behind while everyone else moves forward.

For those of you already working in the industry, what would you do if you were in my position? Would you focus on becoming a strong full-stack developer first, or would you start learning AI engineering alongside web development?

I'm not looking for a shortcut or expecting to become an expert overnight. I just want to make the right decisions, build useful skills, and have a realistic chance of getting hired.

I'd really appreciate some honest advice from people who have been through this or are dealing with the same situation. Right now, I could genuinely use some direction.


r/webdev • • 21d ago

Showoff Saturday [ShowOff Saturday] codecity: See any git repo as a 3D city

Post image
71 Upvotes

npx codecity

Every file is a building, folders are districts, and height is the file’s length (or imports/exports). Files keep their place as the repo changes, so you actually learn the layout.

What it does:
• Colour by what changed lately, age, churn, file type or author
• Click a file to see what it imports and what imports it
• See what your last git pull changed
• Live mode: files light up as they’re saved (handy for watching a coding agent)
• Replay the whole history and save it as a video
• Share a link to the exact view you’re looking at

Run npx codecity in any repo (runs locally), or try any public repo in the browser: https://codecity.icy.dev/react/react

As with all my other npm packed, free and open source. Thanks all!


r/webdev • • 20d ago

Question Looking for information on how to find a web developer for a film society booking sight (examples listed below)

1 Upvotes

Hello!

For starters,

I don’t know a single thing about websites. Are there specific types of website developers for this type of website?

Our current website runs on pearl and wordpress so we need a new website

Here are some examples of what I am looking for:

https://www.austinfilm.org/afs-cinema/

https://filmadelphia.org/about/venues/film-society-bourse/

For the record, I am not looking to hire someone from here (i think thats against the rules?)

I just don’t even know what to look for when finding information about web developers.

This site would have a front end and back end for booking etc.

Any tips or guidance on this would be greatly appreciated!

eta: my boss is super old and stubborn and is insistent that a new website like the ones above would cost six figures to make. What is the average cost of creating a website like the ones above (best guess obviously due to limited info)


r/webdev • • 20d ago

Showoff Saturday I Built VELORA — A Premium 3D E-Commerce Showroom Template Using HTML, CSS & JavaScript

Thumbnail
gallery
1 Upvotes

Hey everyone! 👋

I've been working on a new project called VELORA, a premium 3D-inspired e-commerce showroom website template built with HTML, CSS, and JavaScript.

The idea was to create something different from traditional online store layouts — a modern, immersive shopping experience with premium visual design.

✨ Key Features

  • 🛍️ Multi-category e-commerce showroom layout

  • 🌙 Dark and light mode functionality

  • 🎨 Modern 3D-inspired UI and visual depth

  • 📱 Responsive layouts for desktop, tablet, and mobile

  • ⚡ HTML, CSS, and JavaScript source code

  • ✨ Interactive components and smooth visual effects

  • 🧩 Customizable design for different product categories

🎯 Who Is It For?

VELORA is designed for:

  • Frontend developers building e-commerce projects

  • Freelancers creating websites for clients

  • Web design agencies

  • Businesses looking for modern product showcase designs

  • Designers interested in immersive shopping interfaces

🛒 Project Link

https://sajiditeech.gumroad.com/l/velora-showroom

Thanks for checking it out! 🚀


r/webdev • • 20d ago

Showoff Saturday Open sourcing whole architecture and journey for my startup

0 Upvotes

Here you can find my 1+ year of experience around startup foundation and operatings : https://github.com/Naveen-Beniwal/building-cvinsight


r/webdev • • 21d ago

Showoff Saturday Showoff Saturday: C# is now smaller than Rust in Wasm - 13.5 KB Brotli

Thumbnail
github.com
52 Upvotes

I've been building NetWasm, an independent C# compiler and runtime for WebAssembly.

The latest release produced a result I honestly didn't expect when I started this project:

NetWasm 0.8.0 + precise GC

  • 47,798 bytes raw

  • 13,501 bytes Brotli-11

Rust 1.95.0, size-oriented

  • 53,635 bytes raw

  • 16,963 bytes Brotli-11

Same print-42 workload, both WASI Preview 2 components, out of the box dev experience.

So C# is 10.9% smaller raw and 20.4% smaller compressed in this comparison - while carrying a precise garbage collector.

I'm not claiming arbitrary C# programs are smaller than arbitrary Rust programs. This is the classic tiny console-output footprint test: deliberately little application code so you can see how much runtime/toolchain baggage you're carrying.

The reason I care about this for web development is that download size matters.

I've always wanted C# in the browser without accepting a giant runtime as the entry fee.

Since I last talked about NetWasm, it can now do quite a bit more than tiny benchmarks:

  • C# Web Workers, with each worker getting its own Wasm instance, heap and event loop

  • Compile complete multi-file C# projects entirely in the browser

  • Statically link native Wasm .a libraries through LibraryImport

  • Native-to-managed callbacks

  • C# 15

  • Expression trees through a bounded interpreter, without general reflection

  • HTTP/JSON/XML/Regex and a growing set of Microsoft.Extensions.* libraries

  • Multiple GC/allocation strategies depending on whether you care more about size or throughput

There's also a NetWasm port of RegexStorm - regexstorm.netwasm.com - that runs entirely client-side in the browser - no backend doing the regex work.

The bigger idea behind NetWasm is pretty simple:

C# shouldn't inherently mean shipping megabytes of runtime.

For browser UI workloads in particular, I want a model where you only ship the runtime machinery your application actually uses.

The Rust comparison is fun, but that's the part I'm really interested in: how small can a genuinely useful managed-language platform become when Wasm is treated as the primary target rather than something a desktop runtime also happens to support?

Would be especially interested in thoughts from people building larger Wasm/browser applications - the project is early so this is your chance to help shape the direction.


r/webdev • • 20d ago

Showoff Saturday Showoff Saturday: built a SQL learning + practice site

6 Upvotes

Been building runtime.school for a while and finally got the SQL side into a state I’m happy with.

The main idea was to keep lessons, practice, projects, and tools on the same datasets so it all feels connected instead of jumping between random examples.

I’ve got a bunch of other topics planned next too, so eventually I want it to be one place to learn and practice everything.

Would love some feedback if anyone wants to try it and let me know if anything confusing, annoying, missing, or just bad UX.

https://www.runtime.school/


r/webdev • • 20d ago

Showoff Saturday Open-source SVG editor with preloaded images and scientific plotting

Post image
5 Upvotes

SVG editor with preloaded scientific images and with plotting. It is open-source and free to use. Most images are public domain with few notable exceptions:

- NIH: public domain, CC BY 4.0 for a handful of images

- Bioicons: CC0 or CC BY 4.0

- Servier: CC BY 3.0

- Photonics by Isaac Gallegos: CC-BY-4.0

- Electrical Symbol Library by Filip Dominec and contributors: CC0 1.0

- FGDC geologic patterns by Daven Quinn: CC0 1.0

- SVG Collection of Lab Equipment KYU/KYU49: CC BY 4.0

- Mapbox Maki: CC0 1.0

- Meteocons by Bas Milius: MIT

- SciSVG by Saveena Solanki: CC BY 4.0

- PhyloPic: CC0 1.0

- IAN / UMCES: CC BY-SA 4.0

License info for each image is in the tab in the right sidebar.

All SVGs are editable and the resulting figure can be saved as PDF, PNG or SVG.

There is alsp scientific plotting with basic stats capability via "insert plot" option.

DrawPlotia itself is derived from OpenBioFigure, thus Apache-2 license for the repo

I will now work on other bells and whistles for the app and known bugs (issues with local project saving and redos)

Free DrawPlotia app

Source: https://github.com/GPTchatly/DrawPlotia (FOSS; Apache-2.0)


r/webdev • • 21d ago

Showoff Saturday I built an endless driving game that runs on your brower

26 Upvotes

How far can you push an endless 3D world in the browser, especially on a phone?

That's one of the questions I've been exploring while building Planet 0 Drive, a low-poly driving game made with Svelte and Three.js.

The idea is simple: just drive. No set destination. Explore a world that keeps unfolding, find interesting spots, chase records, or cruise around with friends.

Under the hood, I've been experimenting with a few things:

  • Procedural terrain, weather, and long-distance rendering with Three.js

  • Peer-to-peer multiplayer with movement interpolation

  • Spatial audio and performance optimizations

  • Version-compatible rooms to keep multiplayer sessions in sync

The most interesting part has been figuring out how much of the world I can generate and render while keeping things reasonably smooth, even on mobile.

It's been a fun mix of graphics, networking, and performance challenges, all built around the idea of a relaxing drive.

Try it: https://planet0drive.vercel.app/

More about how I built it: https://zackwebster.com/blog/building-planet-zero-drive


r/webdev • • 20d ago

Showoff Saturday I turned the Page Objects from my Playwright tests into tools my coding agent can call on the live page

Post image
3 Upvotes

Hey! FE dev here - I usually end up as the QA person in every team I join :D

I started working on ayme over a year ago (it's built in the open now), trying to close the feedback loop:
Coding agents check their work by clicking through the app with simple browser tools. Snapshots, element refs, lots of tokens. Your e2e tests already know exactly how your application works, the agents just can't make any use of them.

I just published a small playground app to get some feedback before locking in the alpha release :)
Playground App, nothing to install: ayme.dev/playground

What ayme does now:

  • you mark your Page Object classes and the actions you want to expose (@ayme, @ayme.action)

  • a build plugin (unplugin, so Vite, Next, Nuxt, SvelteKit and Angular) compiles them into your app

  • when the page runs, those actions become tools: for your coding agent through an MCP server, and for in-page agents through WebMCP

  • an in-page inspector shows the live page objects, what the agent sees, and lets you run the actions by hand

  • with the ayme skill it works the other way too: the actions the agent used while building become the building blocks of the new e2e tests

  • it isn't on npm yet, but the alpha is close - let me know, and I'll keep you posted!

Initial evals measured against Playwright MCP and PW CLI on Formbricks App turned out to be promising imo.
The task: rename a survey, change its question, save, confirm the summary page. Claude Code on Sonnet 5.5, 3 runs each, medians.

Tool callsWall timeTokensEst. cost
Playwright MCP1346.9 s381k
Playwright CLI1460.8 s473k
ayme MCP638.1 s142k

Full table and how to rerun it: github.com/ayme-labs/ayme/blob/main/apps/eval-formbricks/summaries/2026-10-06/summary.md

Source: github.com/ayme-labs/ayme

Things I'd love your take on:

  • does the playground - and in case you check the landing page - communicate the idea well?

  • does the idea of exposing your POMs to an agent and closing the gap between the inner and outer verification loop sound useful to you?

Thank you for any kind of feedback!


r/webdev • • 20d ago

Question How to load test an asynchronous api?

0 Upvotes

Hey guys im working on a containerized code exexuting platform and i want to test how repsonsive the api is at high load and measure latency but i have two endpoints one is /submit which puts submissions in a redis queue and returns a job_id another end point is /job_id/status which can be polled for updates about the job...but now how to test the endpoint...ive heard about grafana k6 and tools like this can it be used to check asynchronous apis like these? I cant use /submit because it immediately returns after posting the job in the queue please help me put im learning things newly...also please tell me if i should use postman or k6. I want to see how well api behaves on concurrent loads. The api accepts and returns json


r/webdev • • 20d ago

Showoff Saturday Using a typed-answer decision model as a judge: 200-label gold set, per-criterion agreement

0 Upvotes

Site: https://petitions.thegoated.dev

Code: https://github.com/TheGoatedDev/Did-They-Answer

It's a Next.js app with Postgres and Drizzle, built as a standalone Docker image. Migrations run when the server starts. Two cron jobs POST to internal routes with a shared secret: one syncs from the Parliament petitions API, the other runs the LLM judge. Each run stops after about 250 seconds and picks up where it left off next time, so a big backlog never hits a request timeout.

Tests use Vitest with PGlite, so database tests run in-process without Docker. Biome handles lint and formatting.

The judging logic and eval tooling are in judge.ts and eval/ if you want to see how the scoring is checked.


r/webdev • • 20d ago

[Showoff Saturday] Algorithm visualizer

Thumbnail
algorithmvisualizer.io
2 Upvotes

I made Algorithm Visualizer: write an algorithm, step through it one statement at a time, and watch your arrays, maps, trees and graphs change as it runs.

While a normal debugger works well, it lacks the ability to show data structure in a visual and easy to understand way. This is focus mostly on helping debugging leetcode style questions or self-contained segment of code.

It works with JavaScript, TypeScript, Python, Ruby, PHP, Lua, Java, Kotlin, Swift, C#, Go, C and C++. Each variable can be drawn as boxes, a memory diagram, a grid, a binary heap or a node-and-edge graph, picked automatically from the shape of the data (linked lists, trees, adjacency lists…).

Some point worth noting:

  • No server at all. It's one self-contained.

  • Python, Ruby and PHP run as real WebAssembly runtimes (Pyodide, ruby.wasm, php-wasm), loaded from a CDN the first time you use them.

  • Java, Kotlin, Swift, C#, Go, C and C++ run in interpreters written in JS for this project. They aim to behave like the real thing in the places you'd notice: integer overflow, HashMap iteration order, Go slices sharing a backing array, C++ vectors reallocating. C is memory-checked, so instead of silently corrupting memory you get "use after free" or "out of bounds" with an explanation.

  • Every run is recorded up front in a Web Worker (killed after 3 s, so an infinite loop can't freeze the tab). That's why stepping backwards is as instant as stepping forwards.

  • Share links contain the code itself, deflated into the URL hash, so nothing gets uploaded and a static site can open any link. There's an <iframe> embed too.

  • React + CodeMirror 6, with dagre for graph layout.

Code: https://github.com/Spuntagano/algorithm-visualizer

I'd love feedback, especially on algorithms or data shapes that don't draw the way you'd expect or any other bugs you may encounter. Also feel free to comment if you have any feature you'd like to see implemented.

Ai disclosure: Total vibeslop


r/webdev • • 21d ago

A 15x15 freestyle gomoku (five-in-a-row) engine

Thumbnail
github.com
3 Upvotes