Forem: Umesh Yadav

How to Use SVG Icon as AvatarBadge in Chakra UI

Umesh Yadav — Sat, 07 Nov 2020 18:39:46 +0000

I was recently building a side project and I was using Chakra UI + Next.js. I wanted to put the Google logo as a Badge in the bottom right of an Avatar Image. Something like this👇🏻.

Chakra UI provides an Avatar and AvatarBadge component. You can use these two to create an avatar image with a badge(bottom right). Here is an example from Chakra UI docs.

Now suppose instead of the dot you want to insert an SVG icon. Here is how you can do it.

import { Avatar, AvatarBadge, Icon } from "@chakra-ui/core";

const GoogleIcon = (props) => (
  <svg viewBox="0 0 533.5 544.3" {...props}>
    <path
      d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z"
      fill="#4285f4"
    />
    <path
      d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
      fill="#34a853"
    />
    <path
      d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
      fill="#fbbc04"
    />
    <path
      d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
      fill="#ea4335"
    />
  </svg>
);

export default function Home() {
  return (
    ...
    <Avatar>
      <AvatarBadge boxSize="1.25em" borderColor="transparent" bg="white">
        <Icon as={GoogleIcon} w="5" h="5" />
      </AvatarBadge>
    </Avatar>
    ...
  );
}

In the above example, There is GoogleIcon SVG. Then I am creating an Icon component using GoogleIcon SVG. Then we pass this Icon component as children to AvatarBadge.

Similarly, if you want to create a Badge with an image. You can just replace the Icon component with Image and it will render the image as a badge.

import { Avatar, AvatarBadge, Image } from "@chakra-ui/core";

export default function Home() {
  return (
    ...
    <Avatar>
      <AvatarBadge boxSize="1.25em" borderColor="transparent">
        <Image src="https://raw.githubusercontent.com/chakra-ui/chakra-ui/develop/logo/logomark-colored%402x.png" />
      </AvatarBadge>
    </Avatar>
    ...
  );
}

Conclusion

Chakra UI is an awesome library that provides modular components. You can use this library as a building block for creating custom components. It was very simple to build custom components.

If you liked this post please share it with others so that it can help them as well. You can tag me on Twitter @imumesh18. Also please follow me here and on Twitter for future blogs which I write over here

How File-System Based Routing Works in Next.js

Umesh Yadav — Fri, 06 Nov 2020 19:18:29 +0000

Next.js has file-system based routing built-in. You don't have to explicitly define the path in the router. It's as easy as adding a file inside the folder and you are done. There are multiple ways you can define a path using the file structure. Anything we add inside the pages directory is served as a path. Definitely there are exceptions like _app.js and _document.js.

There are two types of routes in Next.js

API Routes: Any file you put inside pages/api is treated as an API endpoint and is served at https://hostname/api/*.
Page Routes: Any file which is inside pages can be served as a web page to the user, it can be a Static Generation or Server-side Rendered. Any file which is inside pages/api is not treated as a web page.

We will go through all of these in detail in this blog post.

Setup a Next.js Project

We will first create a Next.js project for this. We will name this nextjs-routing

npx create-next-app
# or
yarn create next-app

Page Routing

Index Routing

Once your project is ready it should look something like this. You can see that there is index.js inside the pages folder. So if you run your application and visit http://localhost:3000 you will see the welcome next.js page, which is mapped to the index.js.

$ tree -I node_modules
.
├── README.md
├── package.json
├── pages
│   ├── _app.js
│   ├── api
│   │   └── hello.js
│   └── index.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── yarn.lock

Here is how these pages are mapped to path by router.
pages/index.js -> http://[hostname]/
pages/posts/index.js -> http://[hostname]/posts/

Any index.js is mapped to the directory path it belongs to.

Nested Routing

Now suppose you want to display deeply nested pages like dashboard settings etc.

pages/about.js -> http://[hostname]/about/
pages/blog/hello.js -> http://[hostname]/blog/hello
pages/blog/series/hello.js -> http://[hostname]/blog/series/hello

