DEV Community: Deepak Ahuja 👨‍💻

Get Control of Your Git History

Deepak Ahuja 👨‍💻 — Sun, 27 Sep 2020 13:44:29 +0000

We all have been familiar with the following kind of git history:

The following things immediately makes it categories into the "bad" category of git history:

Bad commit messages
Large commits (containing unrelated changes)
Small commits (Scattered liked changes)

A clean readable history tells a story of how a project is built. It makes it easier to take control of each step done along the way and when needed alter it without much chaos. A cleaner history also allows us to generate change notes, automate the boring stuff and so on. Each commit should be a working copy of the project.

If you have small related commits, we can "squash" them into one
If you have a large commit we can split that commit into bunch of smaller commits that represent a logical changeset
If you have a bad commit message, we can "reword" it
If commits are not needed, we "drop" them
If contents of a commit needs to be modified, we can "amend" it We'll look at knowledge needed to do each of these.

Let's git started:

Undo the commit

The commit that you want to undo could be at either two places:

Commit is already pushed (and being consumed by others)

In this case we can use the following command:

git revert HEAD

This will create a new commit on top of old commit, that would contain the changes opposit of last commit.

an option --no-commit that would not auto commit, but introduce change in staging area.

Commit is not pushed (only exists in local repository)

git reset --hard HEAD~1 // Go back in time, throwing away changes

Here HEAD~1 represents the target commit to goto, i.e. one step back from HEAD. The following three options are available with reset

--soft (removes the commit and bring it back to staging area, working directory untouched)
--mixed (removes the commit from staging area (i.e. unstage) to working directory, the default option)
--hard (removes the commit completely, even from working directory)

Recover a lost commit

With git we don't really lose a commit unless it is garbage collected. There's a magic command to see all commits ever created in history by:

git reflog

Basically wherever your HEAD has traveled inside of Git, you can find it inside of the reflog. The reflog is an ordered list of the commits that HEAD has pointed to: it's undo history for your repo. The reflog isn't part of the repo itself (it's stored separately to the commits themselves) and isn't included in pushes, fetches or clones; it's only local.
So let's say you have just reset the HEAD to point to a wrong commit, did an unexpected rebase or accidentaly deleted a branch. You can recover back your work using the history given in this command.

We now just git checkout using the unique identifier of each commit or cherry-pick them in our current branch. If we checkout the commit we can again reset out head back to it.
This command can be used with branches, or even using time as a filter like

git reflog HEAD@{1.day.ago}

Timed reflog

The time filter can be passed to any git command
The time filters supported are:
a. 1.minute.ago
b. 1.hour.ago
c. 1.day.ago
d. yesterday
e. 1.week.ago
f. 1.month.ago
g. 1.year.ago

git diff master@{0} master@{1.day.ago}

This command will diff the current master branch against master 1 day ago. This is very useful if you want to know changes that have occurred within a time frame.

Change the last commit

Either you want to change contents of last commit or just change the commit message, we can use the following git command:

git commit --amend

To add a change in last commit

Make your required changes
Stage your changes
git commit --amend

To add a file not included in last commit

Stage the file
git commit --amend

To delete a file accidently included in last commit

git reset --mixed HEAD~1
git clean -fd (remove untracked files)
git commit -m "new commit message"

Change a commit earlier in history

To edit a commit which is older in history you can use git rebase (only if your commits are not being consumed anyone else yet)

git rebase -i HEAD~2

Here, HEAD~2 is the target till when you want to replay the history. You can also put the commit id just before of the one you need to change.
Since commits are immutable, rebase would re-create the commits.
This command would open a script in a text editor like this:

The latest commit is at the bottom.
You can change the script as per need by replacing word "pick" to action needed on the commit. Here add "edit" to the third last commit as this is the commit that i want to change

Now i will save and exit the file. Git will stop at the desired commit and we can perform our changes and use the command "git commit --amend" at the place.

Once this is done, all we need to do is continue the rebase process using:

git rebase --continue

The rebase process would complete and you can see the commit history again. I changed the commit message of commit marked for edit.

git log

Thus git rebase allows to replay the whole git commit history, and do separate action needed on each commits. This is also used while deleting, re-ordering or squashing few commits into one similarly.

Splitting the commit

Assume you have the following git history:

As you can see in the second commit from top, "cca3a22 update jquery version and TnC"
Updating TnC and jquery version are two unrelated things that shouldn't exist together in commit. So we should split this commit into two separate commits.

So grab it's commit id and start rebasing from it's parent commit:

git rebase -i 44da2c9

Mark your commit from "pick" to "edit"

Now rebase would stop at this commit and will allow you to split the commit into separate commits.

HEAD currently points to the combined commit, you can use reset command to undo the changes from this commit using either soft or mixed.

git reset --mixed HEAD~1

This would bring contents of the commit to working directory. Now we can commit these two things separately.
After the two commits are done, you can continue and finish the rebase.

git rebase --continue

After this, the new history would look like:

As you can we have succesfully split our commit into two separate commits.

Thanks for making it towards the end of the post.

Please leave feedback if you learnt something new or share it with someone who may benefit from it. Drop me a hello on twitter or checkout my other work in the profile. :)

