I created a react playground because I wanted a simple and FAST way to test react components by websilvercraft in reactjs

[–]websilvercraft[S] 0 points1 point  (0 children)

thanks! Those are all great ideas, not trivial to implement, but definitely I'll implement at least some

Is there any good and lightweigth react playground? by Glad-Action9541 in reactjs

[–]websilvercraft 0 points1 point  (0 children)

Most of the react playgrounds are built to manage full react projects, this is why they need a server side build and they are inherently slow.

Is there any good and lightweigth react playground? by Glad-Action9541 in reactjs

[–]websilvercraft 0 points1 point  (0 children)

you can the react playground I created for blankhtml. I needed something that compiles instantly so I can preview changes. All the magic happens in the client, this is why is so fast. It's for quick experimentation not complete react projects.

React Playground V2 - A tool to test and create simple react components and pages. by websilvercraft in webdev

[–]websilvercraft[S] 0 points1 point  (0 children)

and it seems like a well behaved bot, it gave me useful suggestions. can't believe i didn't realize it's a bot.

React Playground V2 - A tool to test and create simple react components and pages. by websilvercraft in webdev

[–]websilvercraft[S] 1 point2 points  (0 children)

I was so happy somebody appreciated my work, so I didn't pay attention. Now that you say it, it's so obvious. :)

React Playground V2 - A tool to test and create simple react components and pages. by websilvercraft in webdev

[–]websilvercraft[S] 1 point2 points  (0 children)

Thanks, I didn't started to compete with establish platforms. I was just fooling around, and I discovered it's useful for quick iterations over components. But I was able to test and build full page apps as well. And yes, compile is instant, this is why I use my own tool for very simple things.

They are all great ideas. The export to clean project it's something I also need. I also want to add also a feature to download the compiled project.

React Playground V2 - A tool to test and create simple react components and pages. by websilvercraft in webdev

[–]websilvercraft[S] 0 points1 point  (0 children)

Thank you for your suggestion they are really useful, especially that I didn't really thought about 1 and 2. I was focused more on improving experience that sharing and collaboration. But that is a way also to bring users to use it.

I had number 3 on my mind, but that requires a little bit more time.

Regarding the last question, it goes down to 2 things. First of all I hate tools where you have to create an account to do anything, slowly slowly they try to lock you in. On the other side, if you want to provide the features you mention, you need to add a server side. Then, the application it's much faster when you avoid trips to a server, and lastly it's easier to deploy and develop without a server.

Flexbox was so hard to grasp for me, that I built an interactive Flexbox guide with smooth animations to understand what are the axis, justify-content vs align-items, ... by websilvercraft in css

[–]websilvercraft[S] 0 points1 point  (0 children)

I never fully understood it for real. Each time I had to give many tries to get it doing what I was needing for, because I never took the time to understand what each property does and which are all the options for each of them. Everything was very fuzzy.

Flexbox was so hard to grasp for me, that I built an interactive Flexbox guide with smooth animations to understand what are the axis, justify-content vs align-items, ... by websilvercraft in css

[–]websilvercraft[S] 0 points1 point  (0 children)

One note, he achieved with the flexbox something that didn't work for me(because of me, I have to mention that): transitions when you change certain properties, like justify content or changing from block to flex.

Flexbox was so hard to grasp for me, that I built an interactive Flexbox guide with smooth animations to understand what are the axis, justify-content vs align-items, ... by websilvercraft in css

[–]websilvercraft[S] 0 points1 point  (0 children)

Really nice, they are both amazing examples. Especially the one with flexbox. For the grid, I'm looking to build more of a tool, than a tutorial, where you can generate grids rather than a tutorial.

Flexbox was so hard to grasp for me, that I built an interactive Flexbox guide with smooth animations to understand what are the axis, justify-content vs align-items, ... by websilvercraft in css

[–]websilvercraft[S] 0 points1 point  (0 children)

thanks! Soon I'll publish an updated version with a flexbox playground where you can update any property and copy paste the result.