TermTab
By
@bhlcusd
- 5 Devlogs
- 15 Total hours
GUIs are boring; try a terminal window instead!
Ship #1
TermTab
GUIs are boring; try a terminal window instead!
Quick Start
Explore TermTab: Try It Now!
Features
- Clean & Modern Design - Dynamic scaling with dark mode support inspired by Apple Terminal’s Basic theme.
-
Search the Web - use
gotoandsearchto navigate to a website or search with your favorite search engine, respectively. -
Get Info - use
locandinfoto fetch info about your current IP address or US zip code or information about your session, respectively. -
Check the Weather - use
weather(and any subsequent flags) to fetch the current and forecasted weather for your estimated location or US zip code.
Technicals
- Built on Svelte - Chosen for its highly interactive design, Svelte helps remove the tedious DOM manipulation that comes with basic JavaScript and HTML. With its direct implementation of TypeScript, Svelte made it easy to develop the website without the HTML and CSS getting in the way.
- TailwindCSS - TailwindCSS was chosen for most of the styling because it provided and easy, plug-and-play solution for this simple application. It streamlined the codebase by removing verbose CSS.
-
Custom TypeScript - The most substantial aspects of this project is the custom TypeScript implementation to abstract the terminal-DOM manipulations from the commands. Using Vite’s
import.meta.glob, the website dynamically fetches the commands from$lib/terminal/commands, making it easy for new commands to be created or altered. However, much of the work was dedicated to developing theTerminalclass outlined in the next section.
The Terminal
-
Seperating the Frontend and Backend - The bulk of the terminal’s logic resides in the
Terminalclass. It provides functions for commands to “print” to the console (appends the information as unique “lines” in a list), acting similar to any other terminal I/O program. -
Using TypeScript - One of the most useful features that comes with TypeScript is the ability to describe how objects can behave relative to each other. For example, a
Commandclass is created as the “blueprint” for any terminal command and has methods for executing and providing help. By not hard-coding the commands directly in the terminal, users can create commands to supplement the default commands. -
Commands Vary in Complexity - Although most of the commands are quite straightforward, some are more complex and use the user’s computer to complete its task. Take for example the
weathercommand. It uses OpenMeteo’s API to fetch the weather, but that API requires longitude and latitude coordinates. To resolve this issue, theloccommand was created to use the user’s estimated location fetched fromfreeipapi.comor, using a US zip code,zippopotam.us. Then, the information is converted into a user-friendly output, with the number of forecasted days being controlled by the user. - All Local - Notably, TermTab does not have any centeralized server to phone home to. Instead, the entire website is run “locally” by the user’s browser. Since there is no need to host a centeralized database, TermTab is shipped like any other static webpage (just with some JS/TS on top).
Acknowledgements
-
Svelte & SvelteKit Documentation - Assisted in the setup process and converting it into a static webpage using
adapter-staticand information about dynamically importing TypeScript files. - TailwindCSS Documentation - Assisted in finding corresponding CSS tags
Devlog 3: Wrapping Things Up
After a few more hours, I finally integrated a stable production-ready API to TermTab. Right now, there are two new commands: loc and weather. Loc uses the user’s local IP address (from freeipapi.com) or a provided US zip code (uses zippopotam.us) to find coordinates, city, state, and country name (and IP address, if applicable).
I also rewrote the search command to allow the user to use their preferred search engine (and incorporated the ask command into it). Now, you can search YouTube, Wikipedia, and DuckDuckGo!
I am considering on shipping TermTab as it is after finishing up on the rest of the project (like README.md).
Devlog 2: What Makes a Terminal a Terminal?
After a few hours of work, I was able to rewrite how commands work for TermTab. Before, commands were hardcoded into the execute() method in the Terminal class, which itself was integrated as part of the Terminal component. Now, the Terminal class is its own svelte.ts file and commands are fetched dynamically using Vite’s import.meta.glob().
I also added/modified a few commands including: time, info, and help. help now uses a dynamic fetching system, with each command managing its own help menu with command parameters as a string[].
As before, if you have any suggestions, feel free to comment!
Devlog 1: Making Something Familiar
Just began on my second project for Stardance. I started very late, but I want to complete this and the basic OS missions before Stardance is over.
Currently, I created a class in TypeScript to manage input and output and implemented a few programs. The input is directly taken from DOM listeners instead of an element because some functionality, like ctrl+c wouldn’t work with basic input. Besides, the custom code wasn’t a lot, with most of it dedicated to parse() which uses a simple switch statement.
Currently, there isn’t much in the way of interactivity, but I plan on implementing a few programs:
- weather (fetches current weather based on IP address or inputed zip code/city)
- calc (currently similar to eval(), but likely a custom dual stack calculator)
- snake (what can I even say?)
If you have another ideas for programs, feel free to share/comment.