A Docker Free Intro to Containers (Write Your Own Containers and Images)

Deepak Ahuja 👨‍💻 — Sun, 24 May 2020 18:56:31 +0000

Containers are collection of Operating System technologies that allows you to run a process. Containers are themselves a very old technology, but after introduction of Docker and the software system they built to create, deploy and ship containers, it has made containers to be opted widely. We will look at atomic units needed to build a container without docker so that you can get past the definitions like "light weight VM", "something to do with docker", "poor man's virtualization".

So what technologies do we need to create our own containers?

Well, let's first look at what an OS does for us essentially. An OS runs processes, an entity which represents the basic unit of work to be implemented in the system. There is a Process Control Block which is a table maintained by OS in which it identifies each process with the help of a special number known as PID (process ID). It also has status of process along with privileges, memory information, environment variables, path, child processes etc. Every process has a certain root directory in which process executes. You can actually find this information in a folder called /proc in the file system or by running a command:

ps aux

Here's what it looks like in my machine:

There's a lot more to each of this, but we're gonna stay focused on high level overview of Linux systems.

Now if we are able to create a process and isolate it such that it run somewhere else too without installing the whole operating system, we can call it a container. To isolate this process, i.e. make it impossible for it to look outside it's own folder, we need to "jail" it. We can do it using the following command:

chroot /path/to/new/root command

It will change the root folder for this process and it's children, hence the process will not be able to access anything outside this folder. let's follow some steps as super user:

mkdir my-new-root
chroot my-new-root bash

Here we have created a new folder and then using chroot command to “change the root” and run command bash in it.
You should see some error like bash is not found or command not recognized. Refer following screenshot:

Since command bash is running inside my-new-root and it cannot access anything outside it's new root, it is unable to find program that runs the bash shell.
To fix this, use ‘ldd’.
ldd prints the shared other objects required by an program to run.

 ldd /bin/bash

This command outputs dependencies for a certain program needed to run:

let's copy these in their respective folders inside my-new-root.

mkdir my-new-root/{bin,lib64,lib}
cp /bin/bash my-new-root/bin
cp /lib/x86_64-linux-gnu/libtinfo.so.5 /lib/x86_64-linux-gnu/libdl.so.2 /lib/x86_64-linux-gnu/libc.so.6 my-new-root/lib
cp /lib64/ld-linux-x86-64.so.2 my-new-root/lib64

Here we have created 3 folders in which shared libraries that are required by bash reside (under lib and lib64). Then we are copying those objects into them.

Now if we run chroot my-new-root bash it will open up a bash shell inside my-new-root. You can verify it by pwd it should output /

Why don't you try enabling ls command in this too?

