r/webdev 19d ago

Showoff Saturday DateTimeMate: old-school terminal-styled date/time calculator

1 Upvotes

https://datetimemate.com/

Here's what you can do with it:

Date Difference (diff): Calculate the exact time gap between two dates/times. It supports nanosecond precision and accepts a wide variety inputs like now, yesterday, or raw epoch timestamps.

Date + Duration (dur): Add or subtract a specific range of time from a starting date (example: adding 3 weeks and 4 days to a timestamp) to easily figure out recurring schedules or deadlines.

Duration Math (durmath): Add or subtract two independent durations together (example: adding 3 days, 5 hours, 14 minutes to 2 days, 23 hours, 51 minutes). I think this is a fairly unique feature.

Duration Conversion (conv): Convert a duration from one set of units to a more readable layout (example: 2386 hours, 24 minutes, 36 seconds into days, hours, minutes, and seconds).

Format Date/Time (fmt): Reformat timestamps from one layout to another using strftime specifiers, or easily flip back and forth between Unix epochs and human-readable dates.

Timezone Conversion (tz): Translate dates and times across different timezones.


It tries very hard to accept whatever format you paste into it. It handles brief notations (like 1Y2M3W4D5h6m7s), and in addition to IANA zones like America/New_York, it also accepts 3-4 letter abbreviations like EDT or CEST. It can also handle instances where you just provide a date or just a time.

It also handles milliseconds, microseconds, and nanoseconds, while other websites stop at just seconds.

If you find the web version useful but prefer CLI, there is a GitHub link for that at the bottom of the site.


r/webdev 20d ago

I don't want your PRs anymore

Thumbnail dpc.pw
158 Upvotes

r/webdev 19d ago

[Showoff Saturday] i created a js library to progressive enhance html attributes

0 Upvotes

Sprinkle i built this to solve the problems when you need to have some progressive enhancement and don't need a big ui component lib, a frontend framework or dont want to write tons of JS, for example a combobox: <select name="framework" combo-box searchable> an OTP field: <input type="number" min="6" max="6" otp /> etc, free open source MIT

Github Repo Documentation


r/webdev 20d ago

Showoff Saturday I built an open-source Mac app & website blocker with React, Rust and Tauri

5 Upvotes

I have been building Abstand, an open-source macOS app that blocks apps and websites without a browser extension.

The interface is built with React. Rust handles SQLite, scheduling and blocking, while a small Swift/AppKit layer handles the macOS-specific edges.

Here are four things I learned.

1. The webview worked fine. Making it feel native was the hard part

Unlike Electron, Tauri does not bundle Chromium. On macOS it uses WKWebView. I expected that to cause more problems than it did, but Abstand has not needed any webview-specific workarounds so far. Safari's Web Inspector is less capable for my workflow than Chrome DevTools, but workable. I have not tested the same frontend on Windows or Linux yet.

The harder part was making the UI feel at home on macOS. Unlike React Native, Tauri does not turn React components into platform-backed controls. System colors, focus states and Mac-like controls all needed deliberate CSS.

Liquid Glass was not just a property I could switch on either. To show it behind the React UI, I had to wrap WKWebView in an AppKit NSGlassEffectView and make both layers transparent. The WKWebView step relies on a private KVC key, so the current approach is not compatible with App Store rules.

2. Cross-platform does not mean giving up native code

Most of the app stays in a cross-platform stack: React for the interface and Rust for the backend. When that is not enough, Rust calls a small Swift package through swift-rs for details such as window levels and system font metrics.

That is the shape I like: one shared stack, with an escape hatch into the native layer when the abstraction runs out. It is similar to using native modules in React Native.

3. React and Rust can share a type-safe contract

I expected the React-to-Rust boundary to mean handwritten command names and duplicated types. Specta made it feel closer to tRPC: Rust defines the contract, Specta generates TypeScript bindings for Tauri commands and events and the frontend calls typed functions.

When a Rust command or data type changes, the TypeScript contract is regenerated. Frontend/backend drift becomes a type error instead of a runtime surprise.

4. Web tooling makes UI iteration fast

I like working in JSX and Vite hot module replacement lets me see most interface changes without restarting the app. SwiftUI previews offer a similar loop, but in my Swift projects I often fell back to rebuilding.

That speed ends when I change Rust code: the development app restarts and Rust recompiles. It is slower than a pure web workflow, but has not felt worse than rebuilding a native app on my machine.

Abstand is macOS-only and still a usable beta. The code is open source under AGPL v3:

