Implementing bits of Todos App with my own online IDE

Here are a few loom videos I recorded today:

• Download your app as zipped maintainable code
• Register DOM events on HTML elements
• Displaying HTML pieces under given app condition
• Getting notified when an app action needs to be implemented to support your HTML

Check out this demo.

Enjoy the videos and playing around but most importantly let me know what you think about the project? 😉

Comments

[Jakub T. Jankiewicz]

Did you build glue.codes? Looks like lot of work. Not very usable though.

[chris-czopp]

Yes, but not only myself. There is one more developer behind it. Bear in mind it's a prototype which is quite limited. I really value any feedback, especially criticism. Can you elaborate why you think it isn't usable?

[Jakub T. Jankiewicz]

I've only played for few seconds but here are the things I've noticed:

1. Unintuitive UI you don't know what all those dropdown selects do.
2. Dropdown select opens new browser tabs, which is annoying.
3. It's slow to change the files (I don't even sure if those are changing files) they should be loaded to memory for better performance.

check CodePen as example or any IDE you don't need to instruction to use them.

[chris-czopp]

Thanks, yeah there are still performance optimizations to be made. Right now it blocks I/O which is obviously bad. It opens new tabs so you can arrange windows as you like on multiple screens but I get what you're saying, we might allow both ways. CodePen isn't really an IDE, it isn't made for building apps from multiple files. We generate multiple files and need some sort of navigation among them. Since it uses a very compact and generic state management, we don't need file explorer. Hence the dropdowns. But we can change it of course. Also, we're thinking of having a desktop app to address the limitations of in browser environment.

[Jakub T. Jankiewicz]

Yeah CodePen is not good example of IDE but it's example of good UX. As example of real IDE check stackblitz.com/ it have file tree on the left, worse UX is to surprise the user, every IDE out there have file tree on the left. If open in new tab is for multiple screen you should make it optional maybe dropdown menu (with 3 dots) near the opened file.

[chris-czopp]

Thanks, that's very useful. I agree with all your points. Clearly I'm not a UX/UI person myself 😃

[Jakub T. Jankiewicz]

Check this project theia-ide.org/ found it in dev.to/iainfreestone/10-trending-p...

[chris-czopp]

Thanks man! It looks really cool. We'll see how we can fit some of the good ideas in our IDE. That will be a gradual development process though. 😃