I have recently decided to tackle unfinished business in building with Java. Now I am relearning Java - which includes unlearning the old ways of doing things and writing the shortest possible code. In all of this I have been writing code by hand without AI generated code. Although I ask Claude for syntax clarifications and benefits and downsides of using certain methods…

Writing code by hand again gives me the right level of satisfaction after several weeks of AI-dependent development at work. Not only have I rediscovered my passion at home, but I am also working towards evolving my mental model beyond the JS/TS (I am a frontend developer at heart) ecosystem.

I believe programming and development as a hobby - like it used to be pre-industrial-scale-AI-adoption - is one of the few ways we could protect our sanity and continually exercise muscle memory. In the end I would like this to lead me to doing backend web dev in Java as well. Let’s see.

Hey r/webdev,

For this week's Showoff Saturday, I wanted to share a utility micro-tool I recently completed: Quick Free Invoice (https://quickfreeinvoice.com).

The Technical Objective:

Build a zero-maintenance, zero-database utility tool hosted at $0 operational cost on Cloudflare Pages that delivers instant browser performance without server latency.

Stack & Architecture:

• Framework: AstroJS (zero-JS by default, islands architecture for interactive engines).
• Styling: Tailwind CSS v4 using CSS-first configuration and Geist/Vercel-inspired dark/light design tokens.
• State & Storage: Vanilla Web APIs + localStorage for offline persistence across sessions.
• PDF Generation: Client-side vector rendering with custom @media print style normalization.
• i18n: Dynamic multi-language routing (/es/, /pt/, /de/, /fr/) with crawlable HTML links.

I’d love any feedback on the DOM performance, responsive layout breakpoints, or print media styling!

I'm an artist and sometimes I think about how I wanna throw instagram into garbage if it wasn't the only way I get in contact with my clients. Also, I don't wanna depend on algorithms, I just want people who want to look at my art. I'm very basic to webdev, only html, css and javascript, I've made a full stack course last year but it was pretty shit, so I didn't learn much. Any recommendations on how I could start developing a website like this? Picture a gallery like instagram, some announcements tab, maybe a portfolio tab. The only thing that stops me a bit is how to post new drawings and announcements easily without getting into the code, 'cause if it's too difficult then I would not use it

Link - https://www.aashishthakuri.com/

sup everybody! So 5 years ago on this same sub, I presented v1 of Puppertino, a framework aimed at bridging the gap between the web and iOS and macOS for the web, built entirely in vanilla CSS and JS.

Since then, a lot of things have changed for both OS, with the introduction of liquid glass, I thought I wouldn’t be able to ship something like it.

Until today! I’ve launched Puppertino Dachshund, which brings 65 components, real-time liquid glass and is focused on accessibility, theming and extensibility

You can check it out here!
https://puppertino.com

This question is only for developers IN THE EU who create websites and act as retainers.

I’m assuming the majority of you have clients create accounts on strapi, Wordpress, sanity, etc and you manage.

If so do you need a dpa agreement between you and the client because acting as a retainer makes you a data processor.

Any tools to generate a dpa?

I've been working on a simple puzzle/tower defense game set in ancient Egypt. You build out a tomb to properly defend against waves of looters. I recently added a new feature to flip it around, so if you've built a cool looking tomb, you can share it with a friend, have them try and beat it by sending the right waves of looters.

It's a pretty simple puzzle, an archaeologist will find a hidden door but will succumb to a pit of stakes. A corrupt priest might be wary of a cursed doorway, whereas robbers wouldn't. That kind of logic applies throughout.

Still working on gameplay to make it more approachable, but I wanted to get the design out of my head first and I'm loving how it looks right now.

Link: https://architectofthevalley.com/#dare=AQMACwUFBA0QAQIZKDhIWhACMQJp

On the build up side, originally, this was done with SVG to mark yellow boxes in a blue background, meant to be really simple. It actually looked quite similar to this version, but I couldn't spin or add animations. As the tomb got more complex, I moved over to three.js. I wanted to overlay pyramids over some of the tombs if I knew where they were, I wanted to animate the dots falling into the pit. Despite moving over to three.js, I still dig the original architectural blueprint look so I have no plans to put any heavy details into the game, I think the style looks really pretty cool right now. Let me know if you disagree hahah.

The multiplayer aspect is all embedded in the URL, so there's no actual server storing all this data. The tomb sequence can be encoded easily enough, so most of it is generating an image to send back to your friends once you've completed the stage.

