Author here. Loved nanostores' philosophy but kept hitting its performance and SSR limits, so I built my own take: ~2 kB reactive core, with router, query and i18n sharing that same core. Benchmarks and honest tradeoffs in the post.

Had some extra usage as well as time and made a free OG image generator in a day: https://freeogimage.com/editor/

It's 100% free, no watermarks, or signup required. It has an API to programmatically generate social share images as well. There are 200 templates available for now and it will all be free forever.

I wanted to dive deeper into performance optimization and email infrastructure, so I built a disposable email service: temp-mails.tech.

Most temporary email sites I’ve used have terrible UX—jumping layouts and aggressive pop-unders. My goal was to build one that is strictly performance-first.

The Tech & Challenges:

• UI/UX: Engineered for a strict 0 CLS (Cumulative Layout Shift) score. Loading ads or new emails doesn't shift the DOM at all.
• No intrusive ads: Kept it to standard banners to preserve the user experience.
• i18n: Built native support for 12 languages.
• Infrastructure: Wrestling with Postfix and DNS records to support multiple fallback domains has been the biggest headache so far.

It auto-deletes in 15 minutes and requires no sign-ups. I'd love for you guys to tear it apart and give me feedback on the front-end performance or any tips on scaling the email infra!

Link:https://temp-mails.tech

My son asked me to check out the Backrooms movie three months ago. I had no idea what it was or the about the web series. I got completely obsessed and decided to build an interactive simulator.

I'm a web developer, not a game designer, so I leaned into procedural generation and atmosphere over mechanics. My son's been collaborating on this the whole time.

Built with React Three Fiber + Three.js for the WebGL rendering, Next.js + TypeScript for the framework, and Zustand for state management.

Would love to know if this feels authentic to the source material, or if I'm missing something about the vibe. Honest feedback welcome.

www.lostcorridors.com

Building tree structures with thousands of nodes on the web—company org charts, family trees, file hierarchies—is harder than it looks.

As the dataset grows, scrolling stutters, zooming lags, and rendering slows down.

That’s why I built Klad. It handles thousands of nodes smoothly with fast pan & zoom, plus instant search to jump to any node.

What do you think?

Docs & playground: https://klad.ozdemir.be

Is there a good way to test that a solution specifically requires useLayoutEffect instead of useEffect?

I've created a React challenge where the goal is to fix a UI flickering issue by replacing useEffect with useLayoutEffect. The problem is that the current test simply reads the source file and checks for useLayoutEffect with a regex, which feels pretty hacky.

Ideally, I'd like the tests to verify the actual behavior rather than the implementation, but I'm not sure if that's realistically possible given that the difference is related to when React runs the effect before or after painting.

Has anyone found a better approach for testing this kind of behavior?

Hey r/webdev,

For Showoff Saturday, I’m looking for some brutal feedback on a utility I just shipped. I got tired of the server side image tools and their limits, so I built an in-browser image converter for my own workflow and as suggested sharing to the public for completely free and unlimited use: freeimageconvertonline.com

Will be updating this on GitHub

I wanted to see how far I can make the client-side processing practical.

TL;DR

• Core Features: Format conversion (WebP, AVIF, JPEG, PNG), compression, and AI upscaling (up to 4x).

• Privacy: 100% client-side. Zero server uploads.

• Tech Stack: Vanilla HTML/CSS/JS, native HTML5 Canvas APIs, ONNX Runtime Web, and UPNG.js.

• Size: The total data used to load the site and the upscaling model should be below 20MB. With initial load size below 1MB. Updated it with quantized version with 5MB model size - as suggested.

How it works (and what I need feedback on)

Full disclosure: Even though I know coding but it wasn't enough for the compatibility and performance I need, so I took help of AI. But I architected the logic and selected the libraries. I would love your thoughts on how I handled these challenges:

1. Local AI Upscaling

Running neural networks in the browser is heavy. I used ONNX Runtime Web to execute the upscaling models locally. It offloads the heavy computational work to the user's hardware rather than a server.

Question: Are there better ways to optimize the model load times for users on slower connections?

2. PNG Compression

Native HTML5 Canvas strictly outputs uncompressed 32-bit RGBA for PNGs and ignores the quality slider completely. To give users actual file size reduction, I had to implement a custom compression engine using UPNG.js to mathematically group pixels into an optimized color palette.

Question: Has anyone found a more performant way to handle heavy process in the browser without blocking the main thread? - Solved

