Should we just focus on React components?

[cipherlogs]

Hello, I'm delighted to see you here. Currently, layers are developed in two different ways:

1. Tailwind utilities
2. React components

Tailwind utilities offer less flexibility compared to React components, but they can be utilized by those who aren't using React.

On the other hand, React components provide a lot more creative freedom. I encourage you to share your thoughts either as a comment or by voting.

Thank you.

If you're interested in following the project's progress and direction, subscribe to this post so that you interact and share your opinions while changes are made

I'm on twitter in case you want to help.

[ejiroogagarue]

Hmm i just read your proposal and was wondering why don't you abstract core css i do a lot of my layout design in webflow and i find they have abstracted a lot of css problems most devs complain about. I just design and export my code and since i understand css well i can clean up to fit the goal i have in mind. React is only for the function which is primarily interaction or state.

[ejiroogagarue]

but also you have no example for a better understanding of what you want to solve

[ejiroogagarue]

oh yeah it does thats something i've been pondering myself like why do we make the process of building layouts so tedious.For example why isn't flexbox called "alignment" it just oorganizes your content in the x and y-axis or why don't we just visualize border ,margins and paddings , so users can just change directly from the GUI. Yeah i understand what you are trying to do.

[ejiroogagarue]

One thing i also think about i feel for something like this to succeed the people that should be getting help are not developers for them its all about efficiency a get their tickets done. If you can democratize the building of web layouts so that regular folks can understand what all these technical terms are only about there is a lot of opportunity their

[cipherlogs]

@ejiroogagarue your first point is exactly what I'm trying to say. also one of worst problems that experienced devs make is they don't want to understand the bigger picture.

If we take loops for example, and let's say before map, filter, reduce was around. back then the same was happening devs would say why would I need something like map ... this is clearly just a skill issue with for loops I have so much control and I can do everything I want with it.

I don't see the point. this is useless.

but it turns out that abstracting for loops into reduce, then map, filter, and all other utils that hide unnecessary details of the most common patterns we do every single day is extremely useful.

that's exactly what I want to do with css

css is a language that is so limited, we can't add complicated logic, however with js, and (front end frameworks) we can add so much useful logic, and features that would truly create better layers on top.

Can you please elaborate more on the second comment, I sort of understand but not fully. just remember the reason of having layers is that abstraction will go through levels it won't be useful to jump to very high level apis immediately, because each new created layer must absolutely kill the previous layer in order for it to be considered solid and would stay alive for years to come.

[ejiroogagarue]

ah didn't get your angle i was thinking that abstracting this such thing will benefit designers to do more interesting UI. But seeing from your point of view its mainly to simplify css which is good. I put out my second point was because i'm curious of what possibilities will be available to designers building interfaces if the syntax was simplified.

[cipherlogs]

Of course it will benefit designers, because designers would use the topmost layer.

If I want to create a layout of 3 images next to each other, it makes sense to create a higher level method "stack", and stack would take care of putting these images and giving me the choice to add spacing in between, or to change from vertical to horizontal stack. very simple and straight forward.

I don't need to know what flexbox is, I don't need to know media queries etc ...
it should feel like I'm just building legos and composing them together.

but this is the top most layer, very niche and abstracted. there are already ui libraries and kits that achieve the same thing I explained in this example. but it would be better if they didn't abstract all the way from low level CSS to a complex component. that's a steep jump.

so many patterns will be repeated again and again when creating another components.

The best way to truly appreciate this and test it for real because I'm curious too, is when I switch flexes to react components and build more layers on top and then we'll see how easy it is to build layout and compare it to other solutions.

[ejiroogagarue]

oh i get you now not its simplify the build process from all the lower level css okay. The name is cool layers like a photoshop file.

[ejiroogagarue]

Yeah this is interesting

[cipherlogs]

Yes, let's make the first goal to create a powerful api where it is faster to build layouts faster than
webflow and other no code solutions. let's how far we can succeed.

can you please share some videos or tutorial where they highlight how easy you can build layouts and edit, modify them so that I can take some ideas and learn from them.

Also, do you use react ?

[ejiroogagarue]

Sure i'll show you my process and yeah i use react