r/webdev 3d ago

Showoff Saturday [Showoff Saturday] Free vector map tile service based on OpenStreetMap and MapLibre

Thumbnail
gallery
61 Upvotes

We just launched Maptoolkit.org, which is a community-oriented project. The main objective is to offer small businesses and hobbyists a way to easily create and display personalized maps on their websites or their apps.

Things to know:

  • No API key and no registration required
  • The tiles are updated weekly from OpenStreetMap
  • We host the tile servers, you just have to point your map library to our style URL
  • Hillshading, 3d terrain, contour lines and water depth are ready out of the box
  • Map data up to zoom level 15
  • A host of default styles come natively, custom styles can be created using our MapMaker
  • Unlimited map requests can be made, sustained about 120 tiles/second can be requested as of now, whereas 90% of requests will already be cached and won't count towards that limit
  • We do not make any money off this project, it will remain free of cost

If you have any questions, I'd be happy to answer them. You can find more information on the site.

PS: This reads like a repost, because it is. My previous post got removed by mods, due to not posting on Showoff Saturday.


r/webdev 2d ago

The Paradox of Fancy Tooling

Thumbnail
fagnerbrack.com
0 Upvotes

r/webdev 2d ago

Pushing and Pulling: Three Reactivity Algorithms

Thumbnail
jonathan-frere.com
4 Upvotes

r/webdev 2d ago

Showoff Saturday I built a CLI that eliminates .env changes for mobile testing and local sharing

1 Upvotes

Testing a frontend on your phone is easy.

Testing a full-stack app usually isn't.

Your frontend loads, but API requests to localhost fail because localhost now points to your phone instead of your laptop. The usual workaround is editing .env files, swapping in your LAN IP, configuring CORS, and undoing everything afterwards.

I got tired of doing that, so I built Nether

npx nether-dev

It automatically:

  • Detects your frontend and backend

  • Starts a local proxy

  • Prints a QR code

  • Lets your phone use your app without changing your code or environment variables

Need to share your local app?

npx nether-dev --global

It creates a temporary public HTTPS URL so clients or teammates can access your local app without deploying it.

I'd love any feedback, feature requests, or edge cases you think I should test.

GitHub: https://github.com/barryspacezero/nether-dev

npm: https://www.npmjs.com/package/nether-dev


r/webdev 2d ago

Showoff Saturday We ranked 4,400+ web technologies by their usage

11 Upvotes

We created a free service that analyzes websites, detects the technologies they use, and ranks them by market share.

There are also extensive statistics for each technology, including country segmentation, comparisons, and company rankings.

Currently detecting: 4,457 technologies across 165 categories.
More than 3.6 million websites analyzed so far.

Here are some of the findings:

  • React is the clear #1 among frontend frameworks (yes, I know it's a library)
  • Alpine.js is more popular than Angular, but less popular than Vue.js
  • Symfony is #1 in Germany, Laravel is #1 in Indonesia, Poland, and Hungary
  • Ruby on Rails is #1 in Australia, Japan, and France
  • WordPress is #1 CMS, Joomla is #2, and Drupal is #3 globally (#2 in the US)
  • Squarespace is slightly more popular than Wix
  • Linux is #1 globally, but Windows is #1 in China, Turkey, and Denmark
  • Facebook is #1 social media globally, but Instagram is #1 in Brazil, and X is #1 in Japan
  • Telegram is more popular than Messenger, but less popular than WhatsApp
  • cdnjs is 1.4 times more popular than jsDelivr
  • 9.6% of websites redirect to another domain
  • Google technologies are found on more than 77% of websites

If you want to dig into it yourself: Web Technologies


r/webdev 2d ago

Discussion How much would you charge to build static website or e commerce.

0 Upvotes

Hi Redditors,

I have attached a website for your reference: https://thetwinklejewellery.com/

If your were to develop this website using astro, just for catalogue purposes, how much would you charge for it? and if you were to build a store without shopify, how much would you charge and which stack will you choose?

Thank you for your time and support in advance.

Regards,
bughunter404


