DEV Community: Tanishq Singla

Eating the toast

Tanishq Singla — Wed, 19 Mar 2025 10:43:46 +0000

Introduction

I have a bad habit of stopping in middle of a task and step out in thinking mode. It has both worked as a power-up and a kryptonite.

One such task was this simple page with a forgot password that I was developing for Monkeys. A fairly simple task a form with one field nothing odd about it.

Here's a small preview of the page.

I regret not writing this blog earlier, if I did I would have known what led me to this adventure, the adventure I am writing in this blog.

The gif is of a user with email gopal@echitti.com using the forgot password page, to send the link for resetting the password.
There's nothing wrong in the gif, the user types their email, clicks on send and a toast pops up alerting the user that the link has been sent successfully.

The toast

Suddenly something popped in my head and I starting reflecting back on the whole transaction the user had.

It was the toast, as the title makes it obvious.

Toast is a fairly common component which is often used to display a message or sometimes feedback of an action on the screen.
A more formal definition by https://web.dev state is this way:

Toasts are non-interactive, passive, and asynchronous short messages for users. Generally they are used as an interface feedback pattern for informing the user about the results of an action.

https://web.dev/articles/building/a-toast-component

output tag is not necessarily used, but if you care about HTML semantics and A11Y (specifically the WCAG).

When I tested our toast using Chrome Vox extension to test our application for screen readers, it worked well. The toast message would announce itself promptly as it would show up.

Something still looked out of place a bit and the page felt incomplete. As I pondered more about it, I started reading and found some good articles that clarified a lot for me.

Toasts can be missed

Speaking metaphorically and literally, toasts are meant to be consumed, missing one might lead you to stay hungry for your breakfast or in our context hungry for feedback or the message that was contained in the toast.

Let's say our user, after submitting the form got interrupted by something which took their attention away from the screen, and in that meanwhile the toast appeared and then disappeared.
When the user gets their attention back they won't have any conclusion of their action. The Doorway Effect is an even worse enemy here, the user may completely forget if they clicked the button at all.

I call things like these smell, and when a lot of smell accumulates the application becomes smelly. This makes your app uninviting and less of an incentive, this makes you rely more on business and marketing.

Smells of toast

In the blog Defining 'Toasts' Message, Adrian gives a more in-depth rundown of smells in the context of accessibility.

A quote from the blog.

"By their very nature, toasts are likely to fail a WCAG audit right out of the gate if some effort is not made from the start. Following are WCAG 2.1 Success Criteria you should keep in mind when building your own or testing one of the existing options."

Here's a list of rules that our page probably violates.

When developing components we often forget about how different users access different parts of the web. While WCAG is treated as a dense manual it can bring interesting insights on how components are used or at least how they are naturally perceived to be used.

Speaking in another way WCAG is more of an engineering manual. While software development especially frontend development is treated as a creative endeavor, WCAG is an engineering guide to that creative endavour.

Think of it like making a car, while you can make a car look cool and futuristic, if raising the blinker lever and actual direction the blinkers blink is inverted then it's a bad design overall.

Similarly the Content Hover on focus (1.4.13) is a real bummer, no amount of observability, user events tracking can save you from this. Users would press Esc and instead of toast closing an another element like a tooltip may close and this will leave them a lot frustrated.

Solution

Let's solve the problem in our page and start by breaking down our problem

Success
- It is redundant for user to submit the form again on success. So our message can't be short-lived, as toasts are easy to miss.
- We also cannot permanently disable the 'submit' button, cause the user can change the input and would like to submit again.
Error - Validation errors
- Validation errors are straightforward and we don't need to change anything for them, the existing one works great.
Error - Submit
- Submission errors are rare and can only occur from server's end, so they are a special scenario.
- So we want to prompt our user to contact support if they face such an anomaly, or provide an option to retry submitting.

Utilizing our button

Our button is the first point of interaction here, and we're already dynamically showing a loader on the button. We're wasting a lot of potential as this dynamic element can be utilized to do much more.

Let's start by incorporating our button with a success and a failure state.

export function ForgotPasswordForm() {
    const [loading, setLoading] = useState(false);
+   const [isSuccess, setIsSuccess] = useState(false);
+   const [isError, setIsError] = useState(false);
}

...

function handleSubmt() {
    try {
        //...
+       setIsSuccess(true);
+       setIsError(false);
    } catch (err) {
        //...
+       setIsError(true);
+       setIsSuccess(true);
    } finally {
        setLoading(false);
    }
}

Our button can now have different text based on the state we added earlier.

<button
-   disabled={loading}
+   disabled={loading || isSuccess}
>
+  {!isError && !isSuccess && 'Submit'}
+  {!isError && 'Click to Retry'}
+  {!isSuccess && 'Submitted Successfully'}
</button>

We disable the button on success because we don't want the user to send again and again as it is redundant.