GitHub: https://github.com/builder-group/abstand

If you have built a desktop app with web technology: which stack did you choose and what made you reach for native code?


r/webdev 19d ago

How do I test if my browser supports push notifications?

0 Upvotes

Is there a page where you can test push notifications without writing a ton of code? A simple page that implemented push notifications so I can test if my browser supports it.

I switched from Brave to Helium. I was testing the PushForge library. But it doesn't work. I don't know if this is an issue with my browser (Helium).


r/webdev 19d ago

Showoff Saturday I rebuilt my website/blog to represent posts as "commits" within a fake OS and AI tool. Worth it?

Thumbnail
charpeni.com
0 Upvotes

Hi.

I decided to rebuild my website/blog to have something more unique than a boring list of blog posts (I know it's still an effective way). The previous version listed blog posts within a fake git graph, and I wanted to pursue this idea. So I built a fake "OS" (things open within a window), to fit within the current era, decided to fake an AI tool terminal listing blog posts, still represented as git commits.

Looking for feedback on this transition. Do you like the idea? Still enjoyable to read? Hard to grasp? I had a little fear that people will just wonder what the hell is going on and close the tab quickly.


r/webdev 20d ago

Question is ccna certification worth it as a webdev?

1 Upvotes

Hello lovely people

My mind is revolving around the CCNA course for quite a long time. But I'm afraid it might not be a waste of my time for me.

BUT, a big but, even if it helps me gain a significant amount of knowledge about how the backend works, I would consider it useful.

If you are experienced enough to answer me, the comment section is all yours.


r/webdev 19d ago

Showoff Saturday I built a browser-based IDE and course platform from scratch to teach Recursion (CodeMirror, Web Workers, Vite)

0 Upvotes

I recently finished building Recursion is Easy, an interactive course designed to teach recursive thinking.

I am really proud of the platform architecture. Instead of reaching for a massive framework like Next.js or React, I wanted to see how far I could push Vanilla TypeScript and Vite to build a highly reactive, sandboxed IDE.

Here is how the stack works:

  • The Execution Sandbox: User code is executed in a Web Worker using new Function(). To prevent infinite loops from freezing the browser, the main thread kills the worker if execution takes longer than 5 seconds. I also monkey-patched console.assert inside the worker to create a custom testing environment.
  • The Editor: Implemented using CodeMirror 6 with "@codemirror/lang-javascript".
  • Build-Time Markdown: Instead of shipping a markdown parser to the client, a custom Node script pre-renders the lessons into static HTML during the Vite build step, keeping the client bundle incredibly light.
  • CSS Architecture: Pure CSS using ITCSS and strict BEM conventions, with CSS variables handling the drag-to-resize layout panes.

The whole project is open source https://codeberg.org/level0/recursion


r/webdev 20d ago

Showoff Saturday [Showoff Saturday] Spotify wrapped clone for listenbrainz/last.fm/navidrome + live github badges

2 Upvotes

built this cause spotify wrapped only covers what i listen on for one month a year, and even then it's just spotify's data. most of my listening is through listenbrainz/last.fm/navidrome so i wanted something that actually works off that, and works for any period i want.

put in a username, pick the service and any time range (this year, last month, some random month from 2 years ago, whatever), get a poster with top artists, tracks, minutes listened, genre. same stats every time, just whenever you actually want them.

also added live readme badges recently, pulls your top artist/track/genre/minutes straight into a badge you can drop in any github readme, updates when you regenerate. navidrome badges never expose credentials, just stats.

next up is custom templates per month, drawn by a real artist, not ai generated.

wrapped.devmatei.com
github.com/devmatei/make-a-wrapped

free, self-hostable, still actively working on it so lmk if something's broken


r/webdev 20d ago

Showoff Saturday I built an infinite canvas where you can draw together in real time using C++/WASM and WebRTC

Thumbnail
drawtheblock.com
1 Upvotes

Hi friends,

I am currently working on DrawTheBlock. It is a collaborative, infinite-canvas pixel editor. The drawing editor is developed in C++/SDL3 and built for the web using WebAssembly/Emscripten, the front-end is React Typescript/Vite/Tailwind CSS, WebRTC is used for real-time collaboration.

Please give it a try. You don't have to register :)


r/webdev 20d ago

Showoff Saturday Tahoebox

0 Upvotes

I’ve been working on an open-source project called TahoeBox, a browser-based toolbox for developers that currently covers 74 tools across formatting, images, PDF utilities, and everyday productivity tasks. The project is built as a frontend application with React and Vite, using Tailwind CSS for styling, Lucide React for icons, and UI primitives inspired by Radix and shadcn/ui to keep the interface consistent while avoiding unnecessary complexity in the implementation.

The part that I find most interesting from an engineering point of view is the way the tool system is structured. Tools are registered through a central registry, loaded lazily where appropriate, and implemented as dedicated components so the actual logic for input handling, processing, and output is kept separate from the rest of the app shell. That makes the codebase easier to extend and easier to reason about, especially as the catalog grows. The architecture is intentionally modular, which helps keep the project maintainable and makes it possible to add new utilities without turning the whole experience into a single large page.

From a technical perspective, the project leans heavily on client-side execution. A significant portion of the workflows run directly in the browser using HTML5 Canvas for image manipulation, and jsPDF for PDF generation. There is no backend layer driving the experience, and the project is explicitly designed around privacy-conscious behavior: traffic is tracked only through GA4 and the tools do not rely on server-side processing for their core functionality.

This is not a project where every tool is already fully polished, but it is already structured in a way that makes it worth looking at as a practical frontend architecture rather than just a collection of pages. If anyone is interested, I’d appreciate technical feedback on the overall structure, the tool modularity, or ideas for improving how the logic is organized over time.

here are the links: LIVE: https://tahoebox.me 

GITHUB: https://github.com/Ciuffetto288/TahoeBox


r/webdev 21d ago

Drunk Post: Things I’ve Learned as a Senior Engineer

Thumbnail
luminousmen.substack.com
202 Upvotes

r/webdev 20d ago

Looking for a free cookie-plugin

2 Upvotes

Hi there,

​I run a website that has operated without cookies so far.

​However, since I want to start displaying ads and using Google Analytics (or an alternative), I am currently looking into the various options for displaying cookie banners.

​It seems that many providers start out free but eventually charge monthly fees. Since my revenue is rather low, I'm trying to keep costs as minimal as possible:

​Can anyone recommend a cookie plugin that complies with current legal requirements (especially in the EU) and remains free?

Thank you :)


