❌

Normal view

Made a 3D weather map in plain WebGL - ocean tides are calculated in the fragment shader

Made a 3D weather map in plain WebGL - ocean tides are calculated in the fragment shader

I run a small tide times site and wanted to see the weather actually move, so I built this 3D weather map. Plain JS and WebGL, no three.js or map library.

The tides are calculated right in the fragment shader, so there are no tide frames to download.

It has nice sound effects too, turn them on when you try it.

Live: thetidechart.com/weather-map

Would like to know how dragging/zooming feels on your phone.

submitted by /u/swifterrr to r/webdev
[link] [comments]

After months of job rejections, I spent 2 years building a Database Client. It just got added to Microsoft's Azure docs.

After months of job rejections, I spent 2 years building a Database Client. It just got added to Microsoft's Azure docs.

After struggling to land a job in 2024, when the market was pretty rough, I decided to take a different route and build something real. My goal was simple: either build something genuinely useful or gain more experience than anything else could offer.

Two years and around 90 hours a week later, VisuaLeaf is now listed in Microsoft's Azure DocumentDB documentation as a way to connect:

https://learn.microsoft.com/en-us/azure/documentdb/how-to-connect-visualeaf

It started as a MongoDB GUI, but I realized that everything I was building could apply to other databases too.

Nested objects and arrays should be easy to read in a table, not squashed into one cell... The same goes for JSONB. You shouldn't have to stare at an entire JSON object in a single cell. I made it so you can expand nested data one level at a time in both the tree view and table view.

I wanted everything in VisuaLeaf to feel as intuitive and straightforward as possible, from browsing data to performing more complex operations.

Today, VisuaLeaf supports MongoDB, Postgres, MySQL, SQLite, DuckDB, and 25+ more database engines.

