Backend Knowledge Sharing #28

Tailwind CSS, SSH Alias, Khalti Checkout

Sandip Shrestha

Published in

YoungInnovations' Blog

4 min readJan 17, 2020

Tailwind CSS
SSH Alias
Khalti Checkout

TailWind CSS

Last week, Nirajan Basnet shared with us how a utility framework like tailwind help us backend developers.

Tailwind is a utility-based CSS framework, intended to facilitate rapid development of modern web applications. The key is that it’s utility based. Rather than one preset “big” class that sets a bunch of properties you will add multiple classes, each of which set (approximately) one. Unlike other frameworks Tailwind uses PostCSS to process its final output, a choice with some downsides as well as up.

How does it differ from Bootstrap?

Just as an aside here, when I talk about “Bootstrap” you can consider that shorthand for a bunch of competing libraries — Bootstrap, Foundation, Bulma, and more.

As said, Tailwind is utilities, so you end up with a long list of deliberate and considered properties being set.

This means that rather than starting with an interface that looks like a default Bootstrap install, and then having to customise it, you end up with something uniquely custom.

The downside — you start from nothing. Bootstrap gives you a lot out of the box. A lot of pre-styled components that already look good. Form elements that line up, nice buttons, table layouts, navigation bars, notifications, cards, a grid, crisp typography, and so on.

You get none of that with TailwindCSS. You either get to make your own, or you’re forced to make your own, depending on your perspective.

And let me say from the outset that Tailwind isn’t always the right choice. If you’re whipping up a really basic interface for internal use or a quick proof of concept, Bootstrap is your go-to.

Where Tailwind excels is longer-lived projects that require their own visual style and identity. This is particularly relevant when implementing custom design work and especially the kinds of slick, modern app interfaces that stray pretty widely from Bootstrap.

SSH Alias

Our colleague Ashish Shakya is a fan of alias. He says, it is convenient to replace long and complicated commands with a simple one word alias. 😉

The basic syntax for performing remote login using ssh is:

ssh -i <path-to-private-key> <user_name>@<host_name>

Now rather than using the above method, we can create aliases for ssh. In order to create an alias for ssh, we can follow the steps below:

Change the current directory to ~/.ssh
Create a config file in ~/.ssh the directory (touch config)
Inside the config file, maintain various alias for ssh.
(The syntax inside this file has to be strictly followed)
An example is shown below:

Host <alias>
 HostName <hostname:Eg:abc.com; 54.32.65.62>
 User <user_name>
 Port 22
 IdentityFile <directory of the private key>

(Note the indentation from the second line)

Example:

Host production_site
 HostName test.com
 User joe
 Port 22
 IdentityFile ~/.ssh/id_rsa

Now we can directly login to our remote server using the simple command as ssh production_site

Khalti Checkout

Khalti payment makes online payments much easier than it has ever been before. This week Bibek Mani Acharya shared with us how easy it is to integrate Khalti Payment in our web apps.

Khalti checkout can be integrated with or without build tools like Webpack and Rollup.

We can simply import a static javascript file for khalti checkout in our webpage and get our khalti checkout up and running like below.

<html>
<head>
    <script src="https://khalti.com/static/khalti-checkout.js"></script>
</head>
<body>
    ...
    <!-- Place this where you need payment button -->
    <button id="payment-button">Pay with Khalti</button>
    <!-- Place this where you need payment button -->
    <!-- Paste this code anywhere in you body tag -->
    <script>
        var config = {
            // replace the publicKey with yours
            "publicKey": "test_public_key_dc74e0fd57cb46cd93832aee0a390234",
            "productIdentity": "1234567890",
            "productName": "Dragon",
            "productUrl":             "http://gameofthrones.wikia.com/wiki/Dragons",
            "eventHandler": {
                onSuccess (payload) {
                    // hit merchant api for initiating verfication
                    console.log(payload);
                },
                onError (error) {
                    console.log(error);
                },
                onClose () {
                    console.log('widget is closing');
                }
            }
        };        var checkout = new KhaltiCheckout(config);
        var btn = document.getElementById("payment-button");
        btn.onclick = function () {
            checkout.show({amount: 1000});
        }
    </script>
    <!-- Paste this code anywhere in you body tag -->
    ...
</body>
</html>

API Detail

KhaltiCheckout(configuration?)

This creates an instance of the KhaltiCheckOut class. The configuration argument is a JavaScript object. See configuration for details on available configuration parameters.

show(configuration?)

Displays the Khalti checkout widget.
Receives configuration as argument.
Provide amount and mobile to prefill the checkout widget field
checkout.show({amount: 1000, mobile: 98XXXXXXXX})

mobile

is an optional field and expects Khalti Registered Number for wallet payment.

hide()

Hide the widget.

Details on config parameters

If You want to keep reading, below are more of our post,

Frontend-Design Knowledge Sharing #30

React Three Fiber, Aria Tablist, React Spring, 30 seconds of code, Smooth Scrolling Sticky Scrollspy Navigation…

blog.yipl.com.np

Backend Knowledge Sharing #27

Comparing Git Workflows