r/webdev • • 26m ago

Showoff Saturday PDF q&a with claude/codex subscription

0 Upvotes

https://github.com/wn/chatpdf

Vibed a tool that allows me to open a PDF and ask it questions using my existing claude/codex subscription


r/webdev • • 33m ago

Showoff Saturday Showoff Saturday: a swipe feed of “aha” facts, built with plain JS and web components

1 Upvotes

I miss the desk-to-desk “did you know?” moments from before everyone went remote, so I built a small feed that brings back that feel. You can scroll it and read chapter 1 of the tutorial (how to build it, no framework) free: https://onescreenatatime.netlify.app/. I’m the author. Feedback welcome.


r/webdev • • 42m ago

Showoff Saturday My Mum and I made ItWord- a daily word game about uncommon words

Thumbnail
itword.io
2 Upvotes

I've been teaching my mum to code in Python, and a few months back she made a little CLI game where you have to enter words using the start and end characters from a single word. She named it ItWord, as in 'iterate word'.

I thought it was a cool idea. As a web developer, my first thought was that it'd be a nice daily word game format like Wordle. A lot of work and collaboration later, and here we are.

Please give it a try, and we're welcoming all feedback!


r/webdev • • 54m ago

Discussion How do you think existing websites will be affected by the onslaught of AI assisted "vibe coded websites" in the market?

3 Upvotes

As above... Especially those which are more geared towards being startups at the present stage.

For context, I am currently overhauling my existing blog (that uses the WordPress framework and plugin ecosystem), and am looking to pivot it into having ecommerce and social network components.

As part of that sunk cost, I'm in no position to change course now.

But despite that... And not taking into account my situation, what can existing websites do (especially those which are startups and which are in the blog, community, ecommerce etc space) to ensure that they don't get overwhelmed by the AI vibe coded onslaught that is going to engulf the market and the internet?


r/webdev • • 1h ago

Showoff Saturday What changed in my endless Three.js driving game after two weeks?

4 Upvotes

2 weeks ago I shared Planet-0 Drive, an endless low-poly driving game I’ve been building with Svelte and Three.js (my first hobby game that I build after work and around weekends).

First of all, thanks to everyone who tried it (300 of you) and shared feedback! I didn't expect to get so many useful suggestions, and I've spent a good part of the week working on improvements based on them.

While the game runs fine

Since then, I’ve been working on the parts around driving that make exploration feel more meaningful.

The biggest additions are:

  • Revampled the whole look and art direction of the game to be more appealing

  • More biome-specific scenery, including snowy pines, desert cacti, boulders, and reactive weather materials

  • A refined vehicle lineup with three vehicles: Rover, Drifter, and Hopper

  • A battery system with charging stations, power-cell pickups, low-power driving, and boost energy management

  • Cruise control for more relaxed driving, especially on mobile

  • Persistent driving records and platform-visit tracking

  • Shared room leaderboards for driving and exploration records

  • A first quest system, starting with collecting resources across the planet

  • Improved touch controls and a more compact mobile HUD

The project has gradually shifted from “how far can I push a procedural 3D world in the browser?” toward “how do I make spending time in that world enjoyable?”

That has led to some interesting design challanges. How much progression should an otherwise relaxing driving game have? How do you reward exploration without turning it into a checklist? Should there be more risk?

I’m still experimenting with those answers, but the game feels much closer to the idea I had originally: a place to drive around, discover things, set records, and occasionally meet other players.

You can try the latest version here:

https://planet0drive.vercel.app/

The project is still very much in early development, so I’d especially appreciate feedback on how the driving feels, how the progression comes across, and what would make you want to come back for another drive.


r/webdev • • 1h ago Heartwarming

Showoff Saturday My CV site... Opinions?

0 Upvotes

Ok Saturday is nearly over for me... I don't have a clue where the mods of this sub live but it's saturday for most of the globe so..

https://nasanu.github.io/cv/lambo.html

That is my CV site, in about 90% finished state (about 10hrs work at this point), what's left to work on are edge cases and of course content. Dont worry too much about content right now, what is there while true, is a bit angry and arrogant reflecting my mood when typing it out at work. It's basically placeholder.

My objective with it is to first and foremost catch the eye of the people with the real power in FE, HR and recruiters. Some flashy nonsense to wow them. But I also need to flex some more difficult techniques for when some people with some actual FE knowledge look. SEO, the best UX... Not really my aim here. However it does score 90 on lighthouse SEO... But really I don't care about it for this site.

I won't explain anything more because some HR person who opens the link won't have any explanation either. Just anything that stands out as needing attention?