Even though our new root cannot access files outside, it can see still running processes on host container. This won't work for us if we want to run multiple containers on the same host. To achieve true isolation, we also need to hide the processes from other processes. If it’s not done then one container can kill PID of process, unmount a filesystem or change network setting for other containers. Each process lie in one of 7 namespaces defined in UNIX world. We can use a command called unshare to see those:

We can see the important 7 namespaces above. We can use unshare command to restrict those namespaces.

unshare --mount --uts --ipc --net --pid --fork --user --map-root-user chroot my-new-root bash

Now our new root has restricted access to processes from any of these namespaces. They can now get duplicate PID too! That's true isolation.

One last thing left, namespace don't help us limit physical resources like memory limits. For them we have cgroups, which essentially is a file in which we can collect PIDs and define limits for cpu, memory or network bandwidth. The reason it is important because one container can starve the resources (like by fork bomb attack) of host environment for use by other containers.

Note: Windows operating systems are not vulnerable to a traditional fork bomb attack, as they are unable to fork other processes.

Here's how we'd do it (Don't worry about commands, we're just learning things that containers are made from)

# outside of unshare'd environment get the tools we'll need here
apt-get install -y cgroup-tools htop

# create new cgroups
cgcreate -g cpu,memory,blkio,devices,freezer:/sandbox

# add our unshare'd env to our cgroup
ps aux # grab the bash PID that's right after the unshare one
cgclassify -g cpu,memory,blkio,devices,freezer:sandbox <PID>
# Set a limit of 80M
cgset -r memory.limit_in_bytes=80M sandbox

You can learn more about cgroups here

That's it! Now we have created our own container.

Let's create images without docker

Images

Images are essentially the premade containers packages as a file object.
We can use the following command to package this container as a compressed file:

tar cvf dockercontainer.tar my-new-root

Now we can ship it somewhere else and we would create a folder to decompress it:

# make container-root directory, export contents of container into it
mkdir container-root
tar xf dockercontainer.tar -C container-root/

# make a contained user, mount in name spaces
unshare --mount --uts --ipc --net --pid --fork --user --map-root-user chroot $PWD/container-root ash # change root to it
# mount needed things
# change cgroup settings
# etc

That's it? Means we can go around and use containers like this. Not really, docker does a lot more than this for you. It provides us an awesome registry of pre baked images, networking, import, export, running, tag, list, kill these images etc.

Benefits of Docker Containers

Runtime: docker engine allows us to use different packages compiled and run same across various OS. It's runtime provides good workflow benefits too
Images: Great portability, image registry, image diffs
Automation: Your containers can flow through local computer to jenkins all with a file which contains config. It also enables caching and multi stage builds for containers. Hence image builds are very fast

An example of above process written in go programming language can be found here and it's accompanying video.
We'll look at all of this in coming posts. Thank you for making it to end of the post.

Please share it if helped you learn something new. You can drop me a hello on twitter. Take care :)

Get a Taste of Microservices Architecture and Communication

Deepak Ahuja 👨‍💻 — Sun, 17 May 2020 15:36:14 +0000

Building applications in Monolithic architecture includes a client making request, server (with router, authorization middle-ware, some set of features, business logic) and a database. The whole App can be put into place using these. The build artifact is a single executable hosted on a single VM with consistent a technology stack.

In a Micro service, this set makes only a single feature for the app. They work independent of each other without any direct dependency on each other's database. If any of the service is down, the app still works. The services are small, autonomous, and independently deploy-able.

Monolithic Vs Microservice Arcitecture

Monolithic can work well for small applications but even a single line code change means downtime, and it cannot be easily scaled horizontally (add new services) and can only be scaled vertically (means more processing power).

Benefits of Microservices

Small Services It can be owned by a team, easier to understand and rewrite.
Technology Choice Adopt new technology, use right tool, Standardize where it makes sense.
Individual Deployment It has Lower risk of app failure, no downtime, frequent updates
Scaling It can scale services easily, cost effective

Why do all the hard work to create many different code bases and use heterogeneous technologies to create an app?

There are many challenges in micro services too, for example the communication with each other. The interactions are complex if not avoided can be inefficient due to web of requests b/w services.
In micro services we follow two rules strictly:

