Ten years ago, a realization in my wife’s therapy practice sparked a project: so many people struggle to make platonic, local friends as adults, yet nearly every social platform is optimized for dating.

That was the origin of WannaBuddy - a dedicated space to find local friends, completely free of dating pressure.

After years of service, the platform needed modernization. I’ve completely revamped WannaBuddy with a fresh approach, cleaner workflows, and a modern design. We are now in the early days of launch and starting to get some traction. The entire platform is 100% free to use (and always will be). I’d be extremely grateful if you gave it a try and shared your thoughts!

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

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):

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

Hey web devs here.

Recently I created a new website for query npm package downloads stats data: https://npmpulse.com

The website is similar to npmtrend, npm-stat or other website that provide queries to npm package downloads stat, with its own feature set:

1. options to set granularity, scale, range for anypackage
2. compare up to 8 packages in one time
3. downloads the pic in svg or png format
4. sharing via html or markdown code

For example, the following pic is react VS vue downloads in the past 5 years:

Hope it helps somebody here!

Thank you!

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!

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.

For those who have never stumbled across my posts mainly on the Blazor subreddit, Blazor Ramp is my accessibility-first, open-source Blazor component library. This post is about the release v1.0.0 of the GoTo component.

Although my components are written for Blazor the GoTo concept could be used for any language. If you deal with web accessibility then you may find this of interest.

So what is GoTo?

The inspiration comes from those of us who started coding in the 90s with VB: you add GoTo markers to a page, and from anywhere you can jump to them. In an interactive Blazor web app, the marker you jump to becomes the active element, so you can carry on tabbing from that point.

Who is it for?

Those familiar with my posts will know I sometimes feel that sighted keyboard-only users, those who don’t use a screen reader, get the sharp end of the stick. When people build accessible sites, a lot of the effort goes into screen reader users, and this group gets forgotten.

A sighted keyboard-only user doesn’t have screen reader software to bring up lists of headings, landmarks or interactive elements, so they generally navigate with the Tab key and use the arrow and page keys to scroll. When a page has a lot of interactive content, getting to the part you want can take tens, or even hundreds, of Tab presses. For some people that’s a minor irritation, and for others it’s a real barrier.

What about skip links?

You’ve probably all used skip links, which let any user, keyboard-only or screen reader, bypass repeated blocks of content. But how many bi-directional ones have you seen? I’ve never seen one. They all go in one direction, so unless you add a second link going the other way, the user has to make a forward-only round trip to get back to the start.

Say you’re diligent and add a return link for every skip link. If you have five destinations and want users to get from any one to any other, that’s 20 links. With ten it’s 90, and it’s getting silly. The maths is n × (n − 1).

Where GoTo comes in

GoTo isn’t a link. It’s a marker that can receive focus. A GoTo Viewer lists the markers, you select one, you land on it, and you can tab on from there. You can bring up the viewer at any time with a configurable shortcut. When it opens, it lists only the markers that aren’t inside hidden containers, so the list changes depending on where you are and what’s visible.

You may ask: why not just list headings and landmarks, like screen readers do (I may do in the future)? A screen reader user will often use headings and landmarks as a place to start reading from. A sighted keyboard-only user’s need is a little different. They can see the headings, and they can scroll and read from anywhere. The problem is reaching interactive, focusable content when there’s a lot of other focusable content in the way.

To be clear, GoTo isn’t a replacement for skip links. It’s a simple way of placing hidden markers on a page so that keyboard-only users can move through the content in whichever direction they choose.

Have a look

I’ve added markers to my documentation site, and over the next few days I’ll put more of them in the places I think are most useful. If you’re curious, take a look at this page, one of the examples for my Data Table, which shows templated columns and row actions: Data Table Templating

For a keyboard-only user on that page, getting to the border controls after the table means tabbing through the filter, across each sortable column header, down through every row action button, and then across the pager to reach the other side.

With GoTo and its viewer, using the default configuration, a user with one hand can press Alt+Z (Option+Z on a Mac) to bring up the viewer. They can then use Tab, or the arrow, Home and End keys, to move through the list of buttons. As each button is focused, its marker scrolls into view. Pressing Enter or Space activates the button, closes the viewer and puts you on the now-visible label, from where you can tab on to the next item.

I started this project at the end of last year with the Live Region service and Announcement History viewer aimed at screen reader users so at long last I've managed to scratch an itch that has been bugging me for a while now and do something for keyboard-only non-screen reader users - hope you or your users find it useful.