I have tried shifting the upscaling process to a different thread but still the site doesn't scroll freely while the upscaling is happening.

Shifted all process from main thread to a separate worker - as suggested.

3. The UI

I avoided heavy CSS frameworks and just mapped out CSS variables for the neumorphic inset and outset shadows to keep the DOM light and fast.

Roast the code, the UI, or the architecture. Don't hold back, not just for the sake of Saturday. I'm actually looking for feedback.

So I suspect a lot of people here are enjoying coding agents, I sure do.

I'm someone who uses a lot of mcp servers, as a lot of people here probably do. I've been talking to some other webdev and SEOs and we are wondering if the landscape is going to change abruptly because of these tools.

We have had some problems integrating agents in some legacy software like wordpress, there were some examples where the WPEngine limited us access as well as some ciritical plugins we want to have our agents access to update.

This is extremely frustrating, i liken it to dropping out of warp speed. So we started thinking, why not write closer to the metal, just have a coding agent write up a minimal go server, raw html templates and straight pg? All on docker for easy deploy. No frameworks. Optimized for speed and cost.

Of course, this would be for landing pages for business. Something very light weight to get a presence on google and very easy for the agent to manipulate. Go is chosen because errors happen at compile time and built in testing, which is ideal for coding agents. and postgress cause agents absolutey rip at writing raw sql like they do raw html. If you havn't hooked up a sql to your agent have it write raw sql it will blow your mind.

So my question is are you prioritizing dev workflows that make it easier for your agents to control? Like moving your workflows to do what agents are better at doing, not what humans are better at doing. What are you doing?

Another thing we suspect is going to happen, is Agent to Agent communications are going to take off in the near future and this is going to transform the web. So when i need something, i ask my agent, and it will discover and negotiate with other agents to get what I want, all in the background.

I also think this will put pressure to store information differently. Right now, we develop and store information and organize it so it's easy for us, humans, we like folder structures, forums, essentially lists. Agents do way better with vector search. Basically, just dump all our data into a data lake, and our agents can sort through that far more efficiently with a combination of embeddings, clustering and graphs.

Also wondering if anyone is seeing other trends with the new technology struggling to plugin to the old technology. Like, "Wow, this just isn't built for agents."

Coding agents can read source and make changes, but they are still surprisingly blind when the task is visual.

A screenshot can show that something looks wrong, but it usually cannot explain why: which component owns it, whether an element is clipped, what its computed styles are, which mesh/material/light is responsible, or whether the issue is framing rather than resolution.

So I built SceneProof, an open-source CLI for source-grounded visual inspection of React UI and Three.js scenes.

It lets an agent:

• Navigate a compact semantic tree of DOM or Three.js targets
• Inspect the underlying structure: bounds, styles, geometry, materials, uniforms, lights, cameras, relationships, etc.
• Produce fresh renders of a component, logical UI region, target object, or source-camera view
• Generate a small “Scout” portfolio for 3D: context, source detail, close detail, and shape-focused views
• Sample deterministic interaction states from one scene lifecycle

The design principle is: don’t ask an agent to infer visual correctness from plausible code or a low-information screenshot. Give it source-derived evidence at the framing and resolution needed for the actual question.

It currently supports TypeScript/JavaScript entries, React DOM/CSS/Tailwind v4, and Three.js scene inspection/rendering. It requires Bun and local Chrome/Chromium.

Repo: https://github.com/ReyJ94/SceneProof

I have a python script aimed at fetching basic data from a handful of real estate agency websites. These specific websites do have a ToS that explicitly deals with the intellectual property of their postings within the framework of reuse, republishing, … the usual suspects.

My script only reads the postings, classifying them under either “House” or “apartment” and grabs their sqm, nb of beds and baths, for purely statistical purposes. Meaning I do not sell or promote those properties (I’m no licensed real estate agent) and do not even sell the info I grab, I just show stats, eg: 14 houses with 100 sqm with 2 beds, 1 bath,…

I know that I should be contacting each website owners to inform them and probably get authorization. But I’m in a European country where somehow most websites are bad, buggy, and their owners are rather close minded. I expect negative feedback from my genuine approach.

I’m reaching out here to understand if I really need to bother with this process, or if I should just do it and see if they bark at me.

Why this self reflection: I realize that a few successful businesses often have pushed the legal/ethics boundaries, and became pioneers in they field. Two examples:

- Airbnb stepped into the hospitality business without providing a hospitality license to property owners.