Since we're disabling the button on success, we should also add some way to reset the state. So that the user doesn't have to refresh the page to enter another input.

I went with a button to clear the input, which will also reset the success state.


const handleChange = () => {
+ if (isSuccess) setIsSuccess(false);

//...
}

+const handleClear = (e) => {
    //....
+   setIsSuccess(false);
+}

//...
<label>Email</label>
<input type="email" onChange={handleChange} />
+<button onClick={handleClear} aria-label='clear button'>X</button>

With this we ensured the user has a way to reset the input.

Finally to display the error message, we can use our existing toast. Or we can just show a error text on the form.

The final result looks like this

Success Case

Error Case

Conclusion

While design needs to be visible, bold and generate a brand; UX on the other hand needs to be as hidden as possible.
A good UX should comes in the way of user and feels much more natural. It is always the small details that whiff out and causes smell in the UX and when these smell accumulates the UX becomes smelly and the product becomes uninviting.
By no means I want to convey that toasts are bad, our eyes are often deceiving, just by hiding the toast or looking beyond it the underlying problems looks more clearer.

References

Handling config files in go

Tanishq Singla — Fri, 01 Mar 2024 18:08:00 +0000

Introduction

Learning a new language and leaving the comfort zone of your tech stack is a challenging process, one can phrase the experience similar to walking in an unknown territory.
I am currently developing my back-end in go programming language, which came with it's own challenges. Luckily go programming language was very simple, in syntax as well as behavior, so it did not take much effort to get comfortable with it.
However when I got ready to make my first application, my head got clouded with questions. Those questions would typically fall in the following category

Is this a good practice?
How is this organised?
Is this how you're supposed to use the framework?

In every step these questions would stop me from developing my application.
The Go docs and manual were not able to satisfy my hunger. I tried reading popular books, but they would leave me with more questions than answers.

The solution

I resorted to learning from open source projects. Go has a huge community, also the nature of Go programming language there are plenty of clever programming tips to learn from them. Combining both of the traits you get a lot of open source projects to learn from.

Config Handling

One such technique I learned was handling configs in a Go program. This comes from an open source project Rocket by Shivam Sourav Jha.

TL;DR

The gist of the approach was to have a separate config file, and define a global struct/variables for the config and initialize the environment variables.

If you understood the approach, you don't have to continue. If you're new to go and want to understand what I am talking about I'll be explaining it in detail.

Things I improvised

The usage of init was clever and it was new to me when I first looked at the repo. There are some good ideas to learn from it and also some things that I thought can be improvised.

For me in the context of this config handling approach, I changed a few things. They are mentioned below

Remove the Get() to access env variable. The function can be handy if there is some behavior I want to add before any function can access the config variable, but for now I did not find any use case for it.
Not exporting the config struct. In the repo for some reason the author exported the Config struct, I found it useless and kept it in the scope of the package.

Config handling in action

First you need a separate config file and name it under a package.

// config/config.go
package config

// Define your env variables and their type
type configuration struct {
}

// declaring global variable. This is going to be exported in the package.
var Config configuration

// Here we initialize our config variables
func init() {
 Config = Configuration {
  // assign values to variables
 }
}

Here, we're relying on init function to initialize a variable. Now go has a really neat feature with packages, this init function gets executed when the package is used somewhere. So we don't have to manually run the init function.

Conclusion

Go programming language is rich with open source repos to learn. People creating these repos range from students to professionals helping the world to learn from their code and for me simplifying my learning. Do show them some love by starring their repos.

Deciphering JWTs

Tanishq Singla — Fri, 23 Feb 2024 17:05:52 +0000

Introduction

Underpinning seamless logins across apps, JWTs are the workhorses of modern authentication. Their compact structure and built-in security make them ubiquitous in web development frameworks, simplifying token creation and management.
In a tweet exemplifying the growth of a software engineer's focus on understanding the "why" behind technologies, Chinmay Naik shared an anecdote (link) about early engineers not grasping the problems JWTs solve.
Hence the motivation to write this blog. If you wish to read more on JWT, the JWT Handbook is the go to resource.

What are JWTs?

JSON Web Token abbreviated as JWT is an open standard RFC 7519 which defines a compact and self-contained way for securely transferring information between parties as JSON object.

If you too wondered what is self-contained, then let me explain. JWTs are self-contained as they contain their own information of how they were made e.g What encryption algorithm was used, when they were issued, when they will expire etc.

As mentioned in the definition, JWTs are used for information transfer, while we use them for authentication in our applications all we are doing actually is transferring information contained in a JSON format in a JWT.

Let us look at how this self-contained information is stored in a JWT.

Structure of a JWT

Depending on the type of JWT the structure may vary, so before looking at the composition let's explore what are those different types.

