How Termwind CSS Helps to Build Exclusive CLI Apps?
Madhavi G
Laravel is an exceptional framework that offers numerous features for constructing robust web applications. Notably, it also offers the capability of creating command line interface (CLI) applications, which further adds versatility to its functionality.
In today’s landscape, command-line applications have garnered significant attention and investment, with initiatives like FIG and Warp taking the lead.
Tailwind CSS Package
Using Tailwind CSS Laravel package, you can provide developers with a convenient solution for rapidly writing and styling CLI applications. With this package, developers gain full integration capabilities for Tailwind CSS, one of the powerful JavaScript frameworks distributed through npm.
You do not need to install Node.js or npm, although benefit from its features. This streamlined workflow allows for efficient web development while maintaining the flexibility and scalability of Tailwind CSS.
What is Termwind?
Termwind is a utility that shares similarities with Tailwind CSS but is specifically designed for PHP command-line applications. Its prime function is to facilitate developers to utilize the vast range of Tailwind CSS classes within their PHP code to enhance the visual output of the command line interface.
Termwind empowers you to construct distinctive command-line applications by harnessing the capabilities of the Tailwind CSS API.
By leveraging Tailwind CSS classes, developers can effortlessly improve the aesthetics and overall experience of their PHP applications, providing a more visually appealing and user-friendly interface.
Installation
This Laravel package requires PHP version 8.0 or higher. Please utilize Composer to install the package.
composer require nunomaduro/termwind
Usage
Currently, let us create a command to convert USD to INR and give it a suitable style.
1. To create a command, execute the following in the terminal.
php artisan make:command UsdToInr
The mentioned action will result in the creation of a UsdToInr.php file within the app/Console/Commands directory.
2. Now, we create a blade template to be passed into the Termwind functions for terminal viewing. The USD amount input is taken from the user, so the ask() function will be imported and used, as shown below.
render());
}
}
The index.blade.php file includes the HTML structure for prompting the user to input the amount in USD.
Read More:- Best PHP IDE and Code Editor Tools
USD to INR
Please enter the amount in USD:
3. After the user provides the USD amount and submits it, the result is displayed using the render() function.
render());
$req_url = 'https://api.exchangerate-api.com/v4/latest/USD';
$response_json = file_get_contents($req_url);
if(false !== $response_json) {
$response_object = json_decode($response_json);
$base_price = $usd; // price in USD
$inrPrice = round(($usd * $response_object->rates->INR), 2);
render(view('result', ['usd'=> $usd, 'inr' => $inrPrice])->render());
}
}
}
The file result.blade.php will contain the necessary code for presenting the outcome to the user.
USD to INR
USD {{ $usd }} in INR is {{ $inr }}
The current appearance of the terminal output has been altered as follows.
Read More:- Best Backend Frameworks for Developers
4. To enhance the design and elevate the visual impact, consider referring to the supported classes offered by Terwind at https://github.com/nunomaduro/termwind
- In the index.blade.php file, I will add additional elements in the following manner:
USD to INR
Please enter the amount in USD:
USD {{ $usd }} in INR is ₹{{ $inr }} You may find the current rates here
The final outcome will look like this:
Best Practices For Creating CLI Applications
Once the logic and strategies have been implemented in the CLI app, the next step is to design the commands and outputs. Here are a few tips and best practices to consider when designing CLI applications.
1. Language
The Command-Line Interface (CLI) serves humans better than machines; therefore, it is advisable to select a real-world language for the commands, arguments, and descriptions.
2. Nomenclature
Please adhere to the format of Verb-Noun for the commands, keeping them in a single line. This will create a more assertive and authoritative tone for the user.
3. Prompts
Please ensure that the user does not experience frustration due to lengthy inputs. Utilize the prompt option to facilitate the user in parsing the output.
4. Colors
To enhance user engagement, it is recommended to use attention-grabbing colors such as yellow, cyan, green, and red for commands and outputs. Providing a greater diversity of background colors compared to text colors can further improve readability and prompt user responses.
5. Consistency
Consistency in the inputs and outputs across the entire system is crucial. This not only facilitates faster user interaction but also encourages consistent usage.
6. Tables
When it comes to data analysis in CLI applications, navigating through data can often be a tedious task. For simplifying the process and enhancing readability, it is highly recommended to utilize tables. By utilizing tables, users can easily pick up where they left off on each line, facilitating a more efficient and user-friendly experience.
Conclusion
Designing and styling the CLI can be as challenging as building the logic for the CLI. However, it is crucial not to overlook the importance of users, particularly when scripting the CLI. The ability of Termwind to inspire users to continue using CLI applications is both exciting and beneficial in maximizing its potential.
