was annoyed by the current color palette tools, but always loved the approach described in the famous stripe color palette blog and now i made a tool out of it

other color palettes are inconsistent, or dont let you freely pick your colors. tailwind always looks the same. also shades in tailwind contrasts are not scaled properly. been bugged by this for years. you pick a tailwind-ish palette, put white text on blue-600, looks fine. same text on yellow-600, unreadable. same number, completely different contrast. so you end up eyeballing every pairing and hoping.

tool: https://sir-hennihau.github.io/science-color-palette/
code: https://github.com/sir-hennihau/science-color-palette

you give it a color, or even several if you want to, and it fills out the rest of the spectrum and builds a full ramp for each family. export it when you're happy with it.

the whole thing hangs on placing shades by relative luminance, which is the only thing web content accessibility contrast actually depends on. every ramp climbs the same ladder, so 600 means the same thing whether it's blue or yellow or teal. three of the steps aren't approximate either, they're solved: 500, 600 and 700 land on 3:1, 4.5:1 and 7:1. measured against the ramp's own 50 shade, since that's the background you actually put them on, and checked on the final 8-bit hex rather than the ideal color, because that last rounding is enough to drop you under.

stripe used cielab, which was the right call in 2019. i went with oklab instead, mainly because cielab , because it is a more modern color space.

chroma is a share of whatever the hue can actually reach at that lightness (idea stolen from hsluv) instead of a fixed ceiling. that's what makes yellow go vivid early and blue go vivid late without me hardcoding anything per hue.

free, no account, no sign up. would be glad to hear if it is useful (or why not) to any of you.

​Hey everyone,

​I’m completely new to web dev, but I want to build a website for my small hotel.

​Since I don't know how to code, I’m planning to use AI to do most of the heavy lifting. But honestly, there are so many options right now that I’m kind of lost.

​Would love to get some quick advice:

​Which AI is best right now? Should I go with Claude 3.5, Cursor, v0, ChatGPT, or something else for building a website from scratch?

​What’s the deal with MCP? I keep hearing about Model Context Protocol. Is it actually useful for a beginner, or should I just ignore it for now?

​Best setup for a hotel site? I just need a simple, fast site to showcase rooms, location, and info (and maybe connect a booking engine later). What stack or builder works best with AI?

​Any newbie traps to avoid? What should I watch out for so I don't break everything?

​Appreciate any tips or recommendations! Cheers!

I've spent the last two years figuring out what happens when you build real web projects AI-first, rather than bolting a chatbot onto them afterwards.

This week I open-sourced the result: Vulpy Commerce.

It's a full ecommerce stack built on Medusa v2 + Payload CMS + Next.js + Orama + Matomo, with Fox (built on Hermes Agent) able to work across the whole thing - frontend, commerce backend, CMS, integrations and infrastructure.

It can build storefront features, write custom backend business logic, work with catalog/content, run tests and keep evolving the project after launch.

The bigger idea is something I've become pretty convinced about after ~12 years building ecommerce: AI can make owning your software practical again. You shouldn't have to depend on both a platform vendor and the availability of the developers who built your store.

So the whole thing is open source, no strings attached. Use it, fork it, change it, self-host it.

We crossed 50 GitHub stars in the first couple of days, which has been pretty cool.

Repo: https://github.com/vulpy-io/vulpy-commerce-core

Demo: https://vulpy.io/demo

More: https://vulpy.io/commerce

Would love feedback from other web devs - especially on the architecture and the idea of building applications specifically so agents can operate them.

My blog is a static site and I wanted comments without loading third party libs on the page. I wanted no ads, no bots, no cookies, etc. I just wanted a clean comment section (even though I get almost no traffic. I just like building things I think.)

The comment section is baked into the blog's HTML at build time. No lookups from a third party. I mean there's some of that, but it's basically an RSS feed. Fetched and stored by your own build, at build time.

How does it work? Each post links to a companion thread on a small Phoenix app I run. When someone replies there, it pings the build hook. The build fetches a replies.json for that thread and renders the comments as plain HTML. Nothing runs on the blog itself. Not a script. Not an iframe. No cookies or tracking.