Unsecured JWTs
Signed JWTs
Encrypted JWTs The information in a JWT is serialized compactly via encoding each part using Base64URL into printable strings and separating them using dots (.) E.g

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.
TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

The decoded header is:

{
  "alg": "HS256",
  "typ": "JWT"
}

The decoded payload is:

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}

Unsecured and Signed JWTs

Unsigned or non-encrypted JWTs are termed as Unsecured JWTs. When you sign an unsecure JWT it becomes a signed JWT.
Both Unsecured and Signed JWT contain

header
payload

The header and payload contains information termed as claims.
These claims establish information about the JWT such as the algorithm used, whether the JWT is signed or unsigned or encrypted, and how to parse the JWT.

Signing the JWT
When you sign the JWT using a private key, a signature is appended in the end separated by the (.) to the existing JWT containing the encoded header and payload.
The flow somewhat looks like this

encoded_header <- Base64Encode(header)
encoded_payload <- Base64Encode(payload)
signature <- Base64Encode(Encrypt("encoded_header" + "." + "encoded_payload", private_key))
jwt = encoded_header + "." encoded_payload + "." + signature

Here Base64Encode function encodes the input to Base64URL encoding and Encrypt function encrypts the input using private_key which is specified by you.

If you've been reading closely you would've noticed that we're appending the encrypted key while the header and payload are only encoded.

To put it simply, the header and payload of a JWT are transparent, implying they can be read by anyone. Hence only non-sensitive information are carried by Signed JWTs.

Encrypted JWT
To protect the body of a JWT, Encrypted JWTs are created. This type of JWT comprises of

Header
The encrypted key
The initialization vector
The encrypted data
The authentication tag

More on claims

This was all about the structure of a JWT, let's look at what does each structure contains.

Information contained inside a JWT is called a claim.

Header claims
For non-encrypted JWT the only mandatory claim is the alg claim which defines the main algorithm in use for encrypting/decrypting the JWT.

If the JWT doesn't use any encryption algorithm then the alg value should be "none". E.g

{
  "alg": "none"
}

Payload claims
There are 3 types of payload claims. The one provided by the JWT standard are called Registered claims.
These registered claims are:

iss - from the word issuer, it contains a case-sensitive string or URI that uniquely identifies the party that issued the JWT.
sub - from the word subject, it contains the information about the subject the JWT is issued for.
aud - from the audience, It can be a single case-sensitive string or URI or an array of such values uniquely identifying the intended recipients for the JWT.
exp - from the word expiration, contains the UNIX epoch time denoting the expiry time for the JWT.
nbf - from not before, the opposite of exp, this claim contains the UNIX epoch time denoting the time from which the JWT will be valid.
iat - from issued at, a number (UNIX epoch) denoting at what time the JWT was issued.
jti - from JWT ID - a string representing unique identifier for JWT.

Public and Private claims
Public claims are those claims that are either registered with IANA JSON Web Token Claims, registry or named using a collision resistant name.
Whereas private claims are claims that are defined by the users. Because of their nature of being user defined, care must be taken to prevent collisions with public/registered claims.

Conclusion

I hope through this blog now you know a little more about JWTs.

The problem with Software Testing Curricula on Web

Tanishq Singla — Fri, 10 Nov 2023 22:59:41 +0000

Disclaimer: I don't mean to convey any negative messages towards any individual or organisation. Treat this post as an opinions, and my opinion wouldn't change the world. There maybe some subjects or contents I have misunderstood due to language barrier so feel free to enlighten me.

Introduction

As a self learner with no mentorship I treat internet as my mentor, and I have preached numerous times that you don't need a course or pay for any books because that information is available on the internet in some form. However the lightning struck when I stepped into the confusing lair of google seo to teach me software testing.
I was not willing to learn it through courses or books so searched google for any resources. I found two blog series

Wikipedia
Browserstack guides on testing

There were few more, but they were completely off track from the core software testing topic so I didn't read them.

Testing type, a total mess

Browserstack and Wikipedia both confused me a lot, during learning I mostly had to piece out what I think was relevant and assume the rest of it as outdated of false.
The first I got confused reading about software testing was Browserstack functional testing guide.
The functional testing guide named as Functional Testing : A Detailed Guide teaches about functional testing where Unit testing is mentioned as a part of functional testing as mentioned in their diagram just below Types of Functional Testing.

As mentioned in the guide, Unit Testing is mentioned as a category of functional testing.
The link here references another guide named as Unit Testing: A Detailed Guide
When you reach to the Unit Testing Techniques section, you'll encounter that functional testing which links us back to the Functional Testing Guide is mentioned as a technique of Unit testing but we just read that Unit testing is a type of functional testing.
What adds more to the confusion is the TDD section under Unit Testing guide, the Read More section links an article named as Differences between Functional Testing and Unit Testing.
I was already trying to make a sense of this cyclic reference of Unit and Functional Test, and now there's an article that writes about the differences between those.
There were similar articles other than Browserstack's that had the same cyclic reference problem.

