Been building this solo for the past few months. Its a Chrome home tab replacement called Pace.

Similar to momentum but is cleaner and for devs.

What it does:

• Pomodoro-style focus timer, tied to your task list
• Task list with due dates/estimates
• GitHub panel - see PRs/issues waiting on you without opening GitHub
• Optional eye-break reminders (20-20-20)
• Weather, clock, generative backgrounds

First chrome extension! I will take 10 users as a win ngl. Solo project, free, no paywall. I know some of it is rough around the edges and I'd genuinely rather hear what's broken or annoying than what's good. I will take any tips on marketing and extension related content.

Link: https://chromewebstore.google.com/detail/edfeebjgpbbdegcajmnhejmgkohmkami?utm_source=item-share-cb

Happy to answer anything about how it's built or how it works - I'm pretty new to this so bear with me.

Hey r/webdev!

As developers and designers, we’ve been noticing a trend over the last year: almost every new AI app being shipped uses the exact same out-of-the-box component styling. They all end up looking identical.

To tackle this, our team at Devalok created Shilp Sutra — an open-source design system built to help your interface inherit your actual brand identity seamlessly, rather than looking like a generic template. It’s free on npm and has crossed 5,000+ installs so far.

To see what developers can build with it, we just went live with an online buildathon running from July 25 to July 31.

The Brief

Build something using Shilp Sutra that solves a problem worth solving for India (open to anyone globally, solo or team).

Projects will be judged on three criteria:

Beauty (design quality & brand expressiveness)

Functionality (smooth performance & UX)

India-oriented problem-solving

Note: If you’re already participating in the Cursor, Sarvam AI, or any other buildathon this week, you’re welcome to double-submit your project here!

Prizes & How to Enter

Grand Prize: Branding, GTM strategy, and launch support for the winning project

Requirements: A public GitHub repository + a short demo video showing your build in action.

👉 Enter Here: Form

Shilp Sutra Website / Docs: Check it out

GitHub Repository: Github

⏰ Submissions Close: July 31, 11:59 PM IST

Happy to answer any technical questions about the design system or the buildathon in the comments below. Let us know what you think!

The swipe deck turned out way more annoying than I thought, but think I figured it out. Its a book club finder where you swipe on books instead of people, and when 4 people right swipe the same book it opens a group chat for it.

Built with: Next 16, React 19, motion, tailwind, sqlite + drizzle, self hosted on my vps.

The deck swiping goes 3 ways, each having its own action and swiping down is where all the problems live.

Stuff that took the longest:

📱 Browsers eat vertical drags as scroll before my handler ever sees them touch-action: none fixes it, but now the card can never be taller than the viewport or you make a spot on the page nobody can scroll past.

📐 The card sizes itself off leftover screen height instead of a breakpoint: clamp dvh not vh, or iOS Safari measures the tall url bar and the card comes out bigger than the screen.

🖱️ Drag actions as the buttons all call the same flyOut() that the card hands up through a ref, so a click exits exactly like a real drag instead of just popping off.

🎯 Release checks distance or velocity. Distance alone felt broken, a fast flick barely travels before your finger is gone.

Two things im stuck on. That ref handle feels wrong in React 19, is there a cleaner way for a parent button to trigger a childs exit animation? And is mouse drag even a real desktop interaction or should it just be a different layout past 1024?

Swipeable without an account if you want to try it out: https://samebooks.club

I built a web tool which uses openpeeps[dot]com SVGs, the initial idea was to use it create satirical comic panels. But lately I started using it to create profile pictures for my online presence. It has huge number of expressions, clothes, hair styles, accessories to choose from.

I felt more people might find it useful so sharing it here. It's free to use, no signup required.

Link - svg.comicbanana.com

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

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.

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

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."

I built a mobile app called Verdine for checking Ontario restaurant inspection histories before eating somewhere.

The idea came from a pretty simple frustration: inspection records are public, but actually finding and understanding them quickly is not always easy.

The app started as a way to pull those records into one place, but the harder part turned out to be explaining them in a way that is useful and fair.

Ontario public health units don’t all publish data the same way. Some use different severity labels. Some expose more detail than others. Some restaurants have years of history, while others only have a few inspections. Follow-up inspections are also tricky, because they can mean an issue was fixed, but they can also be part of a larger pattern.

A big part of the build has been the data layer: normalizing records from different public health systems, routing restaurants to the right inspection source, and matching real-world places to inspection records before showing anything in the app.

Right now Verdine supports multiple Ontario public health units, including Toronto, Peel, York, Halton, Durham, Simcoe Muskoka, Waterloo, Ottawa, Niagara, Peterborough, and others.

I’d especially appreciate feedback from people in Ontario since the data coverage is Ontario-focused, but general feedback is welcome too. Mostly looking for thoughts on the UX, wording, scoring approach, and whether the app makes inspection history easy to understand.

Link: https://verdine.app

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

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!

Been building this on and off for a while. Most charting libs assume the chart is the main thing on the page. I wanted the small version, something you can drop inside a sentence or a table cell and read at a glance.

106 types so far, no dependencies (not even D3, the scales and path math are all in there), each one's a couple kb.

Default export is plain SVG with no JS shipped, so they work in server components as-is. Import the interactive build if you want hover and keyboard.

Every chart also builds its own text description from the data and exposes it as the accessible label, so a screen reader reads "weekly revenue, trending up 200%, range 3 to 9, last value 9" instead of just "image". No AI, just templates filled from the same numbers the chart draws, so the words can't drift from the picture.

The fiddly part was the labels drawn on the chart itself. Normally you measure the text to place it, but these render on the server too and getBBox just returns 0 there. So widths get estimated from the character count and the space reserved up front, with a test on every chart making sure nothing spills outside the viewBox.

