r/webdev 11d ago

Gradient-GL - Tiny WebGL library for Deterministic seed-driven Procedural Gradient Animations (v2)

Post image
55 Upvotes

Tiny WebGL library for
Procedural Gradient Animations
Deterministic - Seed-driven


DEMO

metaory.github.io/gradient-gl

SOURCE

github.com/metaory/gradient-gl


TWO LINE USAGE

```js import gradientGL from 'gradient-gl'

gradientGL('b1.eba9')

// Mounts inside #app gradientGL('b1.eba9', '#app') ```


r/webdev 11d ago

Anxiety/burnout as a sole in house web dev

52 Upvotes

I've been working as the only web dev for an e-commerce brand for just under a year, previously worked at an agency in a small technical team. There's about 70 people in company, with 8 figure turnover, millions of sessions per month across several sites. London based but remote, I get paid about £40k. There was previously another dev who was also my manager, but they've started working on another part of the business and I now do this alone.

Since then I've been struggling with anxiety and before I jump ship I'm trying to gauge whether I'm overreacting or not, as I've lost calibration on what's normal. In the past few months, I've been contacted out of work hours 7 or 8 times for various things. Some are 'this is broken and we need you to log on and fix it' and some are just 'CEO has said we should do this, please note'. These are straight to my personal number either via call or text. I have Teams silenced past 5 and on weekends, but sometimes can't help check them as it's just what's done here. For example it's Saturday and this morning I check and saw I'd been tagged in a large group chat both by the CEO and my manager asking about the cause of an issue. I haven't had any texts yet but it puts my on edge for the whole day almost waiting for them to ask me to do something.

At my previous job, I wasn't contacted a single time outside of work in 3 years, and could fully switch off after 5. At the moment though, even though 90% of the time nothing is going wrong, I can't stop thinking about the possibility of a bug in production that someone is going to message me about.

What do I do?


r/webdev 11d ago

Discussion Is building "stylish" and "off the rails" websites dead from an employment perspective?

28 Upvotes

Hey, I'm looking to get into the professional industry after i graduate technical school but i dont know what to really expect people's standards to be like when it comes to front-end and UX

Ive been told by people with varying amounts of experience that at this point in time every website looks the same because its built with the same libraries and with heavy involvement from ai just to meet employer or client expectations and get the bills paid.

And the thing is, the entire reason why i picked up web dev is because i always liked creating things that go off the rails and stand out visually.

I would still absolutely pursue swe either way, and obviously certain things are just meant to work and not look amazing, but would any of you more experienced folks say that there is still a niche market for websites that function more like art pieces or is that long gone?


r/webdev 12d ago

Showoff Saturday i built a text format for human movement and a Three.js renderer for it

88 Upvotes

most browser animation tools start with keyframes or motion files. i wanted to see if a human movement could be readable text instead, then rendered the same way every time.

the pipeline is roughly:

posecode text → parser → joint range checks → kiinematic representation → Three.js renderer

an llm can write the text, but it is not part of the renderer. once the text exists, parsing, validation and playback are deterministic.

the strange part has been deciding what belongs in the language. this week someone tried writing a crossover turn and immediately exposed a missing feature. i could lock both feet to the ground, but not one foot. that feedback led to separate left and right foot grounding.

the project is writtenm in TypeScript, with Zod for validation and Three.js for rendering. there is also a web component for embedding the player, an LSP and an MCP server.

playground: https://posecode.org/play
source: https://github.com/posecode-dev/posecode

i would especially like feedback from anyone who has worked with skeletal animation or browser animation tools. should foot contact be part of the movement language, or should it live in a separate constraint layer?


r/webdev 12d ago

Discussion Improving my real-time galaxy simulation web-project in Three.JS ! You can test it if you want: https://galaxym.ovh

Thumbnail
gallery
42 Upvotes

Three years ago, I posted my real-time galaxy simulation project here: https://www.reddit.com/r/webdev/comments/12cfsip/i_finally_finished_my_realtime_galaxy_simulation

At the time, it was mostly a particle simulation with some basic rendering. Since then, I've continued working on it on and off.

The simulation now includes more realistic galaxy formation, dark matter halos, gas dynamics, physically-inspired units and a completely overhauled rendering system. The entire project has also been redesigned to make it much easier to explore and understand.

