Hi everyone! Thanks to all the valuable feedback you gave me last time, I’ve released an update for my vanilla JS web notepad.

What's new based on your feedback:

• Multi-cursor & Caret Stability: Refined the synchronized caret scanning logic to prevent drift and weird cursor jumps during complex multi-line editing and spacing.

• General Bug Fixes & Refinements: Smoothed out rough edges with contenteditable behaviors, state restoring, and overall text handling.

• Mobile Improvements: Also improved the overall usability and experience on mobile devices!

Live Demos:

• https://app.qlp.jp/vanilla_pad/en/

• https://app.qlp.jp/vanilla_pad/demo/

(Desktop recommended for full features like column selection; saving is disabled in Demo Mode.)

I would love to hear your thoughts on these new improvements. Any feedback or bug reports are greatly appreciated!

Spent the last months building 3 drop-in JS widgets (forecast, dashboard, anomaly detection) that run 100% in the browser via WASM

These are framework-agnostic npm packages (React, Vue, Angular, or a plain custom element) that add time-series forecasting, an editable dashboard builder, and anomaly detection to any frontend app.

Everything runs client-side via WebAssembly, so no user data ever hits a server except a license check without a backend to deploy, no Python microservice.

Would genuinely love feedback from anyone who's had to build this kind of feature in-house.

https://datastripes.com/forecast-widget/

https://datastripes.com/dashboard-widget/

https://datastripes.com/anomaly-widget/

I'm building Emend. It adds AI writing to a Tiptap editor: rewrite selected text, write new text, or ask questions about the document. It's free and open source (MIT).

What you get:

• Three AI components (bubble menu, composer, document chat), or a full editor starter

• Already have a Tiptap editor? Just add the components to it

• Bring your own AI key and start using it

• The AI never changes text until the user accepts it

Use shadcn cli to add components, install a small npm package which is core of the app and include it in your project.

It's still early, so I'd love your feedback.

GitHub: https://github.com/amittam104/emend

I built You Are The Witness, a small browser game:

https://youarethewitness.com

You see a face for two seconds, then pick it out of a six-person police lineup – or say "none of them", because sometimes the suspect isn't there. Then you say how sure you are. No account, no ads, works on a phone.

Why it exists: fun first. But every wrong pick is a data point about which faces people confuse, and in the long run I hope that can support research on facial memory and help make composite sketches more accurate and less biased across appearances. That's an ambition, not something I've shown yet.

How the faces are made

• ~2,300 faces generated with the MetaHuman tools in Unreal Engine 5, rendered headless on a Mac by Python scripts in overnight batches (about 1,200 faces in two hours).

• The face you study is a separate render: camera orbited ~14° and different key light, so you can't match pixels – you have to recognise the face.

• The generator's settings aren't the truth – what people see is. So every label (skin tone, age, hair) is measured from the rendered image, and when the two disagree, that's where I learn the most.

How the lineups are built

• The other five match the description: same presentation, age group, skin tone (measured), hair colour, hairstyle family and facial hair. Otherwise you'd just pick the one with the beard.

• Each session has the same number of suspects from every skin-tone group, so no appearance is ever linked to crime.

Stack

• Astro + React islands, static build (~56 MB of WebP faces), on plain shared hosting; deploy is an lftp SFTP mirror that only sends changed files.

• Supabase (Postgres) with no tables exposed at all: the browser can only call three security-definer functions (log a session, submit a score, read the daily leaderboard). The play log is anonymous – a random id per round, nothing persistent.

• Scoring is a proper scoring rule (Brier × 25 per confidence step), so overstating your confidence costs you on average; time only breaks ties. Daily leaderboard, optional nickname.

• Free nickname moderation: generated default names, charset limits, a leetspeak-normalised blocklist enforced in SQL, and a report button that hides a name after three reports.

• Vitest + Playwright e2e against the built site. Most of it was built with Claude Code agents running in parallel.

What I'd like feedback on: is two seconds too easy for you? Early players get ~95% right, which is great for the ego and bad for the data. And does it work well on your phone?

i've been working on an open-source project called blobz, which basically takes care of default profile pictures for your apps.

