❌

Normal view

Ambient CSS v3 - Blender meets CSS

Ambient CSS v3 - Blender meets CSS

I started building a physically based shadow system for CSS 5 years back and gave up after it became too complex. Then, leveraging coding agents, I was finally able to ship v1 earlier this year. Thanks to the very kind and warm reception for v1 from the members of this community and r/css , I was motivated to develop it further.

Today, I'm announcing Ambient CSS v3. This version steps up the realism considerably - each effect and base component was first built in Blender and rendered using an identical lighting setup. Then, based on the renders the CSS formulae were adjusted to match the Blender render. All the Blender files and their parametric generators are also in the source repo.

Besides this, we also have new CSS modifiers - thickness, material (matte/shiny/glass/brushed/spun/blasted). We also have some new components for the react package. Also, the component system is refactored and split into base components and skins, allowing for the ability to create custom component kits.

Thanks for your love!

submitted by /u/Piposhi to r/reactjs
[link] [comments]

What would make a component unmount on some parent renders but not others when the key isn't changing?

I've got a filter panel in a Vite app on React 18 where the date inputs wipe themselves maybe one time in five when the parent list refetches. I've ruled out the usual cause, the child isn't declared inside the parent's render body, and the key I pass it is a stable string. I put a log in the child's mount effect and it fires every time the fields clear, so it's actually remounting rather than losing state some other way. I've been on this about three hours and I can't work out what's different about the renders where it happens.

submitted by /u/Sea_Somewhere48 to r/reactjs
[link] [comments]

How do you decide when a piece of state actually belongs in global state vs. just lifted up a few components?

I feel like this decision gets made almost by accident on a lot of teams β€” either everything ends up in Redux/Zustand/Context out of habit, or nothing does and you end up prop-drilling through five components to pass a single boolean. The rule of thumb I've seen most often is "if more than 2-3 components that aren't directly related need it, lift it to global," but that always feels a bit fuzzy in practice. Do you have an actual heuristic you use, or is it more of a gut call that gets refactored later once the pain shows up? Also curious how people handle the in-between case β€” state that's shared by a meaningful chunk of the tree but is really more "feature-local" than "app-global," where a full global store feels like overkill but prop drilling is annoying.

submitted by /u/StudyEasyOrg to r/reactjs
[link] [comments]

I mapped the 573 topics a senior engineer is expected to know, with 1,415 hand-checked links

I kept losing the same explanations in bookmarks and half-remembered blog posts, so I spent a few months writing it all down in one place.

573 topics across 8 sections β€” the browser, JavaScript, React, Next.js, backend, data, system design, AI/LLM engineering, practices and behavioural.

One rule decided what got in: a topic earns a page if it can plausibly come up in a real interview round, or if you need it to answer something that does. That's why there's no algorithms grind, and why 70 topics are about building with models.

Every page is the same shape β€” what it is in one line, what it is, why it matters, key points, then the links out. Three to five links per topic, exactly one marked "start here", and a script re-checks all 1,415 on a schedule so they don't rot.

Free, no account, no ads. MIT code, CC-licensed writing, all on GitHub.

Website - https://theengmap.vercel.app

Github - https://github.com/prateekkk26/engineering-map

Product Hunt - https://www.producthunt.com/products/engineering-map?launch=engineering-map

It's on Product Hunt today too if that's your thing β€” but mainly I'd like to know what's missing, especially from anyone who's run these loops from the other side of the table.

submitted by /u/prateekkk26 to r/reactjs
[link] [comments]
❌