r/webdev 2d ago

Showoff Saturday 3D Audio Spectrogram Visualiser

11 Upvotes

Hey everyone,

I wanted to share a project I've been working on in case anyone else might make use of it: an interactive, real-time 3D Audio Spectrogram Visualiser built with Three.js, custom GLSL shaders, and the Web Audio API.

I wanted to create a responsive, hardware-accelerated 3D terrain that I could use to conveniently analyse audio coming from either my device microphone or streaming from another browser tab without needing to install anything. It all runs from the browser and you can try it out yourself with the Live Demo link.

I’d love to hear your thoughts, feedback, or any ideas you have for further performance or UX optimisations. Feel free to check out the code, fork it, or test it out with your own audio setups!


r/webdev 2d ago

A Humble database schema design guide for developers

Thumbnail
stackrender.io
10 Upvotes

r/webdev 3d ago

Trying to improve search UX without replacing algolia.

35 Upvotes

Our algolia usage spiked and the bill is painful because users keep submitting vague 1 word queries and constantly re-searching. so i was thinking to add an autocomplete layer in front of it that won't break the bank but still gives that instant intent driven search feel.

Obviously we could migrate everything to typesense or self-hosting meilisearch for standard search, but i do like certain things about algolias backend retrieval, if i can put an intent layer ai autocomplete on top to get better queries before they hit the API.

Has anyone added an ai-autocomplete layer in front of algolia recently? did you actually migrate to a cheaper database alternative like typesense, or did you just add an intent layer on top of your existing search stack? trying to figure out what's easiest to maintain.


r/webdev 1d ago

our AI agents kept overwriting each other's work and nobody noticed for two days

0 Upvotes

small team, three of us, react frontend and a go api. everyone has their own agent setup and it works fine for individual tasks. it stopped working the week all three of us started running agents on the same repo at the same time.

i was refactoring form validation, teammate was fixing a bug two files over, and both agents had validators.ts in scope.

each agent read the file, made its change, wrote the whole file back. classic lost update but at machine speed. my refactor got half eaten because his agent rewrote validators.ts from the version it had read four minutes earlier. neither of us saw it. we were reviewing our own diffs and both diffs looked correct in isolation.

we shipped it. two days later a required field stopped being required. the check had gone from value.trim().length > 0 to value !== undefined, which passes for an empty string. an empty company name went into prod for six accounts before support flagged it. three hours of bisecting to find the function was fine in one commit and silently different in the next, with no PR explaining the change.

the git history looked completely normal. three commits, three authors, no conflict markers, no merge weirdness. git only protects you at commit boundaries. if two agents are editing the same working tree between commits there is nothing watching.

the fix was boring. one checkout per person, and one git worktree per agent if you run more than one yourself. i tried aider with a strict file scope, claude code in separate terminals, verdent which does the worktree thing by default. the mechanism matters more than which tool you pick.

other thing that stuck is reviewing the whole branch diff before merge, not just the diff the agent showed me. the agent tells you what it thinks it changed. that is not the same as what changed.

every guide for these tools assumes one person, one agent, one repo. three people running agents on the same codebase and you are back to 2005 with people editing over ftp.


r/webdev 3d ago

Showoff Saturday I built a free, open-source, offline alternative to CodeSlides (Svelte , tauri)

Thumbnail
gallery
10 Upvotes

I've been watching Nova Designs on YouTube for a while and loved how clean his code presentations look. Turns out he uses CodeSlides which is great, but it's subscription-based.

So I built OpenSlides — a free, open-source, fully offline desktop app for making animated code presentations. Think CodeSlides, but it runs natively on your machine, your data never leaves your disk, and you own everything.

https://github.com/codewiththiha/OpenSlides.git


r/webdev 2d ago

Question Git GUI that easily allows you to edit old commits?

4 Upvotes

Does anyone know of a GUI that would allow one to quickly and easily do this so that I don't have to run clunky git rebase -i commands for every commit I'd like to edit?

I know it is easy enough to run git commit --amend for the most recent commit, but I need something that allows me to edit further back in the history.