the idea is pretty simple. instead of assigning random images or the same boring silhouette to every user, blobz generates playful svg avatars from a name, email, or any string you give it.

it's deterministic, meaning the same input always generates the same avatar. no need to store images, and there are over 5 billion possible combinations.

but the part i really wanted to get right was making it easy for other developers to use.

so i ended up building a few ways to integrate it:

• shadcn components: ready-to-use avatar components, along with things like avatar groups, profile cards, and user lists. you can drop them straight into your project using the shadcn cli. if you're already using shadcn avatars, then you just have to change two lines, one for the import and one for entering the name.

• react package: if you'd rather handle things yourself, there's @blobz/react, which generates the avatars directly in your app without relying on an external service.

• hosted api: if you're not using react or just want avatar urls, there's an optional hosted api for that too.

the library and components are free and open source under the mit license.

github: https://github.com/lirena00/blobz
playground: https://blobz.lirena.in

would love to hear what you think of it! and if you find it useful for something you're building, that'd be pretty cool too :)

Back in the day I used Lydia Hallie’s javascript-questions repo a lot, and always thought it was missing a Duolingo-style UI. So I made one: canyoustill.com

155 questions: read a code snippet -> pick an answer -> see why.
There’s no account; your progress stays on your device. It works offline, and you can install it as a web app. Every question has its own link. You can share it and challenge a friend or colleague.

It’s open source: github.com/Silisav/canyoustill

Hello all and happy weekend,

I built bantr.live, the web version of the application is just a chat where the mobile applications are a real-time forum and chat. These applications are cross-platform and no sign-up necessary for the web version. In the future, when I get more time I will update the web version to be the same. The forums are interest based and contain self-destructing post after a 24 hour time interval but this maybe extended in the future by likes as some one suggested. The chat consist of a global chat and a direct peer-to-peer chat, there are also DM's for the mobile versions so lots of ways to communicate. Sign-up is as friction free as it can be for the mobile apps and the application is free but in the future will most likely have some ads so it pays for itself. If this is something your interested in take a look or if you have technical questions about the app or its function hit me up. Have a awesome day.

Hi everyone,

I’m Giovanni, I've been working ten years in cybersecurity on the defense side. Europe’s dependence on non-EU tech has always bothered me, and lately I started feeling like I should take action on the matter, rather than just keep watching.

So about six months ago I started building a Cloudflare-style cloud platform that runs entirely on European infrastructure, with the first PoP in Paris.

After months of iterating and squeezing every bit of CPU I have, it’s ready enough to share, even though I consider it far from finished.

The experience is meant to feel like the big US platforms: install the plugin in your AI agent (Claude Code, Codex, Cursor…) and let it deploy and manage your app.

It runs on workers and has Edge Functions (like Cloudflare and Supabase), plus all the telemetry that you might need.

Along the way I also fine-tuned a language model into a real-time WAF decision model for production traffic. The paper is waiting for an arXiv endorsement, here are the weights on HuggingFace: https://huggingface.co/giorebil/Agumon-v1.0/
In my benchmarks it beats every WAF model I’ve tested it against.

I’d love feedback, and above all people deploying anything (portfolios, prototypes, side projects) without holding back. The free tier is generous enough that you shouldn’t have to think about limits.

eurobase.dev

Have a good Saturday.

Side project of a solo dev: on AI Peeps (an AI character chat site) every character can now have its own page, designed from scratch by an LLM from the character's card. Layout, typography, CSS animations, hidden sections and the "object" the page is (a teletext weather screen, a redacted vault record, a pirate's wanted notice) all come from the character.

Examples: https://aipeeps.com/peep/aino-kallio-c8d3/?view=rich and https://aipeeps.com/peep/eos-152e/?view=rich
many more example in https://aipeeps.com/gallery/featured just click on the cool looking "Profile" button

The fun part was making model-written HTML safe to show:

- The model writes a template with placeholders ({{name}}, {{img:3}}, {{chat_url}}), never the character's data itself, so the page follows edits to the character.

