Create and use gifs for coding (teaching)

[bijiyiqi2017]

Hello everyone.
Recently I noticed someone had created a gif of them typing a solution. I was wondering how to create a coding gif. (animated typing of a code example) Could someone share what software they use to make them? Also do you ever use coding example gifs in your programming job, or hobby?

How to paste code

Rather than pasting code please provide a live link to your project. but to answer your question in case you need it for future reference… When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read. You can also use the “preformatted text” tool in the editor (</>) to add backticks around text. [Pre-formatted-text] See this post to find the backtick on your keyboard. …

[DanielHuebschmann]

Hello,

depending on your budget:

Paid:

1. With Adobe Premiere you can record your screen, cut the video and convert them into GIFs. It’s 26€/ month in Germany.

Free:

1. Use any screen recorder, in my case it was the in-built Windows Xbox widget.
2. Cut the video to the desired length. Most modern free photo editors also offer video edits.
3. Use a free online video to GIF converter like https://ezgif.com/.

Source: I used GIFs to demonstrate my UI animation skills for my portfolio, but gave up on that because of the large file sizes. I prefer a fast loading site.

[ArielLeslie]

I use screen capture videos or gifs to demonstrate application UI behavior, either for showing bug reproduction or demonstrating completed UI work. I use whatever software or platform my company pays for, specifically for that purpose.

[lasjorg]

I use ScreenToGif but it is Windows only.

The only app I know that is cross-platform and open source is OBS (Open Broadcaster Software) but I think you might need to use a plugin to output to GIF (or convert it using whatever).

[Usamanaeem]

@bijiyiqi2017

how to create a coding gif.

I mostly create coding gif by using a screen recording tool and Focus on specific code snippets and then exporting it as a GIF

[DanCouper]

If you’re on Mac or Windows, this has been around for a decade or so, works perfectly:

https://www.cockos.com/licecap/

Select an area of the screen, tell it to start recording, do stuff in other program, stop it, there’s your gif. Doesn’t do anything else.