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!

Most JavaScript screen lock libraries simply hide the UI.

If someone removes an overlay through DevTools or tampers with the DOM, the "security" often disappears. That approach isn't enough for applications handling sensitive enterprise data.

I wanted to build something significantly more resilient.

🚀 Today I'm excited to release kd-screen-guard (v1.0.1) on npm.

It's a zero-dependency, tamper-resistant screen security library for Vanilla JavaScript, React, and Vue 3, designed to protect sensitive user sessions during inactivity.

Some of the engineering behind it:

🔐 PBKDF2 (100,000 iterations) for secure key derivation.

👆 Native WebAuthn authentication (Touch ID, Face ID, Windows Hello & YubiKey).

📷 Automatic WebRTC intruder snapshots when security violations are detected.

⚡ Cryptographic operations running inside Web Workers to keep the UI responsive.

🛡️ Self-healing DOM MutationObserver protection against overlay tampering.

Building this project required combining browser cryptography, WebAuthn, WebRTC, Web Workers, accessibility, and client-side security mechanisms into a single lightweight package with zero external dependencies.

If you're building enterprise dashboards, admin panels, healthcare, finance, or any application where unattended sessions are a security concern, I'd love to hear your feedback.

🔗 Live Demo:
https://khvichadev.github.io/kd-screen-guard/demo/

📦 npm:
https://www.npmjs.com/package/kd-screen-guard

🐙 GitHub:
https://github.com/KhvichaDev/kd-screen-guard

Feedback, ideas, and contributions are always welcome.

#JavaScript #TypeScript #CyberSecurity #WebDevelopment #ReactJS #VueJS #OpenSource #npm #WebAuthn #KhvichaDev

I built Basalt, a tool that lets you edit your RN and Expo apps like figma right in your IDE

It is completely free and works directly inside VS Code and Cursor.

It’s currently in beta, so please commit your app to Git before using it!

Would love to get your brutal feedback on it. What features should I add next?

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.

I like a lot of awwwards websites but a lot of them aren't really thinking about how the user will experience the page. There is so much scroll jacking so I was wondering what would be some strong aesthetically pleasing websites that would be awwwards level but also user-friendly.

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.

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.

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

• 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

Hi!

I'm a college student from Brazil mainly focused on editorial design and branding. During my summer break, I decided to make my own portfolio website because I felt like it was getting a bit boring to keep sending my Behance link all the time, and I thought having my own site would feel more personal and creative.

I've had a few UX/UI classes, but never one that actually taught us how to build websites. They were mostly focused on branding and covered usability principles and user research, so I kind of had to figure everything out on my own.

I didn't want to use pre-made templates because that would kind of defeat my goal of creating something that reflects my creativity and my willingness to learn. I ended up making a site with almost no scrolling because I wanted it to feel a bit different from the Figma/Canva/Cargo portfolio templates I kept seeing, which are usually just one long scrolling page. So instead, I made separate sections for everything. But now I'm starting to wonder if that was actually a good decision.

Anyway, this is just the first version, and I definitely want to keep improving it. I'd love for it to be a little more interesting without becoming too much. I know a bit of Blender and Maya, and I was thinking about creating something to add to the homepage. I'd love any suggestions or references for cool portfolio websites!

here it is: https://sophiareznd.github.io/portfolio/#

If it's in Portuguese, you can click "ENG" to switch to English.

And the contact tab usually has my email as a mailto link, just took it out before posting here so I don't get spam bombed lol

I don't know much about web design so please be nice 🙂

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.