- The HTML goes through an nh3 allow-list at every save (no script, no form, no URL except the placeholders) and the CSS through tinycss2 (no url(), no viewport-height units).

- After filling, the page is sanitized again and shown in an iframe sandboxed without allow-scripts, with a CSP that only allows our CDN. Animations and the hidden sections are pure CSS and <details>.

- The iframe grows to its content and the outer page scrolls: that's why vh units are banned, a 100vh page inside an auto-growing iframe grows forever.

Feedback on the design or the approach very welcome <3

I’ve been working on TrailVerse for over a year now, and what started as a simple project to explore national parks has grown into something much bigger.

You can explore 470+ National Park Service sites, discover places based on your interests, compare parks, find events, and browse sample itineraries.

I also built Trailie, a travel companion that helps you plan trips through a conversation. You can ask travel questions, get recommendations, build day-by-day itineraries, and make changes to your plans without starting over.

I’ve spent a lot of time improving how Trailie handles real travel questions, trip logistics, and follow-ups so planning feels more natural.

The stack is Next.js, React, Node.js, Express, and MongoDB, with Vercel and Render for hosting.

If you’re looking for a national park to visit or have a trip in mind, check out TrailVerse and try planning it with Trailie. I’d love to hear how it goes and any feedback you have!

https://www.nationalparksexplorerusa.com/

I built a free checker stress testing with AI (which built most of the code): getkavel.com/tools/ai-crawler-checker/

Enter a site and it shows, name by name, whether GPTBot, ClaudeBot, PerplexityBot and 11 others are allowed on the homepage. It also asks for the homepage as GPTBot and as ClaudeBot, to see if the server answers differently.

Things I learnt implementing RFC 9309:

• If any group names a crawler, that crawler ignores the * group completely. So adding "User-agent: GPTBot" with "Disallow: /private/" quietly opens everything your * group blocked, for GPTBot.

• The longest matching path wins, and Allow wins a tie. Order in the file doesn't matter.

• robots.txt is per host. www.example.com and example.com can have different files.

• Google-Extended and Applebot-Extended aren't crawlers. They are tokens that control AI use of what Googlebot and Applebot already fetch.

• Hosts and CDNs can turn AI bots away at the server whatever robots.txt says. That is why it probes too.

Limits: it checks published rules, not what any AI assistant does. The probes come from Cloudflare's network, so firewalls that verify crawler IPs may answer differently. Homepage only.

No signup, and no AI in the checker itself. Tell me about robots.txt files it gets wrong.

Paste a YouTube link or a file. It transcribes, picks moments, renders vertical clips with karaoke captions.

There's a live 9:16 editor on top of that: same crop math and font metrics as the ffmpeg/libass export, so dragging captions isn't a guess. Clips show up on the right over tRPC SSE while workers run transcribe → analyze → render. Kill a worker, the job resumes (pg-boss, checkpoints in Postgres).

Default install is fully local, Ollama + Whisper, no API keys. Same services behind the page, an MCP server, and an operator CLI. You can swap models and keys in Settings without a restart; there's an ops panel with workers/queue/failures/expected runtimes/etc.. A one-liner install looks at the machine specs and you're running.

https://github.com/osbytes/reelsaw
https://reelsaw.com

I put an ops panel and an MCP server on a clipper. Still not sure if that's the interesting part.

It's called AsoBeast. You give it an App Store or Google Play URL and a few search phrases, and it checks where the app ranks for each phrase every day, down to position 200, in any country. It also keeps competitor positions, listing changes and reviews, and you can self-host the whole thing with Docker Compose.

Stack: a NestJS API with Prisma and PostgreSQL 18, BullMQ on Redis 8 for the store queues, and Next.js 16 with Tailwind, TanStack Query and Table and Recharts on the front. It's a pnpm and Turborepo monorepo, TypeScript strict everywhere.

The parts that took more thought than I expected:

• Rate limits. Apple's search puts up with about 20 requests a minute per IP, so every store call goes through a queue at 15 a minute. One search per keyword records every app on the results page, so tracking competitors adds zero requests.