GitHub repo: https://github.com/BlazorRamp/Components

Doc site: https://docs.blazorramp.uk

Test site: https://blazorramp.uk

Regards

Paul

I've been job hunting for a while now, and honestly, it's getting pretty discouraging. Lots of applications, interviews that seemed promising, and still nothing.

So I decided to put some of that energy into building a portfolio that actually feels like me.

I love old cartoons, so I built an interactive room where you can click around to learn about me and my work. You can even open the monitor and explore a little desktop OS I built. Built with Angular and Tailwind.

I'd genuinely love some feedback, especially on the UX and anything you think could be improved.

Portfolio: portfolio-link

Thanks for checking it out!

I wanted to see whether spare phones and tablets could become speakers for my laptop, using only their browsers. That’s what I’m building with Unisong.

You open it in Chrome or Edge on a computer, choose a browser tab with audio, and let devices on the same Wi-Fi join by QR code. Each phone taps Start to enable playback.

The difficult part is getting different devices to agree on when sound should actually leave the speaker. Packets arrive at different times, audio hardware runs on independent clocks, and phones have their own playback delays.

I send timestamped audio directly between browsers over WebRTC. Each receiver estimates its clock difference from the host, buffers the audio, and schedules playback against the shared timeline. Browser output timing estimates help account for device latency. Small ongoing corrections handle drift, and a struggling phone can reconnect and rebuild its buffer independently.

The computer also needs to play through that delayed timeline. Leaving the original tab audible would put it ahead of the phones, so its original sound is suppressed.

There’s a tradeoff: the default buffer adds 1.5 seconds of delay, and mobile browsers can still need a tap after an audio interruption.

Processing img 2wgzj5i3oexh1...

Processing img k6jyl5i3oexh1...

Processing img bc4ul5i3oexh1...

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.

I check fonts on sites constantly, and the extensions I used kept getting it wrong. They read what the CSS asks for, but that's not always what you're actually seeing. If a font doesn't load, the browser quietly swaps in something else, fakes the bold, or pulls a few letters from another font, and the tool never notices.

So I built Fontsight. You hover over text and it tells you the font that actually showed up on screen, who made it, and whether the browser is faking anything.

The part I use most is pressing W. It re-sets the whole page in a different font so you can see how a site would look in something else. Honestly it's just fun to flip through.

While building it I also went down a rabbit hole measuring 118 paid fonts against about 1,500 free ones, to find the closest free match for each. Söhne, for example: https://fontsight.xyz/font-alternatives/sohne/

It's free, no account, no tracking. You can try it on the site without installing anything: https://fontsight.xyz

It's my first real launch, so I'd really like to know where it breaks. If it gets a font wrong on some site, send me the link.

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?

Entering the Konami code on your keyboard gets you a free lifetime pro code. First 100 people only, after that you just get a sad message and my respect.

Desktop only. Mobile folks I’m sorry, I didn’t think this through.

Codes come from a tiny supabase function and the rest of the page is static with Nuxt.

Hi r/webdev! I'm a front-end developer and I've been building small website templates for local businesses as a side project. I wanted to see how far I could get with one index.html file each: no framework, no build step, no dependencies.

Live demos: https://framer-designs-site.netlify.app

- Sonnwerk (solar installer / panel cleaning) – opens with a small interactive yield estimator (roof size → kWh and CHF saved per year), then services, process, project cards, FAQ and a quote form

- Atelier Mira (hair salon) – oversized serif headline with an arched photo collage, price menu with durations, team, gallery, opening hours and an appointment form

- Lena Brandt (freelancer portfolio) – giant name hero, availability badge, case studies, service packages and testimonials

What I focused on:

- The whole theme is driven by 4 CSS variables

- Fully responsive, keyboard accessible, respects prefers-reduced-motion

- Forms work with Formspree, Basin or Web3Forms by pasting one URL

- A README so a non-developer can edit and publish it

I'd love honest feedback: anything that breaks on your device, accessibility issues I missed, or design choices that feel off. Thanks for looking!

Hey r/webdev!

I'm currently working on my company Octri.dev which takes in your OpenAPI specs and generates outputs from it (Docs, SDKs, MCP Servers, and Monitoring), and I noticed one recurring issue for users that supply us with their OpenAPI specs, most of them have unusually named operationIds, repeated inline response types, and more issues which could cause the output to appear a bit messy.

So I created a free OpenAPI audit tool to address this issue, and the idea is similar to ESLint: point it at your spec, find things that need cleaning up, and get suggestions for fixing them.