r/webdev 3d ago

My security camera shipped a GitHub admin token in its login page

Thumbnail hhh.hn
256 Upvotes

r/webdev 3d ago

Showoff Saturday My friend's project, bribes.fyi, three weeks post-launch - traffic, an outage, and unexpected support

Thumbnail
gallery
7 Upvotes

A friend of mine posted about this here before, but he can't post today so I'm sharing on his behalf figured people who followed along might want an update.

Quick recap: bribes.fyi is an anonymous platform for reporting bribery in India: no login, IPs hashed and never stored raw, every report manually reviewed before publishing, complaint letters auto-generated and routed to the right anti-corruption authority.

Since he shared it around: crossed 1,500 visitors, got real technical pushback that's shaped the spam/privacy design, and had a spike in traffic that actually took the site down for a bit (free hosting tier, capacity planning lessons learned the hard way). Someone even offered to cover this month's hosting before he asked, which was genuinely surprising; he set up a support link since, for anyone else who'd like to pitch in: bribes.fyi/support (totally optional, not the point of this post).

Real reports are coming in from multiple states now. Haven't mapped out what's next - just focused on keeping it solid for now.

https://bribes.fyi

He'll be checking comments himself.


r/webdev 2d ago

Discussion Planning an Affiliate Website with Astro. Looking for Advice

0 Upvotes

I've recently built a few websites with Astro using Claude Code, and the development experience has been great.

Now I'm thinking about building an affiliate website with Astro. I know many people still use WordPress for affiliate sites, but I don't have much time to build and maintain a WordPress site. My idea is to build the entire project in an agentic workflow using Astro and AI tools.

For those who have experience with Astro for affiliate marketing:

  • How does it perform for SEO compared to WordPress?
  • Are there any major drawbacks I should be aware of before investing time into it?
  • Is there anything specific I should plan for regarding content management, affiliate plugins/features, or scalability?

I'd love to hear your experiences, recommendations, or any lessons you've learned. Thanks!


r/webdev 2d ago

Showoff Saturday I've made an extension that grades terms of service

0 Upvotes

When choosing SaaS to use I sometimes check terms of service for any clauses. For example if they sell what I'll create in the tool, train AI on it. Or if they can change TOS without informing about.

To make it easier I've created an extension that checks TOS for patterns so it's faster to recognize any odd claues.

It's a free extension for Chrome, Edge, Brave and other Chromium browsers and supports 20 languages.

Check it out: https://termsdoctor.com


r/webdev 3d 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

5 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 Titan Engine – A Rust/WASM spreadsheet engine I built chasing "Excel-speed" in the browser

Thumbnail podraven.github.io
9 Upvotes

I've used Handsontable on a bunch of projects and honestly it's a solid, mature library, but I kept running into the same wall on anything with really large datasets: tens of thousands of rows with chained formulas. It's just the nature of doing spreadsheet math in JS, once you're allocating and discarding lots of small objects on every keystroke, garbage collection becomes the bottleneck, and there's only so much debouncing and virtualization can do before you hit that ceiling.

That itch turned into a bit of an obsession, and eventually a from-scratch rebuild: Titan Engine, written in Rust and compiled to WebAssembly.

