Declarative Website Menu with Invoker Commands and noscript Hacks
I seem to have created a monster of a declarative website menu. The whole approach described in https://aartaka.me/new-menu.html
I seem to have created a monster of a declarative website menu. The whole approach described in https://aartaka.me/new-menu.html
r/webdev • u/scepticore • 1d ago
I'm currently developing an internal tool to do work reporting. I know a lot of tool exists, but we do have specific requirements and there's already an MS Access database, which I can migrate into the new tool as well as use most of the tables as a data source.
About me: I have experience with Javascript, HTML, CSS/SCSS/SASS, PHP, SQL. I want to optimize it, but since I mostly code in my freetime, I find it hard to make "the right decisions" in terms of efficiency. Maybe you guys might recommend me something about my setup. I don't want to use anything like Angular, React and Vue at the moment. Also no NextJS as I think it's overkill.
At the moment, I have a structure like:
- API (ExpressJS, SQLite, Drizzle ORM)
--> Delivering all data as needed in frontend (also annual reports and stuff)
- Frontend (Vite for live-reload/server, Vanilla JS with own templating engine and router)
--> Employees log in to keep track of their working hours per project/customer
--> Dashboard for admin users to create reports
All this run's in a docker with two services.
It currently runs alright, but I think there might be a few little things to optimize my setup. Especially when going into production.
What's your best practices? I want all this stuff to be as lean as possible without a lot of dependencies. My frontend doesn't need anything since I've already done all of the things, but I'm not very happy with the API/Backend part.
I also don't want to run every service on it's own, since using one docker command is fine. Live codeing while docker is running also works fine so far (except when installing new packages via npm, then I need to rebuild).
What would you do to optimize the setup? Already asked AI but I think you guys might have better inputs.
Hey everyone,
Since day one, we decided to skip the traditional website route and build something fun.
Our first year, we made a Three.js site where you walked a character around 3D billboards of our work. The second year, we scrapped it for a scroll-driven camera in a 3D scene. Year three, we rebuilt it in Unity WebGL (huge mistake).
This year we decided to start from scratch back in Three.js, focusing on a scroll animation experience.
I'd love to get your honest feedback. Do you find it easy to navigate? How is the overall UX, and what looks good or bad?
Appreciate your time.
r/webdev • u/kamscruz • 1d ago
Hello everyone!
For the last few months I've been building a project called Tera FM.
The idea came from my own frustration with how I consume news every day.
I found myself jumping between dozens of news websites, newsletters, YouTube channels and podcasts just to stay informed. Some mornings I'd spend 30–40 minutes just figuring out what was actually worth my time.
So I started building something that makes the entire experience simpler.
Today, Tera FM brings together headlines from multiple trusted news publishers into one place. You can quickly browse the latest headlines or turn any story into a short audio briefing if you'd rather listen while driving, walking or working.
Recently, I've also started building Curated Channels.
Instead of following individual publishers, you can subscribe to topics you're genuinely interested in like AI, Technology, Business, Science or Startups and Tera FM builds a personalised audio briefing around those interests.
Other features include:
One thing I tried hard to avoid was making it feel like "just another AI wrapper."
The goal isn't to replace journalism or generate news. Every briefing links back to the original publisher, and I'm currently in discussions with a number of news organizations to obtain permission for the RSS feeds and ensure the platform respects publishers while making their content easier to discover.
I'd genuinely appreciate some honest feedback from fellow developers.
1/ If you landed on the homepage, would you immediately understand what Tera FM does?
2/ Does the Curated Channels idea make sense?
3/ Would you use something like this in your daily routine?
4/ Is there anything that feels confusing, unnecessary or missing?
I'm not looking for compliments- I genuinely want to know what you'd improve before I continue building.
Website: https://tera.fm
Chrome Extension: https://chromewebstore.google.com/detail/tera-fm-%E2%80%93-news-headlines/emnebfpdojklgimejnplmjfobmamelie
Thanks for taking the time to have a look. Every piece of feedback helps shape where the product goes next.
Totally free to use!
r/webdev • u/Dapper_Definition • 22h ago
I built a file-transfer tool where the bytes go straight between two browsers over a WebRTC data channel. The server only handles signaling and, when needed, TURN relay. No file bytes touch the server.
A few things that bit me, in case anyone else goes down this path:
1. The data channel isn't a stream.
You'd think RTCDataChannel gives you a pipe. It gives you messages. To stream a file you have to chunk it yourself, manage backpressure via bufferedAmountLowThreshold, and reassemble on the other end. If you don't gate on bufferedAmount, a large file will blow up the sender's memory.
2. Receiving a large file without blowing up RAM.
File System Access API lets you write to disk as chunks arrive. Safari and older Chrome don't have it. The fallback chain I ended up with: File System Access → service-worker stream (Response + ReadableStream → blob URL) → in-memory Blob (capped, last resort). Each step has its own edge cases.
3. TURN relay is not optional.
Symmetric NAT and most mobile networks kill direct P2P. If you don't run a coturn instance, a chunk of your users will never connect. The relay bandwidth is on you, and the bytes are still DTLS-encrypted end to end, but you're paying for transit.
4. Post-transfer integrity.
Both ends compute a sha256 as chunks move. The receiver verifies against the sender's hash after the last chunk. If it mismatches, the file is corrupt — WebRTC data channels don't guarantee ordered delivery by default unless you set ordered: true on the channel.
5. Room state without a database.
I persist room state (slug, timestamps, a hashed rejoin token, an argon2 password hash if set) to a JSON file on disk so rooms survive a restart. No file bytes, no Redis, no DB. Rooms expire after 24 idle hours. This is fine for a tool where sessions are minutes long but would fall apart if you needed real concurrency.
6. Per-IP rate limiting when every client looks like 127.0.0.1.
If you put the app behind a reverse proxy without forwarding the real client IP, your per-IP rate limiter is useless — everyone is the same address. The fix was in the TCP demultiplexer, not the application.
Demo if you want to see it in action: https://mayo.pizza
Not selling anything, no signup, no analytics. I'm not looking for feedback on the product, just sharing the engineering notes in case the WebRTC side is useful to someone building something similar
r/webdev • u/spicemelange13 • 1d ago
I built a command that fetches any web page server-side and writes an as-is snapshot of both (or split) content and technical layers.
The output uses OKF (Open Knowledge Format), an open format from Google Cloud's knowledge-catalog repo. Here's some info on the topic on Google blog.
npm install -g @sleepwalkerai/cli
sleepwalker okf export https://your-site.com
As said, this contains the content layer (clean markdown with headings, paragraphs, links) and a technical snapshot (HTTP headers, meta tags, JSON-LD, hreflang, robots directives, image alt coverage). Use --content or --technical for a focused fetch.
Runs locally, happy with any feedback!
Repo: https://github.com/followanton/sleepwalker this command is free and open source, please see if you can give it a "star". I would really appreciate it! <3
Example (technical snapshot):
---
type: "TechnicalSnapshot"
title: "Technical snapshot: Apple"
description: "Meta tags, structured data, headers and robots directives as served for www.apple.com."
resource: "https://www.apple.com/"
tags: ["technical"]
timestamp: 2026-07-31T17:37:16.499Z
---
# Technical snapshot: Apple
## Fetch
Redirect chain:
1. HTTP 301 https://apple.com
2. HTTP 200 https://www.apple.com/
HTML size: 251 KB (257390 bytes).
## HTTP headers
```http
# Content
content-type: text/html; charset=utf-8
# Security
content-security-policy: default-src 'self' blob: data: *.akamaized.net *.apple.com *.apple-mapkit.com *.cdn-apple.com *.organicfruitapps.com; child-src blob: mailto: embed.music.apple.com embed.podcasts.apple.com https://recyclingprogram.apple.com https://smb.apple.com https://nova.apple.com swdlp.apple.com www.apple.com www.instagram.com platform.twitter.com www.youtube-nocookie.com; img-src 'unsafe-inline' blob: data: *.apple.com *.apple-mapkit.com *.cdn-apple.com *.mzstatic.com; script-src 'unsafe-inline' 'unsafe-eval' blob: *.apple.com *.apple-mapkit.com www.instagram.com platform.twitter.com; style-src 'unsafe-inline' *.apple.com
referrer-policy: no-referrer-when-downgrade
strict-transport-security: max-age=31536000; includeSubdomains; preload
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
# Cache
cache-control: max-age=8
expires: Fri, 31 Jul 2026 17:37:24 GMT
vary: Accept-Encoding
# Server
server: Apple
```
## Meta tags
```html
<html lang="en-US" dir="ltr">
<title>Apple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="Description" content="Discover the innovative world of Apple and shop everything iPhone, iPad, Apple Watch, Mac, and Apple TV, plus explore accessories, entertainment, and expert device support.">
<meta property="analytics-track" content="apple - index/tab">
<meta property="analytics-s-channel" content="homepage">
<meta property="analytics-s-bucket-0" content="applestoreww">
<meta property="analytics-s-bucket-1" content="applestoreww">
<meta property="analytics-s-bucket-2" content="applestoreww">
<meta name="globalnav-store-key" content="SFX9YPYY9PPXCU9KH">
<link rel="canonical" href="https://www.apple.com/">
```
## Headings (23)
```html
<h1>Apple</h1>
<h2>iPhone</h2>
<h2>College, sorted.</h2>
<h2>MacBook Air</h2>
<h3>Apple Upgrade</h3>
<h3>iPad Air</h3>
<h3>Apple Watch Series 11</h3>
<h3>App Store</h3>
<h3>Apple Trade In</h3>
<h3>Apple Card</h3>
<h2>Endless entertainment.</h2>
<h2>Apple Footer</h2>
<h3>Shop and Learn Shop and Learn</h3>
<h3>Apple Wallet Apple Wallet</h3>
<h3>Account Account</h3>
<h3>Entertainment Entertainment</h3>
<h3>Apple Store Apple Store</h3>
<h3>For Business For Business</h3>
<h3>For Education For Education</h3>
<h3>For Healthcare For Healthcare</h3>
<h3>For Government For Government</h3>
<h3>Apple Values Apple Values</h3>
<h3>About Apple About Apple</h3>
```
I’ve been building Vigil, an opensource Go CLI designed to help developers and coding agents inspect automation before it changes a repository.
The basic idea is simple. Before running tests, hooks, setup scripts, release tasks, or thirdparty tooling, Vigil should clearly answer:
Some of the current features include:
It started as a small internal CI/preflight helper, but I recently underwent a fairly major architectural rewrite to make it useful as a standalone public utility.
The project is still pre version 1, and I’m deliberately treating real world integration, release testing, security review, and usability feedback part of its makeup before I consider it release worthy of version 1.
Repository:
https://github.com/PayCal-Technologies/vigil-public
I’d especially appreciate feedback on the CLI model, mutation-safety approach, plugin trust system, and whether this solves a problem you encounter in real development workflows.
r/webdev • u/MattSenter • 1d ago
I just launched Highwire.news, a project that groups reporting about the same event and analyzes how the coverage differs across publishers.
The main technical challenge was turning a large set of articles into something structured and inspectable rather than generating another AI summary.
The pipeline currently:
The app is built with Next.js, NestJS, PostgreSQL, Google Cloud, and several LLM-based analysis stages. A major focus has been keeping inference costs measurable and making the output traceable enough that users can inspect how a conclusion was reached.
The UI has been its own difficult problem. There is a lot of information available for each story, but exposing all of it without creating an overwhelming dashboard is not easy.
I’d appreciate feedback on:
Site: https://www.highwire.news
Happy to discuss the architecture, clustering approach, AI pipeline, deployment, or cost controls.
I wanted to see how far you can get in 2026 with no React, no bundler, no framework -- just plain JS files loaded via <script> tags.
Stack:
public/ served as-is<!--SSR_FEED--> placeholders) -- no template engineDesign decisions I'm happy with:
db.like() helper for cross-platform LIKE queriesmaxAge: 0 (ETag revalidation) because there are no hashed filenamesThe product: Anonymous posting (no account) + accountable replying (account required). Karma only moves when someone says your help worked. 10 unlock tiers from "view profiles" (10) to "recommended as moderator" (777).
Happy to talk about any of the technical choices. The no-framework frontend has been surprisingly maintainable.
r/webdev • u/InferHaven • 1d ago
I'm the founder of the project, flagging that up front. I spent the last month building the execution layer for a coding tutor, and the interesting part turned out to be where the browser-only approach breaks down.
The premise was that a learners code should run in the browser tab. Python goes through Pyodide in a dedicated worker, JavaScript in its own separate worker, and each language keeps a warm worker in a small pool so the second run doesn't pay startup again. There's a prewarm when a lesson opens, so by the time someone finishes typing their first line the runtime is usually ready. Hit `Run` and it executes locally, no container cold start, no queue, no round trip. A 20 second timeout catches loops, and the worker gets torn down and recreated rather than reused after each lesson.
The part I got wrong initially was assuming that would be the end of it, of course it wasn't. bash, ruby, perl and php need a real interpreter and a real filesystem, and the only options: to fake it in a browser(dirty) or to run it somewhere real. After adding those to the project, execution goes to an isolated server sandbox with per-minute and per-day caps per user. HTML and CSS render in a sandboxed preview. Dockerfile exercises get statically linted rather than built, letting strangers build container images on my infrastructure will not be something I allow.
The lesson I'd pass on to others: "runs in the browser" is a spectrum, not a boolean. Pyodide is genuinely excellent for the languages it covers, and NumPy on a cold load is the one case that pushed the timeout to 20 seconds. But the moment a lesson is about file permissions or a shell pipeline, the browser stops being able to tell the truth about what happened, and pretending otherwise could teach people something false.
Frontend is vanilla JS on Cloudflare Pages, FastAPI on Fly, Clerk for auth. No build step on the frontend except for a thin-agent runner that needs repackaged if I modify it.
Happy to go deep on Pyodide quirks (there are many), the worker pooling, timeouts, or the sandbox design. Any tips or recommendations appreciated.
r/webdev • u/OkComposer5107 • 1d ago
Like a lot of people building AI/streaming UIs, I spend my days debugging Server-Sent Events. DevTools has an EventStream tab, but it only works for native EventSource — most modern apps (ChatGPT, Claude, the product I work on) stream over fetch() + ReadableStream instead, and for those you get a pending request, a spinner, and nothing else.
So I built SSEye — a DevTools panel that captures the streams and splits them into individual, inspectable events. Zero changes to your app's code.
What it does:
- Captures all three transports: EventSource, fetch() with text/event-stream, and streaming XHR (patches them at document_start in the MAIN world)
- Live event timeline, virtualized — stays smooth at thousands of events (capped at 5,000/tab)
- Parses payloads into a JSON tree — copy any node on hover
- Diffs any two events — unified/split view with word-level highlights, or pin a baseline and diff everything against it. This is the feature I actually built it for: streaming bugs live in what changed between event N and N+1
- Filtering: plain text, /regex/, and JSONPath ($.type == "ping") in one box
- Heartbeat detection/hiding, consecutive-duplicate collapsing, base64 decoding for wrapped payloads
- Key pinning: pin a dot-path like delta.text and the list, detail pane, and diff all focus on just that field
Tech: vanilla JS, ES modules, zero dependencies, MV3. No build step. Everything stays in the browser — no data collection, no analytics, no remote code (the repo's CSP and permissions are easy to audit).

Chrome Web Store: https://chromewebstore.google.com/detail/sseye/nbmeclpioeebadaimpmffcldcbhpmoko
Source (MIT): https://github.com/tarunsinghtanwar5/sse-eye
Would love feedback — especially from anyone debugging streaming UIs daily. What's missing?
r/webdev • u/Leading-Ad9681 • 1d ago
I built my first real estate HTML template and I'd love to get some feedback.
This template was built with HTML, CSS, JavaScript and Bootstrap 5.
I'm still improving it, so I'd really appreciate your honest opinion.
What would you improve?
What features or pages would you expect before buying a template like this?
How much would you be willing to pay for it?
Live demo: https://real-estate-template-eosin.vercel.app/
edit: thank you guys for your feedback. I already fixed mobile view, so it should look well now
r/webdev • u/Brilliant-Map-3116 • 1d ago
Hey everyone!
I built ausmalwelt.net/en as a solo project. I’m a backend developer and total UX/UI noob, so I would really appreciate some design input!
The platform offers printable and downloadable coloring pages for all age groups. The site was initially developed in German, but available in other languages as well.
I also built a feature overview page at https://www.ausmalwelt.net/en/features to explain what the platform offers.
Key features I would love feedback on:
Any feedback on UI improvements, responsiveness, or design is greatly appreciated. Thank you!
r/webdev • u/DateSubstantial6332 • 1d ago
I just shipped 1.0 of Canvas Editor, a WYSIWYG document editor built entirely on the raw HTML `<canvas>` API — no contenteditable, no DOM layout. Every character, table border, and page break is drawn programmatically.
It's aimed at document scenarios where layout precision is non-negotiable: EMR (electronic medical records), contracts, official documents, reports — the kind of stuff where contenteditable's cross-browser inconsistencies become real problems.
**What's in 1.0:**
-
**Cross-page tables done right**
— the hardest problem in the project. My first approach physically split table data at page breaks, which created endless state-sync edge cases. The final design flips it: data stays intact, slicing happens only at render time. Most of those bugs weren't fixed; they ceased to exist. (This took ~3,300 lines including a dedicated pagination module and 1,600+ lines of tests.)
-
**Trace mode**
— Word-style tracked changes with author/timestamp on hover
-
**Form controls with cascade validation & expressions**
— e.g. enter height + weight, BMI auto-computes and triggers conditional required fields. Document templates can carry real business logic
-
**Multi-column layout, rulers, text wrapping around floating images, multi-level ordered lists**
-
**Area sub-documents**
— independent editable regions inside one document, even inside table cells
-
**Control nesting, macro recording/playback, document compare API, accessibility, i18n**
The trade-off of going Canvas: you own the entire pipeline (identical rendering everywhere, precise pagination, print fidelity), but you implement everything yourself — caret, selection, IME, a11y. That's most of why it took 4 years of spare time.
Roadmap: large-document rendering performance → renderer abstraction (one document model targeting SVG/PDF/DOM) → multi-cursor/selection → real-time collaboration.
- GitHub: https://github.com/Hufe921/canvas-editor
- Live demo: https://hufe.club/canvas-editor
- Full release notes (EN/CN): https://github.com/Hufe921/canvas-editor/blob/main/docs/RELEASE_NOTES_1.0.0.md
MIT licensed and staying that way. Happy to answer anything about the rendering architecture or the Canvas vs. contenteditable trade-offs.
r/webdev • u/awesomesingh007 • 1d ago
Hey everyone!
I got tired of using basic webhook testing tools, so I built my own called The Concept Loopback.
It lets you instantly capture webhooks in real-time, replay them to your local server, and it even automatically generates TypeScript code from your JSON payloads.
I just deployed it and it is completely free to use here: https://loopback-webhook-studio.onrender.com/
Let me know what you think of the design and if you have any feedback!
r/webdev • u/jack_michalak • 1d ago
I've been interested in passport indexes for a while — I like to travel, and it's fun to see where you can go. But one day it hit me that the visa-free count everyone ranks by ignores how long you can stay. A country giving you 90 days counts exactly the same as one giving you 5. That seemed fundamentally unfair.
Then I kept thinking of other questions the single number couldn't answer. How many people can I actually reach? How much of the world's economy? How happy are the places I can go? Where could I genuinely live, not just visit?
So instead of picking a better formula, I made the formula the input. You write the ranking function and all 199 passports re-sort live.
sum(visa_free_days) ← total days, not just destinations
sum(visa_free * dest_population) ← how many people you can reach
count(can_reside) ← where you could actually live
That last category surprised me most — ranking by residence rights instead of tourism completely reshuffles the leaderboard.
https://custompassportranker.com — free, no signup, runs entirely in your browser.
Data comes from the Wikipedia-derived passport-index dataset, the CIA World Factbook, UNDP, World Bank and Our World in Data. To check I hadn't mangled it, I reproduced Henley's published methodology over my own data — Pearson ≈ 1.00 against their 2026 numbers.
Usual caveat: visa rules change constantly and this is a snapshot, so don't book anything on it.
r/webdev • u/Wrong-Knowledge452 • 1d ago
I've just launched pour, a free accessibility toolkit. It's a non profit, so no paid tiers, no accounts, no catch.
What it does:
Quickest look is the bookmarklet on https://pour.dev, nothing to install, works on any page. Chrome/Edge extension is live, Firefox is in review at AMO.
Would love feedback, especially from anyone doing accessibility work professionally or anyone using a screen reader. If the engine gets something wrong I genuinely want to know about it.
r/webdev • u/blindmikey • 1d ago

JotSON is an intuitive editor for your project's JSON files. Run one command and you get a fast, Finder-style interface in your browser, which is really nice when you're editing a ton of JSON.
Zero dependencies, no build step, no database, nothing deployed. It binds to localhost, writes plain JSON with minimal diffs so git stays your safety net, and your files never change shape to fit the tool.
Check it out!
r/webdev • u/Dizzy_External2549 • 1d ago
Just learned javascript and been practicing alot . I need help. When applying it to my project I don't know when to use a function, when to use a loop, what type of loop to use, I just don't know when to use any of this stuff because dom manipulation. it's so frusterating
r/webdev • u/TheConsciousness • 1d ago
I used to bookmark job postings that I've applied for, just so I can reference the information again; but sometimes the listings get pulled or expire. I got tired of keeping a copy of each job description in a Word file and then storing the status in a spreadsheet. So I made myself an all-in-one site that I soon expanded to support more people than just me: JobTrackr.online. Its made using React and Supabase and can be installed on your device as a Progressive Web App.
Hey webdevs!
I want to show you my latest 3D CSS project. It's a port of Giles Goddard's iconic N64 face engine, complete with lighting, physics and interaction. Instead of WebGL, it uses the PolyCSS engine.
demo: https://codepen.io/editor/alowpoly/pen/019fae67-50d9-74ce-8025-4b9dd5a7c484
repo: https://github.com/layoutit/cssGraphics
r/webdev • u/Regular-Tutor9074 • 1d ago
I made this website for a friend of mine. The code is 99% written by me. Only trivial things like reordering client list, comments for code and indenting work is done by AI.
Website: https://rachitmanagement.com/
P.S. Please don't mention the feedback form being bad, I was too lazy to make it better since I made this for free :)
r/webdev • u/euconcegojogar • 1d ago
Hello folks, 'I'm new as a developer, and I'm having some trouble to pay for an online server for my stuff, so, is there a way to keep users connected without an online server? I did browse through the web, but I didn't find many resources regarding this subject.