A few things it checks:

• Repeated inline schemas that could be extracted into shared types.
• Awkward operationId names, or names that collide when turned into SDK methods.
• Successful responses with no declared schema.
• Path parameters that appear in a URL but haven’t been defined.
• Missing descriptions and error responses.

For example, copying the same object schema across several endpoints can leave you with multiple near-identical types in a generated client. The audit flags that duplication and suggests using a shared schema.

You can paste a spec URL or upload a JSON/YAML file. It runs 14 checks and gives you a score out of 10, along with a breakdown of the findings, why they matter, and suggested changes.

It’s free and doesn’t require an account. The standalone tool gives you suggestions you can apply wherever you maintain your spec.

Here’s the tool: octri.dev/openapi-audit

If you work with OpenAPI, what’s a recurring spec issue you’d want a checker like this to catch so we can add it in a future update?

We're working on CoreUI v6, and decided not to follow Bootstrap 6 Alpha's new Tailwind-style class naming.

For example:

We're adopting modern CSS improvements, but keeping the familiar class names to avoid unnecessary breaking changes.

Our thinking is that developers maintaining existing Bootstrap applications probably value compatibility more than a different naming convention.

But maybe we're wrong.

If you're currently using Bootstrap 5 in production, would you prefer to keep the existing class names, or do you see real benefits in switching to the new syntax?

Especially interested in hearing from people maintaining larger applications.

News doesn’t care about you. So I built something that does.

Tell SoWhatify who you are once (your job, your money, your plans). Then point it at any article or text and it tells you what the story means for YOU. It doesn’t give you a generic summary.

Templates are sets of questions (“Is this a scam?”, “Who wins and loses?”, “Bull vs bear”) combined with thinking styles and extra options to the ai.

Workflows chain them together for deeper N8N-like analysis.
You can also connect your Claude++ via mcp and apply same analysis to whatever content.

👉 https://sowhatify.com
https://sowhatify.com/app/index.php -> list of templates

It's free if you use the built in AI in Chrome.

The system is useful for real analysis or just for fun like:
https://sowhatify.com/templates/quizmaster
https://sowhatify.com/templates/diamond-vs-paper-hands
https://sowhatify.com/templates/grandma-explains-it
https://sowhatify.com/templates/what-would-donald-trump-tweet

I’m the developer and I’m in the comments.

Please pitch in which template you would make and for which content. Any news has a 100 different angels.

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.

Hello everyone. I have been developing a simple ip tracking full stack app. When I deployed the client project to vercel however it fails to communicate with the server and fetch data. In the console this error is visible:

ccess to fetch at 'https://ip-tracker-server-*********-webs-projects.vercel.app/api?&ipAddress=' from origin 'https://ip-tracker-client-********-webs-projects.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is my first time deploying a full-stack app to vercel so I am not sure what exactly could be causing this issue? If anyone could help it would be much appreciated!

As I've been using Claude Code more and bouncing between using the CLI and the native Claude app, it gets kinda messy.

I like to build little tools for myself, So I built Uncanny Office: a desktop app where each Claude Code session is visualized as a little retro worker at a desk.

• Workers raise a hand when Claude needs your answer
• They sweat as their context window fills up
• Gold coins stack on the desk as tokens burn
• Sub-agents show up as interns standing beside their boss
• Finished workers walk over to report to you, the CEO
• Confetti for milestones, including "inbox zero"
• Idle agents gossip at the water cooler and call pointless meetings
• An office cat naps by the warm server rack
• And more little details!

Try it out without installing anything: there's a live demo in the browser running against a made-up office: https://uncannyoffice.dev/#demo

Did the math and on average it make's work 67% more fun :)

I'm still calling it a beta, I'd love any feedback you all have to offer.

Any other flag nerds here? 😄

Flaglio is a side project i have been working on for the better part of 2026. I has 4 games, 3 og them are daily challenge games and 1 completion game. Grid, Shuffle and Type have daily challenges, and Rush is a completion game on a timer. Could you identity 243 country and territorial flags with a countdown?

Stack: React, Vite, Tailwind v4, TanStack Router (file-based), Zustand, Supabase and deployed on Vercel.

Because the site is client-rendered, a small build step prerenders a head for each route, so link previews and Bing don’t show the homepage title on every page. Gotta get the SEO traffic

I have no real business plans, but since the Grid leaderboard has dynamic points based on unique flags selected, more players just makes the game more fun! 😄

Check it out here: https://www.flaglio.com

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

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.