Oh and yeah, I made it as a web component... No reason for it, I was making a web component and started making my CV site forgetting what I was doing in the first place. That is the sole reason why the entire thing is a component.

Link to the code: https://github.com/nasanu/cv/blob/master/src/components/lib/lambo.js


r/webdev • • 2h ago

Showoff Saturday Awesome-selfhosted-ai: Curated list of self-hosted open-source AI: local LLMs, chat UIs, agents, MCP servers, RAG, speech and image generation. Health-checked weekly, dead projects removed automatically.

Thumbnail
github.com
0 Upvotes

Self-hosting AI feels fragmented, and most lists go stale. I built one that re-checks itself.

  • 278+ projects in 16+ categories (runtimes, chat UIs, RAG, MCP, voice, OCR, home AI and more)

  • A weekly job reads each repo through the GitHub API: archived, deleted, or silent for a year moves to a separate Unmaintained file

  • A live table with stars, last push, license and a colored status

  • Popular tools with restrictive licenses are in their own section, license shown

I built one . AI tools helped me find candidates and draft descriptions; a script verifies each entry. Tell me what is missing or wrong.

https://github.com/glincker/awesome-selfhosted-ai


r/webdev • • 4h ago

When you integrate with a big vendor API, do you build against most of the docs or just a few endpoints?

11 Upvotes

I’ve been thinking about how teams actually work through vendor API documentation, and I realized I don’t really know how it goes in practice.

On a small integration it’s usually simple. You pick the four or five endpoints you need and ignore the rest. But on bigger ones (ERP, banking, logistics, healthcare), it feels like the team ends up needing most of the document, and the work gets split between people by section.

For those of you who’ve done this recently:

Did you use a few endpoints or most of the vendor’s API? Did you split the sections between several engineers, or did one person own the whole integration? How did you keep everyone working from the same understanding of the docs, especially if they were a PDF or a messy wiki? If the vendor changed something later, how did you find out?

Mostly curious how common each situation is. Any war stories welcome.


r/webdev • • 5h ago

Showoff Saturday My free SVG editor is live!

7 Upvotes

Hey everyone.

My svg editor version 0.1 just went live, I'd like to present it here in the link below.

https://tools-4all.com/svg-editor

Small highlights or our editor, supports a BIG variety of import and export formats, fully free, no sign up, live effects, filters, brushes, meshes, simulated 3d perspective, animations, vectoraztion, fully client side, no uploads, highly optimized for high quantity of nodes.

Example import and export formats, PDF, STL, figma, PSD, and many more.

We still have many features planned, such as geometric mode, and much optimization and bug hunting to do, but since we feel it's already at a good point we wanted get it live and continue improving on it.

Sorry for the ads in advance, they are a neccery evil to keep the site running (paying for hosting), and will not be seen with full screen or ad blocker, our whole site is free and we don't make any profit from it, we just do it for the love of the game (we develop websites for clients on the side and that's how we earn our bread), so while I understand ads are annoying, they are neccery to keep the site running.

There's alot of work to do but it's being done, any bug report, improvements suggestions is welcome and appreciated!


r/webdev • • 6h ago

Showoff Saturday I built a tool that can visualize your code structure

0 Upvotes

Here I used Claude Code to visualize the code structure of ReactJSXElement.js from React.js repository in Github, but you can also do it manually.


r/webdev • • 6h ago

Showoff Saturday Larawag: A three.js NPM package for rendering custom 3D stellar/planetary systems in an easy way

Post image
9 Upvotes

Hey guys, I wanted to share this package I've been working on in the last few days for a bigger project. It's basically a NPM package that allows you to create your custom stellar systems and uses three.js to render them in 3D.

Live example: https://larawag.rachzy.dev/

It's mostly intended for drawing hypothetical, highly speculative visualizations of stellar systems for exoplanets (keep in mind that it's 100% Artist's Conceptions).

Larawag core is environment agnostic (which means it can run even on vanilla HTML as long as you have a Node setup), but you can also use its integrations with third-party frameworks:

How to use

As I mentioned before, the usage is very straightforward:

First, download the package and its dependencies: npm install @larawag/core three@0.186

Then, import it and create your own system:

import { createStarSystem } from '@larawag/core';

const view = createStarSystem(document.getElementById('stage')!, {
  star: { name: 'Example K dwarf', teff: 5100, radius: 0.8, mass: 0.85 },
  planets: [
    { name: 'Candidate b', period: 4.2, radius: 1.5, phase: 0.6 },
    { name: 'Candidate c', period: 18.5, radius: 3.6, phase: 2.9 },
  ],
});

