Typewriter Effect in Atom Editor

Typewriter effect in Atom editor using a bash script

In this tutorial, I will create a typewriter effect in the atom editor. This is a very useful effect to create educational presentations and videos. The unique selling point of the procedure I am going to describe is that it does not require any extra plugins or softwares.

Procedure

#!/bin/bash
from fastapi import FastAPI

app = FastAPI()

@app.get('/hello')

def say_hello():
    return {'message':'Hello world!'}
"

output="dummy.py

We will use a dummy python code for demonstrating the typewriter effect.

Aside: If you are curious what this code does, you can refer to the blog on Secure API Management using FastAPI, Uvicorn and Kong in Linux.

Create a bash script for the typewriter effect

To emulate typewriter effect in atom editor, start by opening the atom editor's preference. Scroll down and find the file watcher system setting and change it to experimental filesystem watching library. This setting will reload the file automatically whenever we change a file's content using an external source.

type.sh

#!/bin/bash

code="from fastapi import FastAPI

app = FastAPI()

@app.get('/hello')

def say_hello():
    return {'message':'Hello world!'}
"

output="dummy.py"
> "$output"   # clear the file first

for ((i=0; i<${#code}; i++)); do
    printf "%s" "${code:$i:1}" >> "$output"
    sleep 0.3   # slow enough so you see each character
done

Now, create a bash script, named type.sh, to create the typewriter effect. I will use a dummy python code for demonstration. Next, specify the output file name for the python code, say dummy.py. To create the effect, clear any existing text in the file. Then, iterate over each character of the stored python code and append it to the output file one character at a time at an interval of 0.3 seconds. Note that depending on you processor's specification, you may need to adjust the sleep time to get a smoother effect. Finally, save this file in the current working directory.

Execute the bash script

To initiate the typewriter effect, open a terminal window and execute the bash script by typing

bash type.sh

Watch the typewriter effect in atom editor

To watch the typewriter effect in action, open dummy.py file in the atom editor. Now, sit and enjoy the typewriter effect.

If you are recording this effect for a video, you can also add a typing soundtrack to create a more realistic experience. These sound effects are freely available at Pixabay.

Author

Anurag Gupta is an M.S. graduate in Electrical and Computer Engineering from Cornell University. He also holds an M.Tech degree in Systems and Control Engineering and a B.Tech degree in Electrical Engineering from the Indian Institute of Technology, Bombay.

Comment

Past Comments

No comments yet. Be the first!