Each service gets it's own database (if it needs one) This is called Database-Per-Service pattern, we do it because if we use only single, and that db is down, the whole app comes down, the Single Point of Failure needs to be avoided, and secondly is scalability, it is a lot easier to increase capacity and throughput of databases as per needs of each service.
Services will never, ever reach into another services database If anything ever goes wrong with database of dependent service, other service also gets lost, secondly, If schema of one database is altered, both service would need to be updated. we can also use different types of databases best suited for specific needs.

Let's try to visualize how would it work and find solutions to raised challenges,
Here's an example of the app with these 3 features:

Users can sign up
User can submit posts
User can comment on each post

But now if we want to add another code that can list comments for post of a particular user:

we need user from users collection
we need to find posts of that user
we need to fetch comments of that post

In monolithic server we can reach out to each database and fetch required information. Here's how it would look:

But this pattern is very inefficient, we'll see in a while.
By going by Database-Per-Service pattern in Micro services, We can add another service that can do this work for us:

How will it reach out to three separate databases of different services? This is not allowed in Database-Per-Service pattern. To figure this out we will understand how to establish communication between services.

There are two general strategies to establish a communication strategy between services:

Synchronous Communication Services communicate with each other using direct requests
Asynchronous Communication Services communicate with each other using events

Note: These are not as same JavaScript's definition of these terms.

Example of Sync Communication:

One service can communicate with another service using a direct request, this may not need to be HTTP, it could be any type of request. In our case to request comments of a post of a user, The service D will make 3 different requests to each of other service.

Advantages:

Easy to reason about and add new service straightforward
New services don't need a database

Disadvantages:

The entire request is only as fast as it's slowest request. For eg: if request 1 takes 10ms, request 2 takes 10ms but request 3 takes 100ms, the response would time would be more than 100ms
Makes service dependent on each other, if any service goes down, the entire service goes down
Difficult to track requests due to multiple nested requests.

Example of Async Communication:

This type of communication would need an Event Bus which can emit and receive events, that will be connected to every service in the application.

This decouples the services from each other. Instead of one-on-one communication, they talk to each other using a message broker. If other service is down, the first service can still work and second one presume itself later. There are two types of messages: Commands ("Do this please") and Events ("Something happened in Past").

Now in our case service D would first broadcast an Event (UserQuery) to every other service, those services will handle the event if they want and can again release event for result for that Event. From that User received, Service D will again send a PostsQuery, and then finally from those Posts, another event CommentsQuery to Event Bus. Now Event Bus will broadcast each event to every service until service D will receive the result.

This approach is very bad and has all the downsides of synchronous communication as well it many of it's own.

A better approach would be to add a database that can serve the required information. Other services will emit events and populate this database, now this database will be ready to serve the request instantaneously.

Advantages:

Service D has zero dependency
The queries are very fast

Disadvantages:

Hard to understand and code
Data Duplication
Extra Storage cost (but cheap!)

Thanks for making it to the end of the post, you are awesome!
You just took the first step in seeing the application architecture from a high level perspective. There are tons of information out there to learn more on this. Don't forget to leave your thoughts. I got this information from this awesome Stephen Grider's course, Here's the non-affiliate link (https://www.udemy.com/share/102VKE/).
Please share it if you found it helpful or drop me a hello on twitter :)

-- Edit
Follow up read -

Don't Do Microservices If You Can

Sergiy Yevtushenko ・ May 6 ・ 3 min read

#microservices #beginners #tutorial #devops

A 10 Line React Accordion Using an HTML Tag!

Deepak Ahuja 👨‍💻 — Sun, 15 Dec 2019 09:31:18 +0000

I recently came across a use case in which I needed an accordion component in my react application. I had a few options like using Material UI, some open source components this and this.

In my use case set of accordion options were dynamic, and they themselves carry information whether they should be open or not by default from the parent.

