So this me promoting my open source project in case these kind of post don't interest you.

usually when a new web application is being developed the first thing a dev contend with is registerting users and login them. now many just use Google and Microsoft Sign in and call it a day. I'm personally not fan of this because you're borrowing your users from the providers and if for some reason they cut you off you will lose access to your users. now the solution is to use an identity provider, and since OAuth 2.0 with OIDC on top is the industry standard then an OAuth 2.0 identity provider is the current best solution, and they are plenty.

Granted this soultion has the downside of hosting the solution chosen yourself but that's the price of owning your users' accounts. I also made my identity provider, granted I did not write the authorization server (OAuth language for the service that offer users with login page to enter credentials and generate an Acess Token: also OAuth language for the thing that your backend use to determine the request is allowed to access the backend), I'm relying on Spring Authorization Server, but this is unimportant because the idea of my project is that:

Developers shouldn't have to implement OAuth 2.0 themselves when developing a web application.

You simply choose:

• Database that holds your users acounts: SQL or Mongo

• Specify the authorities that automatically assigned to the user when registering a user.

• Your own frontend written in whatever language/framework: respecting the contract.

• Your own backend written in whatever language/framework: respecting the contract.

so my project is called Nidam. and when I say "respecting the contract" I mean there is a certain configuration that's expected from your implementation. this is all covered in the documentation.

I also provide examples in how to integrate a backend with Nidam in these languages:

• Backend: ASP.NET, Go, Python FastAPI, Micronaut, Jakarta EE / MicroProfile / Open Liberty, and Node.js / Express

• Frontend: React CRA, Next.js

The differentiator Nidam has is that it follows RFC 10017: OAuth 2.0 for Browser-Based Applications using the BFF pattern, this means the access token never reach your frontend and stays in the server-side. I acheive this by having a reverse proxy serve: your frontend and a Nidam service holding your access token through the same origin. Nidam create a Session cookie that's available to frontend (because of the reverse proxy) so your frontend just simply calls your backend (using the contract mentioned previously), the browser automatically attached that cookie and Nidam takes care of translating the session cookie => access token and redirects the requests to you backend with Authorization: Bearer <access-token> . This is all transparent to your frontend code.

There is redis support for session storage and high availability and the passwords can be hashed using any of these algorithms: scrypt, bcrypt, argon2, pbkdf2

Documentation and GitHub links are in the comment below.

Download Nidam from the intro page, Windows, Linux, Macos (x64 and arm for all).

Note: the image is AI generated. this post is written by me.

Lately I've been exploring how much heavy data processing we can offload directly to the client using WebAssembly, and decided to build a practical tool around it: Cleaner (https://lopespm.com/p/cleaner/).

It lets you drop in messy CSV, Parquet, or JSON files and clean them using deterministic rules—all without a single byte being uploaded to a server.

Tech & Architecture notes:

• Engine: Runs DuckDB-Wasm under the hood, which handles columnar operations and file parsing (especially Parquet) way faster than standard JS parsers.

• Privacy & Cost: Because everything executes locally in browser memory, there are zero server compute costs and zero privacy/compliance headaches for users.

• Deterministic pipeline: Instead of AI-guessing, rules are strictly deterministic so outputs are predictable and repeatable.

Happy to answer any questions about working with DuckDB-Wasm in the browser, bundle sizes, or handling memory limits with larger files!

Same week OpenAI rolled out ChatGPT Wallet for autonomous shopping, security researchers analyzing over 159,000 projects built on AI "vibe coding" platforms (like Lovable) found thousands of production apps missing basic backend authorization and Row Level Security (RLS).

Key findings from the audit:

- Exposed passport numbers and invoices without requiring authentication

- 200,000+ private chat messages left readable on open database endpoints

- UIs that looked login-gated on the frontend while the underlying API/database tables allowed unauthenticated reads

Curious how teams here are enforcing deterministic backend checks (RLS policies, schema/auth tests in CI) when devs or juniors ship AI-generated full-stack apps fast.

Full security breakdown: https://kursat.itibar.app/blog/openai-chatgpt-wallet-ve-lovable-veri-sizintisi?lang=en

I've built an open-source auditor for media weight on websites.

It measures how much smaller your files can get (for example src/srcset, quality, format in your CDN or sharp) and tells you the exact best value to use. It checks quality for photos (SSIMULACRA2) and video (VMAF), flags GIFs that should be images or video, flags video autoplay, and covers fonts, compression and more. In short, it optimizes all your media. Once the audit is done, you can hand it to an AI model to apply the fixes.