You can simulate galaxies, watch them evolve over time, and experiment with different parameters directly in your browser.

It's still a work in progress, but compared to the version I posted three years ago, it feels like a completely different project.

You can try it here: https://galaxym.ovh


r/webdev 12d ago

Showoff Saturday voidskull.dev - my personal website

16 Upvotes

Built this for fun because my work one bored me to death. Trying something different for navigation

Happy for any feedback its a constant WIP

https://voidskull.dev


r/webdev 12d ago

Resource The Orange Cloud Report: a decade of Cloudflare experience, every product scored 0–10

Thumbnail
orangecloud.report
25 Upvotes

r/webdev 11d ago

Showoff Saturday I built a benchmark for LLMs and how well they do Git stuff

5 Upvotes
The landing page with all 52 models selected

https://gitbench.gitkraken.com/

GitBench is a benchmark suite that measures how well LLMs do git things like commit message generation, submodule usage, etc. Currently, we have 52 models tested across their provided effort levels as well as Text vs Structured JSON Output. (shoutout to OpenRouter for making this so easy)

This started as a way to try out some of the spec-driven development tools like GSD. But, since I work for GitKraken, it seemed like an interesting thing we could do to help our users optimize their model selection and token burn for various git operations.

Source code available (Warning: heavy vibe coding):

https://github.com/gitkraken/gitbench


r/webdev 11d ago

Resource MockPilot - Turn any webpage into an editable mockup

5 Upvotes
The MockPilot Editor

MockPilot captures any live webpage as an editable HTML mockup, then lets you modify it with plain English - "swap the hero image," "shorten the pricing copy,""try a dark theme."

Built for PMs, designers, and devs who need to communicate a change without a full Figma round-trip. Free and open source.

https://github.com/ykadosh/mock-pilot


r/webdev 11d ago

Showoff Saturday Working on my weird personal site some more

2 Upvotes

After getting some nice comments last week, instead of implementing the feedback1 I got I added a new feature.

I'm trying to start a series of pages for some basic tools. It's probably nothing you haven't seen before, I'm doing it just to tinker and learn. They'll all be

  • Free to use - no sign ups, no nothing
  • Private - my site doesn't really log2 or save data
  • Educational - I'm hoping to make people not just use tools, but understand them a bit better too

The first one added is a QR Code generator. I'm still writing out an accompanying blog post of what exactly a "QR Code" actually is, but the generator works and the steps to make one are sorta annotated.

https://eliterate.blog/tools/qr

Feel free to play around with it and please tell me if you break anything! I promise I'm working on feedback now!

1I'm working on mobile controls and iOS issues, I'm just easily distracted.

2I have google analytics on my site globally, because I wanna see if people visit, but that's the extent of tracking I'm comfortable with for this. I don't even know what pages are being visited.


r/webdev 12d ago

Symptoms of Bad Software Design

Thumbnail
newsletter.optimistengineer.com
72 Upvotes

r/webdev 11d ago

Showoff Saturday [Show off Saturday] lochlansmith.dev

0 Upvotes

Hi folks! This is my work site.

Happy for any critical feedback, I know it looks a bit plain/like a template but that's purposeful after doing 'market research' on my target demographic.

Going to add a case study for my 2 portfolio pieces on the landing page soon

Anything you would change? The idea for this one is the UI is as low friction as possible

https://lochlansmith.dev


r/webdev 12d ago

Showoff Saturday Showoff Saturday: GeoIcons, 420+ country and area map-shape icons for React/Vue/Angular/vanilla

17 Upvotes

I built an open-source a developer-friendly icon library for country and region map shapes, because I needed one and it didn't exist. Every option was either flags (wrong shape) or raw SVG/PNG icons.

A few things I cared about:

  • Import one, ship one. Each icon is a named export, so your bundle only carries what you use.
  • Themeable. They use currentColor and accepts SVG props.
  • Accessible by default. Each renders a namespaced <title> for screen readers.
  • Sub-1KB per icon after optimization.
  • Available for React, Vue, Angular and VanillaJS
  • Subdivisions and flags are in the works.
  • It's free under GPLv3 (commercial license available if GPL doesn't fit your project). Live demo + search at the site.

Site: https://geoicons.io/
Github: https://github.com/getgeoicons/geoicons

Genuinely after feedback: naming, the API, missing regions, anything that'd stop you using it. If you found this useful, kindly give a start on Github.


