AI Reporter Asks: Why Have Developers Started Giving the Black Screen (Terminal) a Layer of HTML?

AI Summary

The terminal is no longer just a rigid space for text output. We introduce a new terminal environment that achieves both design and extensibility by leveraging web technologies.

Imagine this: What if the smartphone or computer screen you use every day looked like the 1980s, with nothing but lonely green text on a dull black background? The ‘terminal’ (Command Line Interface, a way for users to control a computer by entering text commands), a tool developers use to talk to operating systems, has looked exactly like that for a long time. However, recently, HTML (the language that builds the skeleton of web pages), CSS (the language that makes web pages pretty), and JavaScript (the language that adds movement to web pages)—the ingredients used to make websites—have started to be applied to this rigid space. Why on earth is this change happening?

Why It Matters

The terminal is the most powerful and indispensable tool for a developer. It is the core space for directly manipulating operating systems, automating complex repetitive tasks, and managing programs. However, it was extremely difficult to freely change the design or richly display visual information in traditional terminals.

Now, as web technologies are integrated into the terminal, it is evolving from a simple ‘text window’ into a ‘user-friendly interface.’ This means developers can work in an environment that is much better looking and easier to use. Furthermore, non-developers can now explore the world of coding more intuitively through educational terminal simulations.

The Explainer

Let’s use an analogy. If a traditional terminal was an old-fashioned ‘typewriter’ that could only type text, a modern terminal integrated with web technologies is much smarter and more colorful, like a ‘photo gallery app’ on a smartphone.

HTML (Structure): It is like building the frame when constructing a house. It defines the structure, such as what goes on the terminal screen and where to place buttons.
CSS (Style): It is like a filter app that puts on pretty clothes. It smoothly changes background colors, improves readability by adjusting typefaces, or changes font sizes to delight the eyes.
JavaScript (Functionality): It makes the terminal come alive. It makes the screen react immediately whenever a user enters a command and performs complex calculations to talk to the system.

For example, a terminal like ‘Hyper’ utilizes these technologies to help users very easily change themes or install plugins to add new features [Source 9]. It has become as simple as applying a filter or downloading a new sticker in a smartphone photo app.

Where We Stand

Currently, terminal projects utilizing web technologies are very actively underway in the developer community.

Functional Tools: Technologies like ‘xterm.js’ allow for the implementation of a terminal that operates perfectly within a web browser [Source 2, Source 7].
Simulation Education: There are many projects, such as ‘hacker terminal simulations,’ that implement an environment similar to reality in a browser, helping anyone learn complex programming concepts in a fun way [Source 9, Source 11].
Personalized Work Environments: Some developers even create their own portfolio sites as working terminals to offer visitors a special experience [Source 8].

These terminals are designed to transmit commands typed by the user to the backend (server) via a channel called WebSockets (a technology for exchanging data in real-time) to actually perform system tasks [Source 4, Source 9]. However, it should be remembered that since they run in a web environment, a stable internet connection must be supported when handling complex system commands.

What’s Next

Terminals of the future will increasingly resemble the ‘web’ we see every day. Now, instead of just viewing text inside a terminal, we will be able to display high-resolution images, click on hyperlinks directly, and check data accompanied by flashy visual effects in real-time [Source 5, Source 9].

Furthermore, an era is coming where we won’t need to install complex development tools one by one, but can instantly use our own optimized terminal environment anytime, anywhere, just by turning on a web browser. If the tools we use become a little prettier and more convenient, the joy of the work we do every day will surely increase, right?

MindTickleBytes’ AI Reporter Perspective The transformation of the terminal shows that technology is beginning to value not only efficiency but also the user’s ‘experience’ and ‘emotion.’ It could be said that tools that have been trapped in a black screen for a long time have opened their doors a little wider toward the world through the window of the web.

References

Share this article:

Test Your Understanding

Q1. What is an advantage of a terminal built with web technologies compared to a traditional terminal?

Computer boot speed becomes faster
It is easier to implement visual design and extensibility
An internet connection is always required

By leveraging web technologies (HTML, CSS), you can freely add visual elements such as text styling, image insertion, and hyperlinks within the terminal, and easily extend functionality through plugins.

Q2. What is the common method for processing commands entered by a user in a browser-based terminal emulator?

Transmitting them to the backend via WebSockets for processing
Saving them directly to the user's computer memory
The browser executes all commands itself immediately

Many browser-based terminals have a structure where commands entered by the user are transmitted to a server like NodeJS via WebSockets to be processed.

Q3. What are the features of the terminal application 'Hyper'?

It can only be executed in a Linux environment
Settings can be changed and plugins used via a JSON file
All commands must be entered only in English

Hyper is a terminal built with HTML, CSS, and JavaScript. You can change its appearance by theme or extend functionality by installing various plugins through a JSON-formatted environment configuration file.