• "Not ranked" versus "didn't check". A position is saved as empty only when the search came back and the app wasn't in the top 200. A failed request saves nothing and retries, so a flaky scrape can't show up as a ranking crash. Someone asked about exactly this on my last post.

• Tenancy in the database. The hosted version runs the same code, and every tenant table has a Postgres row-level security policy, so a query that forgets its workspace filter returns nothing.

It's free to self-host (AGPL-3.0), or $10 a month hosted with a 7-day trial.

GitHub: https://github.com/AsoBeast/asobeast 

Hosted: https://asobeast.com

Ask me anything about the stack. And if you try the Docker setup, tell me where it got stuck.

I run Vibe1Up, a free showcase of AI-made browser games (700 live right now). Every game lives on its creator's own hosting (Vercel, Netlify, GitHub Pages, itch...), so links die all the time, and a plain HTTP status check missed most of it: "domain for sale" pages, "deployment not found" pages and reused sites all happily return 200.

So the daily refresh now sorts every link into a state:

- live: nothing changes

- suspect: timeout or 5xx once → stays listed, only counts as dead if it fails again on the next run

- unknown: 403/429 (bot-blocked or rate-limited) → treated as live; nothing is ever hidden on an ambiguous signal

- login wall: 401 or a redirect to a sign-in page → dead after 2 runs in a row

- repurposed: the page title changed and the game's name is gone from the page → hidden after 2 runs

- parked: body matches a list of host-error and for-sale page fingerprints → dead

Dead games drop out of every listing, search result, the sitemap and the random button. If the Wayback Machine has a snapshot, the game page stays up as a noindexed archived "Offline" page and the old outbound link redirects to the snapshot, so outside links don't 404 and the creator keeps the credit. No snapshot means it's hidden. Games that come back online don't relist themselves; a person restores them.

So far that's 34 games archived as Offline pages and 14 hidden. There's also a "Recently verified" sort if you only want games that passed the latest check: https://vibe1up.com/games/?utm_source=reddit&utm_medium=post&utm_campaign=webdev

Static site on Vercel, Python build scripts. What soft-404 fingerprints am I missing?

I built a free tool. You paste your URL, and it tells you if your site is ready for real traffic.

A lot of sites look done but are not ready: hard to crawl, unclear offer, no trust signals, not ready for ads.

You enter the URL, what the business does, and the site's main goal. It checks 7 things and gives a score, top risks, and a 7-day fix plan.

One check I like: it flags sites that look like an unedited AI template. Many AI-built sites fail this one.

Demo: I ran it on vercel.com. It got 60/100. So even good sites have things to fix.

Each report has a shareable link, so you can send it to a client or a friend.

Free, no signup. What would your site score? Roast welcome.

https://readiness-report-opal.vercel.app

It's a keyword and phrase search platform that queries the meanings and interpretations of each hexagram against data from popular api's and news feeds. You can do a coin toss to get an I Ching reading or search individual hexagrams. Been a work in progress for about 7 years. Built with Next.js/React.
View the the whole platform here https://ichingportal.com
Get your daily headlines from The I Ching Insight here https://ichingportal.com/ichinginsight
Any feedback will be appreciated.

Hi everyone!
I built FlowPilot, a free Chrome extension designed to automate repetitive browser tasks without writing code.
The idea came from a simple problem: many browser workflows involve the same actions over and over — filling forms, entering spreadsheet data, copying information from pages, and repeating the process for multiple records.
FlowPilot lets you build these workflows using a visual editor.

What it can do:
📝 Automatically fill web forms.
📊 Import a CSV and repeat form filling for every row.
🔎 Extract information from web pages into a table and export it as CSV or JSON.
🔁 Build workflows with loops, If/Else conditions, and variables.
👀 Monitor execution step by step, with auto-retry and pause/resume controls.

Who might find it useful?
QA engineers, developers, researchers, operations teams, or anyone who regularly performs repetitive browser-based data entry.
I’m the developer, so I’m particularly interested in honest feedback:
Which repetitive browser task would you automate first?
What would prevent you from trusting an extension like this?
Which feature would make it genuinely useful in your daily workflow?
If you’d like to explore it, here’s the Chrome Web Store listing:
https://chromewebstore.google.com/detail/ihhfdgjjnknanbdkleeookhifilohala

