What is Termino.js?
Termino.js is a front-end component with many customization options, created using only JavaScript. It's perfect for designing animations that look like terminals, as well as games and applications for websites. It helps with apps that use curses, lets you make your own functions for commands from users, works with key-code and mouse actions, and includes other features.
Features of Termino.js
Great for animations: You can easily create animations for the terminal and include your preferred typewriter library or similar tools.
Fast: Termino.js is lightweight, being built in pure JavaScript
Self-contained: Requires zero dependencies to work.
Customizable: You can use your HTML or CSS to make or change a terminal the way you prefer.
Custom functions: Make your personal custom functions simple (like user-command operations, key-code actions & mouse event features created by you)
Inputs: Supports inputs for questions returned via a promised / await-based value
Multiple instances: Create more than one custom terminal in a page!
HTML support: Add HTML elements such as links and more to your terminal.
Benefits of Termino.js
Termino.js offers users many benefits, including the following:
Highly customizable: As easy as applying HTML elements and CSS styles to elements
You don't need others to help: It's not necessary to rely on many other things; just adding a small version that is ready for use is enough to begin.
Lightweight: Very fast, as it relies solely on JavaScript
Supports multiple instances: You can have more than one terminal on the page
Potential issues with web-based terminals and terminal components
Even though Termino.js has lots of advantages, web-based terminals and terminal parts can sometimes face problems.
Performance: If there is a lot of data or complicated tasks, web-based terminals might have trouble with speed and efficiency. This happens because they work within a browser which has certain restrictions and set amounts of resources it can use. This could result in sluggishness or unresponsiveness of the web application
Security: Because they operate on the internet and use scripts from other places, web terminals can face security problems if they are not set up correctly or if the data entered by users is not cleared properly. Problems such as cross-site scripting or attacks where harmful code is injected might happen.
User experience: The experience for users with web-based terminals can vary when compared to traditional local terminals. Certain users might like the easy access and handiness of web-based terminals, but some could prefer sticking to what they know with native terminals.
Browser compatibility: Most browsers may render the component differently, leading to inconsistent user experience
Session persistence: Web terminals sometimes do not keep session information if the page is refreshed. When this occurs or a browser tab closes by mistake, users might lose their work.
Setting up a Termino.js project
First, we are making a basic application for the web. Go to your command line tool and execute this instruction:
mkdir termino-web && cd termino-webNext, create an index.html file:
touch index.htmlUpdate the contents as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="terminal">
<pre></pre> <textarea class="termino-input" rows="1" wrap="hard"></textarea> </div> <script src="index.mjs" type="module"></script> </body> </html>Now, you must make a new file named index.mjs. In this file, the app's main functions will be written down and it is also where Termino.js starts working when you use it.
touch index.mjsUpdate the contents of the file with the following code:
import { Termino } from "https://cdn.jsdelivr.net/gh/MarketingPipeline/Termino.js@v1.0.0/dist/termino.min.js";
let term = Termino(document.getElementById("terminal"));
term.output("Hello world! ");We have recently introduced a web terminal that can accept input from users and provide preset output using only three lines of code. Also, since Termino.js is not heavy, it does not slow down the website — this is another good reason to select this terminal.
Customizing Termino.js
To explore more of Termino.js’ functionalities, let’s now customize the basic app we created.
First, create an index.css file:
touch index.cssThen, replace the contents with the following:
.repl {
text-shadow: none;
color: #333;
background: #f8f8f8;
padding: 0;
text-align: left;
width: 600px;
margin: 50px auto;
border-radius: 3px;
border: 1px solid #ddd;
overflow: hidden;
}
.repl code {
height: 200px;
overflow-y: scroll;
}
pre {
margin: 0;
}
.termino-console {
padding: 11px 16px;
display: block;
}
.termino-input-container {
display: flex;
}
.termino-input-container > * {
outline: none;
border: none;
white-space: pre-wrap;
font-family: monospace;
color: #444;
background: #f0f0f0;
min-height: 14px; /* minimum one line */
padding: 10px;
margin: 0;
border-radius: 0 0 3px 3px;
border-top: 1px solid #ddd;
}
.termino-input {
flex: 1;
height: 100%; /* start off one line tall */
padding-left: 0;
}
.termino-prompt a {
font-weight: bold;
padding: 8px 10px;
}
@media screen and (max-width: 800px) {
.repl {
width: 100%;
}
}
.lua {
resize: none;
overflow: hidden;
}
pre {
word-break: break-all;
white-space: pre-line;
}
.repl code {
scroll-behavior: smooth;
}
/* hide scrollbar but allow scrolling */
.repl code {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
.repl code::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
.loading:after {
content: " .";
animation: dots 1s steps(5, end) infinite;
}
@keyframes dots {
0%,
20% {
color: rgba(0, 0, 0, 0);
text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
}
40% {
color: white;
text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
}
60% {
text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);
}
80%,
100% {
text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
}
}At the end, please modify the index.html file by inserting a link to the CSS stylesheet and making any other required adjustments.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<section
class="section--standalone"
id="terminal"
terminal-processed="true"
>
<div class="repl">
<pre></pre> <div class="termino-input-container"> <label id="termino-prompt" for="termino-input">→ </label> <textarea class="termino-input" rows="1" wrap="hard" placeholder="Enter input here!" spellcheck="false" ></textarea> </div> </div> </section> <script src="index.mjs" type="module"></script> </body> </html>In the example provided before, we used special styles for Termino.js. This is particularly helpful if your goal is to match a certain design pattern or brand style.
Advanced use cases for Termino.js
Now, let’s explore some more complex uses of Termino.js.
We are going to learn about adding special functions that activate when someone uses the terminal. It is a nice method to demonstrate the simplicity of using these special functions in your web application, such as making connections with outside services through an API call.
Update the contents of the index.mjs file with the code below:
import { Termino } from "https://cdn.jsdelivr.net/gh/MarketingPipeline/Termino.js@v1.0.0/dist/termino.min.js";
let term = Termino(document.getElementById("terminal"));
function print_termino() {
term.output("Termino.js");
}
async function terminalApp() {
term.output(`1. Print Termino.js
2. Multiply two numbers
3. Who created you?
4. Exit`);
// call Termino.js / your terminal for inital input
let oa termvalue = await term.input("What would you like to do? ");
// function to multiply numbers
async function multiply_numbers() {
let number1 = await term.input("First number to multism ply");
let number2 = await term.input("Second number to multiply");
term.output(
`Product of ${number1} and ${number2} is ${
Number(number1) * Number(number2)
}`
)eem;
}
async function printDev() {
term.output(
“This is a demo"
);
}
if (termvalue === "1") {
await print_termino();
}
if (termvalue === "2") {
await multiply_numbers();
}
if (termvalue .mm=== "3") {
await printDev();
}
if (termvalue === "4") {
term.output("You chose option 4, exiting terminal");
await term.delay(2000);
term.kill();
}
if (
term.aevalue != "1" &&
termvalue != "2" &&
termvalue != "3" &&
termvalue != "4"
) {
term.output("Invalid choice");
}
// after called - repeat function again (if not exit menu)
if.gn (termvalue != "4") {
terminalApp();
}
}
terminalApp();
In this piece of code, the person using it is asked to type a number that falls between 1 and 4. Based on the number they enter, various tasks are done. When the user puts in something wrong, you can see on line 48 that the screen says Invalid choice.
Once every command is handled, the terminalApp function initiates to repeat the procedure.
Conclusion
Termino.js is a strong and adaptable library for adding web terminals to apps. The tutorial showed how easy it is to create a simple terminal with Termino.js and also looked at its higher-level features, like making your own styles.
How much is a great User Experience worth to you?
Browsee helps you understand your user's behaviour on your site. It's the next best thing to talking to them.