Dynamic Routing

Suppose you don't have the exact route beforehand and it depends upon API data or some dynamic data. Here is how you can create these routes and map them.

pages/blog/[slug].js -> http://[hostname]/blog/:slug

over here slug can be anything and you can use getStaticPaths to set the dynamic path.

pages/blog/[...slug].js -> http://[hostname]/blog/hello as well as http://[hostname]/blog/series/hello

The above example is to catch all route. Basically, it can map a path to any level of nesting which happens after blog/. If you replace [...slug].js -> [[...slug]].js, it will match to /blog along with other routes like blog/hello, blog/series/hello.

You can't use catch-all routes with the directory. Eg: pages/blog/[[..slug]]/comments.js will give you Error: Catch-all must be the last part of the URL.

pages/[username]/dashboard -> http://[hostname]/:username/dashboard

In the above example, a username can be a dynamic value. It can be used to generate user-specific static pages.

API Routing

Next.js provides a way to directly create API. You can consume these API from anywhere inside your project. Creating an API is pretty much straight forward, you just have to create a file inside pages/api and it gets mapped to api/*. It won't get exposed on the client-side and will only be used on the server-side. API routing is very much similar to page routing. Let's see how this works.

Index Routing

The router will automatically route files named index to the root of the directory.

pages/api/blog/index.js -> http://[hostname]/api/blog

Nested Routing

Now suppose you want to create a deeply nested API. You can create nested folder structure files and it will get mapped in the same way.

pages/api/users/blog/create.js -> http://[hostname]/api/users/blog/create

Dynamic Routing

You can use brackets to define the dynamic routes for your API.

pages/api/blog/[slug].js -> http://[hostname]/api/blog/hello

In the above example, the slug can take any value. You can get this value inside your code.

pages/api/blog/[...slug].js -> http://[hostname]/api/blog/hello or http://[hostname]/api/blog/hello/world

The above example is to catch all routes. All the routes with api/blog/* get routed to this.

pages/api/blog/[[...slug]].js -> http://[hostname]/api/blog or http://[hostname]/api/blog/hello or http://[hostname]/api/blog/hello/world

You can't use catch-all routes with the directory. Eg: pages/api/blog/[[..slug]]/comments.js will give you Error: Catch-all must be the last part of the URL.

The above example is for optional catch-all routes. Basically it makes the slug optional.

Predefined routes take precedence over dynamic routes. So if you have pages/api/blog/create.js and pages/api/blog/[slug].js then pages/api/blog/create.js gets mapped to http://[hostname]/api/blog/create and pages/api/blog/[slug].js gets mapped to http://[hostname]/api/blog/abc

There is no way to specify which REST calls are allowed on an API route, you have to handle them from your handler code.

Now suppose you want to create api/blogs/:slug/comments/:commentId. People you are familiar with the concept of resources in REST know there are use cases where we might need a nested resource.

pages/api/blogs/[slug]/comments/[commentId].js -> http://[hostname]/api/blogs/:slug/comments/:commentId

Conclusion

Using Next.js routing is pretty much easy and straightforward and has very less overhead. It covers most of the use cases, I really couldn't think or find a use case which you won't be able to solve it.

If you liked this post please share it with others so that it can help them as well. You can tag me on Twitter @imumesh18. Also please follow me here and on Twitter for future blogs which I write over here

Linux Commands: watch

Umesh Yadav — Sun, 01 Nov 2020 20:08:48 +0000

watch is used to run a command repeatedly and display its output and error at regular intervals. This is useful when you want to run a command repeatedly and observe its output getting changed over a period of time. By default, the command is run every 2 seconds and the watch will run until interrupted(Ctrl+c). watch command can be used to check the status of service, the uptime of machine, disk usage, etc.

Syntax

watch [options] command

Let's see the watch command in the action. We will run watch uptime to check the uptime of the machine.

As you can see in the above image after you run the watch command it will start running in the fullscreen mode. On the top left corner, you can see the refresh interval(Every 2.0s: uptime) which is two seconds as we haven't specified any interval, it takes the default one.

Let's see what all options we can provide to the watch command.

-d, –differences: This option highlights the values which have changed between successive updates. You can also pass the -d=permanent option to make the changes highlighted even if they have changed at least once.

We will just run watch -d uptime. The output looks something like below.

Let's try to run watch -d=permanent uptime. Now the values which are changed at least once stay highlighted throughout.

-n, –interval seconds: This option specifies the refresh interval. It can't be quicker than 0.1 seconds.

We can change the refresh interval using watch -n 1 uptime

-p, --precise: This option makes sure the update fractional seconds stays (nearly) the same, as opposed to normal mode.

We can check this command by running watch -p date +"%T.%s". Observe the time with and without the precision option you should see that with the precision flag the time difference is pretty much the same for each refresh while that's not true for normal mode.

-t, –no-title: This option is used to turn off the header showing the interval, command, and current time at the top of the display, as well as the following blank line.

-b, –beep: This option will give beep if the command has a non-zero exit.
-e, --errexit: This option freeze updates on command error, and exit after a keypress.
-g, --chgexit: This option exit when the output of the command changes.
-h, --help: Display help text and exit.
-v, --version: Display version information and exit.

Advance Usage

You can also watch the output of multiple commands.

$ watch "[command] | [command]"

For example, the following command will print all the node process running on my machine. It uses ps to output the process and then utilizes grep to filter the node process.

Conclusion

watch is a very powerful Linux command which you can use to monitor the output of anything you want to do repeatedly. I have used watch to check daemon status while deploying service in production and while debugging crashing services in production. Do let me know how you are using the watch.

If you liked this post please share it with others so that it can help them as well. You can tag me on Twitter @imumesh18. Also please follow me here and on Twitter for future blogs which I write over here

Linux Commands: env

Umesh Yadav — Thu, 29 Oct 2020 19:27:02 +0000

env can be used to print the environment variables or pass environment variables to a utility/command without setting them in the current shell session.

Let's run env without any argument and see what happens.

It simply prints all the environment variables in the current session. You can also run env with various options.

-i: Runs a command with only specified environment variables and clears all the environment variables already set.
-u: Runs a command by removing the specified environment variables while keeping the other values intact.
-v: Prints the verbose output for each step of processing done by the env utility.

Let's try to print the environment variables inside a python script by passing it via the env. You can choose to run in any language of your choice.

import os

print(os.getenv('BLOG'))
print(os.getenv('PATH'))

We will use env -i /usr/local/bin/python3 main.py to run our python script. You can't use the simple python command to run the code as the PATH value which specifies the binary path for executable will also be reset. The output should be as below.

$ env -i /usr/local/bin/python3 main.py
None
None

As you can see in the above output that all the values are set to None because we have used the option -i. Even the system PATH variable is set to None.

Now let's run this env -i BLOG=hashnode /usr/local/bin/python3 main.py in the terminal.

$ env -i BLOG=hashnode /usr/local/bin/python3 main.py
hashnode
None

In the above output, you can see that we have set the BLOG=hashnode and it gets printed in the output.

You can also use -u to unset certain environment variables.

import os

print(os.getenv('HOME'))
print(os.getenv('SHELL'))

We will use this env -u HOME /usr/local/bin/python3 main.py command to run the above code. Its output looks like this. You can see that HOME doesn't get printed while the SHELL value does.

$ env -u HOME /usr/local/bin/python3 main.py
None
/bin/zsh

To print more verbose output of the env command and it's step. You can pass -i as an option.

$ env -v -u HOME /usr/local/bin/python3 main.py
#env unset:     HOME
#env executing: /usr/local/bin/python3
#env    arg[0]= '/usr/local/bin/python3'
#env    arg[1]= 'main.py'
None
/bin/zsh

Conclusion

You can use env in various scenarios like while debugging local code as well as some production issues to see the effect of each and every environment variable on your code or service.

If you liked this post please share it with others so that it can help them as well. You can tag me on Twitter @imumesh18. Also please follow me here and on Twitter for future blogs which I write over here

Linux Commands: printenv

Umesh Yadav — Sun, 18 Oct 2020 18:39:15 +0000

printenv is used to print out the environment variables. Environment variables are a common form of setting global values across a terminal session. Environment variables can be set by the systems, automation scripts, or by the user.

You can print your all environment variables using just printenv.

If you want to print the value of a specific variable you can use printenv <variable name>.

Conclusion

If you are ever stuck and want to know what was the value of the environment variable you can use it. I have found myself using this quite often when debugging issues in production or on my local machine.

If you liked this post please share it with others so that it can help them as well. You can tag me on Twitter @imumesh18. Also please follow me here and on Twitter for future blogs which I write over here

Linux Commands: du

Umesh Yadav — Sat, 17 Oct 2020 19:10:02 +0000

du is used to display disk usage statistics. It's a simple tool to calculate and print the disk space used by files or directories. Let's see how to use it.

You can simply type du or du <directory-name> in your terminal and it will print the size.

In the above example, it gives you the size of the directory. The number 8 represents the size in bytes.

To print each and every file and their respective size we will need to use the du -a command. If you just want to print the sizes in the root of the directory and don't want to go deep inside each directory you can use du *.

You can apply various options to manipulate the output.

-a: Display an entry for each file in a file hierarchy.
-c: Display a total size.
-d: Singnifes till what level deep this command should print the files.
-h: Human-readable output.
-g: Display the size in Gigabytes.
-k: Display the size in Kilobytes.
-m: Display the size in Megabytes.

Practical Usage

Suppose you want to print the top files that are consuming the most disk space. You can pipe the output of the du to sort and then print the head.

Conclusion

I have been extensively using this command to resolve production issues. Whenever we have an issue related to space on VM boxes I use this command to figure out what is exhausting the space. So it comes in handy in solving the real-world problem faced while debugging production issues which is related to disk space.

If you liked this post please share it with others so that it can help them as well. You can tag me on Twitter @imumesh18. Also please follow me here and on Twitter for future blogs which I write over here

Fathom vs Plausible: Which privacy-focused Google Analytics alternative should you use?

Umesh Yadav — Thu, 15 Oct 2020 18:30:13 +0000

Today 84% websites use Google Analytics on their website to track user activities. The reason for its popularity is that it's free(not literally), I mean who doesn't love free stuff. But there is always a cost and that cost in the case of Google Analytics is data, they simply take this data from these websites and use it for their ads.

Fathom and Plausible are privacy-focused web analytics. They are simple and clutter-free. They don't store unnecessary data regarding the user, also they don't use cookies or other mechanisms to identify the user. So now we know what these two are, let's compare them and see what each of them offers. I will try to cover most of the points if not all so that you will get a good idea of what to look for when choosing between them.

UI/UX

Both of them offer a single page simple and minimalistic analytics page. You can see all the basic things by just scrolling up and down. But plausible has few extra features like UTM and referrer for tracking custom campaigns. Also recently plausible launched the filter option where you can filter the analytics-based upon the country, referrer, etc. Fathom is working on v3 of their dashboard which will add more features, they haven't officially launched it yet but they have been working on pretty cool stuff. This one was very close probably will change once fathom launches their v3.

Winner: Plausible

Script size and speed.

Both of them have a lightweight script that you can add to their website. Fathom script is 2KB and Plausible one 938B. If you compare them with Google analytics, plausible is 45x smaller, and fathom is 22x smaller. The smaller size of these scripts results in your website loading faster as compared to google analytics. But if you look at the size here fathom is 2x bigger than plausible.

P.S: I came to know that plausible doesn’t have a globally available CDN network and their script takes almost 203ms whereas fathom takes only 7ms.

Winner: Fathom

Pricing

Fathom starts at $14 for 100k page views. Whereas plausible starts at $4 for 10k pageviews. This is something I like about plausible that they are making it affordable for the hobbyist and developer community who doesn't have much traffic right now but want to make sure their user's privacy is intact. Other than this both of their pricing almost the same as you go higher not much difference and both of them offer a custom plan if you don't find anything suitable.

Winner: Plausible

Reliability and Infrastructure

Fathom has been pretty much open about its infrastructure. Most of their components are hosted on AWS. They make sure the services are running on an industry-grade machine. Also recently they announced they will moving their database to AWS DyanamoDB. Also, they are moving stats to elastic search. Plausible infrastructure is not known at the time of writing this blog, but I would know what they use. But overall they seem to be handling the current traffic pretty well. Also if you look at their status dashboard they seem to have very frequent incidents every month. Their uptime stands at 99.98% which pretty much huge.

Winner: Fathom

GDPR, CCPA, and PECR Compliant

Both of them are GDPR, CCPA, and PECR compliant because they don't collect and store user data.

Winner: tie

Ad-Blockers

Both of them kind of failed to avoid uBlock origin. But once I moved to the custom domain they both started to work. So no worries over there.

Winner: tie

	Fathom	Plausible
UI/UX	Simple, minimalistic, and intuitive. But lacks some features like filtering and UTM tracking	Almost identical to fathom but have UTM tracking and filtering based upon country, etc.
Script Size	2.0KB	938B
Pricing	Starts at $14 for 100k page views. Has various other options	Starts at $4 for 10k page views. Affordable for the hobbyist.
Reliability and Infrastructure	hosted on AWS. They have globally available CDN for serving their scripts.	They have 99.98% uptime. Also, their servers and are located completely in the EU.
GDPR, CCPA and PECR Compliant	yes	yes
Ad-Blockers	Yes and No. Yes if you are using a custom domain and No if fathom domain. (tested on uBlock origin)	Yes and No. Yes if you are using a custom domain and No if fathom domain. (tested on uBlock origin)
Reports Email	Weekly	Both weekly and monthly
Goal Tracking	Yes	Yes
Share Dashboard	You can share them as publicly accessible or make a private URL	You can share them as publicly accessible or make a private URL
Open Source	It was open source till v1 but then the creators decided to make it closed source because there was very less contribution from the community	Open source and they recently changed their license AGPL

Conclusion

If we see the above comparison then Plausible seems to be a winner for people who want cheap entry point and privacy-focused web analytics whereas if you want more reliable and battle-tested you should go with fathom. It's not because plausible is not battle-tested and doesn't offer reliability but fathom has better elasticity and resilience to handle the surge in traffic as they use autoscale to handle the surge in load. But in my opinion, they both are the winner. They both are trying to revolutionize the web-analytics industry which was a monopoly for Google. I am pretty much excited about what these two will do in the future.

If you liked this post please share it with others so that it can help them as well. You can tag me on Twitter @imumesh18. You can also follow me for future posts.

P.S: The blog includes my referral link for fathom🙈.

How to Implement HTTP Basic Auth in Go(Golang)

Umesh Yadav — Tue, 13 Oct 2020 08:19:18 +0000

Today the web is full of people using various platforms. Every platform has its own authentication mechanism to identify users specific to their platform. Authentication helps your application to know that the person who sent a request to your application is actually who they say they are. Today we will learn how to implement one of the most simple and easiest authentication mechanisms, Basic Authentication. This tutorial will walk you through how can you implement a Go server which implements basic authentication.

Basic Access Authentication

Basic authentication is a simple authentication scheme built into the HTTP protocol. It doesn't require cookies, session identifiers, or login pages. The client sends HTTP requests with the standard Authorization header that contains the word Basic followed by space and a base64-encoded string username:password.
For example, the header for username test and password secret will look something shown below.

Authorisation: Basic dGVzdDpzZWNyZXQ=

This diagram outlines the flow of basic auth between client and server.

If the client doesn't provide the Authorisation header the server returns 401 Unauthorised status code and provides information on how to authorize with a WWW-Authenticate response header containing at least one challenge.
If the client provides the Authorisation the server simply responds with 200 OK and the resource(In this case it's a simple welcome message but it can be any information.)

After authenticating the server can perform various other checks like whether the client has access to the resource requested etc and respond to the client accordingly. In the above example, we are simply returning a welcome message without these checks.

Creating the HTTP server

Let's create a simple HTTP server in Go.

In case you want to learn about it you can refer to my other blog Create Golang HTTP Server in 15 Lines

package main

import (
    "fmt"
    "log"
    "net/http"
)

func greeting(w http.ResponseWriter, r *http.Request) {
    w.Header().Add("Content-Type", "application/json")
    w.WriteHeader(http.StatusOK)
    w.Write([]byte(`{"meesage": "welcome to golang world!"}`))
    return
}

func main() {
    http.HandleFunc("/", greeting)
    fmt.Println("Starting Server at port :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

Now we will add a check for basic auth in the greeting handler.

func greeting(w http.ResponseWriter, r *http.Request) {
    w.Header().Add("Content-Type", "application/json")
    username, password, ok := r.BasicAuth()
    if !ok {
        w.Header().Add("WWW-Authenticate", `Basic realm="Give username and password"`)
        w.WriteHeader(http.StatusUnauthorized)
        w.Write([]byte(`{"message": "No basic auth present"}`))
        return
    }

    if !isAuthorised(username, password) {
        w.Header().Add("WWW-Authenticate", `Basic realm="Give username and password"`)
        w.WriteHeader(http.StatusUnauthorized)
        w.Write([]byte(`{"message": "Invalid username or password"}`))
        return
    }

    w.WriteHeader(http.StatusOK)
    w.Write([]byte(`{"message": "welcome to golang world!"}`))
    return
}

If you look at the above carefully, you will see we are using the r.BasicAuth() method to extract the username password. Here is the method signature func (r *Request) BasicAuth() (username, password string, ok bool).

So the method simply checks if the authorization header is not present it returns an empty username and password with ok as false else it decodes the base64 string and splits them by: and returns the username and password along with ok as true.

After that, we check if the username and password provided by the client are present in our system or not. I have created a simple map of username and password. Here is the code for it.

var users = map[string]string{
    "test": "secret",
}

func isAuthorised(username, password string) bool {
    pass, ok := users[username]
    if !ok {
        return false
    }

    return password == pass
}

Now let's take a look at the entire example.

package main

import (
    "fmt"
    "log"
    "net/http"
)

var users = map[string]string{
    "test": "secret",
}

func isAuthorised(username, password string) bool {
    pass, ok := users[username]
    if !ok {
        return false
    }

    return password == pass
}

func greeting(w http.ResponseWriter, r *http.Request) {
    w.Header().Add("Content-Type", "application/json")
    username, password, ok := r.BasicAuth()
    if !ok {
        w.Header().Add("WWW-Authenticate", `Basic realm="Give username and password"`)
        w.WriteHeader(http.StatusUnauthorized)
        w.Write([]byte(`{"message": "No basic auth present"}`))
        return
    }

    if !isAuthorised(username, password) {
        w.Header().Add("WWW-Authenticate", `Basic realm="Give username and password"`)
        w.WriteHeader(http.StatusUnauthorized)
        w.Write([]byte(`{"message": "Invalid username or password"}`))
        return
    }

    w.WriteHeader(http.StatusOK)
    w.Write([]byte(`{"message": "welcome to golang world!"}`))
    return
}

func main() {
    http.HandleFunc("/", greeting)
    fmt.Println("Starting Server at port :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

Let me make a curl request and show it to you the output.

$curl -v http://localhost:8080
*   Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
> GET / HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.64.1
> Accept: */*
> 
< HTTP/1.1 401 Unauthorized
< Content-Type: application/json
< Www-Authenticate: Basic realm="Give username and password"
< Date: Sun, 11 Oct 2020 12:20:23 GMT
< Content-Length: 36
< 
* Connection #0 to host localhost left intact
{"message": "No basic auth present"}* Closing connection 0