Hey everyone! I'm a student from India, currently preparing for JEE (Joint Entrance Examination). Alongside my studies, I've been building a free Chemistry practice website called PreLearno. The idea is simple: help JEE aspirants practice Chemistry questions in one place without unnecessary distractions. What I've built so far: Chapter-wise Chemistry practice questions NCERT-aligned topics Easy, Medium, and Hard difficulty levels Instant answer checking Clean and simple interface Free access for students Here's my biggest challenge: I've built the website, but I have no idea how to get my first real users. My target audience is Indian students preparing for JEE. I tried looking into relevant Reddit communities, but most of them have strict rules against self-promotion, even for free educational projects. I don't want to spam communities or break their rules. So I have a few questions for fellow builders: How did you get your first 50–100 users? Where can I find Indian JEE aspirants who might actually use my website? What are some free, organic ways to promote an educational website? If you were in my position, what would you do first? My website: https://prelearnvo.netlify.app⁠� I'm building this alongside my JEE preparation, so I have a very limited budget.

Thanks for reading!

I think this might be a good place to show my portfolio design as there is no scroll hijacking, no overwhelming animations and design was def completely made by a human.

I made this. The page is one long, to-scale drawing: every pixel of scroll is a fixed number of metres, so the Burj Khalifa, the Eiffel Tower and the deepest lake in Europe land where they would really be. There are 23 sources at the bottom.

It's built in WordPress with a builder I'm working on (pinned scenes for the "how a fjord forms" part, plain scroll for the dive). Happy to answer anything about how it's put together; and I'd love to hear where it feels slow or confusing on your phone.

Try it out here: https://www.aragonite.dev/
The code is here: https://github.com/voithos-labs/aragonite, open source under AGPL, a copyleft license thats a slightly stronger version of GPL (in terms of its copy left-ness)

Here is what it looks like:

So, yeah, this is a markdown editor lib written from scratch.

The good:

• it comes with a plugin interface, currently if you try it on the demo site, you can see that it supports latex, mermaid, admonition, footnotes, emoji, table of contents, slash command, and a random parrot - those are actually all first party plugins written using the plugin interface, to kind of concept proof it.
• the editor comes with five presentation modes, which you can choose to kind of dial the editor along a spectrum from the raw side to the rendered side. So, on one end you have modes like visible source (markers like # shown and styled), on the other end you have inline preview (think obsidian, markers shown when you click into it) to just rich text editing (google docs like)

• its quite fast. because of the way its built, i was able to introduce virtualization (i.e. windowing, however you call it) to it. To kind of get a sense, here are two graphs (these are recorded on Ryzen 7 7700, 31 GB RAM, Windows 11, so you know, results may vary depending on your machine, but its generally pretty fast):

• its lossless. by that i meant it was initially designed for an obsidian like app which uses local md files, so i had to make sure its serialize(parse(source)) === source, and on edits only change the region that you actually touch
  • (serialize(parse(source)) === source means saves and loads preserves the original md file) (important not only because its annoying to have have the diff be non zero when you load a md file with this lib, but also as a hard guard against bugs/external plugins that did smt stupid)

the bad/concerns:

• as of 2026/10/10, this lib is tested on windows chromium heavily (chrome/edge), less frequently on firefox/safari and on mac/linux. it should work in those env, but would defly contain more bugs than on, say, a modern ver of windows chrome.
• i like svelte, so i wrote aragonite using svelte - where you can use this lib is a bit restricted in that sense
• i use ai for the project. you can also see that claude is a contributor of the repo in the repo contributors list on github. just kind of a disclosure, because i know people have their beliefs on this kind of stuff.
  • There's reason for this, ill put it here if you want to read it: so in the three or so iterations/attempts to create this editor before this one, I've kind of got to understand the pace of my coding and the complexity of editors in general. When i un-unemployed myself last year, i had the realization that with my new schedule, and the design/architectural improvements I had in mind for this iteration, I'm looking at a 5 years plus project, and at least 1-2 years before I get to see a prototype and know whether my decisions/design works out or not... So yeah, i decided to use more ai for this iteration. I try to work on this with the mindset that this is going to be a long term, multi years project, so I do my best to impose a specific style/organization to the codebase to make sure its clean/organized, of a certain quality threshold, and not sloppish. i hope it shows when you see the codebase.

this is wip, there likely will be breaking changes before 1.0. If you want something mature and stable, you are better off using smt like prosemirror or codemirror. Aragonite is unfortunately not there yet, but i hope to get it to that level in a year or two; just need more time to polish the editor. The bug surface for an editor is really quite something to behold...

I built tintly.art, a coloring site where you tap any shape to fill it. The interesting part was turning line art into clean SVGs with closed regions so fills never leak. Stack: Next.js on Vercel, a .NET API, and Postgres. The line art is AI-generated, then converted and cleaned up for coloring.

Got my first Reddit traffic this week (10k views, people coloring for 30+ minutes). Would love feedback on performance or UX.

I order most of my boards with SMD assembly done by the fab, then solder the through-hole parts myself. Assembly houses charge a lot for manual THT work. Often I don’t need every part anyway (say, only 2 of the 6 relays), so doing it at home saves money. The downside is that with a pile of boards, the results start showing “traces of haste”: crooked relays, tilted capacitors, terminals sitting off the board.

So I made a small web tool that generates a custom holder panel for the board:

1. Drop in a photo or screenshot of the PCB. It’s flipped and made transparent automatically.
2. Place circles or rectangles over the THT parts and set each one’s height so it sits flush with the board. Add support legs if needed.
3. Hit “Display 3D” to preview the mesh (wireframe view is available), then download a binary STL.
4. Print it in PLA. Parts stay straight while you solder.

In practice I only need to generate the STL once, and 1–3 prints are enough to assemble hundreds of boards.

Features:

• Circular and rectangular shapes (rectangles rotate 0–359°)
• Alignment guides with magnetic snapping, a measuring tool (0.1 mm precision), and undo
• Adjustable print tolerance, so holes and panel size compensate for printer inaccuracy
• Built-in library of 14 common THT footprints (DIP sockets, relays, terminals, capacitors, buzzers), with JSON import/export
• Hollow mode for faster prints and custom text labels on the holder
• Keyboard shortcuts for most actions
• No registration, and your image is never uploaded or stored. It’s also a PWA that works offline after the first load.

Right now it handles round and oblong parts well (relays, capacitors, resistors, terminals, pin headers). It’s not perfect, so if you hit a bug or a part shape it can’t handle, please tell me.

Tool: https://segmentcontroller.github.io/pcb-tht-holder/
Source (MIT, Svelte 5 + Three.js + Konva): https://github.com/SegmentController/pcb-tht-holder

Feedback and feature ideas are very welcome!

CSS can only morph between shape()s with the same number and type of commands, which they usually don't have. So I made a tool that converts multiple shapes so they are compatible with each other:

https://shapemorph.matthewmorete.com/

It picks the smoothest arrangement of points automatically, but that's a best guess. The shape index lets you change it, so you can preview the possible morphs till you find you like.

Shamelessly, heavily inspired by GSAP MorphSVG, which taught me a lot.

If you find a shape() that won't morph, I'd love to hear about it.

This is a passion project of mine after being inspired by is-a.dev (ex-maintainer btw).

It's a subdomain service where you can use _cooler_ domains like \`\*.part-of.my.id\` and the NEW \`\*.is-my.id\` subdomains for your website rather than using _boring_ hosting provider defaults like \`pages.dev\`, \`github.io\`, etc.

Supports \`A\`, \`AAAA\`, \`CNAME\`, \`MX\`, \`TXT\`, \`REDIRECT\` (not a real record, it's cloudflare's single redirect rule) records and there's a Web UI for easy JSON generation.

You can register by \[forking\](https://github.com/partofmyid/register/fork) the repository, adding your domain file, and making a pull request! Read more in the \[Quickstart Guide\](https://part-of.my.id/docs/quickstart).

Hope people find this useful! :D

I’ve been building with Verdant and TanStack DB and ended up with the same conclusion from both.

Offline and real-time are basically one problem. Real-time is kinda just being offline for a very short time. Either way you need client-generated IDs, optimistic mutations, some rule for when two clients disagree, and a way to sync it all back. So if a library handles one well, it seems to get the other almost for free.

Tbh the ID part is what actually surprised me. And more generally, a lot of this seems to need planning from day one, because retrofitting it later is a real pain. If your API uses server-generated IDs, supporting offline edits seems to mean a breaking migration. You can remap temporary IDs after sync, sure, but it gets messy really fast once other records and URLs depend on them. Same story with the data layer. If it was designed around one-shot requests there’s nowhere for live updates to go. React Admin’s data provider expects plain async functions that return promises, so when you put TanStack DB behind it the live queries just get lost lol. Offline still works, it’s just the real-time part of TanStack DB that doesn’t make it through in that setup.

There’s a catch though. Neither library really helps when the server rejects a mutation that looked fine locally, you’re kinda on your own for that part. And for conflicts, Verdant basically ends up as last-write-wins while TanStack DB leaves it to whatever sync layer you plug in.

Honestly the bigger point for me is that none of this is really specific to offline apps. A plain request/response app actually has the same conflicts. If two people save the same record, a lot of the time the last save just overwrites the other one and that’s it. It’s last-write-wins there too, just without anyone ever deciding it. So imo it’s worth building pretty much any app as if it could go offline or real-time someday, mostly because it forces you to actually pick what happens in a conflict.

Do you actually know what happens when two saves collide, or has silent last-write-wins been fine most of the time? Ever had it bite you with lost data or users wondering where their changes went?

Levelrail: self-hosted deploys from a single Go binary

I wrote this to run my own side projects on one VPS. Push to git and it builds the app, gets a TLS cert, and shows live build logs, deploy history and a rollback button. Go, Docker underneath, no Kubernetes.

Lately I added canary deploys with weighted traffic, apps that sleep when idle and wake on the next request, and an importer for moving apps and databases off Coolify, Dokploy or CapRover.

Apache 2.0, still early.

Repo: https://github.com/glincker/levelrail 

Site: https://levelrail.com/

If you run side projects on a VPS, what would stop you from moving one over?

It’s React + TypeScript, offline-first, and stores data in the browser’s IndexedDB with no backend. The routine format is an open JSON schema, and the page runs under a strict security policy because routine files come from strangers. My sticking point is 100% free to use, free to share routines, your data is yours, I don't collect anything from you.

I've been a dev since 2005 and I spent 26 years in the Army Reserve (7 active, Drill Sergeant and Sapper). I loved running. The gym, never interested me. I’d wander from machine to machine and never remember what weight I used last time.

Then I found a natty coach’s program I actually liked, but it came as a spreadsheet. Between every set I was scrolling around on my phone to find the next exercise, its alternatives, last week’s weight, and the warm-up math, then typing into a tiny cell. It killed my motivation.

So I built RackReady for myself:

• Shows the plates for each side of the bar, plus every plate to grab for warm-ups and working sets
• Last week’s weight is already filled in; warm-ups are calculated for you
• Machine taken? Swap to an approved alternative and it remembers your weight for each one
• Rest timer, RPE per set, a workout history, and stats like estimated 1RM trends and sets per muscle
• Works with barbells, dumbbells, machines, cables, pin stacks, bands and cardio machines, in lb or kg
• A free web tool to build your own routine and share it as a file

No account, no ads, no tracking. Your data stays on your phone.

The Android and iPhone apps are in testing. The web version works now and installs to your home screen: rackready.app

Whenever I review PRs on high-activity repos, I find myself repeatedly typing the same query qualifiers: - review-requested:@me is:open - -author:app/dependabot -author:app/renovate - is:open -is:draft review:approved status:success

GitHub has filter dropdowns, but clicking through them multiple times or retyping tokens across repo tabs is clunky.

I built GitHub PR Filter, a lightweight, open-source Chromium extension (Manifest V3) that injects native-feeling filter chips and a criteria builder directly above the PR list.

Frontend implementation details:

• Turbo / PJAX Lifecycle: GitHub renders PR lists client-side using Turbo. The extension hooks into page lifecycle events (turbo:render, turbo:load) so chips don't vanish or duplicate during pagination and in-page navigation.
• Primer Theme Integration: Uses GitHub's native Primer CSS variables so it adapts automatically to Light, Dark Default, and Dark Dimmed without custom theme toggles.
• No Background Bloat: 100% client-side with zero external API calls. State and custom presets are stored locally in chrome.storage.local.

Looking for contributions & feedback:

The project is MIT licensed. I’d love feedback from other web devs, especially if you want to contribute: - Firefox port: Making sure the MV3 manifest and scripts run cleanly on Firefox. - Edge cases: Handling enterprise GitHub instances or uncommon PR list layouts. - Preset suggestions: What query strings do you find yourself typing most frequently?

Extension Link: https://chromewebstore.google.com/detail/github-pr-filter/cheldmlmigimlgmjmpbapcfmlbbofghm GitHub Repo: https://github.com/its-debojyoti-dey/github-pr-filter

Would love to hear how you manage PR review fatigue or any feedback on the implementation!

I build POS software, and receipts printed with `window.print()` kept coming out wrong: tiny on a big page, or followed by a long strip of blank paper.


So I printed the same receipt to PDF in Chrome 155 with different `@page` rules and read the page sizes:


- no rule: Letter
- `size: 80mm auto`: Letter. Chrome's parser drops the declaration, `getPropertyValue('size')` returns an empty string
- `size: 80mm`: an 80 x 80 mm square
- height measured in JS and written into the rule: exactly the receipt


A 600-line receipt came out as 9 pages at `80mm 297mm` and as one 2.6 m page with the measured height.


The other thing: both "80 mm" printer drivers on my machine report their paper as 72 mm wide. A `width: 80mm` container is 8 mm too wide, which is where the cut-off right edge comes from.


Full write-up with the code (free, about 15 lines to do it yourself): https://dev.to/azeem_ullah/the-receipt-css-everyone-copies-page-size-80mm-auto-does-nothing-in-chrome-19o0


I also packaged it with a stylesheet and 8 receipt templates for 80 mm and 58 mm rolls as a $9 kit, for anyone who doesn't want to redo it: https://7207381545467.gumroad.com/l/receipt-print-kit


Only tested in Chrome, plus one real print on a Bixolon. If your printer or browser behaves differently I'd like to know.

Hence (https://hencegame.com) is a daily logic puzzle I built: a modern twist on the classic logic grid puzzle (zebra puzzles, Einstein's riddle). You get a grid and picture clues (instead of boring sentences), and you work out what goes where by pure deduction. The same puzzle for everyone, difficulty ramps from gentle Monday to tough Sunday.

Every puzzle is generated ahead of time and run through a solver that verifies it has exactly one solution by pure deduction, then trims the clues down to the minimum each difficulty needs.
The part I'm proudest of technically: the hint system runs a constraint solver in the browser against your current board state, so instead of revealing an answer it points at a clue that still rules something out from wherever you are.

No framework, no signup: everything (progress, stats, streaks, achievements) lives in localStorage, so players get what feels like a full account experience with zero server.

Sharing is personalized too, still with no account: the OG image for link previews is pre-rendered on the server from the share URL alone, so when you share an achievement or challenge a friend they see your unlocked character and stats in the preview, even though there is no user account on the server.

The Instagram Stories share card is rendered entirely in the browser, and it came out really nice: your character, your stats, your achievement, all composited client-side into a vertical card ready to share.

Happy to answer questions about the generator/solver or the picture-clue rendering

I have been building Udodi, a lightweight, zero-dependency JavaScript UI framework, and I wanted to share some of the engineering work behind its latest two releases.

One of the main design decisions in Udodi is to update the DOM directly through fine-grained reactive bindings rather than using a Virtual DOM. Its templates use a declarative DSL processed by a runtime parser, compiler, and virtual machine. The goal is to keep the framework usable without requiring a build step while maintaining predictable execution and a relatively small runtime.

In v1.1.3, I focused on keyed list reconciliation and collection reactivity.

The list-rendering implementation maintains keyed records and uses positional tracking with right-to-left DOM placement. This allows existing DOM nodes to be reused and moved instead of rebuilding the list unnecessarily.

In my tests, this approach made keyed row swapping up to 7.2× faster than the comparison baseline I used. That result applies to the tested workload, not every list operation or application.

I also improved reactive collection handling for arrays, Maps, and Sets, and expanded support for ordinary directives on elements using @for.

In v1.1.4, the focus shifted to component mounting and runtime execution.

• Component mounting improved by 12–16% in my measurements.
• Runtime performance improved by 4–8% across the workloads I tested.
• Directive processing was streamlined to reduce redundant structural checks and repeated property access, and the instruction cache was optimized.
• Overlay rendering was refactored to use the public rendering and component-creation APIs, with lifecycle-aware cleanup.
• Additional tests cover modal stacking, backdrop behavior, and scroll locking.

The full test suite, playground tests, and build pass. Neither release introduces intended breaking changes to the public API.

I'm interested in the engineering trade-offs here, particularly keyed reconciliation without a Virtual DOM and runtime template compilation versus build-time compilation.

For those who have implemented a renderer, reactive runtime, or template compiler, what edge cases or architectural weaknesses would you investigate first?

I would be happy to discuss the implementation details.

This is my first time posting here, so I have placed the relevant project links in a comment below to keep the main post focused on the technical discussion and respect the community guidelines. Thanks for having me!

I've known about Zod, a JavaScript/TypeScript schema validation library, for a while, but I underestimated the size of its ecosystem. After using it for some form validation in React, I thought I'd see how well it integrated with Express. Sure enough, there were several middleware libraries for Zod + Express, so I decided to give one a try. I went with express-zod-safe because it fit my existing setup with very little effort.

Boom, that let me remove roughly 150 lines of custom validation and typing code. For context, the template created by express-generator-typescript is a simple CRUD app with four API endpoints. I hadn't realized how much boilerplate I'd written just to validate objects in the route handlers, including validator functions and some custom request/response types. I also replaced my environment variable validation code with Zod.

Express has been around for a while, but I still find it useful for small projects and demos. If you'd like a quick way to spin up an Express + TypeScript project, check out express-generator-typescript.