The Jargon Problem

It kills my soul when I see a veteran dev or a tester who happen to read about all the jargon ask the newbies to tell differences between tests like Smoke and Sanity tests and carries on a sly smirk.
While working in some orgs, I have realised terms like Sanity doesn't mean anything and testers and software developers love to throw around this word without any context or meaning.
Software testing terms don't provide any meaningful context from the name, some of them are not even native to Software Testing and hence lack the meaning.

Smoke Testing
Sanity Testing
Regression Testing
Structural Testing
Big Bang Testing (what the hell does it even mean!)

The list goes on as you delve more into the types of tests.

Software Development in today's standard is also a responsibility of the developer and not just the tester, however the terms used in both disciplines are the same but the whole function and pipeline of the test differ.
Sanity Vs Smoke Tests
If you will search about sanity test and smoke test individually, you'll find their definition same. Wikipedia refers Sanity Tests as a alias of Smoke Tests in their wiki Smoke Testing.
Luckily after browsing a lot a common pattern appeared which was the difference on how these tests are done and when they are done.
Smoke tests can be done using automation and are performed before they were handed over to the QA, which I imply as a developer running their suite of tests before handing their app to QA. Whereas Sanity Tests are performed after the developer hands over their build to QA.
In other words, smoke tests are performed by developers after they complete their feature or before handing out the final build, and sanity tests are performed by tester after the developer hands out the build of the application.

Smoke tests and sanity tests by definition are the same, both are confidence tests but the key difference lies in the stage of development pipeline.

Conclusion

I would like to conclude this blog by saying Software Curriculum on web is a mess apart from the weird guides the theoretical content regarding Software Testing is highly outdated and severely lacks in abstracting its core concepts while completely ignoring the modern software development value stream and we need new and better structure to understand software testing.

Write your own pre-commit hooks

Tanishq Singla — Sat, 12 Aug 2023 18:04:17 +0000

Overview

If you've never written a git hooks don't worry. Writing git hooks is far more easier than you think it is. In this blog I'll be sharing a basic idea how pre-commit hooks are made by creating a simple pre-commit hook that runs a formatting and linting check on our project.

Creating the project

The example in this blog is a simple hello world application using node.js and express but you don't have to learn anything about them as the main focus is to run the scripts and not to create a web-server.
You can find the project in this repo - pre-commit-example.

Project overview

The project contains our hello world application and the logic for it is defined in server.js and then there are some config files for eslint and prettier.

server.js

const express = require('express')

const app = express()

app.get("/", (_, res) => {
  res.send("Hello world");
})

app.listen(3000, () => console.log("server is running on http://127.0.0.1:3000"))

eslint and prettier
As for eslint and prettier, I am using prettier plugins with eslint, you can find more details for it in this blog - You might not need a separate config for eslint and prettier

{ "env": { "commonjs": true,
    "es2021": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "semi": true,
        "useTab": true
      }

    ],
    "indent": ["error", "tab"],
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

If you take a look at our config and server.js file, you will realize that when we will run our linter it is going throw errors.

scripts
I've added scripts to run our eslint in the package.json file

"scripts": {
  "lint": "eslint .",
  "lint:fix": " eslint --fix ."
}

Writing our pre-commit

Let's write our pre-commit hook. The general idea of writing our pre-commit hook (in this case) is to avoid code with linting errors to get commited, this will streamline our development cycle as developers often forget small things in the code which might get alarmed in our lint stage.

To write a pre-commit hook all we need to do is a create a bash script file named pre-commit in the hooks folder under .git folder.

#!/bin/sh

npm run lint

SUCCESS=$?

[ $SUCCESS -ne 0 ] && exit 1
exit 0

That's it! Yes, this is our pre commit hook that checks if our code is formatted or not. Let's look at what we're doing here.

npm run lint
This is the command we defined in our package.json, this commands run the eslint command and displays the error.

SUCCESS=$?
Here we're assigning a variable named SUCCESS and assigning it to the status code of the last command that ran i.e npm run lint. Commands that run successfully return 0 as their value and those who don't returns a non-zero value.

[ $SUCCESS -ne 0] && exit 1
This is our conditional statement that checks if the SUCCESS value is not 0, if it is not 0 then it exits with code 1 which is a non-zero value implying our program exited with an error.

exit 0
If our conditional statement returned false, we exit the program with 0 meaning success.

One last step

Now that we've created our script we need to make it an executable so that the git can execute this file before we hit commit. To do that we provide the file with execute access. Run this command in your terminal to do that

chmod +x .git/hooks/pre-commit

Now when you'll try to commit the changes it won't let you do that, as we have linting errors in our code.

Limitations of this approach

