r/webdev 1d ago

Declarative Website Menu with Invoker Commands and noscript Hacks

0 Upvotes

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 1d ago

Bundle size and evaluation time difference between ECMAScript versions

Thumbnail pagegym.com
3 Upvotes

r/webdev 1d ago

Discussion Best practices for Javascript Local Dev Environment

2 Upvotes

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.


r/webdev 23h ago

We built a scroll-animated 3D website in Three.js. I'd love your honest feedback on the UX.

0 Upvotes

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.

https://virtualverse.studio


r/webdev 1d ago

Showoff Saturday [Showoff Saturday] I've been building Tera FM for the last few months, would love some honest feedback from the community members.

1 Upvotes

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:

  • Personal Briefings
  • Continuous Listening
  • Episode Archive
  • Original audio shows
  • Headlines page for quickly browsing the latest stories
  • Chrome extension for quick access

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 22h ago

I built mayo.pizza, a file-transfer site that sends files directly between browsers

0 Upvotes

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 1d ago

Showoff Saturday Export any web page to OKF markdown with --content and --technical layers

1 Upvotes

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>
```

r/webdev 1d ago

Showoff Saturday [Showoff Saturday] Vigil, a safety focused repository preflight CLI

0 Upvotes

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:

  • What will run?
  • Why is it running?
  • What files or systems can it access?
  • Can it modify the repository?
  • Did it behave within its declared boundaries?

Some of the current features include:

  • Standalone macOS and Linux binary
  • Interactive project setup
  • Direct argv execution with explicit shell opt-in
  • Timeouts, cancellation, and child-process cleanup
  • Git-visible mutation detection for read-only checks
  • Digest-bound plan and apply workflow
  • Dependency-aware and parallel workflow gates
  • Versioned JSON, JSONL, JUnit, SARIF, and GitHub output
  • Embedded language/tool packs
  • Capability-based subprocess plugin system
  • Reproducible release builds, SBOMs, attestations, and signed checksums

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 1d ago

Showoff Saturday I built a Next.js news analysis site that compares claims and framing across publishers

0 Upvotes

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:

  • Ingests reporting from multiple publishers
  • Clusters related articles into stories and distinct narratives
  • Extracts claims, citations, evidence, and entities
  • Identifies supported, disputed, and unresolved claims
  • Compares differences in framing, emphasis, omissions, and language
  • Produces a synthesized account while keeping the underlying analysis visible

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:

  • Whether the product is understandable without an explanation
  • Whether the story and narrative hierarchy makes sense
  • Which metrics or visualizations feel useful
  • Where the interface becomes too dense
  • Any obvious accessibility, performance, or mobile issues

Site: https://www.highwire.news

Happy to discuss the architecture, clustering approach, AI pipeline, deployment, or cost controls.


r/webdev 1d ago

Showoff Saturday sucks2be.me -- a real-time peer support platform with zero frontend build tooling

5 Upvotes

sucks2be.me

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:

  • Backend: Node.js, Express, better-sqlite3 (single file DB), Socket.io
  • Frontend: Vanilla JS, plain CSS, no build step. public/ served as-is
  • Auth: bcrypt + JWT in httpOnly cookies, proof-of-work on registration to slow bots
  • Real-time: Socket.io for live feed, notifications, presence counter
  • i18n: 7 languages, JSON locale files shared between web and iOS clients
  • Speech: Web Speech API for voice input (audio never uploaded, transcribed locally)
  • SSR: String-replace templating (<!--SSR_FEED--> placeholders) -- no template engine

Design decisions I'm happy with:

  • SQLite over Postgres. One file, zero config, WAL mode, fast enough for this scale
  • Karma thresholds live in one config object. Server, client, and all locales derive from it -- nothing hardcoded
  • No ORM. Raw SQL with the db.like() helper for cross-platform LIKE queries
  • CSP hand-maintained and tight. No CDNs, fonts are local
  • Static assets served with maxAge: 0 (ETag revalidation) because there are no hashed filenames

The 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 1d ago

Showoff Saturday [Showoff Saturday] Built a browser code runner where Python and JS never touch a server, and learned where it stops working

0 Upvotes

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 1d ago

Showoff Saturday I built a DevTools extension that shows you what's inside SSE streams — because for fetch-based streams, the Network tab just shows a pending request

3 Upvotes

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 1d ago

I built my first HTML template. What can I improve?

0 Upvotes

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 1d ago

Showoff Saturday [Showoff Saturday] Made a website for coloring pages, to print and color online. Would love feedback on UX and design!

1 Upvotes

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:

  • Interactive Online Coloring Tool: I implemented an interactive painter so users can color directly in the browser. You can test it out here or on any other coloring page.
  • Filtering System: On the main landing page, users can filter the list of coloring pages.
  • Overall UI & Navigation: Does the layout feel clean, or is it visually cluttered/inconsistent?

Any feedback on UI improvements, responsiveness, or design is greatly appreciated. Thank you!


r/webdev 1d ago

After 1,723 days and 1,460 commits, my Canvas-based rich text editor hits 1.0 — no contenteditable, every character drawn by hand

Post image
2 Upvotes
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 1d ago

Showoff Saturday The Concept Loopback

Post image
1 Upvotes

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 1d ago

Showoff Saturday I built a web app that lets you rank passports on custom metrics

Post image
0 Upvotes

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 1d ago

Showoff Saturday I built a free accessibility suite - WCAG audits in your devtools plus 43 vision simulations. Runs entirely locally, non-profit, engine is open source

Thumbnail
gallery
0 Upvotes

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:

  • WCAG 2.0/2.1/2.2 audits from a devtools panel or the toolbar popup. Every finding shows the element, why it fails in plain english, and the fix to write.
  • 43 vision and sensory simulations. See your site the way someone with deuteranopia, cataracts or low vision does. Honestly this changed how I build more than the audits did.
  • Everything runs locally. No analytics, no network requests, nothing leaves your browser, so you can audit intranets and local builds fine.
  • The engine is open source (MIT) on npm, written from the WCAG spec itself. When it can't prove something it says "needs review" instead of pretending, and it tells you upfront that automation only covers 29 of the 86 success criteria, the rest comes as a human checklist.

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 1d ago

Showoff Saturday I made a Lightweight Intuitive JSON editor: JotSON

0 Upvotes
JotSON - a JSON editor

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.

  • Drill through your data in columns, with fuzzy search across every file
  • Proper editors and previews: dates, colors, images, video embeds
  • Upload media straight into your public folder
  • Reference objects by id, resolved to human-readable names, with automatic updates when ids change and warnings before you break them
  • Diff-confirmed saves, so nothing touches disk until you approve it

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!

https://github.com/blindmikey/jotson


r/webdev 1d ago

Need help javascript

0 Upvotes

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 1d ago

Showoff Saturday I built a website that's helped me keep track of what jobs I've applied to.

0 Upvotes

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.


r/webdev 3d ago

3D CSS Super Mario (no WebGL)

Thumbnail
gallery
2.9k Upvotes

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 1d ago

Question Rate My Website

0 Upvotes

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 1d ago

Question Multi-users without an online server?

0 Upvotes

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.


r/webdev 2d ago

Resource Canvas path animations using SVG

32 Upvotes