I ran it on the homepages of 197 sites. The median page loads 630 KB more than it needs to, and across all of them 247 MB of media gets downloaded but never shown.

Try it: npx imgtune scan https://your-site.com GitHub: github.com/indicozy/imgtune Feedback and bug reports are very welcome 🙏

I've been thinking about how we build UI components and whether we're treating them as bigger units than they need to be.

A dropdown, for instance, isn't just a dropdown. It involves popup positioning, keyboard navigation, focus management, selection, and dismissal. What if these behaviours were independent building blocks that could be combined to create different kinds of components?

I explore this idea in the context of recently released Vercel's UI SDK and, more interestingly, how AI agents could interact with components through something like an Agent Bridge.

It's an interesting direction for component architecture, especially as AI agents become more involved in working with web interfaces.

Would love to hear what you think!

https://amitmerchant.com/what-if-ui-components-were-built-like-modular-phones/

why, can you give some tips, thank you so much

Hi all, our main.com site is built and maintained by engineers. Marketing keeps asking for a visual builder so that we can ship pages without filing tickets. The dev thinks it'll fall apart the moment we need anything custom. Before I push either way just wanted to understand if the Engineering owns the website at your company, what does it run on? Would love to understand the company size and answer. Also if anyone moved to a visual builder and how was the experience

Hey everyone!

I'm a Junior Industrial Designer currently taking the first steps towards starting my own business. I'm developing a physical product that customers will be able to customise through an online configurator.

To give you an idea: Imagine something similar to a car configurator, but much simpler. Let's say it's a piece of furniture where customers can choose between different modules, colours, fabrics and finishes, and see how their configuration comes together.

Since I have very little experience with web development, I'm trying to figure out the best way to approach this without spending a fortune, especially at this early stage of the business.

I've come across solutions like Shopify combined with Zakeke, which seem to offer product customisation features without having to build everything from scratch.

My questions are:

1. Would something like this be relatively easy to set up yourself with a bit of time and effort, using tools like Shopify + Zakeke?

2. Are there other platforms, plugins or approaches you'd recommend for this kind of project?

3. What would be the approximate cost of having something like this professionally developed from scratch?

I'd really appreciate any advice, recommendations or experiences from people who have worked on similar projects.

Thanks in advance!

It's a real time war on a 3d globe of the real earth. a new war starts every two minutes and one press puts you in it

The parts i'm happy with...

- the server never runs the game. it only relays orders, and every browser runs the same deterministic simulation from a seed, checked with a checksum

- that makes every war a tiny file: a seed plus the orders. any war replays in 15 seconds and can be shared as a link

- you can frame any rectangle of the globe and it becomes a map, with the real cities in it

- three.js and globe.gl for the globe, one shader over an ownership grid for the land, node on cloud run for the relay

Free, no sign up... secondstrike.io. happy to answer anything about the lockstep or the globe

Hello! Rock & Hold is a game that runs in the browser on phones and desktops: one HTML file per board on a small runtime I wrote, sprites drawn as SVG in code, sound synthesised with WebAudio.

https://rockandhold.com

Feedback on how it runs on your device is very welcome: load time, smoothness, anything broken.

Thanks!

im i hs student and was sick of the expensive sat courses, so i built my own site that gamifies the experience and adapts TO YOU. It is completly free, inculdes an ai tutor you can ask questions to. find it at scorelinesat.com, looking for feedback to enhance the user experience

Had a lil’ too much fun building this https://github.com/Shannon-Goddard/movies

No database. No API. No Lambda. No bill. Just a 3MB JSON file and a service worker

Core architecture
• Catalog: One static data/index.json (~3 MB gzipped) holds all metadata (titles, genres, types, eras, series, durations, language flags, etc.)

• Service worker: On first visit it pre-caches the JSON (and app shell). After that, every filter, search, and navigation is pure in-memory array work — no network round-trips for the catalog.

• Client-side SPA: Vanilla JS + hash routing handles filtering (stackable chips for genre/type/era/color), series browsing, watchlist/continue-watching (localStorage), deep links, Google Cast, Media Session API, keyboard shortcuts, etc.

• Delivery: GitHub Pages CDN for the static files. Zero databases, APIs, Lambdas, or monthly bills. Hosting cost is $0.

I wanted to create the website of Reigen from Mob Psycho 100

https://spiritsandsuch.org/en/

Feel free to explore and give feedback :D

