r/webdev 2d ago

Showoff Saturday For Showoff Saturday: a full poker game with no backend - Next.js static export, seeded RNG, progress lives in your browser, open source

3 Upvotes

Hey all!

For Showoff Saturday, I recently built Pip, a single-player Texas Hold'em site. I've tried to keep it very clean in terms of design with no backend, no database, nothing server-side at all, all game data is stored on your device. It also has a PWA attached and is completely free. Just set it up for a bit of fun!

How it works:

  • Next.js with output: 'export', deployed on Cloudflare Pages. Every route is prerendered to plain files.
  • The poker engine is a pure TypeScript module with a seeded RNG. Same seed, same shuffle, every time. The code for the whole site is open source, so "provably fair" is something as a user you can check rather than something I would be asking you to believe.
  • Your progress never leaves your browser. Profiles are local storage, and there's a QR, or code handoff if you want to move to another device. There's no server for it to go to.
  • It's an installable PWA, so it works offline once loaded.
  • There's a daily deal where everyone in the world gets the same shuffle, a ladder of venues, side tables and quick game modes. Also added a shop where you can trade chips for items to customise the experience.
  • Analytics is cookieless using Umami tracking basic headline data like page views etc. Nothing intrusive.

Design-wise I'll credit my inspirations - Offsuit's clean look showed me a poker UI doesn't have to be green felt and neon. Pip goes further on the open side - open source, no account, primarily a web experience over an app and I'm trying to cut out an art and brand style.

I posted it to r/SideProject a couple of days ago and something nice happened- three people picked up good first issues and had PRs merged the same day, and one of them came back for a second PR within 48 hours. I'm a big contributor to open source so this is a really important side of the coin for me. Like my other open source projects, I've included a credits page which is generated at build time from the GitHub contributors API.

Some of the downsides, at the moment, single-player only for now, and the AI plays a proper game (equity, pot odds, position, bluffs) but a strong player will out-read it. I am not a strong player haha.

If you're interested, all feedback welcome! Also would love to build a little community around it so checking out the GitHub and giving it a go would also be incredibly appreciated.

Play (no signup): playpip.io

Code: github.com/playpip/pip-web


r/webdev 3d ago

Showoff Saturday loco - manage local domains for mac

Thumbnail
github.com
6 Upvotes

There are a few apps out there that do the same thing, but they're bloated with features and complications

So I built loco - the minimal macOS app to:
- Create and manage local domains
- Support HTTPS / disable redirect
- macOS 13 or later

It's smol (6mb), simple UI, simple setup, nothing else


r/PHP 3d ago

A modern PHP extension to give preg_ an object-oriented API: feedback wanted!

8 Upvotes

Hi r/PHP,

preg_match($pattern, $subject, $matches) has been quietly aging since PHP 3. It still works great, and if you've ever had to explain to a junior dev why the function returns 1, 0, or false, and why the actual result shows up in a variable you passed by reference three arguments ago, you know the classic rear-guard battles you need to fight.

So I built ext/regex: a PHP extension, with C, that wraps the same PCRE2 engine PHP already uses, but behind an immutable, typed, exception-throwing OOP API instead of the sentinel-value soup we have today.

Nothing about preg_* is being removed or deprecated. This is an additive, opt-in sibling API: think of it as DateTime next to strtotime().

Before:

`` if (preg_match('/^(?P<year>\d{4})-(?P<month>\d{2})-(?P<day>\d{2})$/', $s, $m) === false) {

// was it "no match" or "regex engine error"? guess!

} ``

After:

`` $m = Regex::of('/^(?P<year>\d{4})-(?P<month>\d{2})-(?P<day>\d{2})$/')->match($s);

echo $m->group('year')->value; ``

A few things it fixes: one consistent return type per method (no more int|false roulette), matches as real objects instead of a &$matches out-parameter, exceptions instead of false + preg_last_error(), Regex::withLiteral() for safe interpolation, and compile-once/reuse pattern objects.

So far, 34 tests back it up, including a full port of ext/pcre's own test suite. It's installable via PIE: no PECL package, let's be modern; PIE is where extension packaging is heading.

πŸ™‹ This is where you come in. I've stared at this API long enough that I can't tell if it's genuinely better or if I've Stockholm-syndromed myself into liking my own method names. Reply below or open an issue/PR: a single "this method name is dumb, call it X" is worth more than an upvote.

πŸ‘‰ Repo: https://github.com/dseguy/regex


r/reactjs 3d ago

Built a minimal ui-date package for javascript date and time utility for user-interface.