I tried a few components but after a day or two, I always had to go back and remove the component or add some behavior myself. In most components, parents keep track of open sections and children themselves have to use some change handler to inform parent for changing open sections.

So, I created one myself with just a few lines of code and without using any 3rd party library.

Let me introduce to you HTML's <detail> tag.
This tag carries in itself the on-demand show/hide feature which is the core of accordion. We will use a set of these to create our component and it will save us tens of lines of code to handle the opening and closing behavior ourselves. This can be used to create our interactive widget which will have an open prop that decides whether to show or hide the content. All of this being a no-JavaScript widget.

Helper link: detail tag

Note: The details tag is not supported in Internet Explorer.

There's one more tag that we will need i.e <summary>. This tag defines a heading that can be clicked to show or hide the content section. It also comes with a built-in toggling arrow which we can customize.

Here's how it looks:

The Accordion Component

function Accordion({ children: options }) {
  const toOpen = options.props.open ? true : null;
  return options.map(options => (
    <details open={toOpen}>{options}</details>
  ));
}

Two things to note here:

Children carry property whether they want to be open or not. You can change it as peruse.
In JSX, props compile to plain javascript object before they are used an attribute to plain HTML, hence we return null to disallow it from being added to HTML. A detailed explanation:

Jan 23 '17

First of all, JSX is just a syntactic sugar for React.createElement. So, it may look like, but, in reality, you don't specify html attributes: in fact, you are always passing props.

For instance, the JSX code <input type="button" value="My button" /> is transpiled into React.createElement('input',{type:'button',value:'My Button'})…

Open Full Answer

It will be used like this:

<Accordion>
   ...Options
</Accordion>

The Option Component

This will be the content of each section in the accordion. It uses summary tag to show the label (heading) of the section which is clickable. It renders children which for each section without any javascript.

function Option({ label, children }) {
  return (
    <React.Fragment>
      <summary>
        {label}
      </summary>
      {children}
    </React.Fragment>
  );
}

I used it like this,

<Accordion>
 {this.getOptions(status)}
</Accordion>

Some code to get options list:

function getOptions(status) {
 // status decides which options to return with what open flag
return [
     ...moreOptions, 
     <Option label="heading" open={status === "status1"}>
        <Component1
          someProp={someProp}
         />
      </Option>
    ]

}

Here's the final output with some applied CSS.

Note: To disable the default icon in summary component:

 summary::-webkit-details-marker {
     display: none
 }

Now feel free to play around with it. It is often advisable not to download and keep 3rd party libraries for simple use cases, It took me 5 tries to decide that I can just do it in less than 10 lines of code for which I kept adding 3rd party components. Simple functionalities can often be extracted out and used independently.

Thanks for making it to the end of the post, you are awesome!
Please share it if you found it helpful or drop me a hello on twitter :)

Learn and Build Web Authentication System (Universal Principles)

Deepak Ahuja 👨‍💻 — Mon, 02 Sep 2019 08:56:28 +0000

What's an Authentication?

Servers are basically stupid computer programs who cannot remember who and what made a request after serving it once. The communication between clients and servers over HTTP model is stateless in the sense that server cannot confirm the identity of client (user-agent) for each request without some sort of Authentication. Also, they have been over burdened with responsibilities like not showing your personal Twitter DM(s) to someone else, remembering stuff you added to your cart on Amazon, keeping your drafts on DEV articles safe from being copied by other people, preventing you from hacking your Ex's Facebook. All of this is going to need a way to tell server who you are and what should be served to you.

Authentication is more than storing an "user email". Emails and usernames are public facing digital identity you create for yourself on the web. Other people can see and use it too. So we also use passwords and tokens to protect your non-public resources.

Passwords

The most basic and unsafe approach for storing passwords is just to save them as they are. Once saved, you query and match them with password provided by user. This approach is extremely bad because the passwords can be stolen over wire as well as when database is hacked. Most people use same password for multiple services, You are likely to expose all of them for all the users signed up on your website.

"Storing passwords in a plain text is a sin." - J ✝️

One approach would be to encrypt the password and then store it.
Encryption and Descryption