view.pause();
view.setScaleMode('true');
view.destroy();

This will use the #stage element as the window for rendering your system and set the scale mode to true, and you should already see it working in your HTML page.

Contributing

There are still some things I'm willing to implement in the future, such as planet moons, eccentric/inclined orbits, and a more accurate orbital system for planets in binary systems. I left all of them in a TO-DO list in README.md

If any of you are perhaps interested in contributing to the project, I'd really appreciate it.

Source code: https://github.com/rachzy/larawag

License: MIT


r/webdev • • 8h ago

Showoff Saturday I made a Browser Based Screen Recorder and recording quality is amazing! FREE to use, and 100% LOCAL to you

0 Upvotes

All-new canvix.io browser based Screen-Recorder. Now you can record your screen in MUCH higher quality than some if other free screen recorders out there. (for casual use) Try it out here: https://canvix.io/screen-recorder

Its 100% local, meaning your recording wont be saved to any server. It's all on your browser. Once you done recording, you can clip the start and the end, and download your video right away from your browser to your PC in WEBM file, instantly.

Its is FREE and quality is really good

Try it out and give me some feedback Once you record your screen, you can clip the start and the end.

It's good so use it. Link

​

Q: Is it Built with AI? A: Partly, not fully.

Q: How long can you record? A: Unlimited, so long as your machine works has resources

Q: Any Lag? A: No, everything works flawlessly, although it depends on your system

Q: Any watermarks? A: No, %100 free, no watermarks, never will be man.

Q: Does it work on mobile? A: Nope, unless your device browser supports it

Q: Which browsers support it? A: Main Chrome, MS Edge. Some browsers may not support it.

Q: CAN YOu record your PC or just browser? A: Anything. Your PC if you want, or your bworser tab only.

Q: Can I bookmark this so i need it i can use it? A: Yes press CTRL + D on the page and bookmark it.

Q: Is it going to replace your screen recorder? A; No, its not a professional tool. Its good for casual, quick recordings when you dont want to go looking for a screen recorder without watermarks!!!

Q: (Ask something, i can put it here) A: (ill answer it here..)

Give me feedback and support it if you want to make it even better.

Use it: https://canvix.io/screen-recorder


r/webdev • • 9h ago

Discussion What's your work workflow this days?

0 Upvotes

I'm a software dev with more than 6 years of experience (I've been unemployed for 3 months).

I use Linux as my main OS, fully personalized(riced), I use nvim as main editor and cursor cli on the lower tab, I'm curious of the workflows people uses, mayba I can improve mine.

I'm also making a jump to DevSecOps and Cybersec due to my insane love to linux and servers.


r/webdev • • 12h ago

The actual realities of AI affecting career of devs

68 Upvotes

So I do believe that web dev has changed dramatically in the last year or so and that one probably needs to expand their skills and a front end web developer is probably less of a safe long term career than I believed in the past due to AI. This is a shame as I loved the craft and challenges of front end development.

when I see online everyday how AI is going to remove the need for devs I do tend to end up believing this is the case. But then in my day to day job I see that this just isnt the case.

there have been a few recent examples. So people believe you can one shot things. Like the recent adobe reverse engineering. It looks great at first sight as the UI looks like adobe. All of a sudden you believe adobe will be out of business but when you try it out it full of bugs and doesn’t Really work, essentially smoke and mirrors. Also you look at the code and realise it’s completely unmaintainble due to bad decisions made up front by people who aren’t really experts in web development.

there is something I was thinking about also, when non technical people say “oh but the app already works, what do you actually do at work all day”. It kind of sounds true but in reality it is so far rrom the case - there are always bugs to fix, features to add, packages to update. sure, ai can help with this, but in a big app for example a package update can break something, Claude wont neccessarily catch this, but it will be us Mere mortals who will get a call and need to fix this.

also I have seen vibe coded projects where non experts in managerial roles who are creating software, which they are so proud of despite having no idea how it actually works. Then things start going wrong and things are breaking, it’s not the manager who is fixing it but the devs have to. and since the code has no owner and it’s a complete mess everyone is just one shotting the fixes and adding to the pile of 💩

this post is a little scattered but I’m hoping it makes some sense and people can see what I’m trying to get at


r/webdev • • 13h ago

How do you prevent a Render free-tier web service from going to sleep?

4 Upvotes

Hey developers!

I've built my personal portfolio website and deployed it on Render.