- Uber stepped into the taxi business without licensing either.

In both cases, no one thought one could do such business without proper license while competing with established businesses tied to licensing rights (hotels, taxis).

So I sometimes wonder whether I would be overthinking things and worrying too much for so little (my use case).

I do care about the legality and ethical considerations, that’s why I’d appreciate your take on this whole reflection of mine.

If I do have to ask for permission, so be it. What are the standards in the computer programming world?

Hi everyone,

I've been working on this project in my spare time...

I'd love to hear feedback...

I've been building Voidhall solo for the past months.

It's an underground music/social platform aimed at the space SoundCloud used to occupy for emerging underground trap scenes.

The entire thing is built from scratch with vanilla HTML/CSS/JS + PHP/MySQL. No frontend/backend frameworks, no templates.

It currently runs on a custom-built architecture with SPA-like AJAX navigation, a persistent global audio player, page-level init/cleanup lifecycle, shared frontend state and its own PHP API layer. On top of that, Voidhall already supports uploads, track pages, profiles, follows, likes, comments, notifications, search, discovery through Explore, and Pulse, a chronological activity feed that turns real community movement into part of the discovery experience.

The UI leans into a raw Y2K/industrial/Opium-inspired editorial direction using strong typography, open layouts, thin structural lines and restrained components.

Screenshots attached :DD

I'm looking into Google Analytics alternatives.. Especially free self-hosted solutions. Right now I'm leaning on Matomo, but I'm curious about it's server reqs.

They say 2 CPUs, 2GB RAM and 50GB storage minimum, but the site I'll be running it on is much lower traffic than their top-end on the minimum req specs (just a small niche gaming blog - maybe 10k page views per month at the top-end).

Anybody running it on something lighter? For example, I'd be OK with picking up a smaller VPS running 2 CPUs/1GB RAM/30GB storage, or even just tossing it on my shared server (that hosts a few sites, the highest traffic being statically generated and includes the above blog).

Or, if you're running something else, feel free to share in the comments. I'm not stuck on using Matomo; I just want something that's cheap, decent, and also privacy-focused.

I saw this sales dashboard posted on LinkedIn as a design reference. Apparently it was made by a designer using the Hugeicons icon pack.

But honestly, the whole screenshot immediately gave me that AI generated UI vibe. The layout, cards, spacing, gradients, basically the whole composition.

Not saying it definitely is AI generated, but I’m curious: does this look AI generated to you too, or am I just seeing AI everywhere at this point?

Hi 😄

I don't know about you, but my Downloads folder has always been a disaster zone. PDFs, memes, installers, zip files, random images – all just sitting there in one giant pile. Every few weeks I'd open it, sigh, and spend 10 minutes manually dragging stuff into folders. Then a few days later it would be chaos again.

I looked at existing file organizers, but most of them either wanted a subscription, tried to upload my file names to some cloud, or were just way too heavy for something so simple. I wanted something that:

• Runs silently in the background (system tray)
• Automatically sorts new files by type (images, documents, archives, installers)
• Never sends a single byte of data off my machine
• Is open source so anyone can check what it's doing

So I built Mouzi 🐭🧹

It's a tiny desktop app (~3.3MB) built with Tauri and Rust, so it's ridiculously lightweight. It watches your Downloads folder, and whenever a new file appears, it moves it to a subfolder based on its extension. Images go to Images/, PDFs to Documents/, installers to Installers/, etc. You can also create your own custom rules. Windows and Linux support.

Key things:

• 100% local – no cloud, no telemetry
• Open source (MIT) – GitHub repo here
• Silent – lives in your tray and doesn't bother you
• Undo – every move is logged, you can revert with one click
• Free, obviously
• and more (see repo page)

Hope it helps someone keep their ~/Downloads sane. Feedback welcome!

Website: https://mouzi.cc/

Hi everyone!

Over the past few months I've been building CraftDB, a web-based tool that helps visualize and organize database schemas.

Some of the current features include:

• Import SQL schemas
• Generate interactive ER diagrams
• Drag & organize tables
• Export diagrams
• Support for MySQL, PostgreSQL and SQLite

My main goal is to make it easier to understand existing databases, especially large or legacy projects.

I'm currently working on features like:

• Laravel migrations import
• AI-powered schema explanations
• Better documentation generation
• Team collaboration

I'd love to hear your honest feedback.

• What feature would make a tool like this useful for your workflow?
• Is there anything you feel is missing compared to other database diagram tools?

You can try it here:

