https://divjoy.com/ did a great job of providing reactjs(and extras) and was free for initial few months. Definitely refer to that for more inspiration on design and capabilities. May be provide some templates(pre-built) of few types(like the one you have it as part of tutorial)
The Webcodesk online version is designed to demonstrate the components and how they can be combined in an application. The components themselves can be created in the local version - it is Open Source.
Glad you got through making the video, but maybe it was a little unclear what I meant -- a short ~15 second GIF of moving about the app (not an introduction, but when you're being productive with it) would do much more to draw people in.
By all means though, embed the video onto the page -- it's at least a start. IMO it's not really reasonable to expect busy devs to sit through 1 minute of silent sped-up introductory content.
Here are some examples of what I mean (I searched "wysiwyg react" and "page builder react" on github and picked some good examples):
Not to go off topic but I find animated GIFs great for 5 second things & frustrating for things over 5 seconds. Videos tend to be easier to pause, fast forward, rewind & skip ahead.
I say this only because it seems to be a trend in some software dev circles where people post 15-30 second instructional animated GIFs to demonstrate something. It's incredibly frustrating to watch. If you miss something you're stuck either downloading the GIF into an editor or having to watch the whole thing again.
Take a look at how the issues are managed. Each time he replies, he immediately closes the issue without seeing of it is actually resolved, and then he had a lockbox which locks the conversations.
I agree with this. I scrolled through the github page, then I went to the main homepage, scrolled through that and closed the tab. I wanted to see what it actually did before investing more time reading about it and seeing how it works.
The concept of this looks pretty powerful - the timelapse video on Youtube did a good job of showing me what I wanted to see. Devil's always in the details, of course, but at the very least, it seems like this could speed up the creation of rough drafts. I'm excited to try it out this week.
Very cool. A few years ago at NFL we built a CMS similar to this for managing sites and apps. It was called Component Builder and similarly you could cobble together pages of components (and deeply nest them however far you wanted) and configure each component and persist the final outcome in a database. The frontend was not open-sourced, but the backend was: https://github.com/nfl/gold
Your project appears to be generating a static SPA, but if you wanted to consider making this a full-fledged CMS you could look into using gold or something similar.
graphql really shines on the CMS side where your Component schemas practically write the cms UI for you. Your cms UI can leverage introspection to make for a really intuitive and efficient experience - especially considering that your atomic component library will grow very large over time.
I like how you split up component types (atoms, layouts, functions) and nest that under the app component types (pages, templates, flows) Is this done in code or are you using proptypes or some schema to manage the organization?
All components are written for this demo only. You can install Webcodesk locally and write any components and functions - Webcodesk will parse the code. Please find the User Guide in the GitHub repo.
I like the idea but I stumbled on a classical CSS problem: wasn't able to center an icon. There were few alignment options, but I might have missed them, maybe they were in another place than I looked.
Confession time: if I'm doing something quick and disposable in raw HTML I still just throw in a <center> tag, because I can't be bothered to screw with CSS centering when I need something to just work, and right now.
Because I learned <center> like 20 years ago and it still works, while some of that I've only been exposed to in the last couple years (multiple "this is the right way to center" notions have come and gone since trusty ol' <center> became "bad") and I'd have much lower confidence it'd look the same in my browser as another.
[EDIT] I'm talking about situations like "we need an ugly informational page here for an hour" and all or some part of it would look better centered, or if I'm throwing up a placeholder page on a personal site. Those kinds of things, I'm not gonna google "what's the correct 2020 CSS to do what <center> does" and end up with a bunch of caveats and gotchas when I could just <center> and move on with my life.
And the latest browsers have finally finished implementing the 3D parallaxing layout system which has finally overtaken the other 6 layout systems. It takes a few more lines but it guarantees the compositing for AR is consistent regardless of surface. Meanwhile the center tag actually still just works.
The tutorial project uses a limited number of components. The purpose of the tutorial was to show how to work with the components, as well as Webcodesk features. But you can create components and add properties only in the local version of Webcodesk.
CSS is a set of concepts. CSS contains a set of layout models, such as flexbox. You need to learn a layout model. There is no other way. I like Flexbox. It's easy to center in Flexbox.
Unless the engineer in question isn't responding to emails, then your company can use the same strategy with GPLv3 code as they would with any propriety code: Pay for a license.
Or does your company not use any propriety tools at all? (It's alright if they don't; being 100% reliant on permissive open-source licenses is a nice achievement in-and-of-itself).