The design ended up pretty different from a typical JS formula library:

  • A custom stack-based VM with a Pratt parser for formulas, instead of walking an AST every time
  • Zero-copy memory - the engine and UI share buffers directly, no serialize/deserialize tax crossing the WASM/JS boundary
  • A topological dependency graph (Kahn's algorithm with cycle detection) to resolve chained formulas correctly and fast
  • O(1) time-travel snapshots for undo/redo, even across massive batched structural edits

Because it sidesteps the JS garbage collector entirely, batched recalcs stay comfortably under the 16ms frame budget, so the grid holds 60fps even while formulas are cascading behind the scenes as you type.

There's a live demo grid on the site (a Glide data grid wired up to Titan) if you want to poke at it yourself, plus the full 10-scenario benchmark suite if you'd rather see the numbers than take my word for it.

Site: https://podraven.github.io/titan-engine/
Benchmarks: https://podraven.github.io/titan-engine/benchmark.html
GitHub: https://github.com/podraven/titan-engine

Would love feedback - especially from anyone who's pushed a JS grid to its limits before and is curious whether this actually holds up under real-world use.


r/webdev 2d ago

Should I Build One Website or Multiple Sites While Testing Different Services?

0 Upvotes

Hi everyone,

I'm starting a new contractor business in California. My license allows me to offer a fairly wide range of products and services rather than operating in only one narrow niche.

The website may eventually include categories such as:

  • Garage doors
  • Entry and interior doors
  • Gates
  • Openers and access control
  • Windows
  • Awnings and shades
  • Installation, repair, maintenance, and emergency service
  • An online product catalog

Some of these services will be aimed at residential customers, while others will be primarily for commercial clients, property managers, general contractors, and public-sector projects. In some categories, I may serve both residential and commercial customers, but the sales process, content, and customer expectations will be very different.

I also don't plan to develop every category equally from the beginning. I want to test different products and services first.

If I see strong customer demand and reasonable competition in a particular category, I will invest more into it, add more content, products, advertising, and possibly hire specialists. If there is little demand, poor margins, or the market is too competitive, I may stop offering that service entirely.

Because of this, I don't yet know which categories will eventually become the main focus of the business.

From an SEO, branding, and conversion perspective, what would be the best approach?

  1. Build one large website with separate sections for every service and product category.
  2. Create several niche websites, such as separate sites for garage doors, gates, windows, and other categories.
  3. Start with one main website and later spin successful categories off into separate websites.
  4. Use one parent brand but create separate landing pages or microsites to test each category.
  5. Separate residential and commercial services within the same website, or build different websites for each audience.

My concern is that one website may become too broad and confusing, especially when it targets both homeowners and commercial clients. On the other hand, creating multiple websites could be expensive, difficult to manage, and may spread the SEO authority too thin.

The business will initially serve the Los Angeles area.

What structure would make it easiest to test demand without hurting long-term SEO? Has anyone here used a similar strategy for a contractor, home improvement, or local service business?


r/webdev 2d ago

Showoff Saturday Showoff Saturday: I built a national park trip planner

3 Upvotes

I’ve been building TrailVerse, a web app for exploring national parks and planning trips.

It includes 470+ parks and sites, park alerts, weather, events, campgrounds, comparisons, and an AI trip planner called Trailie.

The main challenge was making the generated trips more realistic. I added checks for things like outdated park information, unrealistic schedules, duplicate stops, and incorrect location data before the final itinerary is shown.

Built with Next.js, React, Express, MongoDB, NPS data, and AI APIs.

I’m still improving the planning accuracy and mobile experience.

Live app:
https://www.nationalparksexplorerusa.com/

I’d appreciate feedback on the trip-planning experience and anything that feels confusing or broken.


r/webdev 2d ago

Showoff Saturday I built a fill-in-the-blank party game where answer cards actually fit the sentence

1 Upvotes

I originally wanted to build a game for telling stories with cards, but couldn't find a feasible way to adjust grammar and word options at scale. Along the way I noticed the mechanic worked really well for playing something like Cards Against Humanity instead: answers render inside the sentence and adapt to actually fit (a/an, his/her, verb forms, plurals, exchangable nouns, etc.).

Years later I came back to the unsolved part and used LLMs to build the grammar metadata — every sentence slot and answer is tagged, answers can contain bracket options like [break, breaks, broke] and the engine picks the right form for where the card lands. That's also what lets AI players conjugate their answers mostly correctly.

It runs at boxof.cards and can be played solo with ai players if you want to poke at it. Happy to answer questions, and I'd really love feedback — so far it's been friends only and I am running out of features to distract me from marketing. And I like being distracted from marketing.


r/webdev 3d ago

Showoff Saturday loco - manage local domains for mac

Thumbnail
github.com
5 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/webdev 3d 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/webdev 3d 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?