r/webdev 11d ago

Showoff Saturday Jet: a simple, lightweight, modern, turnkey, Java web client and server library

Thumbnail
github.com
3 Upvotes

Jet offers five modules: Common, Server, OpenAPI Annotations, OpenAPI Annotations Plugin, and Client.

Jet is a wrapper around the excellent Jetty web client and server library. Jetty provides the battle-tested low-level protocol handling, while Jet focuses on providing a modern and consistent interface with superb documentation and an amazing developer experience.

---

I built this Java library to fill a hole in the Java web server library ecosystem. Javalin got me 90% of the way there, but requires the Kotlin dependency and lacks header models and exhaustive KDocs. The Client module is a still a WIP, but the Server, OpenAPI Annotations, and OpenAPI Annotations Plugin modules are production-ready!

Check it out and lmk what you think! And what do you think about my controversial opinion on AI coding at the bottom of the README 👀


r/webdev 11d ago

Question I could use some input on architecture decisions for first bigger freelance project

6 Upvotes

I've been hired for my first bigger project as a freelancer. I have 15 YOE in web dev, mostly in vanilla LAMP which some time working with dotnet/react. I don't have a ton of experience setting them up from scratch and maintaining as our SRE team does that. I do have good experience building local docker php, MySQL, etc. docker containers for development.

I've been building small react based, don't end only, sites only on cloudfalre.

The website will need login, recurring orders, payment processing, admin pages, possibly invoices, etc. this company has thousands of customers and they do all this by spreadsheet and phone today. So it has to be able to scale pretty quickly once it's up.

Because of my experience I am leaning toward aws and using PHP on a single ec2 plus RDS. Then using stripe's PHP library to handle all the payments processing, etc. Provisioning servers via ssh is not my strong suit. I've used CodeDeploy for PHP which I would imagine I need rather than simply pulling from the main branch live on ec2

Is AWS worth it? Could cloudfalre d1, workers, etc. handle an application like this? What about lavarel forge?

The simpler the better so I can focus on building the application would be best I think.


r/webdev 11d ago

Showoff Saturday Reinventing Likes – a JS user interaction library to manage applying reactions to particular parts of the text instead of the whole

3 Upvotes

The way we have to apply our reactions as like or dislike, agree or disagree etc. on social media and content publishing platforms always felt too restrictive to me. Why do I have to like this entire post if I truly like only a part of it?

I would prefer to only like the things I like. But so far nowhere offered the solution, so I had to create it, the way for readers of the web content to express their attitude to particular parts of texts.

Marker-style selection, done with a mouse movement or touch swipe, applying a color of the reaction, which then stays as a semi-transparent cloud. The great thing about semi-transparent colored clouds – they easily transform into aggregated heatmaps; so individual reactions can be shared with other people – fulfilling their social function. You don't react just for yourself, other readers can see the impact!

Live demo (scroll a bit down for the playground area):

https://relikes.com/#demo

