Create and use gifs for coding (teaching)

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?

1 Like

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.

4 Likes

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.

2 Likes

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).

2 Likes

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

1 Like

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.

1 Like