What it does::

  • Table + tree grid, built from scratch: This might not seem like much at first, but it actually took the most work to get right. The tree view can recursively expand thousands of rows simultaneously (near instant time), while the table view scrolls smoothly even with thousands of rows and columns. I ended up building my own AG Grid from scratch because libraries didn't support the nested column expansion I wanted. Getting both views optimized took about a year of work alone... but dang, was it worth it.
  • Visual query builder: Build queries by clicking or dragging fields from the table and tree views. It generates readable SQL or MongoDB queries that you can copy and use.
  • Data transfers with transformation: Move data between database engines (MySQL β†’ Postgres, SQL β†’ MongoDB), mask emails, phone numbers, and IDs along the way, or transform fields using custom JavaScript. You can also look up data from other tables, include it in your output, and apply transformations to those fields too.
  • Compare and sync: Compare two tables or databases, including their structure and data, and synchronize them. For example, you can use this to keep staging and production databases in sync.
  • Performance: Stress-tested with up to 1.6 GB of data, both tree and table views remain smooth even with large datasets. In my testing, VisuaLeaf also loaded data several seconds faster than other database tools I compared it against.
  • AI / MCP: An integrated AI assistant and MCP support for interacting with databases through AI tools. (Wouldn't be an app in 2026 without it)
  • ERDs, charts, dashboards, mock data, index management, query profilers, and a lot more than I can fit into one post...

There's a free version that covers what most people need day to day:

https://visualeaf.com

I'd really appreciate feedback! And happy to answer any questions!

submitted by /u/Fun-Chicken6946 to r/webdev
[link] [comments]

It's genuinely depressing

I'm a full-stack developer and I've been freelancing for years, but this past year has been genuinely depressing, to say the least.

The number of potential clients who ghost me, the amount of unpaid effort I put into trying to win projects, only to get rejected anyway... it's exhausting. I've reached a point where I'm genuinely questioning what I'm doing.

Here's the most recent example.

I was working directly with the VP of a company in Canada. Initially, I did some IT work for them on an hourly basis and got paid $600 in total (he negotiated me down from $640, but whatever).

During that work, I ended up fixing a bunch of their existing infrastructure issues and documenting how everything worked together. They had no IT person left, apparently very little documentation, and the VP didn't really understand how their own infrastructure was set up. He even asked me to create diagrams and technical documentation explaining everything.

Eventually, he asked me to quote on a custom internal software solution. I put together a proposal with different tiers, starting at $3k. He said that was too expensive and that he'd look elsewhere first. I told him that's completely fine and that I was open to negotiating.

I then made the mistake of going the extra mile. I decided to build out the first few screens so he could actually see what he'd be paying for. He loved the preview and said he'd be happy to discuss the project further.

In the meantime, I continued working with him. He kept delaying calls and finding excuses to postpone discussions, while repeatedly telling me to please wait.

Throughout all of this, I kept sending him screenshots and videos of the progress. At any point, he could have told me to stop or simply said they weren't interested. Instead, he kept me hanging.

By that point, I'd already invested so much time that I would've honestly accepted something like $500 just to get paid for the work I'd done.

Then, when I messaged him to say I'd completed it, he told me they'd hired a student and apparently the student had already finished their custom solution.

And here's the part that really bothers me: I use AI tools too. It's not like the student somehow had access to AI and I didn't. I've been working on this while paying attention to architecture, implementation details, and how the software should actually work. I genuinely put thought into what I was building.

The funny part is that I had also spent time documenting their infrastructure, fixing their existing IT problems, and explaining how everything was connected. I can't help wondering if all that documentation ended up making it easier for them to hand the work over to someone cheaper.

And this isn't an isolated incident.

I've had countless calls with people who seemed extremely interested, some even going as far as signing an NDA, only to eventually ghost me. I've also been scammed twice out of fairly large amounts of money. In both cases, they initially paid, then eventually stopped.

I know freelancing isn't necessarily dead, and I know there are still people making a living doing this. But I'm honestly struggling to see how you're supposed to keep going when so much of your time is spent chasing people, doing unpaid work, preparing proposals, building previews, and trying to prove you're worth hiring.

And the state of software development in general hasn't exactly made things better.

I'm a full-stack developer. This is what I've spent years learning and working on. It's pretty much the only thing I'm good at, and lately it feels like the whole thing is becoming increasingly miserable.

I'm genuinely burned out and don't know what to do anymore.

For those of you who've been freelancing for years, have you experienced something similar? Is this just how things are now, or am I doing something fundamentally wrong?

submitted by /u/Lee-chaolan to r/webdev
[link] [comments]

[Showoff Saturday] I built a hand-drawn avatar maker as one static page: vanilla JS, zero dependencies, no AI

[Showoff Saturday] I built a hand-drawn avatar maker as one static page: vanilla JS, zero dependencies, no AI

Describble turns a sentence into a hand-drawn SVG avatar while you type: "tired pirate grandma, red beanie, round glasses" and the doodle redraws on every keystroke.

I wanted to see how far I could get with no framework and no AI, so here's how it's built:

- One static HTML page, vanilla JS, zero npm dependencies. The build is a single ~500-line Node script that concatenates the modules and inlines everything (121 KB gzipped, font included)

- Every keystroke replays the whole sentence through a rule-based parser, about 0.05 ms, so no debounce is needed

- The sketchy look: curves are split into tapered strokes, jittered with a seeded RNG, and "boil" between 4 frames at 9 fps (off with prefers-reduced-motion)

- The 2.5D head turn is just layer parallax: each SVG layer slides by its own depth

- Hash-based Content Security Policy: only the page's own inline script and style can run, and the only thing it can contact is an optional, documented counter of words it didn't understand

- English, Italian and Portuguese pages are prerendered at build time, and the gallery faces are rendered in Node through a tiny DOM stand-in, so search engines see real SVG files

It's rule-based, so it will miss words. Those misses are the most useful feedback I can get.

Site: https://describble.com

Code (MIT, drawings CC0): https://github.com/gasparegas/describble

submitted by /u/GACIDACID to r/webdev
[link] [comments]

[Showoff Saturday] Claybound: A 2.5D platformer built in plain three.js with real-time deformable clay.

[Showoff Saturday] Claybound: A 2.5D platformer built in plain three.js with real-time deformable clay.

Playable demo

Here is how it works under the hood:

  • The Clay Aesthetic: To get that tactile stop-motion look, I used rounded boxes and applied low-frequency noise to the vertices. I baked a normal map from an actual sculpted clay ball, which dynamically scales based on the object size.
  • Deformable Terrain: The clay you shape in-game is its own deformable mesh driven directly by your drag inputs.
  • Mobile Optimizations: Getting heavy 3D to run on phones is tough. I rely on meshopt for models and run a fixed 1/120s physics step with interpolation. To save frame time, the shadow map only updates every other frame (saving about 14–26% of frame time).
  • Progressive Loading: Asset size remains a challenge. I set up a later level's boss's models to load asynchronously only after play starts. For a fresh start of that chapter on a 9 Mbps connection, this dropped the initial load time. But I am still not quite where I would like to be.

How do you all handle the initial load payload for heavy 3D experiences on mobile? Would love to hear your optimization strategies!

submitted by /u/dermosef to r/webdev
[link] [comments]

PSA - SVGRepo Compromised

PSA - SVGRepo Compromised

For ages I've been using the website https://www.svgrepo.com/ as a great resource for free SVGs, but today when I visited, it gave me a fake Cloudflare verification that attempts to install some sort of malware on your computer, as you can see in the screenshots below.

It almost caught me, so I thought I'd put this out because I couldn't see any indication that anyone else had noticed this!

Fake cloudflare verification attempting to get you to run a malicious command in Run

Malicious run command

submitted by /u/NotCSM to r/webdev
[link] [comments]

Where can I find cool design inspirations?

Hey everyone!

I'm looking for any websites or discussion forums that talk about design patterns, or really any cool features for web development. Etc, manipulating CSS in interesting ways to get cool designs, interesting things you can do with JavaScript etc..

I'm a bit tired of looking at AI responses and would love to hear if there's anything out there!

submitted by /u/International-Cap-13 to r/webdev
[link] [comments]

Showoff Saturday: a SQL parser in TypeScript's type system, so queries get typed with no codegen

TypeSQL type-checks SQL strings in TypeScript. The compiler parses the SQL itself and checks it against your schema type, so there are no generated files, no build step and no database connection.

// rows is { email: string; title: string | null }[] // The LEFT JOIN makes title nullable. const rows = await sql( `SELECT u.email, p.title FROM users u LEFT JOIN posts p ON p.author_id = u.id WHERE u.id = ${sql.param(userId)}`, ).execute(); // Compile error: column "emial" does not exist. Perhaps you meant the column "email"? sql("SELECT emial FROM users"); 

It supports PostgreSQL, SQLite, MySQL and MariaDB, and the runtime is under 3 kB with no dependencies. The main catch is that it needs TypeScript 7.1 or later (7.1.0-beta works), and very large queries can hit the compiler's limits (workaround-able using sql.as<>())

I used AI coding to build this. To keep the output honest, each bug fix gets a permanent test project, and the 100+ scenario tests run against real PostgreSQL, MySQL and MariaDB servers. I will try to keep it non-slop.

GitHub: https://github.com/ismailkarsli/TypeSQL Docs: https://typesql.karsli.net

submitted by /u/ismail5412 to r/webdev
[link] [comments]

Would this be a good career change for me?

I want to become a website developer. I currently have very minimal knowledge of HTML, CSS, JavaScript, and Next.js. If I dedicate 2 hours a day to learning, is it realistic to land a job within 1 to 2 years?

I’m from East Asia, where my current job pays less than $1 per hour, and as far as I know, software developers here are also paid very little. I’m hoping to find a better-paying job with a company in another country, ideally remote.

If you ran a company, would you hire someone like me? What skills and qualities would you look for?

submitted by /u/IcyOutlandishness752 to r/webdev
[link] [comments]

the web really is full of useless ai bots lol

some months ago i built and published a typical website collection site focused on design etc. as a side project where users can submit sites (nothing special, not adding a link here)

i have since just abandoned it, but it had a pretty easy domain and was discoverable through search engines. however, i disconnected the submission / contact form from it so it just throws an error on submit

funny to see, i get at least 4-5 emails per week with nearly the same message that my β€œform failed to sent with error code bla bla, that’s why iβ€˜m trying it this way bla bla, here’s the site” and its ALWAYS some kind of crap AI site promoting AI services, all of them looking worse than the other. one even included that it’s an AI agent writing on behalf of it’s owner.

the funniest thing is that the senders don’t seem to be related in any way, but the message pattern and wording is so similar. seems like they’ve all set up the same outreach agent template or something like that. dead internet theory is real

submitted by /u/chromata31 to r/webdev
[link] [comments]

Looking for an open-source E2EE browser chat with permanent rooms and invite links

I'm looking for an open-source, end-to-end encrypted (E2EE) browser chat that is simple, lightweight, and easy for non-technical people to use.

I found one project: https://chat.builtwai.com/ (Vanish), but I'm not entirely sure how trustworthy or secure it is.

Another one I really like is https://nullchat.org/. I absolutely love its clean, minimal black interface and simplicity. However, it's designed around privacy through temporary rooms and disappearing messages.

What I'd really love is Nullchat.org, but with an optional permanent mode:

  • No registration or accounts required.
  • Create a room instantly and generate a shareable invitation link.
  • The invitation link itself acts as the room access key. Someone clicks it and joins directly without manually entering a password.
  • Rooms never expire, even when nobody is online.
  • Messages never burn or automatically disappear.
  • The room and its entire message history remain available unless the creator explicitly deletes the room.
  • E2EE, so the server cannot read messages.
  • Option to set a maximum number of participants.
  • Clean, minimal black interface like Nullchat.
  • Works entirely in the browser without installing anything.

Essentially, the link should contain the room credentials securely. Anyone with that link can open it and start chatting. The room stays alive, and messages stay there, even if everyone closes their browser and returns weeks or months later.

I'd love to have this as an optional mode, while keeping the existing temporary, disappearing-chat functionality as the default for people who prefer it.

Does anything like this already exist? I'm especially interested in open-source projects, self-hosted solutions, or trustworthy hosted services.

Thanks!

submitted by /u/BrazzersAdmin to r/webdev
[link] [comments]

First time working on a startup that is 99% vibecoded. As a non-vibecoder, it seems impossible to work on.

Recently I've joined a project with a group of 4, that has been super frustrating to work on.

So far whatever we have, has been 99% vibecoded from the ground up, and that 1% is me. At first I thought this would be fun, we would be making something in a weeks time, but like a month passed and we haven't really moved anywhere. There's literally a login screen that works (no Oauth) and some fancy UI, but that's it. Trying to debug or add new features by hand is impossible, because the code is not readable by humans. There's like 50 lines in the .env file, yet nothing works.

With all this in mind, the absurd thing is that it takes a full minute to deploy any changes to production. In comparison, my hand-crafted Django platform, with real users and tons of features, deploys in seconds.

Don't get me wrong, I am all for using AI to build projects. It's a very powerful tool and I use it to help me code all the time. But in my opinion, to make vibecoding work, you have to know the project structure and the architecture of a website, because then you can avoid massive tech debt in the future.

I can already tell that this experience will be funny to look back on.

submitted by /u/tengoCojonesDeAcero to r/webdev
[link] [comments]

Intermittent ~900ms gap before first paint in mobile Lighthouse on both React and Astro. How would you isolate it?

I'm comparing a React site against an Astro rebuild of the same page. In mobile Lighthouse, both sometimes sit blank for a long time before first paint, and other runs of the exact same page paint fast.

Setup: Lighthouse 13.0.1, Chrome 156, cold loads in separate fresh profiles, default mobile simulated throttling. I kept the traces, network logs and filmstrips.

Here's one matched pair (observed trace timings, not Lighthouse's simulated FCP):