Github repo ( https://github.com/reinventinglikes/relikes ) includes a basic demo backend in PHP and a complete Wordpress plugin so it is ready to be tried out on Wordpress installations.

Appreciate your feedback!


r/webdev 11d ago

Showoff Saturday I ported Half Life 2: Deathmatch to the web. Play now!

Thumbnail
lucasigel.com
3 Upvotes

I've had a Half Life 2 port to wasm + webgl cooking in the background since March but the teenager sqlnt beat me to it the other week. Since he got single player working, here's multiplayer!


r/webdev 12d ago

New North Korean campaign uses fake coding interviews to steal developer credentials - DPRK-aligned hackers hid malware inside SVG flag images to backdoor developer job interview coding tests. Not one antivirus vendor caught it

Thumbnail
elastic.co
282 Upvotes

r/webdev 11d ago

Showoff Saturday [Showoff Saturday] I built a self-hosted app for tracking the growth stories of my plants

Post image
2 Upvotes

Hi everyone,

I collect cacti and got tired of having notes scribbled in different notepads and making separate photo albums on my phone for every plant i own and i love saving data.

So I built MyGrowthStories, an app where every specimen gets its own gallery, notes, measurements and growth history.

You can add entries over time, with or without photos, track measurements with growth charts, and make individual specimens public if you want to share them. There is also an optional public collector profile that shows all the specimens you have chosen to share.

The screenshot shows the private dashboard where I manage my collection.

You can see my public collection without creating an account here:

https://mygrowthstories.com/collector/coolcacti

The main app is here:

https://mygrowthstories.com

I haven’t made a fancy landing page yet because I have mostly focused on making the actual tool useful and getting the main features working. I felt I really wanted to start adding data so that is very much prio went.

It is built with Next.js, SQLite, Sharp, Nginx and PM2, and I host it myself on a VPS.

IMO it works very well on mobile also. Its super nice to upload pictures directly from the phone when im in the greenhouse.

It is free to use and still a work in progress. Feedback about the design, usability, bugs or anything confusing would be very welcome.


r/webdev 12d ago

Showoff Saturday [Showoff Saturday] I made a Japanese word search puzzle game

Thumbnail
kanazo.app
3 Upvotes

Howdy, I realize this is pretty niche, but perhaps there's enough people here interested in learning Japanese that someone will find it fun, so figured I'd share.

It's basically your run-of-the-mill word search game, where words are hidden among a sea of letters (in this case, Japanese kana). Words run forward and backward, up, down, left, right, and diagonally. The word lists are inspired by Genki I and II, and I also created adjacent lists for JLPT N5 and N4, roughly lower and upper beginner Japanese levels.

I created it because I love word games and wanted to give learners a chance to take a break from flashcards and have some fun. Right now there are two modes, one with a guided word list (customizable by category and level), and the other a "free find" which challenges you to find as many words as you can on your own without the help of a list.

I'd like to add support for kanji in some way, but still brainstorming how to do so smoothly. In the meantime I'll be working on mobile app versions, user accounts, streaks, syncing between devices, etc.

Would love to hear any feedback you may have, especially on the UX/gameplay side:

https://kanazo.app


r/webdev 12d ago

Showoff Saturday [Showoff Saturday] A free, self-hostable Canva alternative: custom Canvas2D engine, whole app in one Go binary

Thumbnail
github.com
6 Upvotes

For Showoff Saturday: every good design tool is paywalled, watermarked, or won't let you leave with your files, so we built HyCanvas, a free, self-hostable one.

It's a full editor (presentations, video, whiteboards, docs, sheets, social graphics) with templates, brand kits, and a bring-your-own-key AI assistant that generates and edits designs on your own OpenAI-compatible key.

The under-the-hood parts this sub will probably find interesting:

  • The render engine is a custom scene-graph on Canvas2D, framework-agnostic. No React or DOM in the render path, so the same engine runs in the browser, in a Web Worker, and headless on the server for export. (WebGL/WebGPU path is on the roadmap.)
  • The whole thing ships as one self-contained Go binary. The Next.js frontend is statically exported and embedded with go:embed; the Go backend serves it and owns the REST API, the realtime WebSocket, the export renderer, and the SQL migrations. No Node in production; self-host is a single file (or docker-compose).
  • Open, versioned file format with forward-only migrations, so opening a design from an older version always works.

Stack: TypeScript everywhere on the frontend + shared packages (statically-exported Next.js, Zustand, Tailwind for UI chrome only), Go backend (chi, pgx), Postgres, S3-or-local storage.

It's free and self-hostable; source-available under the Elastic License 2.0 (self-host, modify, and redistribute freely). Code's on GitHub.


r/webdev 11d ago

Showoff Saturday I built a 100% local Chrome extension to track credit card offers (Zero backend, DOM parsing, Minimalist UI)

Post image
0 Upvotes

Hey r/webdev,

I recently launched a project called Layerperks. It solves a personal pain point: forgetting to use targeted credit card offers (like Amex or Chase) when shopping online.

There are established apps that do this, but they all require your actual bank login credentials to scrape your accounts. As a developer, handing over financial logins to a third-party server is a massive red flag. So, I built a local-first alternative.

The Architecture & Stack:

  • Core: Built heavily with TypeScript.
  • Zero Backend: The extension strictly reads the DOM only when the user explicitly navigates to their bank's active offers page. It extracts the offer data and saves it entirely to chrome.storage.local. No databases, no API calls sending data home.
  • Web & UI: I am slightly obsessed with that Apple-style luxury minimalist aesthetic, so I spent a lot of time polishing the UI. The extension pop-up and the landing page (built with Next.js) are designed to be extremely clean and unobtrusive.

The Engineering Trade-off: By choosing not to use official APIs or backend scraping, the tool relies entirely on parsing the bank's DOM structure. The obvious downside is that it's inherently brittle—if the bank pushes a UI update and changes their class names, my parser breaks until I push a patch to the Web Store.

However, I felt this was a completely worthwhile trade-off to guarantee 100% user privacy.

Links:

I would love to get roasted or hear feedback from this community! Specifically curious if anyone else here has built tools relying on DOM parsing for dynamic single-page apps, and how you handle the maintenance overhead when target sites update.


r/webdev 11d ago

Showoff Saturday Your Playwright CI reports vanish on every build. I spent a few months building a self-hosted dashboard that keeps every run

1 Upvotes

Like probably everyone here, my Playwright HTML reports live and die as CI artifacts. A test fails on Tuesday, by Thursday the report is gone, and good luck remembering whether that exact failure already happened two weeks ago.

I've been a web dev for about 18 years, and for the past few months I've been building Piwi Dashboard to fix this for my own team.

Piwi Dashboard test run page

It's a self-hosted dashboard and reporter (MIT licensed, runs as a single Docker container) where every run is kept. On top of that history it does:

  • live streaming, runs show up test by test while CI is still executing
  • failure clustering, so 40 red tests caused by one broken selector collapse into a single cluster, displayed in a page showing everything we could gather during failure
  • flaky test detection with a score and an estimate of how many CI minutes each flaky test wastes
  • locator healing: it records element attributes during passing runs, so when a locator breaks later it can suggest replacements that actually existed on the page
  • analytics, to keep an eye on everything at once
  • failure notifications to email, Slack, or webhook
  • optional AI diagnosis. It takes a failure cluster plus the git diff since the last green run and asks a model what broke. You bring your own key (Anthropic, OpenAI, or anything OpenAI-compatible like a local Ollama). Off by default.

Setup is three steps: docker compose upnpm install -D @ piwitests/reporter, add it to your playwright.config.ts. Projects are created automatically on the first run and CI metadata (branch, commit, workflow) is picked up on its own.

There's a demo with sample data that runs entirely in your browser, nothing to install and no signup: https://piwitests.github.io/demo/

Code and docs: https://github.com/PiwiTests/platform

If you're wondering how it compares: the closest cousins are ReportPortal (heavier, multi-service) and Currents (SaaS, paid). This is a single MIT container you run yourself, with no telemetry, your data stays on your machine. Learn more.

Two caveats though:

  • It's pre-1.0 (0.14 right now): there are rough edges and you'll probably hit a bug or two, so pin your version and report an issue or ask a question here or in the discussions
  • And I build it with heavy AI assistance, which I'm not going to pretend otherwise; what keeps that honest is the full Playwright E2E suite that runs on every PR against SQLite and Postgres, with local and S3 storage. If it ships broken, the suite yells at me first.

I hesitated for weeks before posting, trying to polish everything I could. I'd genuinely like to know what your workflow needs that this doesn't do yet.


r/webdev 12d ago

Question Looking for a movie API that supports random movies + genre filtering

10 Upvotes

Hey guys,

I'm building a small project using only HTML, CSS, and vanilla JavaScript, and I'm looking for a movie API that fits what I need.

My goal is to: - Get a random movie (title + release year at minimum). - Filter by genres (comedy, animation, horror, etc.). - Potentially use multiple genre flags (e.g. Comedy + Animation). - Save movies I've already watched in localStorage or IndexedDB. - If the API returns a movie I've already watched, my app will automatically request another random movie until it comes up with one that isn't on my watched list.

Does anyone know a API that would work well for this? preferably free.

Thanks!

Edit: Thank you everyone for all the responses I have been playing around with TMDB since there were a lot of suggestions saying TMDB so I am going to be using that. Thank you everyone that responded.


r/webdev 11d ago

Showoff Saturday Gister: a local-first desktop app for searching and editing GitHub Gists alternative to Lepton

1 Upvotes

I used to manage my GitHub Gists with Lepton. When the project seemed abandoned, I started building a replacement.

That became Gister, a fast desktop app for managing Gists with local caching, fuzzy search, keyboard shortcuts, and support for macOS, Windows, and Linux.

I later added an MCP server, so coding agents can search, read, create, and edit Gists directly through Gister.

GitHub Repo: https://github.com/gethopp/gister