# What is the technology (or combination of technologies) one would use to create slides, animations and live coding for lectures?

I teach Computer Science courses. Ideally, I would like to have all teaching materials in a website: slides, animation of data structures operations, live coding to illustrate the basic data structures operations, etc.

What would be your recommended technology to achieve these or part of?

• I don't really understand the question. You want recommendations for an LMS?
– Ben I.
Jun 7 at 19:33
• Not necessarily an LMS. For example, reactjs is nice for slides, but how to integrate live coding? Any tools for adding animations, and so on ... Jun 7 at 20:53
• Mostly a link, so I'm not making this an answer, but I took a class with Professor Pamela Fox (CS 61A at Berkeley - tragically she is no longer teaching :/) and she used HTML slides, which she explains here. I think this may include a significant number of the features you seem to want, if I understand your question correctly! Jun 8 at 4:09
• Sozi is good for slides. Video for Live (ish) coding, or some video chat system (zoom, MS-teams, Google meets, etc) for actual live coding. Jun 10 at 21:15
• @AudenYoung Wow, the HTML slides look great. If you make this into an answer (maybe citing a few points from the slides, or something like that), you certainly have my upvote! Jun 12 at 13:05

### Use RevealJS.

Initially when this question was asked I was adopting RevealJS for my own slides after I had witnessed some of my colleagues using it. At that point my knowledge about the framework was incomplete. However, I am very happy to come back here and see that it has already been mentioned in the comments.

RevealJS is amazing. Even the full setup is extremely simple and it comes with a demo (which you can run after installing the framework) which demonstrates the full potential of the framework... by using it! Something catches your eye? Examine how it behaves by inspecting the code, tweak it and include it in your slides!

RevealJS is open source. It's extremely important for content creators and for support paired with an amazing community.

RevealJS is simple. You can kickstart the entire presentation by simply editing the demo. It's easy to use pre-existing tools that enable you to do everything you have listed:

• Slides - The integral part of the framework. As simple as adding a <section> element.

• Animations - Sometimes we need to draw more attention to certain transitions. RevealJS comes with some ready-to-use animations, but nothing is stopping you from creating your own transitions!

In addition to that, there are many built-in animations dedicated to code. Want to highlight a specific line? A section of lines? Animate the highlighting in a specific order? As simple as specifying which lines you wish to highlight in which order.

• Live coding - Well, depending on the language, it's either trivial to embed it (web-based elements just work out of the box) or to use some other, external sources. For example, given the fact that RevealJS is web-based, it's trivial to embed any website data to it. https://replit.com/ or https://godbolt.org/ are as easy to add to your slides as it can get.

All in all, it's easy to use, easy to navigate, easy to pick up and I am yet to encounter something that will turn out to be a major flaw in that framework.