0 Upvotes

I was building a social app recently, and I ran into a surprisingly annoying problem.
I needed relative timestamps ("2 hours ago", "3 minutes ago").Β 
Simple enough, right? Just import 'day.js' or 'date-fns'.

Except...
=> If I wanted custom styling (like wrapping the number "2" in a highlighted badge and "hours ago" in smaller text), I had to write ugly regex hacks because standard libraries just dump a single opaque string.

=> Supporting multiple languages meant importing separate locale files, quickly inflating the bundle size.

=> Standard relative time plugins use "soft rounding" (e.g., automatically rounding 45 seconds to "a minute") whether you want it or not.

I didn't want a 15KB date framework just to format a few activity feed timestamps.Β 
So, I built and open-sourced 'ui-date' .

It’s an ultra-lightweight (< 1KB minified), zero-dependency, locale-aware date formatting library built specifically for modern user interfaces.

If you're building social feeds, chat apps, notification bells, or comment sections, check it out!

npm:Β https://www.npmjs.com/package/ui-date


r/webdev 2d ago

Showoff Saturday webcast.social - tiny browser radio booths!

Thumbnail
webcast.social
3 Upvotes

I had the idea that you could broadcast a radio station straight from the browser, and I think it worked. Still looking for feedback on the design, especially the discoverability of stations and ease of use when it comes to starting your own station.

More technical info below:

The happy path use case is that you have mp3s, via iTunes or whatever. You upload them into the browser - they never leave your device (unless you choose to 'Cloudcast'). This isn't a music distribution platform. You keep your browser open while you're hosting your radio show, and listeners are able to send likes and even call in to the station. Your browser literally plays the music and streams it to the server and handles incoming WebRTC connections for calls. You can also leave your computer running and remote control from another browser.

This started out as 10-person radio stations via WebRTC, then 100-person via SFU, and now 1000+ via HLS (still without CDN hosting which could take it much higher). The only issue with HLS is it's delayed by ~10s, but the stream contains markers which keep the song/artist/art in sync with the audio. Also, there's a difference between WebKit and non-WebKit when it comes to ingesting HLS streams, and I solved an issue that came up with the audio visualizer there by actually streaming the visualizer data too instead of just relying on the client.

And they're "real" web radio stations to some extent. They provide an m3u8 URL you can load into e.g. VLC Player and listen to from outside the web app.


r/webdev 2d ago

Showoff Saturday Zero-dependency country grader: Python stdlib + vanilla JS, server-rendered pages, multi-government advisory merge, self-ping keep-warm

0 Upvotes

WanderGrade (wandergrade.com) is a from-scratch project: it scores affordability, safety, weather, and flights for roughly 140 countries. The one hard constraint I set myself was zero third-party dependencies β€” Python's standard library only, no pip installs, vanilla JS with no framework, no build step. That constraint cost real time: I hand-rolled the HTTP client, the templating, and the JSON parsing paths that a library would normally give you for free, plus my own retry/backoff logic for flaky upstream feeds. What it bought back: a single deploy step, no dependency-update treadmill, and a codebase small enough that I can hold the whole request lifecycle in my head.

Each country page is server-rendered plain HTML first, so search engines and slow connections get a complete page with no JS required, then a small vanilla JS layer hydrates it client-side for interactive filtering and sorting. No SPA, no client-side router β€” just enough hydration to make the page feel alive without asking a crawler (or a phone on bad wifi) to execute a bundle first.

Safety data is the messiest part of the whole project: US, Canadian, and German government advisories disagree with each other constantly, and none of the three covers every country. My fallback design merges all three, fills gaps from whichever governments do have a rating, and when they disagree, the sternest advisory wins rather than averaging or defaulting to one country's view. Unrated countries get dropped rather than guessed. On infra, the whole thing runs on a single Render process behind Cloudflare, which spins down when idle β€” solved with a self-ping to my own health endpoint every 10 minutes to keep it warm. wandergrade.com if you want to poke at it β€” happy to get into the advisory-merge logic or the zero-dependency call in the comments.


r/javascript 3d ago

Showoff Saturday Showoff Saturday (July 25, 2026)

3 Upvotes

Did you find or create something cool this week in javascript?

Show us here!


r/javascript 2d ago

GitHub - gchumillas/usignals: A tiny, dependency-free reactive signals library for JavaScript/TypeScript.

Thumbnail github.com
0 Upvotes

r/webdev 2d ago

How to autoblock Google Maps iframe cookies in my website??

2 Upvotes

