Expose cursor color through settings

[wix-incubator]

Expose cursor color through settings

[bogobogo]

@bradydowling Also worth noting, the Codio editor could probably be implemented once, using the web player/editor.

[bradydowling]

Great, I think I still would like to get a better grip on how the extension is laid out before I dig much into the editor so I may work on other smaller things in the meantime. I'll keep you posted though.

[bradydowling]

@bogobogo can you provide some more info on this issue (or any others in the repo)? I'd like to pick something up to work on.

[bogobogo]

@bradydowling Sure! The codio player emulates selection by changing the background color of the selected text. It looks and feels like someone else is selecting the code, but it doesn't change the actual selection, so you can still move your cursor.

The code of the style and color of that mocked selection is here: https://github.com/wix-incubator/codio/blob/master/vscode/src/user_interface/Viewers.ts#L60

Notice it is hard coded, and might not suite some themes. The idea is to be able to expose the color as a setting in vscode settings, so that if doesn't look so good with your theme, you could change it.

I will elaborate more in other issues about what is needed to be done.
Is there anything specific you are curious about or would want to implement?

[bradydowling]

Ah nice, that's really helpful. Nothing else specific, just looking at something to get started on with this since I love the idea of this. I worked on Cloud9 before (and after) we were acquired by Amazon and that has a "revision history" feature which allows you to look at a previous revision of the code and then press the play button and see it typing out in real-time. We always discussed making some sort of tutorial feature but it never made the cut when it came time to plan. I've recently stumbled upon Scrimba, which has a really nice UI but I think the major drawbacks are that you're not coding in your normal environment and you're not running/debugging in your normal environment (plus it's written in a custom language, Imba, that compiled to JavaScript). Something like this should probably live in the code editor but if you haven't seen Scrimba yet then definitely check it out and see what you think. Anyway, all that to say that I like this idea and want to take a look at how it works and maybe add to it here or there 😁

…

On Tue, Jun 16, 2020, 8:24 AM bogobogo ***@***.***> wrote: @bradydowling <https://github.com/bradydowling> Sure! The codio player emulates selection by changing the background color of the selected text. It looks and feels like someone else is selecting the code, but it doesn't change the actual selection, so you can still move your cursor. The code of the style and color of that mocked selection is here: https://github.com/wix-incubator/codio/blob/master/vscode/src/user_interface/Viewers.ts#L60 Notice it is hard coded, and might not suite some themes. The idea is to be able to expose the color as a setting in vscode settings, so that if doesn't look so good with your theme, you could change it. I will elaborate more in other issues about what is needed to be done. Is there anything specific you are curious about or would want to implement? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABS4AU3KRLKU2ICATPVHDU3RW5P75ANCNFSM4MGLPY7Q> .

[bogobogo]

@bradydowling That is really cool. If you have any more questions about how it works, feel free to ask. I can talk about this all day 😃

The origin of codio is that I wanted a tutorial to run inside my IDE. A frictionless tutorial that can be activated whenever you want, and that emulates the real thing as closely as possible. That accidentally lead to codio, which I realized is a just a media format. It is a part of the idea of an embedded tutorial, but it could be used for other things as well.

A few people have mentioned Scrimba and it is indeed really cool, but I think the whole point of the format is to be embedded inside your IDE, and for that to be a viable thing, u need to have a client for most IDE's or at least for the most popular ones. That sounds like something that should be open source.

I have also started working on a web player/recorder which I think is very important and I have some other plans in the roadmap (and if any of those interest you, let me know):

1. Web Player/Recorder as mentioned
2. Convert Codio to Video
3. Convert to Notebook - The idea is to do speech to text on the codio, and make a new interactive format that resembles a notebook and could be used as documentation
4. Codio Editor
5. Dynamic Actions - understand the codio actions in the context of the AST and save the actions as they relate to the AST. This way you could replay the same codio in different contexts as long as they follow the same pattern.

[bradydowling]

The whole point of the format is to be embedded inside your IDE, and for that to be a viable thing, u need to have a client for most IDE's or at least for the most popular ones. That sounds like something that should be open source.

Definitely agree on these points. Scrimba has a nice setup so far but I think in the longrun the proprietary aspect of it will hurt both the product and users. Plus, as I mentioned the development process in Scrimba right now is not up to par.

Of the five you mentioned I'm most interested in the Codio Editor. Though, I'm curious what you mean specifically by a web player/recorder. Would that be something to create codios in the browser, independent of code? Maybe you can expound on that. Feel free to point me to existing roadmap, issues, or documentation if they exist, though I know this all might be very tribal at the moment :)

For now, I'll take a look through the repo and see if I can get my bearings on how this all works and then I'll tackle one or two of these issues.

[bradydowling]

I don't think converting codio to video will be a huge benefit because users could instead record their screen and play the codio as it records. On a side note, a much more involved but also beneficial conversion would be video --> Codio. That's pretty pie in the sky and it would likely involve complicated video/image recognition but it's definitely possible at some point and would unlock a huge set of interactive tutorials to learn from.

[bogobogo]

@bradydowling Sorry for the late reply!

Web player/recorder:

Codio currently has a VSCode client and an Intellij client, which allows you to record and playback codios in both platforms. I want to add a web client, on top of Monaco or CodeMirror, that will enable you to record and playback codios on the web. This will allow users to playback codios on their phones for example, or interact with codios even if they don't work with an IDE that has a client. It will also enable them to try codio and understand the general concept, before committing to downloading an extension, which I think is a big barrier. Imagine starting the tutorial on the web, seeing the interactivity, and adding a: "Continue this tutorial in your favourite IDE" button.

Additionally, I believe that for many kinds of programming web IDE's are the future, and I would love to eventually create a codio client for existing web platforms such as repl.it.

Converters

I think a codio - video converter would make the process smoother than requiring the user to constantly record videos as well. I agree that it is not a blocker for codio to work, but when we will have the web player, implementing convert to video could be surprisingly simple. You also get nice perks like choosing the style of your editor when converting and such. That being said, It is not a top priority.

I agree with you that a video --> codio converter would be amazing. It would be a static --> interactive tutorial convertor. Pretty Rad 😃. This should be added to the roadmap.

[bradydowling]

@bogobogo can you share more of your thoughts on the Codio editor? What the experience would be like, what exactly users should be able to edit, how they can edit, etc.

My initial thought would be a timeline style editor, like iMovie, Screenflow, etc. but I'm curious to know what else you had in mind.

[bogobogo]

@bradydowling A timeline editor with basic features (delete a section of a codio recording, record again from some point, etc.) sounds good to me.

That being said, I currently don't have strong opinions on this other than that it should be web based so that it will serve all future codio clients.

If you want to work on this, I encourage you own the editor project and lead the way. You can own both design and development and I will follow you and help as much as I can.

My current top priority is improving the VSCode extension ( I really want to improve stability and remove the ffmpeg dependency), creating a tutorial to demonstrate what's possible, and getting the Intellij plugin out. I can help from the side meanwhile, and join full force later.