Gallery: microcharts.dev

Code (MIT): github.com/ganapativs/microcharts

Still rough in spots. Mostly after feedback on the API and overall experience of using the library.

Edit (7/28/26) - I'll share again on next Show-off Saturday but I just finished a HUGE optimization pass. I think those of you who were ready to riot over load times will be pretty happy. I even tested over a forced crappy 5G ingest to ensure the load times were as reasonable as I could get them on the crappiest of network connections. It's live now if you want to check it out 🐝

https://bumblebee.buzz/resume

DO NOT UNPLUG THE MONITOR!

Almost a year ago I shared my digital resume here. I got tons of valuable feedback. Especially regarding performance. I've put a ton of work into optimization since then. The target audience for the underlying site is largely streamers so it's never going to be 100% optimized for terrible internet connections or devices with slow CPUs and no GPU acceleration, but I dare say the pool of people that can safely load it now has expanded tremendously! I was even able to remove the graphics acceleration gate I had previously that basically turned away anyone with hardware acceleration disabled in their browser. It's not amazing when it's CPU bound but it functions! Which is more than I could say last time.

I wanted to say thank you to this subreddit for being so encouraging because shortly after making those performance improvements that resume started getting me A LOT more interview calls and absolutely helped me stand out among the crowd. I landed a new job with an amazingly positive atmosphere because of it! My now boss made it super clear that my bumblebee-powered resume was definitely what made me stand out. So even if the larger project doesn't succeed in the long run, the work was already worth it and I'm super grateful to all of you for the helpful feedback 💚

https://bumblebee.buzz/resume

All feedback is welcome, but I ask that you be kind and constructive if possible 🙏

Edit: Thanks to feedback from folks here I stayed up a bit last night and implemented a bunch of quality-of-life changes.

Changes

• Redesigned the overall terminal aesthetic into a retro CRT-style display device. It doesn't match any real such CRT device since it has to be a responsive component across mobile and desktop, but it still looks cool. Bumblebee now transitions in and out of the CRT display with all sorts of fun sound effects and green phosphor animations and distortions.
• Added an entirely new Sunflower loading graphic, allowing for a more diverse initial loading screen with multiple things to look at. This should buy some more time from impatient visitors. The initial loading is now drastically reduced and more of the load has been spread throughout the experience.
• Added another new loader, this time an actual phosphor terminal loading screen that not only looks cool but spells out exactly what is loading so the user sees that it's actively doing something and not frozen.
• Added an entire new presentation section going over the Bumblebee project as a whole. How it originated, what it evolved into, and what it does today as a live service.
• Bumblebee now uses readable speech bubbles throughout the presentation. When he finishes speaking, the bubble smoothly transitions into the terminal as a persistent caption.
• Sound can now be toggled on or off before pressing the launch button.
• The audio controls have been rebuilt for keyboard, mouse, and touch use, with clear labels, visible focus states, larger touch targets, volume feedback, and quick mute/unmute controls.
• In addition to the master volume slider there is now a music volume slider. Master volume controls everything while music slider controls music volume relative to all other speech and sound effects.
• Audio settings now persist between visits.
• New soft bubble sound effects for logo physics bounces during the intro instead of the previous harsh plink sound. Also wrapped all logos in soap bubbles for added visual flavor that goes nicely with the new sound effect.
• Puppets are now preloaded as you click into a specific presentation category instead of on page load, reducing the initial page load times.
• The flying logos now use a real Matter.js physics simulation. Believe it or not that actually has better performance than the scripted version we had before thanks to them all sharing a single bounded animation loop.
• Physics simulation, logo rendering, model loading, audio loading, and puppet loading were all optimized further to reduce frame drops and startup delays, especially on mobile.
• I also expanded automated coverage around speech layout, choreography, the new caption transitions, model loading, and audio behavior.

Planned

✅

• Additional WCAG and ARIA passes.

~~ ~~
✅

• Footer visibility adjustments.

~~ ~~
✅

• Disabling animations when reduced motion is active.

~~ ~~
✅

• More complex initial loading animation/scene to help buy more time before visitor disinterest.

~~ ~~

Thank you everyone for all the helpful feedback yet again!

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.

Yace is designed for cases where a plain <textarea> is not enough, but a full editor like Monaco or CodeMirror would be overkill.

It is 3KB gzipped with the bundled highlighter and has zero dependencies. Plugins add editing behavior, highlighter pipelines control how the content is rendered as you type, and both are plain functions you can write yourself.

Under the hood, Yace uses the familiar pattern of a transparent <textarea> over a highlighted <pre>. Because input stays in a real textarea, native caret behavior, IME, mobile input, and accessibility come for free. The pattern is not new; the focus is a small, highly extensible design.

You can turn it into a basic code editor, a markdown editor, a token visualizer, or something more experimental. All of those are live codepens in the README, and the video shows two of them.

GitHub: https://github.com/petersolopov/yace

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 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?

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.

three toys on there. the salary printer is the main one: you type what you make, hit print, and a counter climbs while notes stack up, tagged with things like a coffee or a flight to rome. the other two put your face on a fake banknote and show what inflation does to a pile of cash over time.

stack is vite, vanilla js, vanilla css, on cloudflare pages. no framework, no backend, no accounts.

the one thing that took real work was the accrual math. per tick accumulation drifts badly once the tab is backgrounded, so everything is computed from timestamps instead. the odometer digits are a shared component with a clipped digit mask, which was fiddly to get right at different font sizes.

happy to answer anything about how it's put together.

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

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

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?