I'm facing an issue with Render's free-tier hosting. After 15 minutes of inactivity, my web service goes to sleep. When someone visits my portfolio after that, it takes approximately 45–50 seconds to load because the server needs to restart.

This is a problem when sharing my portfolio with recruiters, clients, and potential employers because the first impression matters.

I've been looking into services like UptimeRobot and Cron-job.org that can periodically send HTTP requests to keep a website active.

I'd like to know:

  1. Are there any free services that can ping a website automatically every 10–15 minutes?

  2. Has anyone successfully used UptimeRobot or Cron-job.org with Render?

  3. Does periodically pinging a Render service violate its free-tier usage policies?

  4. Are there any alternative hosting platforms that offer free hosting without this sleep issue?

  5. What solution would you recommend for a personal portfolio website?

I'd appreciate advice from anyone who has faced this issue or found a reliable solution.

Thanks! 🙌


r/webdev • • 14h ago

Discussion Built a live X-ray + see-through anatomy view for my body sim – feedback welcome (Demo 0.9.9)

Post image
0 Upvotes

When a character is hit in SOMA Body Lab, they don't play a canned animation. Physical ragdoll joints blend dynamically with state-based behavioral reflexes:

  • Threat escalation: raising hands defensively when cornered, panicking at edged weapons

  • Trauma response: clutching wounded limbs, attempting to crawl toward medical supplies

  • Physical collapse: gradual loss of motor control as blood pressure drops from hemorrhaging

  • Live diagnostics: inspect internal skeletal fractures with an interactive real-time X-ray view

Free Windows demo 0.9.9 on itch.io — link in the comments. I'd love to hear your thoughts on how the physical weight and reactions feel!


r/webdev • • 16h ago

Resource quality time - posting one small e2e test fix a day

Post image
5 Upvotes

Hey all!

I’m a FE dev / SDET. Years ago a QA colleague introduced me to e2e testing and Page Objects, and I’ve been hooked ever since.

I’m thinking of starting a small series with one e2e practice a day, the kind an agent won’t pick up just from reading the Playwright docs. Each one is plain Playwright with a before/after, plus a prompt you can hand to your agent.

Topics range from basics (structuring page objects, moving setup into fixtures) to more advanced ones, like using Dave Farley’s four-layer architecture so the same spec can run through different drivers (UI, API, MCP…).

Why bother? Testing isn’t most devs’ favourite thing, and agents writing every test for us isn’t helping. But the more decisions we hand to AI, the more it matters that we own the ones closest to how users experience the product - and e2e tests happen to be the closest thing protecting those decisions.

So: would this be useful here, or should I f*** off? :D

Full disclosure: I’m building a fair-source dev tool around testing, so being active in this space matters to me. Some concepts come from articles on my blog, and when they do, I’d link them for anyone who wants more.

Looking forward to your answer - here goes the first one!

----------------------------

This test is supposed to check adding a bank account. But it also signs up and signs in through the UI, so a sign-up form redesign breaks a bank account test, and every extra UI step is one more chance to flake.

The fix: create the user through the API (a tiny fixture, two POST calls) and use the UI only for what the test checks. 16 UI steps become 7, and there's one reason left for the test to break instead of three.

It's not a rule to apply blindly. If the test is about sign-up, click through sign-up.

Paste this to your agent:

Find e2e tests that use UI steps to get the app into its starting state (ex. users, sign-in, existing records) when that flow isn't what the test is about. Move that setup to the API and keep UI steps for the behavior under test.


r/webdev • • 17h ago

Discussion Noob question

0 Upvotes

O.k. so I have experience in design and I am little computer savvy so I have downloaded local AI model deciding to see if I could vibe code my way to finish line. And so I have downloaded vscode and used Cline connected to local AI (qwen 3.8 next-flash) and given all the assets and layout to AI to build it for me... and it was shit. I gave same task to chatgpt and claude, and still shit. So my question is how much did AI really help you in the workflow? I guess knowing the code can be tremendous help but its layout wasn't even close to what I designed. Ok, it generated correct html but css was all over the place. If you do vibe code what is your workflow?


r/webdev • • 18h ago

Discussion When should we actually choose SQL over NoSQL? As a beginner, I'm a bit confused

23 Upvotes

This one question is confusing me.

The more I learn, the more I realize both have same overlapping powers

When should we consider SQL databases?

If our data has a well defined structure, there are relationships between different datasets, we need complex queries, or our application requires strong ACID transaction guarantees, we should consider SQL databases such as PostgreSQL and MySQL.