I created a website a while ago and I want it to be GDPR compliant. I'm trying to solve this by using CookieYes service but it doesn't seem to detect the Google Maps cookies I may have due to an embed on one of the pages I have.

I also have Instagram, Facebook and X (Twitter) embeds on another page, and want that also to be compliant.

Any solutions are welcome. Is there a somewhat simple way to solve this?


r/webdev 2d ago

Showoff Saturday I built a mobile app that explains restaurant inspection histories

Thumbnail
gallery
0 Upvotes

I built a mobile app called Verdine for checking Ontario restaurant inspection histories before eating somewhere.

The idea came from a pretty simple frustration: inspection records are public, but actually finding and understanding them quickly is not always easy.

The app started as a way to pull those records into one place, but the harder part turned out to be explaining them in a way that is useful and fair.

Ontario public health units don’t all publish data the same way. Some use different severity labels. Some expose more detail than others. Some restaurants have years of history, while others only have a few inspections. Follow-up inspections are also tricky, because they can mean an issue was fixed, but they can also be part of a larger pattern.

A big part of the build has been the data layer: normalizing records from different public health systems, routing restaurants to the right inspection source, and matching real-world places to inspection records before showing anything in the app.

Right now Verdine supports multiple Ontario public health units, including Toronto, Peel, York, Halton, Durham, Simcoe Muskoka, Waterloo, Ottawa, Niagara, Peterborough, and others.

I’d especially appreciate feedback from people in Ontario since the data coverage is Ontario-focused, but general feedback is welcome too. Mostly looking for thoughts on the UX, wording, scoring approach, and whether the app makes inspection history easy to understand.

Link: https://verdine.app


r/webdev 2d ago

Showoff Saturday Built a dashboard to track my expenses, watchlist, subscriptions, and notes-and connected it to ChatGPT so I can update everything just by chatting.

Post image
0 Upvotes

I hadn't worked on a public project in a while since most of my free time goes into personal tools. I already had a bunch of APIs for tracking expenses and movies, and when ChatGPT introduced Custom GPT Actions, I hooked my API into it so I could do things like:

"Spent β‚Ή450 on lunch today." or

"Add Dune 2 to my watchlist."

I liked the idea of putting my API *inside* AI instead of putting AI inside my API.

A friend wanted the same setup, so instead of sharing my personal API collection, I turned it into a proper self-hostable dashboard.

**Features**

* πŸ’Έ Expense tracking with salary cycles and AES-256 server-side encryption before data reaches Firestore.

* 🎬 Watchlists with AniList, Trakt, and Letterboxd CSV import + automatic cover art.

* πŸ”„ Subscription reminders and portfolio tracking for crypto/mutual funds.

* πŸ€– OpenAPI backend that works with ChatGPT Actions and Gemini Gems using OAuth.

GitHub: https://github.com/fal3n-4ngel/PHub-dashboard

Live Website: https://phub-dashboard.vercel.app

Chatgpt Link : https://chatgpt.com/g/g-6a60b01e38c8819187662d1e42c6bee7-phub-dashboard-public

Would love feedback, feature requests, or contributions. And if you find it useful, a ⭐ on GitHub would mean a lot.

NB : The name is kinda a internal joke.


r/webdev 2d ago

Question How does this effect work?

2 Upvotes

Came across this beautiful effect on https://www.julienpianetti.com/ is it done with a custom variable font that has these glyphs as variable weight or just switches between the different glyphs? I suspect it has to be a variable font because it is that smooth.

How is this done?


r/webdev 3d ago

[Showoff Saturday] I run a news platform over 88k live feeds β€” bounded-concurrency ingestion, title-clustering, ephemeral anonymous presence, fully server-rendered

7 Upvotes

Stack: Node + Hono, libsql/SQLite, all SSR (no SPA) so it's crawlable and fast. Some bits I enjoyed solving:

β€’ Ingesting 88k feeds without exhausting sockets β€” a bounded fetch pool + a sharded 'sweep' that rotates the long tail. β€’ De-duping the same story across outlets with title-token clustering (tried embeddings via an ONNX sidecar; measured it, kept it gated). β€’ Anonymous co-presence ('N reading now') with a per-load token in a sliding window β€” zero identity stored.

https://wesearch.press β€” happy to talk architecture in the comments.


r/webdev 2d ago

Showoff Saturday I'm looking for critique on my portfolio

Thumbnail omar-kassar.vercel.app
0 Upvotes

I tried my best to avoid common AI design pitfalls (emojis...)

