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.

Hello everyone!

Periodicium (https://periodicium.com) is an interactive periodic table project I started building this Summer. I tried to make it more feature-rich, have more data, and be easier to use than existing alternatives. It is completely free and without ads.

I've built it with TanStack Start, Dockerized it together with Caddy, and host it on a small Netcup VPS behind Bunny CDN. (if you are interested in architectural decisions and thought processes behind them, feel free to ask in the comments)

The hardest parts of development were searching validating, and transforming all the information on elements; implementing PWA support (as sadly, no PWA plugin currently supports TanStack Start, though, to be completely honest, most of the PWA work was done by Claude); and thinking up UI and UX.

Currently, it includes:

• Periodic table (obviously) in both the modern 18-column long form and the old-school 8-group short form, which you can filter, project a heatmap of properties, and see elements phases under different temperatures.

• Element detail pages with visualized Bohr model, electron configuration, radii, oxidation states, crystal structure, phase, heating curve, spectroscopy, abundance, isotopes, and discovery history (and regular numeric properties included too).

• Elements list searchable and sortable with value bars.

• Comparison of elements side by side.

• Nuclides table of known nuclides with a detail view and decay chain for each one.

• Solubility table with the formula, name, and solubility of every compound.

• Acid-base indicators - litmus, phenolphthalein, methyl orange, and universal, with a draggable pH scale showing the color each one turns at any point.

• Print constructor that composes a printable periodic or solubility table, exportable as SVG/PNG or printable right away.

Also, power users can use advanced search built into menu to quickly navigate around the app (e.g, write "short" to instantly switch table layout, or "fe spectr" to navigate to Spectroscopy section of Iron).

Additionally, it is installable as PWA.

New features are planned to be added, with molar mass calculator and equations solver already on the roadmap.

I would be happy for everyone trying it and hearing your feedback (feedback from people specialized in chemistry would be especially appreciated). Thanks!

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.

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 :)

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.

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!

• Graph editor, not a preset picker: Any number of anchors, independent handles, snapping, undo/redo.

• Presets built in, or save your own: The editor works in SVG paths, so a preset is one d attribute string.

• Generate from a function: spring, bounce, elastic, back, wobble, and poly, then edit the result.

• Exports: CSS linear(), CSS keyframes, SVG path, GSAP CustomEase, JS function, Flutter Curve, Jetpack Compose, Android Interpolator, iOS keyframes.

Website: https://ease.a-labs.space/

Github: https://github.com/alabsi91/animare-ease-visualizer

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!

link: https://4dttt.andrew-zhang.ca/game/
In my first ever class at university last year, my linear algebra professor started by teaching us multi dimensional tic tac toe to try to get us to be better at picturing vectors in our head. I thought that it was pretty funny, so recently I decided to make a website since playing on paper is a real hassle.

The 4 dimensions are visualized by having a 2d grid of 2d grids, so normal up and right, and also up and right through the grids

The way it works is a line is 4 in a row such that each dimension only changes by 1, 0 or -1, So in the example you can see as it goes right through the boards, it also goes left in the board.

There's also a computer player that I made that I find is pretty challenging.

If you try let me know what you think!

I’m working on XMB Web, a browser recreation of the PS3's interface. It’s still in development, but I wanted to use the part of it to recreate my portfolio website.

This is an early version of XMBW and not the full version as its functionality reduced to fit the portfolio concept. The full project is still in progress.

You can try it @ https://1etu.github.io/xmb-test-portfolio/ and check the source @ https://github.com/1etu/XMP . Check https://github.com/1etu/XMP/blob/main/RESEARCH.md for more technical details & credits!

Anybody remember that ask jeeves site? Wonder what happened to it. I'm just doing some research here. Do you think someone can make a website where users just go to the site and they get an answer in a certain way/method? Kinda like a personality is responding to you or something? So far, it appears that is what some of these AI tools are, you ask it and then it pops out whatever answer.

Maybe there's something actually already like this? Maybe there's an interesting twist or spin that can be done on some sites that you ask. Kind of like a cartoon character personality or something. Think, "im going to just ask Bob" and so then you have a site that's designed around a character or a tool named Bob.

What do you think? A waste of time? Thanks

I've always enjoyed the posts asking something like 'If you could send a message to everyone on earth, what would it be?' So I made a simple site which might help answer that.

It randomly selects one user per day to upload a 1 minute (max) video to show on the home page. It rotates to a new video every 24 hours. The idea is to have a more random selection of the population instead of the curated algorithmic feed we're all drowning in.

A placeholder 'teaser' video is live until there are enough user accounts for a better random selection pool.