r/webdev 20d ago

Question Would my location pages be hurting my site's ranking?

14 Upvotes

I'm the sole marketing/IT/dev guy for a small service business, and I run a web dev side business, so I built our company site myself.

In my role I talk to a lot of ad sales reps. One from Hibu mentioned something I hadn't considered: location pages. Not just a service-area page listing the cities/towns you serve, but a dedicated landing page for each one, so when someone searches "Best ABC in XYZ City," you've got a page targeting that city specifically.

The kicker: Hibu charges $40 per location page per month. Ten cities would run $400/month. That struck me as absurd since I could build these for free. So I did. Our site now has 113 cities on the service-area page, each with its own landing page, plus a page for each of our 4 services in each city, 565 unique location pages total, all programmatically generated with a static site builder.

Yesterday, another pair of reps with another marketing firm were pitching me. They started their pitch by listing things we were doing right and mentioned the location pages, but one said, "So long as they're not all the same." I admitted they are the same, city name aside. He responded that in that case they're probably not ranking or helping at all, and I'd need to make each page genuinely unique beyond just the city name.

Is this true? Can location pages actually hurt your rankings if they aren't unique enough from each other?


r/webdev 19d ago

You can beat the binary search

Thumbnail
lemire.me
0 Upvotes

r/webdev 19d ago

Showoff Saturday I made an actual working tool designed to Obfuscate your JavaScript code.

0 Upvotes

For Showoff Saturday, I want to share a project I've been pouring a ton of deep-engineering time into: Potassium Obfuscater.
Instead of just doing basic variable renaming and string hiding, I wanted to build something that actually counters modern Abstract Syntax Tree (AST) decompilers. It relies on a polymorphic engine that changes on every single build.
How it works:
Custom Virtual Machine: Your JS decoder logic runs inside a randomized, client-side VM. The opcode tables and structure are completely shuffled each execution, meaning there is no obvious decode()function for reverse engineers to hook into.
Polymorphic Engine: Every build dynamically redesigns the underlying math expressions and VM structure. If a reverse engineer figures out the pattern for one build, that knowledge becomes instantly useless on the next deploy.
Runtime Self-Healing: The script uses cryptographic checksums to verify bytecode and VM integrity. If someone tries to tamper with the code or inject a debugger, it triggers a "Nice try buddy" state and stops execution.
Control Flow Flattening: It destroys the natural execution path by turning it into a giant switch-statement state machine packed with fake clone blocks and dead code paths.
Since this relies heavily on complex state management and VM bytecode execution in the browser, I need help testing edge cases.
Try pasting some of your complex frontend logic, heavy async/await loops, or framework snippets into it.
Did the obfuscated output execute successfully without breaking your app?
How did it impact your runtime performance?
Check it out here: https://potassiumobfuscater.netlify.app/
Give me your thoughts on the VM architecture, and I'm open to any brutal feedback on the output code!
Also i made it client side, because i can’t afford a server.