As simple as this approach looks there is one limitation with this approach, the hooks are not versioned by git and hence not stored in the repo.
There are work arounds to this mentioned in this stackoverflow post. But this relies on Git v2.9 or older.
You can also create a simple script that copies the contents of your git hooks.

You might not need separate config for prettier and eslint

Tanishq Singla — Thu, 10 Aug 2023 05:58:55 +0000

Overview

Recently Andy Jiang from Deno posted this wonderful article Node.js's Config Hell Problem
highlighting the config hell in a project that uses Node.js and this makes a wonderful case for using Deno over Node.js in this particular case.
In this blog series I will be exploring some ways to reduce config hell. Let's start with the first part of this series.

You might not need separate config for prettier and eslint

If you use eslint and prettier together you might be familiar with conflicting styling rules of eslint and prettier, and would've preferred to only using eslint for linting and prettier for formatting, and end up creating 2 files like .prettierrc and .eslintrc and let me show you, you only need one.

Linting and formatting are often clubbed together and it makes sense to have one config that handles both. By using eslint plugins we can achieve that.

Using eslint plugins

We'll be using these 2 plugins

eslint-config-prettier
eslint-plugin-prettier

By using these we eliminate the need prettier installed as dev dependency, if you want to add prettier as a eslint rule (which this blog does).

Install these two plugins with the following command

# for npm
npm install -D eslint-config-prettier eslint-plugin-prettier

# for yarn
yarn add -D eslint-config-prettier eslint-plugin-prettier

# for pnpm
pnpm add -D eslint-config-prettier eslint-plugin-prettier

After adding the dependency let's modify our eslint config. I am using .eslintrc.json, if you're using other formats you can change the syntax according to that.

In the eslint config add plugin:prettier/recommend in the extends field and add prettier in plugins field

// .eslintrc.json
{
  "extends": [<your configs>, "plugin:prettier/recommended"],
  "plugins": [<your plugins>, "prettier"]
}

Now let's add our rules

// .eslintrc.json
{
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "useTabs": true,
        "singleQuote": true,
        "semi": true
      }
    ],
      "indent": ["error", "tab"],
      "quotes": ["error", "single"],
      "semi": ["error", "always"]
  }
}

In the config file mentioned above we're using the prettier config options such as useTabs, singleQuote and semi inside the eslint rule.
This config allows us to format the documents using prettier and with our desired config when we run eslint --fix .

This method saves us having 2 different files for linter and formatter, I'll be exploring more ways and them in this series. As always do let me know your suggestions.

References

Integrating with linters - Prettier Docs
eslint-config-prettier
eslint-plugin-prettier

How google keep does input form

Tanishq Singla — Mon, 12 Dec 2022 19:15:46 +0000

Introduction

In my last blog, I realized that I actually bumped onto a tip of iceberg, the google keep input form is a lot more complicated and the previous blog didn't do any justice to explain the complexity.
Hence I started this series with the previous blog as part 1. If you haven't read the previous part yet, you can check it out

The problem with input tags

The problem with using input tags is that you can only have a single line input.

So multiline input was a problem, then I thought of trying out textarea, but adding new rows to textarea dynamically was a pain, so textarea also didn't work out.

Divs to the rescue

Turns out I didn't need any input tag to solve the problem, but a very useful property of div's (useful at least in this scenario).

contentEditable Divs

If you guessed contentEditable divs you deserve a pat on the back. It turns out divs with contentEditable attribute solves our problems.
Let's jump into our code and use them. If you're following up from the previous part, you can just update your code or you can check out full code at here.
HTML

<div id="createForm">
  <div class="input" id="title" contentEditable></div>
  <div class="input" id="content" contentEditable></div>
</div>

CSS
For CSS I'll just update the form with the id createForm and input with class input.
JS
In JS only the form selector needs to be corrected i.e

const form = document.getElementById("createForm");

The final result should look like this.

Adding Placeholder

The absence of placeholder is hard to ignore, let's work on fixing that.
Luckily there are some neat css properties we can use just to do that, so no need to add javascript.
We need to add some text content to our divs, if you guessed content property of pseudo-elements then you deserve a pat on back. But here's a catch we only need to add content when there there is no text present in our div, here again we're going to use css saving us a bunch of JS logic, we're going to use :empty pseudo-class, a combination of both of them is just what we need.

#title:empty::before {
  content: "Title";
  opacity: 0.5;
}
#content:empty::before {
  content: "Take a note...";
  opacity: 0.5;
}

Better Approach
Suppose we're working on a solution which requires us to do something like this and we have a lot of editable divs, by using this style we're writing css for every div that contains a placeholder and not to mention we're also writing same css for styling placeholder causing our css to bloat up.
We can solve this by adding an attribute in our div tag that will hold the value of placeholder and using that value in our css with attr() function.

<div id="createForm">
  <div class="input" id="title" contentEditable data-placeholder="Title"></div>
  <div class="input" id="content" contentEditable data-placeholder="Take a note..."></div>
