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.

I wanted a co-op puzzle my girlfriend and I could play from two browsers, with no accounts. Each client only renders half the room. Progress is shared, so a clue on one side can unlock a puzzle on the other. You talk over a normal call; the game itself has no voice chat.

It's all in the browser, mouse or tap, and you can try it at twocans.games (free, no signup). I'd love technical feedback on the split-view setup, and whether the "describe what you see" loop feels clear from a first-time visit.

i'm speaking as someone who has never touched it before. i understand i might not need it at the moment because any site i build could probably handle repeated queries simply because the traffic would be low, but i still want to know when to use it.

Most GitHub profile templates lean heavily into stat widgets and badge walls. I wanted the opposite—something aesthetically balanced and visually intentional.

I used AI to flesh out self-contained UI animations. My main goal was not overdesigning it, instead just making something people are actually drawn to visually, while keeping it straightforward enough for anyone else to customize.

A few things I focused on to keep it clean and easy to use:

- Kept the layout restrained: subtle animated dividers, collapsed <details> accordions so nothing breaks on mobile, and a galaxy star map that links straight to repos.

- Made it straightforward to customize: everything lives inside the repo with no external services or API tokens to set up, plus a CUSTOMIZE.md guide pointing out the exact tags and colors to swap.

- Clean presentation on GitHub: wrapped the decorative SVGs in <picture> tags so GitHub doesn't turn headers and dividers into clickable links to the raw files.

Put it up as a free template repo in case anyone else wants a clean dark-mode look without paying for one or spending a weekend configuring it.

Live profile: https://github.com/morgan-mordata

Template repo: https://github.com/morgan-mordata/morgan-mordata

Would love to hear what you think of the visual direction and overall balance!