You chose a key with which you will mix the password to generate a random string using an algorithm.
This password (gibberish text) will be stored in the database.
At the time of authentication:

you can decrypt the password from database using the same key to generate a value and match it with password provided by user.
Or you can encrypt the password at input with same key and match it with value stored in the database.

There are many encryption algorithms which are available as go libraries to work with. You can find same in other languages of your choice. The drawback with this approach is that if you can decrypt a password to it's original text, so can a hacker. if they are able to guess a key, every other user in your db is compromised too.

Hashing

To compare password for authentication without decrypting them is made possible using a hash function. Hash function converts strings of random length to a fixed length string using some predefined algorithms.
Hashing

Text generated by hashing functions is not reversible unlike encryption.
The output will be of fixed length for inputs of variable lengths.
Even a small change in input text would generate a totally different hash.
For same input same hashes is generated. We can prevent this using salt and pepper.

Salt and Pepper

We would need to add a some bytes to the password before passing in to a hashing function. As hashes cannot be decrypted, but still a person can generate a rainbow table which is a precomputed table of commonly used passwords and their hashing functions. The hacker can match the hashes to the database hashes and will be able to tell the password. This would be prevented if a unique and random string is added to password which before saving a hash.
saltedhash(password) = hash(password || salt)

The salt would be unique for each password. Hence, all the hashes would be unique.
The salt is not a private entity, it can be saved along with hash as a part of hash or in a different field.
If two users use the same password, when added with salts, their generated hash would be different.

Pepper are also random strings that are added to passwords, they differ from the salt in the fact that they are not unique per user, they are same across all application. They are not stored in database necessarily. We will use them as environment variable in our application demo.

Hands On

Signup for an online free postgres database service and get host, port, username, dbname and password.
Fork and clone the project from github here.
Edit database credentials (or use provided).
Run in the root of the project go run main.go.
The project consists of home, login, signup, profile and accounts page. To navigate to profile and accounts page you would need to have a token (explained shortly).
On every restart of server, the database would reset. You can comment out the code setUpDB for so in main.go at root.

To understand application of hashing we would first need to have fields like password and a password-hash.

User Model

The gorm tag (gorm:"-") ignores the password field because we never store password in the database. We would store explicitly defined password hash.

Sign Up Process

Use bcrypt.GenerateFromPassword(password, cost) to get a hash for the password. The second argument is the cost that is how much work is needed to hash the password. It would change in future when computer gets more powerful. Right now Default Cost is 10.

The code snippet above uses the sign up steps. You can find full working in project repository at path /dev-blog/services/signup.go.

Login Process

Use bcrypt.CompareHashAndPassword(password, cost) to compare hashed password to it's plain text equivalent.

The code snippet above uses the sign up steps. You can find full working in project repository at path /dev-blog/services/login.go.

Web server are stateless

The servers handles each request independently. It does not save any data from client requests to do stuff and responds. Each request has everything it needs from server and get a response.
How to make server remember what you did some time ago on the website?
Frankly, we don't. we let clients tell in each request who they are and what resources they need. Login each time while browsing is a tedious task, so after login once, we sign in a cookie (data stored in the computer), so each time you browse a website, the browser sends the cookie with each request to the linked website. We will use this cookie data to verify user. This authentication data stored in cookie is called a Remember Token. We have added this in the user schema too earlier.

Remember token is a series random bytes of a certain length.
We create this using following snippet:

// GenerateRememberToken returns a 32 bytes random token string using
// crypto/rand packages
func GenerateRememberToken() string {
    b := make([]byte, 32) // create a placeholder of 32 bytes (big enough)
    _, err := rand.Read(b) // Fill it with random bytes
    Must(err)
    return base64.URLEncoding.EncodeToString(b) // encoded string
}

Add this token to field in user object (RememberToken) and save to database.

The following snippet helps in setting up cookie for the website.

    cookie := http.Cookie{
        Name:     "remember_token",
        Value:    user.RememberToken,
        HttpOnly: true,
                Expires: time.Now().Add(24 * time.Hour),
    }
    http.SetCookie(w, &cookie)