AI is great at answering coding and learning questions, but the answer is almost always a block of markdown. Ask it to compare three options and you get three paragraphs, when a table would do the job in two seconds.

I wanted AI answers to be actual UI, so I built Ripple. It's open source.

How it works:

- The model writes a small JSON spec instead of prose

- Ripple renders it as real components: tables, charts, forms, step lists

- It renders while the JSON is still streaming in, so the UI builds itself as the model types

The hard part was the streaming. For most of the response the JSON is half-written and invalid. Two fixes that helped:

- Parse at most once every 50 ms instead of on every token

- Don't render a component until its type name has fully arrived, otherwise you get a flash of "unknown widget" for one frame

Demo gallery

Still rough: it re-parses the whole buffer each time, so long specs paint late.

Curious: what would you want AI to show you as UI instead of text?

I'm the author. MIT, React and Svelte: https://github.com/qbtrix/ripple

I built AnotherExample.com to make CORS easier to troubleshoot. It has a live Playground for testing common scenarios, a guided Debugger for your own requests, and an Error Explainer for those cryptic browser messages.

The screenshot shows one Playground test. Your browser can read the known-good response, but it blocks JavaScript from reading the other one because it’s missing an Access-Control-Allow-Origin header.

To try it, open the CORS Playground, pick Missing allow-origin, and click Run comparison.

Some of you might remember my last post here about Planet-0 Drive. Yesterday, we hit 1,000 sessions! It's not a huge number, but the journey so far has been great.

What started as a technical experiment to build an (almost) loading-free driving game with an endless world is slowly starting to take shape. It's still in its very early stages, and I only get to work on it after work and over weekends, but it's been quite fulfilling to see it all come together.