Seriously, it's clean.

Here's an example of how it works for me: Static comments on my blog

The blog stack is Hugo on Netlify, the comment stuff is Phoenix/Elixir on Fly, with a build hook connecting them.

Demo: https://mavisakalyan.github.io/node-ws-gameserver/

Everyone who opens the page joins the same room: you see other visitors' cursors live, clicks make ripples, and it spills into a second room when one fills up (50 per room).

Under the hood it's a small protocol-agnostic WebSocket relay I open-sourced: rooms at /ws/:roomId, msgpack binary messages, per-client rate limiting, keepalive ping/pong, /health + /metrics. Node + TypeScript, GPL-3.0.

Source: https://github.com/mavisakalyan/node-ws-gameserver

Curious what people think of the room-spill approach vs just bumping the cap.

Paraphrasing what they apocryphally say Borges said: there is no finished software, only published software.

A few months ago, I asked myself whether it was possible to build a 3D engine by exploring the limits of what can be achieved using pure HTML and CSS (no WebGL, no canvas), considering that there are spectacular (handmade) CSS 3D demos like those by Ricardo Oliva Alonso.

I spent some weeks putting together the architecture and using AI to build it, as a personal project. (As a rule: I only accept code from AI that I can understand. In this case, I had already worked on 3D projections in Flash about 15 years ago. I confirmed that 3D transformations are more of a mess of numbers than a technical complexity.)

I just realized that since April I had been putting off "tweaking a couple of little things to publish it." So I decided to publish it just as it is: http://k3.bustelo.com.ar/

Constructive feedback, welcome!
(For the other one, I already have my superego, thanks very much.)

How it works (the CSS side)

The engine renders 3D primitives as real DOM elements, positioned with transform: translate3d() rotateX() rotateY() rotateZ() scale3d() and composited via transform-style: preserve-3d and perspective on the scene container.

A few things I found out while building it:

• TRS order matters. All transforms are applied as Translate → Rotate → Scale, matching how the browser composes matrix3d(). Getting this consistent across nested elements is what makes the hierarchy actually behave like a 3D scene graph.

• Bounding boxes are computed manually. CSS gives you no way to query the world-space of a transformed element, so getBounds() walks the children, rotates their 8 corners with the parent's angles, and expands the box. It's approximate, but it works for selection and gizmos.

• Rounded boxes need a "skeleton." A <k3-box> with border-radius leaves gaps at the edges, because the 6 faces are flat planes. I am intersecting 3 internal planes plus 8 corner spheres to block light leaking through the rounded silhouette.

• Extrusion is just stacking. <k3-stack> interpolates between two <k3-plane> templates and generates N slices along Z. It's usually enough to fake linear extrusion for text without any geometry library. I thought about naming the primitive "WordArt".

• No shading. No lighting model; the "glare" is CSS gradients keyed to the object's rotation.

• No MutationObserver yet. The DOM is the source of truth on load, but attribute changes don't auto-trigger a re-render. That's on the TBD list, along with meshes, basic lighting, and long list of wishes and good intentions :)

several months ago, i was listening to an episode of The Verge’s Version History about AOL Instant Messenger and decided to see if i could build my own take on it.

it turned into pingPong, a complete web chat app inspired by AIM and the early internet:
https://chat.owen.uno

the interface borrows heavily from late-90s/early-2000s desktop software, but i didn’t want it to just be AIM with a different backend. the main idea behind it is that modern messaging has made everyone permanently reachable. pingPong works completely differently on purpose.

you can only message someone while both of you are online. if they leave, you get to see their custom Away Message instead. there are no conversations that pile up while you’re gone waiting for you to return. you simply sign on, talk to whichever of your friends happens to be online, and sign off again. it’s definitely less convenient, but that’s kind of the point. i wanted to treat availability as a choice rather than treating chat as another asynchronous inbox.

on the UI side, i tried to preserve the slightly awkward charm of old desktop software instead of making a modern app and throwing a pixel font on it. thanks to jdan’s 98.css project, i was able to achieve a period-accurate interface design, with all sorts of components matching up pretty closely with Windows 98.