Astro

  • CSS done: 203ms
  • Last preloaded font done: 286ms
  • DOMContentLoaded: 426ms
  • First Paint: 1301ms
  • FCP: 1320ms

React

  • CSS done: 573ms
  • Last preloaded font done: 494ms
  • DOMContentLoaded: 584ms
  • First Paint: 1525ms
  • FCP: 1540ms

The filmstrips stay blank right up to those first-paint times. Once painting starts, Paint to DrawFrame is only 10-13ms. So on Astro there's close to 900ms where everything's loaded and nothing shows up.

I don't see a long task on the renderer main thread covering that gap, though I know that doesn't prove the browser was actually idle.

I wondered about animations, so I ran one normal-motion vs reduced-motion pair on the Astro page. Both came back fast (FCP 318ms and 311ms), and the normal one still had its reveal animations, so that told me nothing either way. Desktop loads and a different page also painted quickly in the runs I checked.

One more thing: the fast traces show Scheduler::SetDeferBeginMainFrame events with short true-to-false spans. But the slow traces were captured with Lighthouse's default trace categories, which don't include those scheduler events, so I can't compare yet.

Has anyone run into this? A few things I'd like to figure out:

  1. How do I tell whether the page is causing the delay, or whether it's Chrome's scheduling or something in the test environment?
  2. Which trace categories or events would show why the first paint starts late, and not just that it did?
