Code creates graphic
I started looking around how to create a gif out of codes, seems not many tools out there. So I ended up creating my own tools.
What brings us here?
Here I go… The first three words of my first ever medium article… Now that the pressure of what my first line has to be has been dealt with let’s look at what I really want to show you. Most of us here love writing code, and we like looking at it coming to life while stitching one letter to another. After coding comes to our application. We want to showcase both our application and the code that brought it to life.
Presenting codes: A better outlook
Now the question arises of presenting our code as soon as we are done with the initial development, though we all know development is a never-ending procedure. Images are a great medium to show the code but why rely on just images when you can use GIFS? I wanted to present them in a unique way and GIFs came to play. GIFs give a whole new experience.
To showcase my code I was looking for a tool which would gif-iy-fy my code. But couldn’t find any, SO I made my OWN 😊(click here). I wasn’t yet quite satisfied and went on to create another tool as an extension to vscode to make it easier for developers.
How does the magic happen: GIFs, browsers AND vscode
Select the codes and you have a gif for your presentation at a click as if you are live coding,(click here).
For the website, all you need to do is copy a chunk of code, paste in the editor, and click on the “Create gif” which lets you see the gif and your gif is ready to be downloaded
Now when it comes to the vs code extension, no copy-paste works here, so download and install the extension. Command ⌘ + Shift + P or Ctrl + Shift + P to open Command Palette, and choose “Create code gif” which will lead to a split window in vscode. Now you need to select a chunk of code which will be finally rendered as a gif in the window. You can abject the size of the container to make it look as per your choice and then save it as a gif. Confused? Please take a look at this or this.
Hold on! There’s more magic to happen!
Probably you are thinking, “What about a picture?” To take a picture no need to go back to the old tools, Yeah!! I got you covered. Just toggle the switch and it will save the code as an image.
Perfect tools for your next presentation prep, huh? 😜
I will soon be posting a next part in which we will go over how I created the website or the vscode extension. Keep an eye out for future posts from me to know. And keep coding!
Important links: Github repo, website, extension