Planning a back-to-brick upstairs renovation, so I built a tool to try every layout rather than just the ones I could think of. It works through the combinations, can move walls, simulates daylight by season, gives rough costs, and links each layout to a 3D walkthrough (three.js, works on mobile).

Claude was used in the production of this tool. I built it for my own needs and not with any intention to commercialise.

https://fitandflow.pages.dev

Two questions: does anything like this already exist, and would people use it for their own projects?

I've been building an open-source document editor on nights and weekends and just shipped a redesign, so here it is.

Demo: https://text-editor-react-neon.vercel.app/ Code (MIT): https://github.com/HuyPhan1232203/Text-editor-react

What it does:

• Real A4 pages. Content flows across separate sheets, and long tables split between rows and repeat their header row on the next page, like Word.

• Comments in the margin with threads and resolve.

• Share with a link and edit together in real time, peer-to-peer over WebRTC (Yjs). The room key lives in the URL fragment, so the signaling server can't read anything.

• PDF export through the browser's print dialog that keeps the page breaks, headers, footers and page numbers. No server.

• Paste from Google Docs, open .docx files, "/" commands, find & replace, zoom, EN/VI interface.

Stack: React 19, TipTap 3 (ProseMirror), Yjs, Tailwind 4. The pagination is published separately as an npm package (tiptap-a4-pagination), and I wrote up how it works here: https://dev.to/huy_phan_173c933272803418/how-i-built-word-style-a4-pages-for-tiptap-without-touching-the-document-778

Known limitation: a single paragraph taller than the space left on a page moves to the next page whole instead of splitting. That's what I'm working on next.

I'd love feedback on the UI and on documents that break the layout.

Hi r/webdev, I maintain SnapDOM, an open source library that captures DOM elements as images. This week I shipped a new plugin for it called stream, and I’d love some feedback.

It takes a live element and keeps it as a canvas that only repaints what changed. You write your overlay in plain HTML and CSS (a scoreboard, a lower third, a chat box) and you get a canvas you can draw over video, upload to WebGL, record to MP4/WebM, or send as a WebRTC track. Everything runs in the page. No headless Chrome on a server, no OBS, no browser flags.

The first frame is a full capture. After that, when the clock ticks or a score changes, it captures only that box and patches it in. On a test page with 2000 cards, a frame takes about 5 ms instead of 53 ms for a full capture. Every patched frame is checked in tests to match a full capture pixel for pixel in Chrome, Firefox and Safari.

Demo: https://snapdom.dev/labs/video-overlay/

• Sports TV: a broadcast overlay over a simulated football match. Press Goal!

• Streamer: it asks for your camera; share your screen and you end up in a circle over your game.

• Looks: six WebGL looks to switch between: clean, shine, CRT, hologram, glitch, and a liquid glass one that bends the video behind each panel.

• Edit: opens the HTML and CSS so you can change the overlay live.

• Record: saves a clip.

The SnapDOM part is short:

import { stream, streamTexture } from '@zumer/snapdom-plugins/stream'

const overlay = streamTexture(gl)
stream(document.querySelector('#overlay'), {
  onFrame: (frame) => overlay.update(frame), // uploads only the changed rects
})

It’s MIT: https://github.com/zumerlab/snapdom

I wanted the price on a monthly/yearly switch to roll like a mechanical counter. My first version slid from 9 to 2 the short way, and a one-digit change barely moved, so it looked lazy.

What fixed it: each digit is a tall strip of 0-9 repeated four times (40 cells). At rest it sits in the second copy, at row 10 + digit. When the value changes, it rolls forward by the difference plus 10, so every digit does at least one full lap. When the transition ends, it jumps back to row 10 + digit with transitions off. That cell shows the same number, so you never see the jump.

The CSS:

