co-depends is a suite of web components based on code-pen entries.
Entry 1. Text Scramble
[WIP]
Entry 2. Pure CSS Minesweeper
Entry 3. Parallax Flipping Cards
[WIP]
Entry 5. Simple Text Animation
[WIP]
Entry 6. Responsive Honeycomb
Entry 7. Square In a Circle
[WIP]
Entry 8. Animated Star Rating
Entry 9. Sidebar Interaction
"Cleaner" than React.
Entry 10. CSS Marquee Logo Wall
Showcase elegance of css binding with trans-render
Entry 11. App Menu With Lock Screen
What is really fascinating about this nice UI is how heavily the author uses so many of the bells and whistles of the React framework to accomplish it. Even the tiniest little section, that doesn't repeat in any way, is defined as a separate component, requiring extra work -- props being passed in to support all these string-theory sized components.
I think there are two plausible reasons the author has for doing this (perhaps both apply in equal measure):
-
Perhaps the author finds it easier to reason about. It is a similar argument to saying no method should be more than twenty lines long. Twenty lines I can get behind. But many of these components consist of a single DOM Element! Personally I find it somewhat difficult with all the bouncing around and mental mapping of objects that this entails, but that is very much a matter of personal taste. The React community should be grateful to Microsoft for all the work they've done to make this bouncing around easier. Personally, I'm somewhat miffed that Microsoft has not put the same effort into encouraging web design that would help save the planet. Nevertheless, we make use of features Microsoft has bothered to provide with HTML in VSCode, to make this bouncing around as easy as with JavaScript. (Of course, if the w3c would endorse some syntax, that would go a long way in being able to hold Microsoft's feet to the fire). I think if Microsoft gave developers better control over how nested HTML can be expanded / collapsed, it would reduce the benefits of this hyper-componentization.
-
The author is doing this just to exercise (and/or teach / demonstrate) their React skills. Practice makes perfect. This is one of the great services CodePen and other such web sites provide!
I want to be clear that I'm grateful to be able to peer into the thinking behind this example, and use it as a springboard for testing out equivalent ways of doing this with web components and decorator based components, that aren't really web components, but act that way. Meaning I have nothing but the deep most respect for the developer and wish them well, and am thankful for the demo.
I'm working on two versions -- one that breaks down the UI in exactly the same way as the original, with attention being placed on achieving similar, or perhaps even better developer experience (especially with additional help from the IDE). From a performance point of view, this version would definitely benefit from some build time optimization, where the separate components are inlined.
The second demo is more performant without the build step, and I'm using to test out exactly how that build time optimization would work. And I think it is also more in tune with how my reasoning works (exercise more of the 20 line limit).
[WIP]
(specify setting css property via transform, somehow?)
[TODO]
Seems usesful, but lotsa imperative code to convert, not seeing anything significant code-wise.
[TODO]
Yet another example where we could use be-bound.
Responsive NFT Dashboard with Tailwind
See how to use tailwind, dynamically generate shadowDOM from raw HTML
[TODO]
See how to create nested components quickly
Might be a good example to explore be-let, be-scoping, etc more.