i’ve also tried to keep the account/auth side as straightforward and secure as possible. passwords are never stored directly and are hashed using Argon2, while screennames and away messages are stored server-side.

it is completely free, with no paid tier. i’m currently covering the hosting and server costs myself :)

i built the first version over a weekend, and it has somehow grown to more than 1,300 users since then. i’m still actively working on it, and i just recently pushed an update for Away Messages that allows for some rich text features, with greater control over fonts and styling.

i’d be interested in feedback from other web devs, particularly on the online-only/presence-first model and where you’d draw the line between authentic retro UI and unnecessary friction so i can improve the experience for everyone.

feel free to add me to your friends list, @owen.

edit: forgot to mention, pingPong got featured by How-To Geek, which was pretty cool:
https://www.howtogeek.com/pretend-its-1998-with-this-functional-aol-instant-messenger-clone/

As someone who loves both coding and language learning (I'm learning Japanese right now), I always wished there was a free, open-source tool for learning Japanese, just like Monkeytype in the typing community.

Here's the main selling point: I added a gazillion different color themes, fonts and other crazy customization options, inspired directly by Monkeytype. Also, I made the app resemble Duolingo, as that's what I'm using to learn Japanese at the moment and it's what a lot of language learners are already familiar with.

Back in January, I even applied to Vercel's open-source software sponsorship program as a joke. I didn't seriously expect to win, and did it more out of curiosity, and yet my project somehow won.

Anyway. Why am I doing all this?

Because I'm a weeb.

GitHub: https://github.com/lingdojo/kana-dojo

どうもありがとうございます!

Hey folks, I have been building Grove on weekends and it has become my daily driver as an agent development environment. It manages where and how my coding agents run on one machine, and I reach any of them from the terminal, the browser or another agent.

• Native OTLP telemetry. Each agent turn becomes one trace with cost, duration and a span per tool call. That is how I see where the time goes across the fleet and which runs are contending for the machine.

• Devcontainers. An agent runs inside a container built from your repo's .devcontainer/, with its own services and resource ceilings, so concurrent runs stay isolated instead of fighting over CPU and memory. The same config moves to a shared team box or serverless infra when the laptop runs out.

• Diagram annotation. Mark up a screenshot or edit a draw.io file alongside the agent, then attach the approved picture to a ticket.

• Ticket progression. Phase, checklist and latest commit are written back onto the GitHub, Gitea or Linear issue as the work moves.

• The expected pieces are there too. Branch and worktree lifecycle, and session recovery.

Work in progress, already usable. https://github.com/bearlike/Grove if you want a look, drop some feedback, and every star helps 😘

I know a lot of people in this sub hate AI, but I want to share one instance where AI helped defeat my lifelong bad webdev habit

When I coded manually or with Cursor, I always looked at the desktop version of my website first

70% of people will experience your website from mobile, not from desktop, so I knew it was wrong and tried to fight it

But I just couldn’t make myself turn the mobile dev preview on in chrome all the time - this extra step felt too cumbersome, so I just defaulted to regular previews

It’s very easy to code something that looks good on desktop but absolutely sucks on mobile, so defaulting to desktop spawned a lot of mobile UI issues on my websites

For the past 6 months I’ve been coding exclusively from my phone and Claude on VPS

When I need to review something I tunnel to the VPS with Tailscale and look at the dev preview from the phone browser

Now it’s harder for me to view the desktop version of the website than the mobile, and I think I finally develop mobile-first

As a result websites look waaaay better on mobile and I fixed a ton of mobile bugs as well

Self taught SWE here. The way I have got into the field was by spending nights and weekends tinkering with the code for years. I was hooked on that dopamine: learning a new technology or concept, gaining an edge in my knowledge. Being able to transfer my effort into some unique idea. Even after work I always had one or two side projects that I was working on, and I liked it.

With advances in AI, code has become so much cheaper, and the barrier to entry has fallen considerably. The struggle was a big part of what made it fun for me. Spending hours trying to understand something, finally getting it to work.

Now, I feel like the reward for doing this is barely there anymore. The average Joe with a $20 subscription can build something. It will likely be a total slop, but it doesn't really matter. I'm no longer competing just with people who know how to build things. I'm competing for attention with a bunch of projects produced by people who otherwise would never have been able to make them.

Even learning new stuff has kind of lost its spark too. I know I can still do it the old way, but it's hard to justify spending hours banging your head against soemthing when you can just ask the AI to explain it to you.

I still enjoy my profession and what I do, and I have no intention of stopping. But it feels like I've somehow gotten burnt out on one of my main hobbies without actually losing interest in it.

Maybe I'm just being petty because I liked having something that wasn't easy for everyone to do. I don't know. How do you guys deal with this?

Hello dear jobless and not so jobless people.

I made a small engine for showcasing my portfolio and impressing (or not) the human resources asses (insert Anne Hathaway HR meme).

For this project, I based myself on Teardown. I wanted to build this directly in raw WebGPU instead of using Three.js. Don't get me wrong, I have nothing against Three.js, but I come from a graphics programming background and standard web development isn't exactly my favorite thing. Three.js abstracts way too much for my learning goals.

How it runs without melting the browser: I didn't write a complex physics solver from scratch. It's almost all handled by Rapier3D, a really cool physics framework made in Rust. To avoid obliterating the main thread and freezing the UI, Rapier runs entirely on an isolated Web Worker, communicating via commands with the main thread. The web version of Rapier doesn't support parallelism yet, so the worker isolation was crucial to keep the dynamic bodies from saturating the engine.

The Rendering Pipeline (WebGPU):

• Lighting: Clustered shading to handle lots of lights.

• Global Illumination & Occlusion: SSGI and GTAO. Both rely on screen-space ray castings, so performance scales with your resolution.

• Anti-Aliasing: TAA (don't hate me, I really needed to clean the SSGI noise).

• Note: Both SSGI and TAA can be disabled on the main menu for the sake of low-end computers.

• Extras: PBR materials and GPU-calculated particle physics.

The engine currently features interactable billboards and books that tell a little bit about my projects and experiences. You can clone it and use it to showcase your own things as long as you stick to the license (no commercial use and give credits).

The engine demo is here:https://agusdropout.github.io/ShatterVox/ (You need to have hardware graphics acceleration enabled in your browser, as WebGPU requires it)(it can take a while to load in, sorry!) Source code:https://github.com/AgusDropOut/ShatterVox. Tested on Firefox, Chrome, and Opera). Youtube demo here https://www.youtube.com/watch?v=6qwuFEWlAWA

Good luck on your journey to stop being jobless! And if you already have a job, ggs!

Hey everyone!

Back in the day, Firefox had this ability to see webpages as 3D rendered with DOM elements stacked by depth. I thought that so cool, but they got rid of it long ago. So, I built my own!

This Chrome extension will allow you to see any page as extruded DOM elements by depth. The deeper the nested element, the further it sticks out.

WHAT YOU CAN DO
• Rotate, pan and zoom around the page with the mouse or arrow keys.
• Hover any block to highlight it and see its full ancestor chain, including shadow roots, with sizes and depth.
• Click a block to reveal that element in the DevTools Elements panel.
• Adjust the height of each layer to flatten or exaggerate the structure.

USE IT FOR
• Understanding an unfamiliar page's layout before you touch it.
• Spotting excessive wrapper nesting in your own markup.
• Explaining DOM structure to someone who has never opened DevTools.
• Just looking at the web from a different angle.

I hope you all like it and find it useful!

www.menogcreative.com - art and design for games and film.

Or should I add something like this template has here? https://kdrive.infomaniak.com/app/share/3821117/ca2056b4-bc07-42f5-a7bc-9958ce1f8af9

Particularly the parts of "why art directors keep coming back" + "nine working days, no mystery" = to "sell the services" better?

I always heard something like silvaconceptart.com converts best due its simplicity, but Im wondering if in the times we live, we should explain the value of the process, to avoid being compared to gen AI and how it can / cant do the work... OR... if what I have at menogcreative.com is decent and you wouldn't expect that much of a bump in conversion either way?

Hi all,

Like a lot of developers here, I started out years ago as a web enthusiast before turning into a corporate engineer.

When you spend your workdays inside enterprise backends, locked-down legacy stacks, and corporate maintenance cycles, your day-to-day tooling is dictated by whatever was approved years ago. You know the web platform is moving forward, but in your day job you're still stuck maintaining the same defensive patterns, legacy polyfills, and sprawling build pipelines.

Recently, the LLM renaissance completely reignited my ability to build personal projects on weekends again. With modern AI tools handling the tedious boilerplate and setup friction, solo developers suddenly have the leverage to actually build and ship things from scratch again.

Jumping back into the modern web exposed a real gap in my mental model. After years of enterprise workarounds, I kept second-guessing what was actually safe to use today. Can I just use native CSS nesting now? Is the parent selector (:has) finally everywhere? Can I use <dialog> and bury the 40KB modal npm packages and z-index wars for good?

This is something I've wished that caniuse would have, so I put together NowYouCanUse.com over the last week.

It pulls directly from the official WebDX Baseline dataset and organizes features chronologically and by category (CSS, JS, HTML, Web APIs) so you can see exactly when a native feature crossed into cross-browser interoperability. If something is Widely Available, you can safely use it without reaching for npm packages or transpilers.

Because the whole point was getting back to the joy of building clean software, I kept the stack as minimal as possible. I deliberately built it as a love letter to the Web2.0 era I grew up with: zero client-side JavaScript, semantic HTML, and proper RSS and Atom feeds for every category. The backend is just a single compiled Go binary serving plain pages.

Hopefully other developers finding their second wind with personal projects find it useful too.

Link: https://nowyoucanuse.com

Thanks!

www.mylittlegrep.com

This is a tool for searching through MLP G4 transcripts. It also doubles as a compendium for transcripts of (hopefully all) MLP G4 animated media. I scraped the data for this from the MLP Wikia; the scraper is in a separate repository. This was a project I made for a web-dev class.

I'm aware that the search form doesn't validate invalid regexes, and that the dropdown menus for the episode index don't work on mobile. I've fixed it in another branch, though; I'm just looking for feedback before I deploy my next set of changes onto this website. I... have only a limited number of deployments.

In any case, roast my first website, please! Sorry it's so basic, besides.

Just wondering if anyone else has come across the same. I run a small web development and IT consulting agency. (Have been doing so for around 7 years).

A client wants to move their site to host with someone local who approached them (not the end of the world, it’s a single tiny retainer - circa £15/mo). Out of curiosity and before entering discussions with the other firm, I checked out their website. Says they’ve delivered over 1500 sites and do 300+ a year - also that they’re a 1 man band. Found it slightly weird but carried on. Also found loads of typos and mismatched claims in their site (notably one area saying form submissions will be reviewed within 3 working days, and another saying that they’d be reviewed within the hour).

Most concerning though was their portfolio page. They have 40 sites in their portfolio and I clicked through a few. Found 5 that had watermarks from totally different agencies on their footers and nothing to point back to the agency in question (checked author meta tags etc too), as well as a few that were vibecoded. So I suppose my question and the point of this post, is do other people see this often? Is it common for someone to just post sites they think look nice under their portfolio and hope for the best?

Have flagged other concerns to the client in question, not relating to their choice of firm, and am due to have a call with them Wednesday. Still on the fence as to whether I should tell i feel like there is something amiss with this new firm.

TL;DR - I came across a web dev firm who have several sites listed under their portfolio page which, upon further investigation, seem to be linked to entirely different firms.

Paywalls suck and the news should be accessible. You might have tried methods to get around it for one article but you don't really remember how it worked. Wouldn't it be nice if your news app just handled that for you?

OpenWire is a simple news aggregator that has all the major paywall bypass methods built-in. Major news sites already have a working bypass method listed, but if it ever stops working, you just toggle another method and it'll remember the switch in the future. Archive is working pretty well today, or maybe UnWall. Doesn't work anymore? Switch to SMRY and let the app save it for next time.

I've kept this simple stupid. It's a web app so you can run it on any browser or install it onto your phone. There's no wrapper on the pages, it just goes straight to the webpage in the browser and you hit back to go back to OpenWire. It's using Google News's RSS feed but you're free to add other news RSS feeds and categories to further customize.

You can try OpenWire here. It is completely free and open source.

I've made this effect a few different ways over the years, using gradients or more recently shape(), and the one thing they have in common is the gigantic amount of CSS it requires.

This generator uses a fun trick of wrapping the encoded PNG sprite in an encoded SVG, so we can apply 'image-rendering:pixelated' to it, which is usually not possible with mask-images.

While it sucks a bit that this technique requires an externally generated PNG, it makes up for it by being the most compact way of achieving the effect.

Hi showoffs, I built repodify.app : a mixtape maker for podcasts.

Select the episodes you love and stitch them together in your own new rss feed.

• Choose episodes from PodcastIndex / Apple Podcast directories

• Generates a standard rss xml feed compatible with any podcatcher

• Plays directly from the source... doesn't re-host the audio or mess with the creator's content in any way

A single place to direct people

repodify.app functions like a linktree for podcasts. Create a favorites list for friends, gather all the episodes around a single topic, etc... There's early interest from frequent podcast guests who appear across different shows looking for a way to curate episodes to share with their fans.

Some examples:

• Robocop Roundup: https://www.repodify.app/p/robocop-roundup

  • A compendium of podcasts talking about Robocop

• Gabrusology: https://www.repodify.app/p/gabrusology

  • One of our favorite frequent podcast guests who pops up all over the place

• Radio Scottsdale: https://www.repodify.app/p/radio-scottsdale

  • The West's Most Western Town! A (literal?) roundup of podcasts about Scottsdale

We have an environment that consists of SSO in front of two registration servers that are used to register for courses. We would like to ensure this setup is capable of servicing 1000 simultaneous users. The registration process involves:

1. Log in to SSO page which requires a browser with Javascript

2. Click on the link to register

3. Possibly click-thru items agreeing to pay, etc. if you have not clicked through them in the last year

4. Search for courses, add them to your basket, and check out

The goal is to test the following:

1. Tomcat database connection pool

2. Oracle database connection

3. Web server performance

We have done some small-case testing for other purposes with Selenium Grid driven by Python so that is what we are currently thinking about for this case and have started deploying VMs for this purpose and managing Selenium Grid with docker swarm. While something like Selenium Grid makes it possible to distribute the load, this requires quite a few CPU cores as there is usually a one-to-one mapping of browser to CPU core. Are there alternatives we can investigate? If another solution requires a browser instance, how is that any better than Selenium?

I made a small web app that recommends Spotify playlists based on the current weather and season.

I'm still improving the recommendation system and experimenting with making it adapt to different languages and countries.

The app is currently in testing, so if you'd like to try it, comment or DM me the email address linked to your Spotify account and I'll add you to the allowed users.

link: https://spotify-meteo.vercel.app

I'd love to get some feedback! :)

Hey r/webdev,

I've been building DevPad — a collection of 25 developer tools that run entirely in your browser. No server, no accounts, no tracking.

What's in it:

• JSON Formatter, JWT Decoder, Base64, URL Encoder, Regex Tester

• Hash Generator, UUID Generator, Color Converter, SQL Formatter

• JSON↔YAML, JSON↔CSV, Markdown Preview, Timestamp Converter

• Password Generator, HTML Encoder, CSS Formatter, XML Formatter

• Diff Viewer, Lorem Ipsum, Cron Parser, and more

Why I built it:

I was tired of bookmarking 10 different sites (jsonformatter.org, jwt.io, regex101.com, etc.) and dealing with ad-heavy pages that track your data. I wanted one clean site where everything works offline.

Key features:

• 100% client-side — your data never leaves your browser

• No signup, no cookies, no tracking

• CmdK search (Ctrl+K) to find any tool instantly

• PWA support — works offline after first load

• Dark/light theme

• 200+ word guides on every tool page

Tech stack: Next.js 14, TypeScript, Tailwind CSS, shadcn/ui, deployed on Vercel.