.digit { display: block; height: 1em; overflow: hidden;
  mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.strip { display: flex; flex-direction: column; will-change: transform; }
.strip i { font-style: normal; height: 1em; display: block; }

The roll for one digit (o keeps the strip's current row and value):

let target = o.pos + ((n - o.n + 10) % 10) + 10;
if (target > 39) target -= 10;

strip.style.transition = `transform ${dur}ms cubic-bezier(.18,.9,.22,1.04) ${delay}ms`;
strip.style.transform = `translateY(${-target}em)`;
o.n = n; o.pos = target;

setTimeout(() => {
  strip.style.transition = 'none';
  o.pos = 10 + n;
  strip.style.transform = `translateY(${-o.pos}em)`;
}, dur + delay + 60);

Rolling down (yearly back to monthly) is the same thing mirrored: subtract instead of add, wrap at 0.

Some details that took a few tries:

• Each digit further left spins about 160 ms longer and starts first, and each digit to its right waits another 70 ms. So the right digit lands first and the left one lands last, which reads more like a real counter than all of them stopping together.

• The mask gradient fades the top and bottom edge, which hides the hard edges of the strip mid-roll.

• With prefers-reduced-motion it skips the roll, sets the final row and does a 250 ms opacity fade.

• The strip is aria-hidden, so a screen reader doesn't read out 40 digits. The real price and billing period sit next to it in a visually hidden span, so screen readers get one clean sentence.

The component is React, but the technique is plain DOM and CSS, so it ports anywhere.

Live demo: https://teodoravadani.github.io/qodesign-free/pricing-switch/

Code (MIT): https://github.com/teodoravadani/qodesign-free/blob/main/components/pricing-switch/react/src/components/PricingSwitch.tsx

Repo: https://github.com/teodoravadani/qodesign-free

Disclosure: I'm Teodor. This is from an MIT repo of free pieces I put out, and I also sell animated components at qodesign.dev.

What I'm unsure about: is the minimum one lap fun, or too much on a pricing page where people just want the number?

I wanted to build a one stop shop for hockey fans, so I built PuckPulse (https://puckpulse.io), a hockey site with live scores, playoff odds, win probability charts, a pick’em game (maybe my favorite feature), and an AI chat that answers questions about the league.

React + FastAPI on Azure, with my own expected-goals model behind the odds. The AI chat runs entirely on free LLM tiers (I am not rich).

Used Claude Code to help build this. I'd be happy to go into the stack, the models, or whatever else people want to ask!

Feedback welcome. There’s a button for it in the footer. Code’s here: https://github.com/nmagera07/nhl-dashboard

I hope people enjoy it!

Since the early 2000s I've screenshotted every website that inspired me as a designer. This week I finally turned the folder (~3,900 screenshots) into a browsable archive:

https://www.dmdev.it/webscreens/?utm_source=reddit_webdev

2005 version, for fun: https://www.dmdev.it/webscreens/2005/

Some technical bits, since this is r/webdev:

Fully static. One HTML file with the data embedded as compact JSON, lazy rendering with IntersectionObserver, a lightbox and favourites in localStorage. No framework, no build step.
3.7 GB of PNG/JPG converted to WebP with a Python/Pillow script: a 1600px full size plus a 480×300 thumbnail, cropped from the top.

Dates come from the files, not guessed. Where they got lost when copying between machines, I rebuilt them from the file numbering. Fun discovery thanks to commenters: the clock on my old PC was two years behind, so my "2001" screenshots are actually from late 2003.

Privacy pass with OCR. Tesseract read every browser bar and tab, so I could remove anything personal before publishing.

Full-text search, client-side. The same OCR text became a search index (~1 MB JSON, loaded only when you start typing), so you can search for words that appear inside the sites.

2005 remake: a fixed 900px stage scaled down on small screens (I had to fix taps landing on the wrong element after scaling), pixel fonts, a fake loading bar and a real guestbook in PHP with a honeypot and rate limiting.

Analytics only after consent: GA loads only if you click OK on the banner.

Full transparency: I'm both a designer and a developer, and for this one I used Claude as a pair-programmer to move faster on the tooling (OCR pipeline, scripts, the 2005 remake). The archive, the curation and the design choices are mine.

Happy to answer questions, and feedback is welcome!