It is very easy to see cookie in a browser and temper it. To protect our cookie from temporary we can use some options like HttpOnly (disallow javascript to temper cookie) or not store the remember token in plain text at all.

Here's your editable cookie:

We would rather save a hash of same token and on each request compare it with token provided from cookie.
If we use bcrypt hashing, we would:

Lookup a user from database using email
Hash the user's password with salt which is part of PasswordHash field
Compare But in case of remember token we cannot lookup a user from database since we are not storing RememberToken in db (only it's hash), we need a way to hash value from cookie first, then find the user. The simple hashing function like crypto/hmac would work.

// Hash generates hash for given input with secret key of hmac object
func Hash(token string) string {
       // sha256 is hashing algorithm
       // key can be taken from env variable too
    h := hmac.New(sha256.New, []byte("somekey"))
    h.Reset() // Clear previous leftover bytes
    h.Write([]byte(token))
    b := h.Sum(nil)
    return base64.URLEncoding.EncodeToString(b)
}

utils/utils.go

Here's how we will use all of this:

These signIn method will be called once after login or sign up and a remember token would be stored in the browser as cookie and it's hash version would be saved to the database.

Now when user visits authenticated pages like profile or accounts. We can use the token came into request and compare it with the hashed version stored in the database.

Since we know in hashing for same input string same output is generated. We can hash the remember token came in cookie and compare.

These are a few parts of building an authentication system. The full working project is available here. This also has html templates parsing in go about which i wrote an in depth guide here:

Unlock SSR Superpowers (Learn and Use Templates In Go)

Deepak Ahuja 👨‍💻 ・ Jul 31 '19

#go #webdev #beginners #tutorial

The project structure is simplified for easier understanding with error handling, separate handler file for each route etc. Thanks for making it till last.
Please feel free to comment any doubts about unclear things or say hello on twitter.
My other work:

Get a Taste of Concurrency in Go

Deepak Ahuja 👨‍💻 ・ Aug 7 '19

#go #beginners #showdev #webdev

Health for developers

Deepak Ahuja 👨‍💻 — Fri, 09 Aug 2019 16:00:29 +0000

Long sitting hours leads to so many health problems. i am seeing lot of hip and heart opening exercises listed to cure "office bend".
We spend most waking hours on front of screen, in a chair.

For IT professionals back problems, mental stress etc are very common. What's your take on this? what you do to avoid it?

I am thinking of publishing a list of exercises under 20 minutes, which can help. what should be on it?

Unlock SSR Superpowers (Learn and Use Templates In Go)

Deepak Ahuja 👨‍💻 — Wed, 31 Jul 2019 16:13:54 +0000

Photo by John Doyle Unsplash

While developing several full stack apps over years, I realised some apps don’t
need a full fledged frontend application running. Most of these apps serve
static content with dynamic values fitted here and there. For example, consider
your social media feed, each post of a certain type looks same but it gets
populated with data specific to that user. They use some sort of templating to
achieve it.

What are templates?

Templates are essentially text files that are used to create dynamic content.
For instance the following javascript function takes “name” as argument and
produce different strings.

We can also use same principal to generate web pages in Go. Web templates allow
us to serve personalised results to users. Generating web templates using string
concatenation is a tedious tasks. It can also lead to injection attacks.

Templates in go

There two packages in go to work with templates:

text/templates (Used for generating textual output)
html/templates (Used for generating HTML output safe against code injection)

Both of them basically have same interface with subtle web specific differences
in latter like encoding script tags to prevent them from running, parsing maps
as json in view.

Our First Template

Web template in go

The extension of template file could be anything. We are using .gohtml so that it is supported development tools across IDEs.
“Actions” — data evaluations or control structures — is delimited by{{and}}. The data evaluated inside it is called Pipeline. Anything outside them is send to output unchanged.

Code to execute the template with data: Use go run main.go to see output

You can parse multiple files on line:10 as comma separated strings (path to
file) or parse all files inside a directory. For example:

tpl, err := template.ParseFiles(“index1.gohtml”, “index2.gohtml”)
tpl, err := template.ParseGlob("views/templates/*")

It returns a template container (here called tpl) and error. We can use our data to execute tpl *by calling method Execute. *In case of multiple templates, The name of template will be passed as 2nd argument while data being 3rd.
We define our data structure (here type struct). It could be anything in go slice, map, struct, slice-of-structs, structs-of-slice of structs. We will see each of them shortly.
The data is fetched using *dot (aka cursor). *We use it to access variables of data inside templates. Remember the identifiers in provided data have to start with Capital Case. We can use them to initialise a variable inside Actions like$myCoupon := .Coupon.
We can output the execution result to web page or standard output because template Execute method takes any value which implements type Writer interface.

It renders as plain text in output console, but If we use it to send as response
to web request it will be rendered as a web page enabling us to use HTML tags.

Standard template output

Web template output

It is preferred to do the parsing job inside init function and execution at
required places.

func init() {
 // Must is a helper that wraps a function returning  
 // (*Template, error) and panics if the error is non-nil.
 tpl = template.Must(template.ParseGlob(“templates/*”))
}

Using different data structures in web templates

Slice (or Array)

Let’s consider a
slice of
strings:

Slice of strings in go

This can be used in template by ranging over the Slice (also array) inside
Actions. If the value of the pipeline has length zero, nothing will be
executed
otherwise, dot(aka cursor) is set to the successive elements of
the Slice (also array) and template is executed.

Template for range over slice

Web template output

Map

Let’s consider a Map data
structure:

Map in go

The value of the pipeline inside Action is a map. If there are no key values
pairs in map, nothing is output, otherwise, dot (aka cursor) is set to the
successive elements of the map and template is executed with $key taking each
key, $val taking the respective value. If keys are of basic type with a
defined order ("comparable"), the elements will be visited in sorted key order.

Web template for map

Web template output

Struct

Let’s consider a struct with collection of
fields as declared
inline:

Struct in go

The name of a field of the data struct, preceded by a period, such as .Name is
the argument in template. The result is the value of the field. Field
invocations may be chained: .Field1.Field2. Fields can also be evaluated on
variables, including chaining: $x.Field1.Field2 . The following template shows
the fields store in variables and then evaluated in Actions.

Web template for struct in go

Web template output

Slice of structs

Let’s consider a slice of structs :

Slice to struct in go

We use range to iterate over slice. The value of the pipeline in Action must be
an array (or slice). If the value of the length of slice is zero, nothing is
output; otherwise, dot (aka cursor) is set to the successive elements of the
array, slice and Template is executed.

Web template for slice of structs

Like this different data structures in go can be combined to make useful
templates.

A note on Conditionals in templates:

It is also possible to write conditionals templates {{if pipeline}} T1 {{else if pipeline}} T0 {{end}} like this. This gives us amazing abilities to generate dynamic content. If value of pipeline is empty (that is, false, 0, any nil pointer or interface value, and any array, slice, map, or string of length zero), T0 is executed else T1 is executed.

Function In templates

To send a function in go template we can use, by default, no functions are
defined in the template but the Funcs method on template can be used to add
function by creating mappings like this:

template.Must(template.New(“”).Funcs(fm).ParseFiles(“index.gohtml”))

Initialising a function for template in Go

To create a mapping from names to functions we need to use type FuncMap. Each
function must have either a single return value, or two return values of which
the second has type error.

type FuncMap map[]interface{}

On line:7, we have defined a mapping of function monthDayYear to *name
fdateMDY. Now this function can be used inside template. Remember dot (aka
*cursor) holds the data provided to template.

Web template in go using function

These are various ways we can use templates in Go. I will publish how to use
what we learn’t to build our own working web pages using nested templates. You
can drop me hello with questions and feedback on
twitter. Please consider leaving a feedback and share with anyone who may benefit from it. Thanks!