submitted by /u/techtsp to r/webdev
[link] [comments]

How do you organize your full-stack mono-repo?

Just as the title asks. I am curious how you organize the various parts. I have been on teams that both do and don't use mono-repos. For the ones that did, there has been a wide variety of choices across the app and how it's organized.

Just as a small example: naming conventions. Sometimes the the repo is named for the app (let's say "OurApp") and the various parts of the file structure are "OurApp-", like OurApp-ui and OurApp-api and OurApp-db. Or there might just be a top-level folder for "frontend", "backend" and "database", etc.

I'm not talking about a debate of mono-repo vs. multi-repo approaches, but in a mono-repo, what are some of the code organization techniques you've liked and disliked in your experience?

UPDATE: The community turned out! Thanks for sharing your thoughts in the comments. I appreciate the discussions.

submitted by /u/KnowBearFeet to r/webdev
[link] [comments]

Developing serious website without any AI or libraries are still exist

Websites built from scratch (no AI, no frameworks or libraries) that are more than just simple toy projects are becoming very rare, but i want to remind you guys that they still exist.

Three years ago, I posted this https://www.reddit.com/r/webdev/comments/161q3w8/i_coded_a_site_from_zero_without_any_libraries_it/, and that website is still being actively developed. I haven't used any AI-generated code or external libraries in all this time, even as it has become more complex with features like accounts, articles, comments, reviews, and just a few weeks ago forums.

I think the main reason why i stick with this is because features aren't planned in advance, they're just built bit by bit as the content needs them. I won't deny if AI could do better, but with a spread-out timeline and an unknown end result, it's easy to skip using AI as development mostly consists of small, precise tweaks with no definitive end goal. Coding also only small portion of time spent on developing the site so i don't feel the need to optimize it.

Anyway this is just me saying that i'm still here, not everything in this space become AI.

*note : i'm not saying that this is the better way to develop website. I just enjoy what i already used to do, and didn't bother to change it.

submitted by /u/thdr76 to r/webdev
[link] [comments]
❌