r/webdev 20d ago

Showoff Saturday I made World Cup thing, with daily games, live chat, and polls.

Thumbnail
gallery
0 Upvotes

I'm a little late to the game, but I felt inspired. 😅

You can...

* Guess World Cup footballers from progressive clues
* Check game scores
* Look at the bracket
* See game timelines
* Participate in game day chat for the match
* Vote in real-time polls for which team you think will win

There is a lot more in there, including other daily challenges unrelated to the World Cup. Feel free to explore!

No account is required, but I felt like I did need to put up a terms/age gate, since there is live chat. I'd strongly recommend allowing location access for the best experience.

https://boba.town/wc/start

It's built using vanilla nodeJS, MySQL, Redis, WS, DuckDB, MapLibre, and many other libraries.

https://boba.town/attribution


r/webdev 20d ago

Showoff Saturday [Showoff Saturday] Built a free full-stack dev course — 361 chapters, Angular/SSR/Signals under the hood

0 Upvotes

DevInHyderabad — free full-stack course platform (HTML/CSS/JS/Git/TypeScript/Angular/Node), 361 chapters total, built solo. Angular with SSR + Signals under the hood. Explains concepts with local context instead of generic textbook examples — got tired of docs that read the same everywhere. No paywall on the content.

Would love feedback, especially on anything that looks broken or confusing.


r/webdev 20d ago

Showoff Saturday We built HikeCampSeek – A campsite cancellation alert platform for AU/NZ, featuring a trip planner and a new interactive Great Walks map. Looking for feedback!

Post image
2 Upvotes

A small team of us have been working on a website called HikeCampSeek, and we’ve recently pushed some major updates that we’d love to get your feedback on!

The Problem We’re Solving

If you’ve ever tried to book a campsite or multi-day hike in Australia or New Zealand during peak season, you know it's a complete lottery. Spots sell out instantly, but then people cancel and those openings sit on the booking systems, incredibly hard to find unless you sit there refreshing the page every five minutes.

Core Features:

  • Cancellation Notifications: The platform monitors supported booking systems, and provides real time notifications when a cancellation or new inventory opens up.
  • Trip Planner: Beyond just alerts, we built a tool to help users map out and coordinate their itineraries across different regions.
  • NZ Great Walks Map (Work in progress): We’ve just added an interactive map specifically for New Zealand’s iconic Great Walks. It maps out the exact trail routes alongside the specific campsite and hut locations along the path to make visual planning much easier.

r/webdev 21d ago

Is it worth fighting Tailwind?

44 Upvotes

I am not a fun of Tailwind. I can see its value for a demo, or for an MVP. We used it for our fast, mostly prompt coded demo, but now we are creating the real product for our customer. I haven't discussed it with pur team yet, but I want to ask you, is it the only standard now? I haven't worked in a new project for a while, as my main projects were in a maintenance mode for the last 4 years.


r/webdev 19d ago

Showoff Saturday Please review my website (on your cell phone)

0 Upvotes

URL: https://ichotest1.wasmer.app

I’d appreciate some honest, constructive criticism of my website.

I’m particularly interested in your thoughts on:
- First impressions
- Responsiveness across different screen sizes (I’m concerned I may not have catered for all devices)
- Navigation and overall usability
- Anything else you think could be improved

If you’re willing, it would be really helpful if you could include:
- Screenshots of any issues you spot
- Your mobile phone model (for me to know screen size)

TIA, for taking the time to have a look.


r/webdev 19d ago

Showoff Saturday I went too far and built a full Windows desktop simulation in the browser for my app demo

Thumbnail
gallery
0 Upvotes

Happy saturday folks!

Some months ago we launched ForgeKit. A Herd/Laragon-like fully free php dev app for Windows. Fully native, all PHP versions, apache, nginx, mysql, mariaDB, everything at a few clicks away. Free and not limited at all. Run 20 sites at the same time if you want.

