r/webdev • • Sep 01 '26

Monthly Career Thread Monthly Getting Started / Web Dev Career Thread

50 Upvotes

Due to a growing influx of questions on this topic, it has been decided to commit a monthly thread dedicated to this topic to reduce the number of repeat posts on this topic. These types of posts will no longer be allowed in the main thread.

Many of these questions are also addressed in the sub FAQ or may have been asked in previous monthly career threads.

Subs dedicated to these types of questions include r/cscareerquestions for general and opened ended career questions and r/learnprogramming for early learning questions.

A general recommendation of topics to learn to become industry ready include:

You will also need a portfolio of work with 4-5 personal projects you built, and a resume/CV to apply for work.

Plan for 6-12 months of self study and project production for your portfolio before applying for work.


r/webdev • • 16d ago

Monthly Career Thread Monthly Getting Started / Web Dev Career Thread

5 Upvotes

Due to a growing influx of questions on this topic, it has been decided to commit a monthly thread dedicated to this topic to reduce the number of repeat posts on this topic. These types of posts will no longer be allowed in the main thread.

Many of these questions are also addressed in the sub FAQ or may have been asked in previous monthly career threads.

Subs dedicated to these types of questions include r/cscareerquestions for general and opened ended career questions and r/learnprogramming for early learning questions.

A general recommendation of topics to learn to become industry ready include:

You will also need a portfolio of work with 4-5 personal projects you built, and a resume/CV to apply for work.

Plan for 6-12 months of self study and project production for your portfolio before applying for work.


r/webdev • • 10h ago

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

525 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 • • 8h ago

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

105 Upvotes

Senior dev over here, company has over the last 8 months fully embraced copilot/general AI usage to the point we (small team of 4 devs) are have no capacity to review the PRs properly anymore. Our CTO 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 • • 15h 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?

72 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 • • 34m ago

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

• 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 • • 15h ago

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

33 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 • • 2h ago

How can I increase my site speed?

Thumbnail
gallery
3 Upvotes

So long story short I migrated my website form Shopify to Wordpress and then initially it was almost 75 for mobile and 90 for PC.
So naturally i optimized it and no it is 40-60 for mobile and 80 for PC.
Here is what I did:
(My product pages are most bad in this.)
1. I did changed the format of images to webp (using Webp optomizer ) and when I used elementor then it really went down.
2. When I use searched online I almost did all of the things.
3. Using JS and CSS minify only decrease the speed drastically.
4. Using lazy load my speed is also very bad.
5. I used custom php to exclude the hero and other first load images form the lazy load.
6.I did all the cahce setting in litespeed chache and still nothing.
7. My most bad thing is LCP and FCP.
8. I also disabled the fonts which were additional.
I also have a bit more then average CSS and a bit JS in my site.
Can you please hepl me in this regard.
here are some screenshots.
And using VPI and lazy load really cause it to slow.
can someone at least tell me some tool to diganost the problem


r/webdev • • 18h ago

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

Thumbnail
github.com
44 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 • • 8h ago

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

3 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 • • 2h 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 • • 6h ago

I built a free tool to practice public speaking: RhetoGym

2 Upvotes

Hey everyone!