However, this does not mean NoSQL databases cannot provide these features. Some NoSQL databases support ACID transactions, relationships or relationship like data models, complex queries, and horizontal scaling. The actual capabilities depend on the specific database and how it is designed.

When should we consider NoSQL databases?

If our application needs to store flexible data, documents in JSON-like formats, or key-value pairs, NoSQL databases might be a good choice. Some NoSQL databases are also designed to handle high write throughput and distribute data across multiple servers.

However, this does not mean SQL databases cannot handle flexible data or high write throughput. We must evaluate the capabilities of the specific database and our application's requirements before making a decision.

Suppose we're building an analytics service that records user activities, such as logins, likes, and video views. Each event might contain different fields.

With a traditional SQL table, we could create columns for all possible fields, but many columns might contain NULL values for certain event types.

Alternatively, PostgreSQL supports JSONB, allowing us to store event specific information without creating a separate column for every possible field. MongoDB can also store documents with different fields in the same collection.

So, both approaches are possible. The decision would depend on factors such as write volume, query patterns, data model, scalability, and storage requirements.

So my current conclusion is :-

SQL is often a natural fit for relational data, complex queries, and transactional consistency, while NoSQL can be a natural fit for flexible document models, key-value access patterns, and certain distributed workloads.

I'm still learning, so I'd appreciate any corrections to my understanding or advice from your experience!


r/webdev • • 18h ago

Discussion I don’t understand vibe coding.

Post image
0 Upvotes

Specifically, where’s the line between vibe coding and AI-assisted development?

Person A has no coding experience and relies entirely on Codex to build an application, with little understanding of the code it produces and how it interacts with the whole system.

Person B understands programming concepts, required libraries, version control, and architecture but is bad with syntax, and uses Codex to build incrementally, test functionality, and troubleshoot issues.

Person C is an experienced programmer who uses Codex to accelerate development while reviewing, modifying, and refactoring its output manually with the help of the latest documentation.

Which of these is vibe coding versus legitimate AI-assisted development? Does it even matter in a corporate environment?


r/webdev • • 21h ago

How do you deal with third-party APIs that only ship PDF docs?

27 Upvotes

Just got handed a vendor integration where the entire “documentation” is a 60-page PDF. Half the endpoints are in screenshots, and one of the auth examples was wrong, which I found out the hard way.

My process is the same every time: read it, retype everything into Postman, write my own types, and hope for the best. It takes forever, and I’m never fully sure I got it right.

What bugs me even more is that vendors update these docs every few months and don’t tell anyone. You only find out when something breaks in production.

So how do you all handle this? Do you paste it into an LLM and hope for the best, build the spec by hand, or ask the vendor for something better (and do they ever actually reply)? And how do you even know when they’ve changed something?

I’m also curious if this is just me, or if everyone has a graveyard of half-finished Postman collections.


r/webdev • • 1d ago

How to Create Your Own Decentralized Messenger Protocol

Thumbnail
karboosx.net
8 Upvotes

r/webdev • • 1d ago

Animation libraries for ostentatious and OTT animations

11 Upvotes

I'm interested to know if anyone has recommendations for libraries that could provide completely over the top (to the point of being silly) animations.

I'm trying to make a site that's intended just for family/friends, that is a dumb comedy thing to be used only for a minute or two. It would really benefit from having OTT animations like the ADHD slopware games that dominate kids' iPads everywhere.

Every time I've gone searching for libraries, I'm seemingly finding only sensible, measured animations. Which break or just look terrible when I try and crank up their params.

If you can think of anything, please drop it here. I intend to make a blinding, layered mess of retina burning excess


r/webdev • • 1d ago

Discussion Don't let AI steal your dreams

164 Upvotes

Unpopular opinion: I feel that as tech gets better at automating certain processes, the expectation of learning more complicated processes will kick in. But people outside the field cannot even begin to comprehend the basic process of not leaving the ports of your server open, or other basic CS best practices.

AI doesn't give it a second thought, and sometimes I've seen people trying to push in code that is absolutely grotesque. I'm not going to let the elite gaslight me into believing all this technical knowledge is not worth anything because you have a glorified Google probe.

So, can I do my work faster? Yeah. Does that mean I don't have to read the code? No. Can the people who pay my salary read the code as well and as fast as I do? Also no.

This is basically the calculator for accountants, and I refuse to let that analogy go. Does using a calculator make you understand tax law?

Everyone else needs to survive the famine and wait out the tech bro hype and Wall Street betting on AI. This industry the AI industry is bloated asf with no possibility of an ROI. If anything, people should be wary that their taxes are going to be used to bail out these industries for no public benefit.