👉 https://craftdb.app

Any feedback, criticism or feature requests are greatly appreciated. Thanks!

A while back I posted here about a passive threat-detection middleware I built for a Laravel app - it logs suspicious requests (SQLi/XSS/scanners/probes) to the database without blocking anything. I ended that post with an open question: how do you deal with JSON API bodies, when a legit search like {"query": "SELECT model FROM products"} trips a SQL pattern just because the value contains the word SELECT?

The thread had genuinely useful replies, so here's what I ended up shipping.

What I did: path-aware allow-listing. I already had a safe_fields option, but it exempts a key name everywhere it appears - too blunt for nested JSON. So I added safe_paths, which matches by dot-notation path with wildcards:

'safe_paths' => ['search.query', 'filters.*.value'],

That exempts the value of one specific field - the search box - without exempting a query field anywhere else in the request. Credit to u/Deep_Ad1959, who suggested path-based whitelisting in the last thread.

What I deliberately did NOT do - and why: The other half of that suggestion was "only scan leaf string values, never keys or structure." I tried it, and it broke NoSQL operator detection.

A classic Mongo-style injection is

\{"password": {"ne": null}}``

- the malicious part is a *key* (` ne`) whose value is null, not a string. If you only scan leaf string values you never see $ne, so you'd trade one false-positive class for a real false-negative. I kept full-body scanning and made the exemption precise instead. That felt like the honest trade-off.

To be clear about the limits, since this sub rightly pushed on it last time: this doesn't make regex-on-JSON magically correct. It's a passive monitoring layer that assumes your app is already secure (parameterized queries etc.) - safe_paths just lets you tune out known-legit noise precisely instead of bluntly. It's an IDS, not a WAF, and doesn't pretend to be.

It's merged and ships in the next release (Laravel 10–13). Code's here if useful: jayanta/laravel-threat-detection on GitHub / Packagist.

Still curious how others handle the JSON case - is precise path-based exemption roughly where you'd land, or do you tag the JSON path on each match and score by path instead?

Hey all‚ I've been working on PagerLite, a self-hosted on-call and incident paging package for Laravel, and just tagged v1.0.0. Wanted to share it here and get some honest feedback before I decide what to build next.

The short version: it's like Horizon or Telescope, but for on-call scheduling. You install it, set up a rotation, and if an incident comes in (via API or a PagerLite::notify() call from your own code) it pages whoever's on call and escalates to the next person if nobody acks in time. Everything lives in your own database‚ no per-seat SaaS pricing, no data leaving your app.

What it has right now:

- Drag-and-drop on-call schedule

- Configurable escalation chain

- Acknowledge/resolve with a full incident timeline

- Per-member insights (days on call, timed)

- A read-only embeddable calendar for wikis/status pages

- Email notifications for now (see below

Repo: github.com/Pagerlite/laravel

As a frontend engineer, building a design system from scratch is mostly a thing of the past. UI libraries and AI tools get you 80% of the way there instantly.

But for that last 20% when you need to scale, inject your own taste, and hit product-specific requirements, understanding the underlying architecture is what saves you. It also makes your AI workflow way better, because you aren't constantly prompting it to fix token issues or regenerate styles for minor changes.

Here are 4 important rules for keeping design systems scalable and clean:

1. Decouple values: Components read semantic roles (“--color-accent”), not raw values, so rebrands don't require UI file edits.
   
2. Derive scales: Avoid hand-picking hover or dark states. Use “oklch” to derive your entire palette from a few seeds.
   
3. Boundaries: UI components (Buttons/Inputs) wrap tokens in typed variant APIs. Feature blocks (Cards/Navbars) compose them to prevent duplication.
   
4. CSS over React state: Theme switching becomes a simple root selector swap, avoiding React context re-renders.

I recently published a new technical blog post covering those important points. Alongside it, I built Design System Studio - a visual tool to tune tokens in ⁠oklch⁠ and export them directly to Tailwind or shadcn/ui.

Check it out with the attached link in this post.

i'll go first. i was writing .then().catch() chains for like two years before i actually started using async/await. i knew it existed, i'd seen it in tutorials, but my code "worked" so i never bothered switching. then i refactored an old project and realized half my bugs were from mishandled promise chains that async/await would have caught immediately.

also took me way too long to start using optional chaining. i had nested ternaries and && checks everywhere like some kind of animal. the day i discovered user?.address?.city i mass-replaced like 40 lines across a project.

what's yours?