DEV Community

Demo your App in your GitHub README with an Animated GIF

Kelli Blalock on February 11, 2019

I have my GitHub link on my resume and if I'm lucky, potential employers might check out my apps on GitHub. However, I know they're busy and won't ...
Collapse
 
brpaz profile image
Bruno Paz

For Linux, you can use Peek.

Collapse
 
priteshusadadiya profile image
Pritesh Usadadiya • Edited

I use screencastify plugin for chrome to record product workflows, bugs etc...

In Free tire it gives you 50 recordings per month with max 10 min. recording per session. you can download saved videos from Google drive or export it as gifs.

i have been using it for some time and never needed to upgrade to paid plan.

Collapse
 
kelli profile image
Kelli Blalock

Thanks Pritesh, screencastify looks good. I'll definitely give it a try!

Collapse
 
gradientus profile image
Phil Mauracher

While it is true you have 50 free recordings a month. You must pay $24 a year to make animated gifs. However, it's money well worth it to make quality README files.

Collapse
 
itsasine profile image
ItsASine (Kayla)

I use GIPHY Capture on Mac. While the purpose is to upload gifs to giphy, I just save them locally after capturing my screen. I also save the gif in the repo itself rather than try to keep things hosted in one place. If the app changes, then I can just update demo.gif while I'm in there and it's all in one commit.

Collapse
 
voyz profile image
Voy

Fantastic post! I just wrote a post on adding large GIFs to the README.md, expanding on what you discuss at the end regarding adding the GIF into the repo. Thanks for writing this Kelli 😊

Collapse
 
ayyappa96805355 profile image
ayyappa • Edited

with your help i have added demo gif for my project in github. thank you.
github.com/ayyappag10/shopping-cart

Collapse
 
emgodev profile image
Michael

Might be a good idea in general to host such media externally, I suppose most important for long-term projects. I've tried this out recently, much smaller imprint to update a url path than for a repo to contain a media file it does not need.

Collapse
 
emgodev profile image
Michael

But this is a good idea! I've tried including demos as a frontend model in a few repos as a directory, but a GIF gives that immediate impression.

Collapse
 
ayyappa96805355 profile image
ayyappa

thanks

Collapse
 
marissab profile image
Marissa B

That's pretty clever! Good tip.

Collapse
 
ewoks profile image
Beeblebrox

Check getkap.co super simple, grat tool

Collapse
 
mertcansegmen profile image
Mertcan Seğmen

This is very helpful, thank you!

Collapse
 
codenamev profile image
Valentino Stoll

I have been using LICEcap for years (on OSX), but the Window Selection feature in Gitfox looks pretty rad. Thanks for sharing!

Collapse
 
jairajsahgal profile image
jairajsahgal

It's not showing in your README now

Collapse
 
gledsonafonso profile image
Gledson Afonso

Thanks for the ScreenToGif recommendation!

Collapse
 
mersadajan profile image
Mersad Ajanovic

Thanks for the tip! Just bought Gifox and it's fantastic!

Collapse
 
z2lai profile image
z2lai

ShareX is incredible for a free software. You can set it to capture a specific region of your screen as a video or GIF. You can also use it to convert videos into GIFs.

Collapse
 
ajinkyax profile image
Ajinkya Borade

once you have the GIF image. I create issue on github, then drag and drop the file in textarea. Cope the MD code, cancel the issue.

Take the code line to README :)

Collapse
 
cubiclesocial profile image
cubiclesocial

I know I'm late to this, but you should always create the issue and then close it. Otherwise, GitHub/Microsoft might, in the future, delete images that use this hack to basically turn GitHub into an upload site. How many people have started the process of opening an issue, uploaded an image, and then cancelled because they figured out the problem themselves or are abusing the CDN this way? Probably way more than have used this hack for repos. Those images occupy space on a drive somewhere and someone is going to want to reclaim that wasted storage space after a while.

Collapse
 
jairajsahgal profile image
jairajsahgal

Can you show a repo that has animated gif?
Trying to make it work on markdown.