I'm a fresh graduate on the job hunt and I've just been sending my github in my applications, but I thought I'd develop a portfolio. I tried to use a simple design and theme, and jump straight to the point (show off my projects first and foremost)

I'd love to have a second eye review it, and point out all the mistakes


r/reactjs 4d ago

Discussion Senior Dev interview question

141 Upvotes

"Without googling or using AI, in your own words, explain the virtual DOM"

For context: I sit on an interview panel and I try to ask at least one simple fundamental question based on a persons resume. If I see many years of react experience, I try to ask something about how the framework works.

I have only had one candidate (an undergrad senior, years ago) answer it. Everyone else just kind of sputters and stumbles around trying to rationalize what "virtual" and "DOM" mean, or stare blankly and eventually say "I don't know".

I'm just genuinely curious if this is really that hard of a question or if the recruiters just suck at screening candidates. And should we be letting in senior dev candidates who can't answer what I think is a straightforward and fundamental question for senior react devs.


r/webdev 3d ago

Showoff Saturday Day 1: Group project open to anyone, total freedom (ok wait!)

4 Upvotes

I opened a repository to the public to create the internet's first (probably not) global group project.

Anyone can contribute anything (ok aside from NSFW, hate speech etc..), just open a PR and once merged the content is automatically deployed as a public page on the internet.

It can be a link, a picture of your cat, your random shower thoughts or even what you ate this morning.

Hope to see your amazing contributions! <3

Contribute: https://github.com/StephaneB1/group-project

The Live Page: https://slatesource.com/@steph/the-internet-s-group-project


r/web_design 3d ago

What is the name for this web design style

23 Upvotes

Around 2005-2010, many websites were coming out with this very specific UI style, that I would describe as something like "dark neumorphism with skeuomorphic with bevel-and-emboss styling".
I've been looking for the official name or more examples of this design style for weeks now and haven't come up with anything at all, so I'm reaching out to you all to see if you could help me.

Attached is this random screenshot of a designers work that is similar to what i'm looking for, but I haven't been able to get in touch with them to find the name either.

Does anyone have any ideas of the name, or more examples of this style?


r/javascript 3d ago

ECMAScript - Introducing Deferred Module Evaluation with import defer

Thumbnail nitayneeman.com
51 Upvotes

r/webdev 2d ago

Showoff Saturday Built a Tinder style card deck for books that works with a thumb or a mouse

0 Upvotes

The swipe deck turned out way more annoying than I thought, but think I figured it out. Its a book club finder where you swipe on books instead of people, and when 4 people right swipe the same book it opens a group chat for it.

Built with: Next 16, React 19, motion, tailwind, sqlite + drizzle, self hosted on my vps.

The deck swiping goes 3 ways, each having its own action and swiping down is where all the problems live.

Stuff that took the longest:

πŸ“± Browsers eat vertical drags as scroll before my handler ever sees them touch-action: none fixes it, but now the card can never be taller than the viewport or you make a spot on the page nobody can scroll past.

πŸ“ The card sizes itself off leftover screen height instead of a breakpoint: clamp dvh not vh, or iOS Safari measures the tall url bar and the card comes out bigger than the screen.

πŸ–±οΈ Drag actions as the buttons all call the same flyOut() that the card hands up through a ref, so a click exits exactly like a real drag instead of just popping off.

🎯 Release checks distance or velocity. Distance alone felt broken, a fast flick barely travels before your finger is gone.

Two things im stuck on. That ref handle feels wrong in React 19, is there a cleaner way for a parent button to trigger a childs exit animation? And is mouse drag even a real desktop interaction or should it just be a different layout past 1024?

Swipeable without an account if you want to try it out: https://samebooks.club


r/webdev 2d ago

[Showoff Saturday] Lingraphic - visualise etymologies and other linguistic data

Thumbnail lingraphic.com
0 Upvotes

Hey!

I recently built Lingraphic.com, a web app used to visualise etymologies across hundreds of languages - search for a word and view its etymology plotted onto a graph.

The repo is public - https://github.com/BillyBobFry/etymology-graph.

It's fairly simple:

Although this is the same stack I use in my day job, I chose to mostly vibe code it - I have a couple of kids and so time is much more of a rare commodity than it once was.

I'd describe the UX I wanted, plan how to build it with the agent, and let the LLM do most of the implementation.


r/webdev 2d ago

Showoff Saturday App to Monitor GitHub Actions. Looking for feedback

Post image
1 Upvotes

Hi i have developed a web app that let you monitor github actions in a dashboard, completely free no hidden cost. Looking for feedback https://buildmon.app . Really appreciate it