I kept freezing up during speeches and presentations, so I built RhetoGym (https://rheto-gym.vercel.app).

It’s a 100% free web app designed to help you practice speaking out loud:

🎲 Random Topics: Gives you a quick prompt to talk about

⏱️ Built-in Timer: Helps you keep your answers clear and structured

⚡ Zero Friction: No sign-ups, no ads, no paywalls

Check it out here: https://rheto-gym.vercel.app

Give it a quick try and let me know what you think!

Thanks so much! Appreciate you testing it out! 🙏🏼


r/webdev • • 3h ago

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

1 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 • • 17h ago

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

12 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 • • 7h ago

Showoff Saturday I built my game's website out of the game's own sprite code. There are 3 keyboard secrets on it

Post image
2 Upvotes

Rev Rush is a small iOS game of mine, and it has no image files at all. Every sprite is an array of strings in the Swift source, plus a palette that says what each letter means.

 

For the website I didn't want screenshots that go out of date, so an exporter reads those Swift files and writes JSON: 177 sprites and 36 colours. The browser draws them with a JavaScript copy of the game's drawing routine. There's also a separate Python version that renders the same parts, and a page that compares the two pixel by pixel.

 

What you can do on it:

- scroll, and the bike rides through four worlds: sea, underwater, castle and space

- paint the bike in the garage panel or switch to the hover bike, with the same palette code the game uses

- check the leaderboard, which is the live one from the game

- find the three secrets. They're all on the keyboard, and one of them is the Konami code. When you find one, it tells you how many there are, because nobody looks for something they don't know exists.

 

No framework and no JS build step, it's static files.

 

https://revrush.net/

 

Happy to answer questions about the exporter or the canvas rendering.


r/webdev • • 8h ago

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

3 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 • • 6h ago

[Showoff Saturday] I made a restaurant menu site that manages the menu by using Google Sheets as a CMS

0 Upvotes

My site is here: https://eatthemonsoon.com The guts of the database code, I got from this article [here](https://dev.to/ashish-codejourney/using-google-sheets-as-a-cms-a-simple-powerful-approach-to-content-management-fg1). Then I formatted the data into menu items. It's been a fun project and I'm looking forward to the next step. I'm thinking I will rewrite the index file and try to deliver it as an SSR soon. It's hosted on netlify via github. If anyone has experiencewith ssr's, could I just write my own build code and toml to run in a netlify edge function, or do I need Astro or some other rendering service?


r/webdev • • 10h ago

Showoff Saturday Cityhoppd, a Letterboxd for the cities you’ve been to (Next.js + Supabase)

Thumbnail
cityhoppd.com
2 Upvotes

Cityhoppd.com. you log a trip with a city and a star rating, your map fills in, and public reviews end up on each city’s page.

A few things from building it that might be useful to someone here.

City search runs on the server against GeoNames cities1000, about 161k places. the annoying part was same-name cities, so everything carries the state now and Perth, Tasmania stops getting the photo of Perth, Western Australia. the index lives in memory in the function, about a second to load cold and around 50 ms per search warm.

This week I added PostHog without cookies and proxied it through my own domain so blockers don’t drop it. the usual next.config rewrite forwards every header, which would have sent everyone’s Supabase session cookies to PostHog. I moved the relay into proxy.ts (what middleware is called in Next 16) and strip cookie and authorization before passing anything on. easy to miss.

And link previews: profiles are only readable signed in, but WhatsApp and X unfurl signed out, so the OG image reads through one security definer function that returns something only if the owner turned previews on.

Happy to answer anything about how it’s built


r/webdev • • 6h ago

Showoff Saturday Qt-style dock layouts across real browser windows

Post image
0 Upvotes

I'm sharing the Dock Layouts we've been building in Neo.mjs: Qt-style dockable workspaces for web applications, including panels that can move into real browser windows and dock back again.

The use cases I have in mind are IDEs, trading dashboards, enterprise systems, and browser-based games—applications where people need several views or tools open and want to arrange them across their screens. For ordinary websites and simpler SPAs, this usually adds complexity you don't need.

A panel torn out of the dashboard into its own operating-system window, mid-drag.

You can arrange panels into tabs and splits, tuck them into edge rails, tear them out into separate windows, and bring them back. Undo and redo follow the layout across those windows.

The interesting technical part is where the application lives. Components, stores, and application state run in a shared App Worker. Each browser window connects to it and renders its part of the UI. Moving a panel changes where it is rendered; the live component remains the same object in the shared worker, keeping its state. Messages still carry input events and rendering updates between the windows and workers.

The Workstation demo has twenty panels, a 100,000-row grid, and a live event feed. The multi-window behavior shown here was tested on real desktop Chrome windows. It requires same-origin SharedWorkers, and the browser's pop-up permissions still apply.

I'd be interested in feedback on the docking and tear-out interaction, especially from people building applications where users already work across multiple screens.

Best regards, Tobi


r/webdev • • 6h ago

Question Is there any way to change what firefox address bar shows using the current website's url?

1 Upvotes

I built a firefox addon called comdot which basically lets you visit sites typing a topdown version of a url.

It works fine but i want to show the url displayed in the address bar as topdown too.

Posting here cause i can't find a single good resource about this other than CSSing address bar. It doesn't have to be about addon. If there's any way to do this, please let me know.


r/webdev • • 6h ago

Showoff Saturday [Showoff Saturday] A static site that curates ~700 browser games, checks every link daily, and falls back to the Wayback Machine when one dies

0 Upvotes

Project: vibe1up.com, a free directory of AI-made browser games. Nothing to sell, just the tech.

- Fully static: HTML/CSS/vanilla JS on Vercel, built from a GitHub repo. Client-side search over a single JSON file.

- Daily scheduled jobs pull new games from official APIs/feeds (Vibe Jam, itch.io RSS, Ludum Dare, HN Firebase API), rate-limited to 1 req/sec per host with an identifying user agent.

- A link checker retests every game daily. It only hides a game on definitive signals (404/410/451, parked domains, DNS confirmed gone). Timeouts and 5xx need two failures in a row. Dead games with a Wayback copy show "Play archived version".

- A countdown to the 10 AM ET daily drop runs client-side and handles DST, in about 2 KB of inline JS, and respects prefers-reduced-motion.

- Every change goes through a PR with Playwright tests before it merges.

Would love feedback on the link-check heuristics. Flaky hosts were the hardest part.


r/webdev • • 7h ago

Showoff Saturday I made a free tool for dotted 3D globes, and now your coding agent can put one on your site

1 Upvotes

Globestudio is a free, open-source studio I made for dotted world maps and animated 3D globes: pick a region and one of 21 looks, then export PNG, SVG, a GLB 3D model, video or GIF, or embed it live.

The embed is an iframe of globestudio.app/embed, so Three.js, the shaders and the map data never touch your bundle. The design is one JSON config in the URL, which means the link is the design. There's a React component (@globestudio/react) and a web component (@globestudio/element) on npm that build that iframe for you; the React one works in a server component, since it's a plain iframe with no state. On a light page, add theme="light" and the glow and grid switch to a palette made for it.

There is also an agent skill. If you use Claude Code, Codex or Cursor:

npx skills add alevizio/globestudio

Then ask for something like "add a spinning dotted globe of our offices in Austin, Berlin and Singapore to the hero". That's the prompt in the video, on a small Vite + React page I made for the demo. The agent installs @globestudio/react, writes the design as one constant in the page's own colors and runs the build.

You don't need an agent for any of it. The export dialog's Share tab writes the embed code for an iframe, React or a web component, and the README has the props.

Limits, since someone will ask: the viewer needs WebGL 2, an embed URL must stay under 32,000 characters, and the whole design (data points included) is readable in the page source.

Demo video: https://youtu.be/GYgVTAL9a0U

Live: https://globestudio.app/?utm_source=reddit&utm_medium=social&utm_campaign=skill&utm_content=webdev

Code (MIT): https://github.com/alevizio/globestudio

I'd like to hear how the embed holds up on your pages, especially on phones.


r/webdev • • 10h ago

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

Thumbnail
github.com
2 Upvotes

r/webdev • • 7h ago

Showoff Saturday Showoff Saturday: I got two AI-content detectors running in the browser (WebGPU with a WASM fallback, int4/8-bit weights)

0 Upvotes

Link: https://tinydetect.ritabratamaiti.com/

TinyDetect checks whether a piece of text or an image looks AI-generated. Everything runs in the tab: what you paste or drop in is never uploaded.

I didn't train the detectors from scratch. I took two existing open models and spent most of the time getting them small and fast enough for a web page:

  • Text: Fakespot's RoBERTa-base detector (Apache-2.0). 499 MB at full precision, 97 MB shipped. The word embeddings are split out of the graph, stored as int4 and decoded in JS. I quantised each of the 72 weight matrices on its own to see which ones hurt accuracy; the 24 most sensitive stay 8-bit and the rest are 4-bit.
  • Image: Community Forensics ViT-S (MIT). 87 MB down to 26 MB with 8-bit weights and no measurable loss.

Some web-specific bits that took the most fiddling:

  • WebGPU vs WASM. ONNX Runtime Web with WebGPU gets a check down to roughly 120–250 ms on my laptop; CPU-only WASM takes 2–6 s. The page loads the WebGPU build only if navigator.gpu gives an adapter, otherwise the smaller WASM build.
  • int4 is not always faster. On WebGPU the int4 image model was about 45x slower than the 8-bit one, so the image model ships at 8-bit.
  • Threads on GitHub Pages. WASM threads need cross-origin isolation, and Pages can't set COOP/COEP headers. A small service worker adds them (COEP credentialless, so Google Fonts still load) and also caches the model files, so a repeat visit is ready in a few seconds.
  • Tokenizer in JS. I reimplemented the byte-level BPE tokenizer and the model's text-cleaning step in plain JS and checked them against the Python versions until the token IDs matched exactly.

Limitations, honestly: the first visit downloads about 115 MB. Like every detector it gets things wrong, especially very short or heavily edited text, and some formal human writing scores as "possibly AI". Long texts are only partly checked, and the result says so. A score is a reason to look closer, not proof.

I'd like feedback on the loading experience and on how it behaves on your hardware, especially browsers without WebGPU.


r/webdev • • 3h ago

Resource made a framework-agnostic Iconify picker — no jQuery, no collection limits

0 Upvotes

I built iconify-picker, a customizable icon picker powered by Iconify.

Unlike older icon pickers, it doesn't rely on jQuery or lock you into a single icon collection. Pick one collection or search across all available collections.

  • Framework-agnostic: Built as a Web Component, with integration docs for popular frameworks.
  • Zero dependencies: No jQuery, no framework dependency.
  • Three modes: Inline, button-triggered, or manually opened via JavaScript.
  • Lazy loading: Loads icons from collections on demand.
  • Fully customizable: Adjust colors and other styles, then copy the generated CSS.

Currently at v0.8.0.

Demo: https://metaory.github.io/iconify-picker/
npm: https://www.npmjs.com/package/iconify-picker
GitHub: https://github.com/metaory/iconify-picker

Feedback and suggestions are welcome.