</div>

.input:empty::before {
  content: attr(data-placeholder);
  opacity: 0.4;
}

One last problem

If you're using firefox you may not notice it, but there's a bug in our input form. When we focus out of div that contains title, instead of focusing out we focus back on the content div.

If you want to know why this is happening you can look at the explanation here by a stack overflow user.
As mentioned in the solution we can get around with this bug by simply wrapping our contentEditable divs inside a div.

<div id="createForm">
  <div><div class="input" id="title" contentEditable data-placeholder="Title"></div></div>
  <div><div class="input" id="content" contentEditable data-placeholder="Take a note..."></div></div>
</div>

Wrap up

I hope you learned some new tricks from the blog, as always feel free to use comment section for suggestions or corrections.

Google Keep style input form in VanillaJS

Tanishq Singla — Fri, 02 Dec 2022 08:55:52 +0000

What we're building

If you've ever used google keep you must be familiar with their dynamic input form for creating a note. The form looks simple on first look, but it can be a bit tricky to come up with a solution.
The end result is going to look like this.

If you directly want to dive into the code, you can check out the codepen here.

The Markup

Let's work on our form markup i.e html and css. I am just going to create a simple form with two input tags. This part is completely optional, if you're a beginner you may find some new things but if you're not you can skip to the next section.

<form action="">
  <input type="text" placeholder="Title" id="title" />
  <input type="text" placeholder="Take a note..." id="content" />
</form>

Since I am creating this form in codepen, you may see some CSS on the body, the CSS in body just centers the form, and you may skip over it.

Styling our form