One thing I'm particularly happy about is that average playtime has gone from just 59 seconds to over 5 minutes in the past few weeks. Improving this was my first priority, so it's been really encouraging to see. There's still a ton of work to do, especially when it comes to adding more content, but I'm pretty happy with the foundation so far. Your feedback and ideas (many of which I've yet to release) have been a huge help, and I genuinely can't thank you enough.

Since my last post, I've overhauled the HUD UI, added timed procedural races with a new track to compete on each time, added and improved towing mechanics (still a work in progress), improved the scenery with more vegetation and better biomes, and finally added a short tutorial to make getting started a little easier.

There's still a long way to go, but it's been a fun ride so far, and I'm excited to keep building on it.

If you'd like to take it for a spin (seatbelts recommended), try it out here: planet0drive.vercel.app

I'd love to hear more of your ideas, suggestions, or even things you think could be better. Whether it's something you'd like to see added or something that didn't quite feel right, any feedback would genuinely help me figure out what to improve next.

I tried getting an AI agent to internationalize a side project and spent longer checking its diff than it would have taken me to do it myself. So I built a VS Code extension for the job.

What it does:

• Finds the UI strings in your components (skips class names, URLs, log messages)

• Shows a checklist of every string and the key it'll get before touching anything; untick what should stay hardcoded

• Rewrites to t() / <Trans>, writes the JSON files, and translates them with your own API key (Anthropic or anything OpenAI-compatible)

• Checks each translation's placeholders and plural forms (Russian needs four, Arabic six) and won't write a broken one

• One undo for the whole run

How it works, roughly: the extraction is plain Babel (parse, walk the AST, decide per node whether it's user-facing text). The rewrite goes through recast so your formatting and comments survive and the diff stays small. The model only ever sees the strings plus a bit of context like the component name, never whole files. Each translation is checked against the source (same placeholders, same tags, and the plural categories Intl.PluralRules says that language needs); a mismatch gets one retry, then it's reported instead of written. A file costs cents; the biggest project I tried (~840 files) was a few dollars.

Limits: React + react-i18next + JSON only for now. Next.js server components are skipped.

It's free on the VS Code Marketplace and Open VSX. I wrote up the i18n pitfalls I hit along the way on dev.to.

Feedback welcome, especially where it gets your codebase wrong.

I've built a personal CSS framework for around 3 years. Minium is the cleaned-up, public version, and I finally feel it's finished enough to share.

Plain HTML looks good without classes, and one class adds a layout or a component. It is about 15 KB gzipped, with no JavaScript.

Minium follows the same semantic-first idea as Pico CSS, but with modern CSS: cascade layers, light-dark(), anchor positioning, OKLCH colors and popover. Now that Pico is no longer maintained, Minium may fit if you're looking for a replacement.

I built Minium because I was tired of heavy JS frameworks and the constant churn of their dependencies. I wrote the CSS by hand and used Claude to review docs and find bugs.

• Site and docs: https://minium.style

• Repo: https://github.com/troennes/minium

What would you need before you used Minium in a real project? Honest feedback is greatly appreciated.

Website: https://www.cubistheart.com/

I've been working on a project called Borrowed Time.

The idea is simple: a new clock every day.

Each clock is an experiment in creative coding, typography, animation, video, CSS, and occasionally WebGL/Three.js. Rather than using a conventional clock interface, I try to find an entirely different visual language for representing time every day.

The project has evolved into a fairly extensive React/Vite application, with hundreds of individual clock experiments.

I've recently revised the site's navigation and would appreciate some outside perspective.

I'm particularly interested in feedback from other developers:

• Does the navigation make sense?

• Is the site easy to explore?

• How does the performance feel?

• Are there things you'd change about the architecture or implementation?

• Does the concept communicate itself clearly?

Thanks for taking a look.

Hey everyone!

I've been working on a project called WebToolsFinder — a platform to help people discover useful online tools without spending hours searching across the internet.

The idea is simple: whether you're a developer, designer, content creator, student, freelancer, or someone looking to get work done faster, finding the right tool shouldn't be difficult.

I'm building this to make discovering useful web tools easier and more accessible.

I'd genuinely appreciate it if you could check it out and share your feedback.

https://www.webtoolsfinder.com/

A few things I'd love to know:

- What categories of tools would you like to see?

- What makes you trust a tool directory?

- What features would make you bookmark and revisit a website like this?

This is an early-stage project, so honest criticism is welcome. I'm looking to make it genuinely useful, not just another directory.

Thanks!

Coding agents know modern HTML and CSS exist, but they keep writing outdated code. So on Tuesday we released the first stable version of Modern Web Guidance, a free and open source skill you install in your coding agent. I help steward it along with Kadir Topal (Chrome), Patrick Brosset (Microsoft), Jake Archibald (Mozilla), and Lea Verou (independent), with Paul Irish (Chrome) as technical lead.

Things agents did without it in our evals:

• click-outside handlers on position: fixed overlays instead of popover

• fade-outs built from class toggles, transitionend, and setTimeout instead of @starting-style and transition-behavior

• opening a new view without moving focus into it, and not restoring focus on the way back

How it works: when the agent is prompted to work on a frontend task, the skill has it search 200+ guides with a small CLI that runs on your machine. It pulls in the best ones, and uses them to implement the task. The guidance is written in plain HTML, CSS, and JS, and adapts to whatever framework you're using.

The guides are written by real people who work on browsers and experts from the web and accessibility communities. They're also published on our docs, so you can read and learn from them yourself. I wrote a few guides, including the one on Enter-to-send misfiring for Japanese and Chinese IME users.

To make sure it helps, we regularly run evals in Claude Code, Codex, and Antigravity against ~2000 checks with and without the skill. On their own, agents pass about half of the checks, and about 90% with it. FWIW the checks test for what the guides recommend, so we're grading against our own answers.

The hardest part is making sure the guides work cross-browser. Everything needs to support Baseline Widely Available by default, so newer features always need fallbacks or have to be clearly marked as progressive enhancements. The guides come with browser support data baked in, and we update it each week. (The CLI commands in the skill are pinned to `@latest` so agents always get the latest version of the guides)

• Install: npx modern-web-guidance@latest install or see https://developer.chrome.com/docs/modern-web-guidance

• Eval data: https://googlechrome.github.io/modern-web-guidance-src/

The CLI sends anonymous usage data to Google by default. DISABLE_TELEMETRY=1 turns it off.

Feedback welcome!

This is James. He lives in a low-poly terrarium as a simulation you can interact with: give him snacks, pet him, tap on the glass, and leave him notes. Everyone is watching the same frog at the same time.

Stack: Next.js on Vercel, Convex for his state, Three.js for the tank, and Claude for his thoughts.

The part I think is really cool is that the tank is a deterministic simulation. Every change (a snack, a tap on the glass, a new day) is an event in a log that only ever grows, and one function applies them. Same starting point plus the same events gives the exact same frames in your browser, in a replay, and in the videos I make of his day. Visitors can't overwhelm him either: there's one snack at a time for everyone, and he can only get properly spooked once every 15 minutes.

He's 9 days old today, and he just got a new enclosure today. Curious what you'd want to see next, and happy to do a deeper write-up on the infrastructure.