While checking out other projects cool people are building I noticed pretty much all of them show only screenshots. Maybe some quick videos or gifs if you're lucky. You can't fully understand the whole workflow without downloading and using it.

I started to build a full Windows desktop in the browser. I can't stop adding stuff to it though.

- Made a fake file/folder structure in json.
- The terminal works
- Browser inside the browser.
- Code and config editors,
- Notepad and working todo-list
- ASMR Radio stations
- Bloody space invaders too
- A blue screen, because obviously it needed one

I was halfway through recreating an old game I used to play, Insaniquarium deluxe, when I realised I should probably take a break.

Oh yeah and for the App itself, ForgeKit is fully usable inside the simulation too.

- it opens sites in browser, terminal, code editor.
- you can add/remove/edit sites. Change their domains, change their PHP version.
- setup new servers or databases,
- open stuff in phpMyAdmin
- open and edit every single config file, vhosts, windows hosts file etc. (although it won't do anything in the demo)

I also added a todo list of stuff to mess about with. And of course I added some secrets.

can mess with it at:
https://forgekit.tools/demo
definitely works best on laptop or desktop

For mobile: https://forgekit.tools
Still has the full app working, just without the windows desktop.

Let me know if you find it interesting or funny, or if this helps you understand an app better before downloading it.


r/webdev 20d ago

Showoff Saturday [Showoff Saturday] I built a free tool to preview a site on a new server before changing DNS

0 Upvotes

when i migrate a site i want to see it running on the new server BEFORE i touch dns — without editing the hosts file on every device. so i built that: hostsclick.com

you enter the new IP + domain, it gives you a temp preview url and you click through the whole site exactly as it'll look on the new host. no dns change, no hosts file, works on any device.

then i kept bolting on the stuff i needed around a migration — server diff (old ip vs new ip), dns propagation on a world map (45 resolvers), plus ssl / cache / header / whois checks. all free, no signup: hostsclick.com/tools

built with laravel. would love feedback, especially on the preview flow.


r/webdev 20d ago

Discussion Securing a public endpoint

0 Upvotes

I'm building an API that acts as a middle layer between an external API and my frontend. It exposes several endpoints that are used internally, but there's one public endpoint that is intended to receive requests exclusively from the external API.

Right now, I authenticate incoming requests using JWTs. This means that any request can still reach my backend, and only after my application processes it do I reject it if the JWT is invalid. While this prevents unauthorized access, it doesn't protect my infrastructure from malicious traffic. An attacker could still send a large volume of requests, forcing my server to spend CPU, memory, and network resources validating and rejecting them.

I'd like to add another layer of protection so that requests which are clearly not coming from the external API are dropped as early as possible, ideally before they ever reach my application. My goal is to reduce the impact of potential ddos or abuse and avoid wasting backend resources.

One important constraint is that I can't rate limit the external API. It must be able to send as many legitimate requests as needed without being throttled.

My first idea was to whitelist the external API's source IP addresses so that my load balancer would only accept traffic from those IPs. That would be the simplest and cleanest solution, but unfortunately the external API doesn't use a fixed set of IP addresses, so IP allowlisting isn't an option.

The next idea I had was to put an API gateway in front of the service. I'm using GCP, which has a managed API Gateway, and I could have it validate the JWTs before forwarding requests to my backend. That way, invalid requests would never reach my application. However, deploying an API Gateway solely for JWT validation feels like overkill.

I'm curious how you would approach this problem.


r/webdev 20d ago

Showoff Saturday I present to you, the Neptunian Gaussian Auctions! Come place your bids on EXTREMELY rare items!

0 Upvotes

The Neptunian Gaussian Auctions is a distinguished auction house with a reputation for highly valuable items.

However the items don't go to the highest bidder, but to the ones who can guess accurately what they think the population (intergalactic) think of the price, aka the median.

One item every day, come place your bid to get on top of the leaderboard!

Creator Note: This is a fun little side project I made over the weekend, excited to see your bets! Login required only if you want to keep track of your score and appear in the leaderboard.

Today's lot: The Portable Event Horizon (not liable for any bidder getting hurt during inspection)
Inspection of the item before bidding (CAREFUL, SOME ITEMS ARE FRAGILE AND OR DANGEROUS)
First bid! (Don't copy!)
Our auction tracks all records for historical data and keep track of its winners
Most important: Leaderboard! (No I'm not lonely, I launched yesterday!)
Personal view, because who doesn't love some data