if you see the above message you will realize I made the call without the Authorisation header is unauthenticated.

$ curl -v -u test:secret http://localhost:8080
*   Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
* Server auth using Basic with user 'test'
> GET / HTTP/1.1
> Host: localhost:8080
> Authorization: Basic dGVzdDpzZWNyZXQ=
> User-Agent: curl/7.64.1
> Accept: */*
> 
< HTTP/1.1 200 OK
< Content-Type: application/json
< Date: Sun, 11 Oct 2020 12:21:15 GMT
< Content-Length: 39
< 
* Connection #0 to host localhost left intact
{"message": "welcome to golang world!"}* Closing connection 0

Now after providing the correct username and password it returns success and the body with the message.

If you open the localhost:8080 in the browser it will give you a pop-up window to enter the username and password. This happens because of the header Www-Authenticate: Basic realm="Give username and password".

Create a client

To create the client we use func (r *Request) SetBasicAuth(username, password string) to set the header. It basically takes the username and password then encodes it using base 64 and then add the header Authorisation: Basic <bas64 encoded string>. Voila, you have successfully added the basic auth to your client request. Let me show you the full code.

package main

import (
    "fmt"
    "io/ioutil"
    "log"
    "net/http"
)

func main() {
    req, err := http.NewRequest(http.MethodGet, "http://localhost:8080", nil)
    if err != nil {
        panic(err)
    }

    req.SetBasicAuth("test", "secret")
    req.Header.Add("Content-Type", "application/json")
    req.Close = true

    client := http.Client{}
    response, err := client.Do(req)
    if err != nil {
        panic(err)
    }

    if response.StatusCode != http.StatusOK {
        panic("Non 2xx response from server, request" + response.Status)
    }

    defer response.Body.Close()
    body, err := ioutil.ReadAll(response.Body)
    if err != nil {
        panic(err)
    }

    log.Print(string(body))
}

I am using panic here to handle the error but when you are writing this for a production handle it gracefully either by returning it or by logging it.

If you want to check out the full code you can go here.

Conclusion:

Creating a client and server with basic auth support for Go is pretty easy. You don't even need an external library, the inbuilt support is more than sufficient to implement it. Also to better improve this you can move the basic auth logic into middleware and then you can attach that middleware to any handler which requires the basic auth. Just a warning basic auth is not the most secure mechanism for authentication for public-facing API.

If you liked this post please share it with others so that it can help them as well. You can tag me on twitter @imumesh18. Also please follow me here and on twitter for future blogs which I write over here

Linux Commands: wc

Umesh Yadav — Sun, 11 Oct 2020 18:53:11 +0000

wc stands for word count. It is used to display the number of lines, words, characters, and byte for a file or input received via pipe(|).

the output shown above is explained below.

1 - Number of lines.
2 - Number of words
14 - Number of bytes

There are four options that can be used with wc.

-c: The number of bytes in each input file is written to the standard output.
-l: The number of lines in each input file is written to the standard output.
-m: The number of characters in each input file is written to the standard output. If the current locale does not support multi-byte characters, this is equivalent to the -c option.
-w: The number of words in each input file is written to the standard output.

Let's see these options in action.

This will count the lines.

$ wc -l hashnode.txt
       1 hashnode.txt

This will count the words.

$ wc -w hashnode.txt
       2 hashnode.txt

This will count the number of bytes.

$  wc -c hashnode.txt
      14 hashnode.txt

But sometimes you have a file with multi-byte(non-ASCII charsets). For example, the Unicode character where one character is represented by multiple bytes.

If you see this carefully, we added an emoji character to the end of the file. Both -c and -m output differ from each other because of that.

You can also pass more than one file to the wc as input.

Advance usage.

You can also apply the wc on the output of other commands.

$ ls -al | wc
     118    1065    7139

Conclusion

wc is very helpful and can be used quite frequently. Let me know in comment how you use it.

If you liked this post please share it with others so that it can help them as well. You can tag me on twitter @imumesh18.

Linux Commands: pwd

Umesh Yadav — Thu, 08 Oct 2020 18:56:52 +0000

pwd is one of the most helpful commands for linux newbie. Whenever you are lost just type it in your terminal and you will find where are you exactly. Let me show you how you can do it.

You can see it tells me my current working directory. Usually, there are two ways you can invoke this command. One way you already saw in the above example. The other way is through /bin/pwd they are almost the same. But pwd is your shell in-built command while /bin/pwd is calling the binary version of that. You can always verify which pwd is getting invoked by using which or type command shown below.

pwd has two flags one is -L and -P.

-L: Display the logical current working directory.
-P: Display the physical current working directory (all symbolic links resolved).

Let's see them in action and understand what exactly one does.

We will create a symbolic link of folder /var/log as h in your home directory and move to it.

$ ln -s /var/log h
$ cd h

We will print the working directory using the logical flag pwd -L. It will print the exact working directory from the environment even if it contains symlinks.

$ pwd -L
/Users/umesh/h

After that we will print the working directory using physical flag pwd -P. It will print actual physical current working directory by resolving all symbolic links.

$ pwd -P
/private/var/log

Lastly we will check what happens when we run just pwd. From the output, it's pretty much clear that pwd takes -L as the default flag if no options are provided.

$ pwd
/Users/umesh/h

Conclusion

I will be writing more on these simple and yet useful commands in my coming blog. Linux commands look simple and probably you remember it but if you know a bit in-depth about them they can come in handy.

If you liked this blog please feel free to share with others, if you are sharing it on twitter please tag @imumesh18 . If you are interested in more of these please subscribe to my newsletter.

How to change the port of a Next.js application

Umesh Yadav — Wed, 07 Oct 2020 18:48:17 +0000

I have been building my personal website using Next.js. By default, Next.js server runs on port 3000 which is good but sometimes you want to run the server on a different port maybe because you already have a service running on it, or maybe it's not your favorite port(which in my case is 8080). So, let's see how can we change it.

Create a next.js project.

Creating a next.js project is pretty simple and straight forward. Just simply run the below command in your terminal.

Assumption: You already have yarn or npm install on your local.

npm create-next-app
# or
yarn create next-app

You can change the port using the following command.

yarn dev -p 8080
or
npm run dev -p 8080

visit http://localhost:8080/ to see your website up and running. This command is temporary and will run the server on 8080 whenever you enter the above command. But what if you want to make this permanently.

Change the Port Permanently

Once you have your project setup check the package.json file in the main folder.

{
  "name": "hashnode-blog-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.5.3",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

Now what we need to change here is in the dev key inside scripts.

Change it to "dev": "next dev -p 8080", from "dev": "next dev",

Now run the below command to run the server

yarn dev
or
npm run dev

visit the http://localhost:8080/ you should be able to see the website. Something like this.

Linux Commands: ls

Umesh Yadav — Tue, 06 Oct 2020 11:16:45 +0000

ls is the Linux command to list the content of a directory. You can list all the files and folders inside a directory. Let's try it in your terminal.

You can pass arguments to ls to change the output. Let's take a look at ls -al.

It has more detailed information as compared to ls. It uses two flags l and a. a is used to show all the files even if the files are hidden(Hidden files are the one which starts with a dot at the beginning). l is used to show details about each file and folder. Let me explain to you what exactly are those. We will take one of the lines from output.

drwxr-xr-x  12 umesh  staff   384 Dec 11  2018 .git

drwxr-xr-x: This defines the permission of the file.
12: It tells the number of links to that file.
umesh: This signifies the username of the owner of the file
staff: This signifies the group of the file.
384: file size in bytes.
Dec 11 2018: file created/updated datetime.
.git: filename.

There are a bunch of flags available that can be used to modify the output of the ls command. I am listing a few of them down below try them out in your terminal and let me know your experience and which one is your favorite in the comments.

l - List files and directories in the long format
a - Include directory entries whose names begin with a dot (.).
d - Directories are listed as plain files (not searched recursively).
i - For each file, print the file's file serial number (inode number).
G – Enable colorized output.
h – List the size of the files and directories in Human Readable format.
S - Sort files by size

If you liked this blog please feel free to share with others, if you are sharing it on twitter please tag @imumesh18 . If you are interested in more of these please subscribe to my newsletter.