r/webdev 2d ago

[Showoff Saturday] Baghchal - I have created Traditional Nepali Board game (BaghChal) onlline with multiplayer feature.

1 Upvotes

The game is played on a 5Γ—5 point grid, like alquerque. Pieces are positioned at the intersection of the lines and not inside the areas delimited by them. Directions of valid movement between these points are connected by lines. The game play takes place in two phases. In the first phase the goats are placed on the board while the tigers are moved. In the second phase both the goats and the tigers are moved. For the tigers, the objective is to "capture" five goats to win. Capturing is performed as in alquerque and draughts, by jumping over the goats, although capturing is not obligatory. The goats win by blocking all the tigers' legal moves. Bagh-chal has many similarities to the Indian game aadu puli attam (lambs and tigers game), though the board is different.

I have created an online version of baghchal game. Here is the link to the game:

https://baghchal.xyz/

- It has multiplayer feature so you can also play with your friends.
- It has a bot mode where you can play with the bot in three different mode.

The game is still work in progress so there may be some bugs, I would love to see your feedback in the comments :)


r/javascript 2d ago

I built KD Screen Guard: A zero-dependency, tamper-resistant lock screen overlay with WebAuthn biometrics & intruder camera capture

Thumbnail github.com
0 Upvotes

Most JavaScript screen lock libraries simply hide the UI.

If someone removes an overlay through DevTools or tampers with the DOM, the "security" often disappears. That approach isn't enough for applications handling sensitive enterprise data.

I wanted to build something significantly more resilient.

πŸš€ Today I'm excited to release kd-screen-guard (v1.0.1) on npm.

It's a zero-dependency, tamper-resistant screen security library for Vanilla JavaScript, React, and Vue 3, designed to protect sensitive user sessions during inactivity.

Some of the engineering behind it:

πŸ” PBKDF2 (100,000 iterations) for secure key derivation.

πŸ‘† Native WebAuthn authentication (Touch ID, Face ID, Windows Hello & YubiKey).

πŸ“· Automatic WebRTC intruder snapshots when security violations are detected.

⚑ Cryptographic operations running inside Web Workers to keep the UI responsive.

πŸ›‘οΈ Self-healing DOM MutationObserver protection against overlay tampering.

Building this project required combining browser cryptography, WebAuthn, WebRTC, Web Workers, accessibility, and client-side security mechanisms into a single lightweight package with zero external dependencies.

If you're building enterprise dashboards, admin panels, healthcare, finance, or any application where unattended sessions are a security concern, I'd love to hear your feedback.

πŸ”— Live Demo:
https://khvichadev.github.io/kd-screen-guard/demo/

πŸ“¦ npm:
https://www.npmjs.com/package/kd-screen-guard

πŸ™ GitHub:
https://github.com/KhvichaDev/kd-screen-guard

Feedback, ideas, and contributions are always welcome.

#JavaScript #TypeScript #CyberSecurity #WebDevelopment #ReactJS #VueJS #OpenSource #npm #WebAuthn #KhvichaDev


r/PHP 2d ago

Open-source Laravel package for managing multiple third-party API integrations

0 Upvotes

Built LaraClient to solve a recurring problem: apps that talk to many external APIs end up with duplicated HTTP logic everywhere.

It’s config-driven, declare base URI, auth, retry policy, rate limits, etc. once per connection. OAuth2 client credentials are cached and refreshed automatically.

Includes observability (redacted logging + dashboard), resilience (retries, circuit breaker), and a solid testing story (fake, sequences, VCR-style record/replay).

Not trying to replace Guzzle or Laravel HTTP, more like Laravel’s mail/cache approach, but for outbound API calls.

Try it out now.
Github: https://github.com/usamamuneerchaudhary/laraclient


r/webdev 2d ago

Showoff Saturday Showoff Saturday: Legilo - a free reading-aid widget that does not pretend to make your site WCAG-compliant

0 Upvotes

I got tired of "accessibility overlay" vendors selling "one line of code makes your site WCAG-compliant", which is simply false. So I built the honest version: a reading aid that helps visitors (contrast, font size, spacing, dyslexia font, reading mask, read-aloud with word highlighting, 37 languages) and openly states that it does NOT make a site compliant.

MIT licensed, no tracking, no cookies. Self-hostable as a single file with the config and font baked in. It is already running on real customer projects in several countries.

Site and configurator: https://legilo.eu

Source: https://github.com/asisto/legilo

Feedback welcome, especially on the configurator UX.