form {
  display: flex;
  flex-flow: column;
  width: 540px;
  border-radius: 8px;
  border: solid 1px #5f6368;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

To stack the input I've used display: flex with column direction.

The Script

Now let's add some interactivity on our form using JavaScript. In google keep's input the title input is shown after the input that contains the content for our note is focused, we're going to implement the same.
First I am going to get the elements in our html inside javascript.

const form = document.querySelector('form');
const title = document.getElementById('title');
const content = document.getElementById('content');

When a user first looks at the form, we don't want to show the title input, to do that, we're going to set the display property to none.

title.style.display = 'none';

After the user focuses on content input we want to show the title input.

content.addEventListener('focus', () => title.style.display = '');

Now we can show the title input when the content input is focused, but we should also be able to hide the title when the user is not focused on both of the inputs, let's work on that.
I am going to capture focusout event in the form.

form.addEventListener('focusOut', handleFocusOut);

Now you may wonder why focusout on form instead of blur event on inputs?
By listening on focusout event we get access to relatedTarget property, which is useful since we want to know if the user has clicked on an input inside the form or the user has clicked outside the form.
Now let's define the callback function we passed i.e handleFocusOut.

function handleFocusOut(event) {
  let relatedTarget = event.relatedTarget;  
  if(relatedTarget) {
    return;
  }
  title.style.display = 'none';
}

Wrap up

Our google keep style form is complete, if you want to look at the code the you can checkout the codepen here.
Feel free to add suggestions using the comment section.

Setup vercel with supabase for our project

Tanishq Singla — Sun, 11 Sep 2022 07:44:41 +0000

Now that we're done with our supabase setup let's work on our frontend environment for our application.

Github Setup

Before we setup vercel, we're going to setup our code repository first, I'll be using github to upload the repository. Let's quickly make our repo, since we'll be working with Nextjs I'll be creating a Nextjs app using

npx create-next-app taskboard

If you like to work with typescript you can pass the ts flag in the command, your command should look like this

npx create-next-app --ts taskboard

NOTE: I'll be using javascript throughout the tutorial, this series will have add an extra part where I'll be porting the app to typescript.

Now let's make our github repository and push the code in our local machine to the repo.

I'll be creating different releases, so you can go through the different version and check what the code looked like in each of them.

You can find the link for my repo here.

Vercel Setup

For hosting our project on vercel we will need the code repository first.

This is how my project configuration looks like in vercel.

HIT DEPLOY!

you can find the link for the application here

Integrating Supabase

We've successfully created our Nextjs app and it is deployed, now vercel, the last step that is remaining is integrating our project with supabase.
Click on setting tab of your project and then click integrations

You can refer this doc created by supabase or follow the steps below.

Now click on Browse Marketplace and search for supabase.

When you'll click add integration vercel will ask for the vercel account you want to add integration to, select your account and hit continue.

Hit continue and then add integration

Now when you'll click on your project setting and check environment variables section you'll see supabase environment variables already added

Let's make a task managing app with nextjs and supabase

Tanishq Singla — Sun, 11 Sep 2022 06:14:47 +0000

Hello everyone! Welcome to my tutorial, here I'll be showing you how I made a task managing app using Supabase and Next.js. The frontend will be hosted on vercel and we will be using supabase for managing our database.

Before I begin I would like to address that there might be some implementations or practices used which might have a better alternative and there may be some which are not recommended at all. I am open for recommendations as well as correction and you may use the comment section to do so.

The purpose of the blog is not to teach you the basics so knowledge of fundamental concepts is required.

Let's begin

Supabase setup

First, let's setup our database in supabase. Before creating your database you need to create a project in supabase, to do so click on new project and select your organization if you already have one, if not then make a new by clicking on New Organization.

Now enter your project details

Here's how my project details look like. Now let's hit Create New Project, now supabase will take a minute or two to setup your project.

NOTE: While creating your project details there will be an option to select region, you can select any region but keep in mind that you won't be able to change it later.

Creating our database table in supabase

Now this is one of the things I like about supabase. Supabase provides you two options for managing tables, either you can use the supabase UI or if you love writing SQL queries to manage your database you can do that too!
I am going to demonstrate how to create a table in both of them.

Create Table using Supabase UI

For using supabase UI go to table editor in the left pane and click new table.

After you click on create table you'll see a sidebar. In the sidebar you'll see option to provide name and description to your table and two database columns already provided i.e id and created_at.

I am going to change a few values

id data type to uuid and its default value will be generated by default value to to a function that will return uuids, you can do that by clicking on the hamburger menu inside the default value input field and selecting the uuid_generate_v4() under suggestions.
created_at to createdAt, cause I like camel casing.
I am also going to enable realtime, to show data instantly when someone updates it.

After:

Now, let's add different fields to our table. I am going to add following fields to the table.

title
description
status with default value pending and their type is going to be text.

The result is going to look like this:

Now just hit save and you have successfully created your database table.

Creating table using Supabase SQL editor

For creating table using SQL editor click on the SQL editor.

Click on New Query to open an editor where we will be writing our SQL query.

This is the query I'll be using to create our table.

create table tasks (
  id  uuid  default uuid_generate_v4()  primary key,
  "createdAt" timestamp default now(),
  title text,
  description text,
  status text default 'pending'
)

After writing the query click run and your table will be created, you can check that by clicking on table editor or view your database by clicking the database icon.

Now if you remember we enabled realtime in our table when we created it using the supabase UI, we can do the same for this table by writing a new query or using supabase UI.

You can refer supabase doc for enabling realtime. I've used the following query to enable realtime:``sql
begin;
drop publication if exists supabase_realtime;

create publication supabase_realtime;
commit;

alter publication supabase_realtime add table tasks
`

Using supabase UI to enable realtime.

For enabling realtime using UI click on Database icon in the left pane

Now click on Replications and click on the button under source column.

Now click on the switch to enable replication for your table, this will enable realtime for your database table.

NOTE: Supabase recommends using RLS (Row level security) when using realtime this is to prevent unauthorized read and writes to your DB, we will setup this later when we will setup authentication for our app.

Hurray! You've successfully created your table in supabase.

The DevOps Handbook review

Tanishq Singla — Mon, 02 May 2022 19:33:43 +0000

Introduction

It is often advised that one should not judge the book by its cover but it was not the cover that kept me from reading the book, it was the title, 'DevOps Handbook' and frankly I am not a devops guy, as a person who finds docker and Kubernetes very intimidating one can relate to my reluctance.
What got me started was the subtitle of the book 'How to Create World-Class Agility, Reliability, and Security in Technology Organizations', as it implies the book focuses more on designing the organization, rather than learning about a specific tool.

Who is this book for?

If you work in a company that works on a particular piece of technology then this book is for you irrespective of your role (Development/QA/Deployment or Operations/Security/Sales).

My Review of the book

The book starts with a brief history of various movements in manufacturing sector namely The Lean Movement, Toyota kata as well as movements in technology sector such as The Agile Manifesto and The Continuous Delivery Movement, and explains how all this resulted in what we call today DevOps.

Further into the book we encounter the concept of value stream, which the book centres around a lot. Value stream especially technology value stream is defined as the process required to convert a business hypothesis into a technology-enabled service that delivers value to the customers. The book explains the various parts of the value stream both in manufacturing sector and relates it with the different phases in technology sector.

DevOps Ideal

The authors consciously use the word ideal and encourage the reader to continually improve our setup/organisation to meet that ideal. Continuous Improvement in DevOps finds it roots back to The Lean Movement significance of which was realised in Toyota Kata.

The Three Ways: The principles of Underpinning DevOps

Finally we learn about the three important ways factoring on which we can define DevOps in practice in an organisation.
The first way enables fast left-to-right flow of work, the flow of work is the technology value stream which starts from Development to Operations and to the customer. In the first way we make our work more visible and constantly optimise our processes down the value stream.
The second way facilitates the fast and constant flow of feedback from right to left at all stages of our value stream. This requires Amplifying the feedbacks to prevent the mistakes from repeating as well as enabling faster detection and recovery.
The third way facilitates the creation of a generative, high-trust culture that supports dynamic disciplined and scientific approach to experimentation as well as risk-taking, overall creating a framework for organisational learning both from success and failure.

In the later part of the book we dive deeper into aforementioned concepts and explore DevOps in practice in various organisation. The authors provide real-life examples of organisations that adopted DevOps and how it improved their organisation as well as the product/service they offer the customer.

I hope this review kindles your interest in the book and encourages you to read it.

Too many commits, squash'em!!

Tanishq Singla — Thu, 21 Oct 2021 20:24:40 +0000

If you're someone like me who likes to commit every small change and end up having too many commits for a single feature and think "Wouldn't it be nice if you can merge some of those meaningless commits?"

Squash to the rescue

Turns out you can do just that in OG git. Let us look how to use squash, for following the tutorial I've created a github repo, you can open the repo by clicking here.

Fixing those commits

Take a min and look at the commit section in the repo and check the content of those commits.
If you're also weirded out by those awful commits then don't worry, we'll fix them together.

First let's find the commits that are meaningless.
The first one that I feel is meaningless is the 3rd commit form the start of branch, here we only change the title of the this can easily be merged with the boilerplate commit.

In a terminal do git rebase -i HEAD~5. This command will open the rebase command in interactive mode with the last 5 commits you've from the current commit.

pick b1b37b5 Added boiler plate code
pick 125e103 Changing title
pick c6c03ac Adding navbar list
pick 3816fa0 Adding Downloads in navbar list
pick 10534c0 Added Pricing section

...

You should see something like this in your text editor which you've chosen as default in git. You can do a bunch of stuff in here, commands for which will be available in the same.
Now, what we do is change that pick in our commit where we change our title to squash

The end result should look like this.

pick b1b37b5 Added boiler plate code
squash 125e103 Changing title
pick c6c03ac Adding navbar list
pick 3816fa0 Adding Downloads in navbar list
pick 10534c0 Added Pricing section

Changing the pick to squash will basically merge the Changing title commit with the Added boiler plate code commit.

Save the file and close it.

Now you should see this message popping up in a file

# This is a combination of 2 commits.
# This is the 1st commit message:

Added boiler plate code

# This is the commit message #2:

Changing title

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# Date:      Fri Oct 22 01:02:46 2021 +0530
#
# interactive rebase in progress; onto 2814ed0
# Last commands done (2 commands done):
#    pick b1b37b5 Added boiler plate code
#    squash 125e103 Changing title
# Next commands to do (3 remaining commands):
#    pick c6c03ac Adding navbar list
#    pick 3816fa0 Adding Downloads in navbar list
# You are currently rebasing branch 'master' on '2814ed0'.
#
# Changes to be committed:
#   modified:   index.html
#

In this file you can change the commit message for your final commit i.e commit formed after merging. As mentioned in the instructions, lines starting with # are going to get ignored, so I am going to comment the Changing title message and change the Added boiler plate code to `Added boilerplate and changed title.

Save and close the file and now do git log.

Tada! our commits are merged into one and our changes look more meaningful.

Now try doing the same for Added downloads section and Added Pricing section commits.

DEV Community: Tanishq Singla

Eating the toast

Introduction

The toast

Toasts can be missed

Smells of toast

Solution

Utilizing our button

Conclusion

References

Handling config files in go

Introduction

The solution

Config Handling

TL;DR

Things I improvised

Config handling in action

Conclusion

Deciphering JWTs

Introduction

What are JWTs?

Structure of a JWT

Unsecured and Signed JWTs

More on claims

Conclusion

The problem with Software Testing Curricula on Web

Introduction

Testing type, a total mess

The Jargon Problem

Conclusion

Write your own pre-commit hooks

Overview

Creating the project

Project overview

Writing our pre-commit

One last step

Limitations of this approach

Other solutions

You might not need separate config for prettier and eslint

Overview

You might not need separate config for prettier and eslint

Using eslint plugins

References

How google keep does input form

Introduction

The problem with input tags

Divs to the rescue

contentEditable Divs

Adding Placeholder

One last problem

Wrap up

Google Keep style input form in VanillaJS

What we're building

The Markup

Styling our form

The Script

Wrap up

Setup vercel with supabase for our project

Github Setup

Vercel Setup

Integrating Supabase

Let's make a task managing app with nextjs and supabase

Let's begin

Supabase setup

Creating our database table in supabase

Create Table using Supabase UI

Creating table using Supabase SQL editor

Using supabase UI to enable realtime.

The DevOps Handbook review

Introduction

Who is this book for?

My Review of the book

DevOps Ideal

The Three Ways: The principles of Underpinning DevOps

Too many commits, squash'em!!

Squash to the rescue

Fixing those commits