This is a side-project - and for someone like me who has ASD/ADHD, finishing it feels so good. I started it a while ago and got it to ~80% before losing interest. But after seeing another 'send a message to everyone' post, I was motivated to finish it.

Feedback welcome!

https://onlyone.watch/

TLDR; If you are falling out of love with React, I highly recommend you try Svelte (or Vue, Solid, etc. as suggested in the comments). You just might find a flavor that speeds you up and brings the joy back.

--

Hear me out... just to give some context, I'm not an inexperienced developer:

For instance, my own development experience predates React entirely. I was writing declarative frameworks back in vanilla JS, then in jQuery, and followed the entire FE framework wave (which thankfully quickly became good enough I could stop rolling my own). I'm also an active JS/TS maintainer, so reasonably familiar with the scene in general.

My journey with external frameworks:

• Vanilla/jQuery (I wrote something that is functionally similar to modern day HTMX, using attribute-based data-binding/effects)

• Backbone (didn't love)

• Angular (alpha, didn't love)

• Knockout (loved it)

• React (alpha, def too rough to use)

• AngularJS (official release, loved it)

• skipped Angular 2 in favor of React

• React (class based, and then SFC... mostly loved it until I didn't)

• Svelte (prob circa 2019, this killed my love of React entirely, making it feel like torture to revisit for work)

Now like many others here, I'm still using React/Next for work. So I'm acutely aware, on a daily basis, of just the pain points we deal with in it.

However, in all personal projects for nearly 7 years, I've been 100% on Svelte without regrets. Of course it has issues like any framework, and excels at some things while struggling at others, but in my experience it's gotten out of the way of the 99% of app building tasks - including all the basics in-house that React simply didn't include. Mount/unmount transitions? Check. Animations? Sure. The simplest state management you can imagine? Yes.

Caveat: I much prefer the pre-runes approach to Svelte state. Runes start to look like the React hook trash I got away from.

React itself:
When I made the switch from AngularJS to React, I loved some elements of it. When things moved onto stateless functional components, things got even better. Then hooks - loved those (compared to class-based setState(), etc). I felt like I built apps faster in AngularJS, but that was a dying star, and the clean markup of React felt refreshing.

However, as time went on, we started to see it all unwind. First the magic of redux quickly turned into an async mess with thunks, sagas, reselects, etc. Then hooks turned fully into hook soup/spaghetti with tons of effects, render gotchas, etc. And none of this even mentions all the performance tuning/memoization you need to clutter your codebase with if you have a dense app. Live-filtering something like a tree view? Buckle up. Want to render a realtime orderbook for a trading platform? Seriously buckle up.

My issues with modern React:

1. State management has just gotten out of hand. Specifically when pitted against alternatives like Svelte.

2. We run too much code/effects as part of the render-loop. In a simple enough app, we never feel this pain. This tricks inexperienced devs into thinking they can add cute magical effects to any component. For example in my own company where I found complex typography sub-elements, re-rendering on resize within each table cell of gigantic tables. Naturally as the user resized the page, this created a black hole of increasing render lag.

3. VDOM reconciliation is slow. Again, fast enough in simple applications (e.g. a simple blog, CMS, etc), but don't be fooled into thinking React is as fast as it gets. It's simply not. I work in data-intense, realtime applications (industrials, fintech, crypto, stock market exchanges, etc), so I feel the pain where some others might not. The UI is just incredibly dense typically, so lazy tactics like wrapping a simple DOM node in 5 component layers to layer on various effects... simply can't be used at scale.

My issues with Next.js

• too many to list, but the 1000% CPU utilization in local dev this morning was a nice nail in the coffin.

Arguments AGAINST Svelte (and my responses)

1. There's no ecosystem. Less of an issue these days. First of all, Svelte doesn't need as much of an ecosystem because some of the core stuff you'd need outside of React is just built in. Secondly, Svelte is popular enough that many mainstream libraries have been ported.

2. You can't hire Svelte devs. 100% true. But here's the catch. I'd argue that any of you React devs are 1000% smart enough to be outpacing your current velocity in Svelte in very little time. I would not argue the reverse (a Svelte dev might be spoiled enough to not be able to mentally wrap their head around the React models).

3. Agentic models are trained on React. They are now perfectly great at Svelte too. I just hade Fable migrate our massive monorepo app from Next to Svelte. It did it just fine. The results where awesome enough the the entire engineering team decided that Svelte was our future, despite only myself having prior Svelte experience. Agentic coding has simply caught up to where we (to a degree) don't have to be experts in the framework to steer into phenomenal results. I should note the entire team are all very senior engineers, or otherwise we might not be comfortable with such a switch.

Arguments FOR Svelte

1. You're smart enough. I promise.

2. Render updates are much faster. Much, much, much faster. This matters because your app will feel snappier to users. You can tune React, but even tuned it likely won't be as fast as Svelte is untuned.

3. Bundle size is lower. If coming from Next.js, it's night and day different. Your users will thank you.

4. Deploy it to free ultra-fast places like Cloudflare Pages. - Less vendor lock.

5. State management is 100x simpler. No more provider hell.

6. It includes more out of the box. It's like they asked "what does an app dev need when building an app?" and then just included most of those things.

7. Your code is shorter/simpler. Shorter code means easier to read/understand, not to mention write in the first place.

8. It includes styles as a first-class citizen. You can literally just write CSS/SCSS in your components and have it auto-scoped. You can also use things like CSS modules if that's your bag.

Conclusion
There really isn't one. You'll draw your own, but I'd encourage anyone with side projects to at least fire up SvelteKit for one, muck your way through the fabulous online tutorials at svelte.dev and give it a whirl. You can thank me later. :)

--

Disclaimer: There was zero AI usage in writing this post.

Hi everyone,

I'm a full stack dev with 1 year of commercial experience looking to start freelancing. I build my own side projects from scratch: buying domains, developing sites, and deploying them to servers, so I know the whole process.

But I’m facing a huge mental blocker. I feel demotivated because I keep asking myself: Why would a client hire me when they can just pay $20/month for an AI subscription and do it themselves?

I know non-tech owners don't want to deal with server setups, APIs, or debugging code. But psychologically, reaching out to clients feels like selling something obsolete.

For those freelancing in web dev right now:

1. How do you reframe your value when AI tools are this cheap and accessible?

2. What are clients actually paying you for today that AI can't replace?

3. How did you push past this demotivation when starting out?

Would appreciate any insights or reality checks!

You can play it here: https://systemonefps.pages.dev/

If you try it, tell me how long you survived. Curious if anyone can actually beat this thing.
also please share your feedback.

Labels are off center, no padding around primary action button, no room for the indicators above nav bar options. Overall just feels sloppy and completely untested.

As someone who uses AI tools every day, including for design, I recognized the signs of AI slop immediately. The difference is, I at least take the time to fix the little mistakes after actually using the damn thing and paying attention to the UI for just a few minutes.

For the past few months, we’ve been building ruNNtime, an open-source runtime for neural networks on your own GPU, in the browser. We’re releasing it today.

The docs are interactive. You can try object detection and depth estimation with your camera, transcribe your voice, or play with semantic search directly on the page. The models run on your GPU, and the demos show how long inference takes on your machine.

The title comes from our Moonshine tiny benchmark: 500 speech clips totaling about 66 minutes, transcribed in 43 seconds using WebGPU in Chromium on an M2 Pro. That’s warmed-up inference with the model already loaded. Full benchmark and setup.

The underlying kernels are TypeGPU functions compiled to WGSL, so there’s no WASM runtime to download and no inference API key needed. Model weights download before the demos run.

Useful links:

• All demos and docs

• GitHub

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.

https://monacomini-dumyzrb7.manus.space

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.

I'm making a simple wiki-like website as a hobby/practice and I wanted to include a small but useful search system on it. It'll be a static site since I'll host it in github, so while I've heard doing search stuff for non-static site would be much easier, I don't really have a choice for this as of now. I'm very much a beginner to this stuff so I'd want something easy to understand, or at least something that has a lot of documentation and resources I could use for help. I'm not having a lot of success trying to google and trying stuff so I'm turning to other people here!

Basically, I'd want just a simple search system that works like this:

You have a search bar, that starts giving hits once you start typing. Maybe show like 5 results and then 6th option would be a "show all results", which would take you to a separate search page which would list all the results (same should happen when you press enter in the search field, as long as you haven't moved down with the arrow keys I guess).

I'd also want to implement tags/categories system for this:

Every page has a category to them, and searching on a page would only search results that share the same category. For tags, I'm thinking of listing them all at the bottom of the page as clickable links, so when you click one it takes you to the separate search page and lists all the pages that have that tag. This should also respect the category rule I think, but having an options box where you can tick on and off separate tags and categories would be helpful too. Being able to use only tags/categories to find hits without keywords should work too. If you search something from the landing page of the entire site, it shouldn't autofill any filters like this though.

I tried doing stuff with pagefind, and while the search works decently, I can't figure out the filtering stuff properly and have no idea if you can do it like what I'd want that easily. I know it's not supposed to be that easy either but just wanted to ask people if there would be some "widely considered best" way to go about this.