Forem: Piyush Kumar Baliyan

Supercharge Your Buttons: Simplifying Loading State with less boilerplate

Piyush Kumar Baliyan — Tue, 06 Jun 2023 01:12:03 +0000

As web developers, we all know the importance of buttons in our applications. Whether it's submitting a form, triggering an action, or making an API call, buttons play a crucial role in driving user interactions. However, when it comes to adding asynchronous code to button clicks, such as performing an API call and waiting for the result, we tend to get lazy, or forget to add it.

The problem for users

Have you ever encountered a situation where the button appeared stuck or unresponsive while waiting for the asynchronous operation to complete? It happens to the best of us. In the heat of coding, it's easy to forget to add the necessary loading state to our buttons, leaving users confused and frustrated.

In this article, we'll explore a simple yet powerful approach to enhance button functionality, specifically focusing on streamlining the loading state. Although we'll be using React as our example framework, these techniques can be applied to any web development framework.

Adding Loading State to Buttons

Let's begin by understanding the typical workflow involved in adding asynchronous, continuously running code to a button click:

The user clicks the button, initiating the action.
We set the loading state to true, indicating that the button is in progress.
We start performing the asynchronous code, such as making an API call.
Once the operation completes, we update the loading state to false.

However, every time we need to incorporate this functionality, we find ourselves writing repetitive boilerplate code. Moreover, overlooking the loading state can lead to poor user experience.

Simplifying Button Loading

To address these challenges and make the button loading experience easier to handle, we need an intuitive API and less boilerplate code.

Let's take a look at a typical button code snippet in React:

import { Button } from 'Button';

const APIButton = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleClick = () => {
    setLoading(true);
    setError('');
    submitFormToBackend()
      .then(() => {
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
      });
  }

  return (
    <>
      <Button
        onClick={handleClick}
        className={`${loading && 'btn-loading'} ${error && 'btn-error'}`}
        disabled={loading}
      >
        Label
      </Button>
      {error && <div>{error}</div>}
    </>
  );
}

This code demonstrates a common pattern where we manually manage the loading and error states while handling the button click. However, it seems like too much boilerplate (I am lazy to write a few extra key-strokes).

Streamlining Button Loading with an Enhanced Component

To make the button loading state easier to manage, we can modify the button component itself. The goal is not to clutter our button code but to complement it in a way that still keeps our code readable and maintainable.

Imagine treating the button as an input field with disabled, busy, and error states.

Let's enhance the button component to handle loading internally and simplify our code:

interface ButtonProps {
  loading?: boolean;
  disabled?: boolean;
  onClick?: (e: MouseEvent<HTMLButtonElement>) => (void | Promise<void>);
}

export const Button: FunctionComponent<ButtonProps> = (props) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
    const clickResult = props.onClick?.(e);

    // If our onClick returns a Promise, handle the loading states
    if (clickResult instanceof Promise) {
      setLoading(true);
      setError('');

      clickResult
        .catch((err) => {
          if (err.status === 403) {
            setError('Unauthorized');
          }
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }

  const buttonClasses = classnames('btn', {
    'btn-loading': loading,
    'btn-error': !!error
  });

  let buttonEl = (
    <button
      disabled={props.disabled || loading}
      className={buttonClasses}
      role={loading ? "progressbar" : ""}
    >
      {props.children}
    </button>
  );

  if (error) {
    buttonEl = (
      <Tooltip content={error} color="danger">
        {buttonEl}
      </Tooltip>
    );
  }

  return buttonEl;
}

With this enhanced button component, we have a more powerful and intuitive way of managing loading and error states. The component takes care of the loading state internally, allowing us to focus on writing cleaner and more concise code.

Implementing the Supercharged Button

Now, let's see how our new and improved button can simplify our code:

import { Button } from 'Button';

const APIButton = () => {
  const handleClick = () => {
    return submitFormToBackend()
      .catch((err) => {
        if (err.status === 403) {
          throw new Error('Unauthorized');
        }
      });
  };

  return (
    <Button onClick={handleClick}>
      Label
    </Button>
  );
}

By simply returning the promise from our handleClick function, we can effortlessly incorporate loading and error states. It's a single additional word that significantly simplifies our code and improves the user experience.

Taking Control of Loading and Error States

The promisified Button component we've built empowers us to handle different scenarios effectively:

If we don't want to show the loading state without a promise, we can simply omit the promise return from the handleClick function.
If we want to display the loading state but without an error tooltip, we can return the promise but catch the error, preventing the Button component from catching them.

Conclusion

In this article, we've explored how to supercharge our buttons by streamlining the loading state. By enhancing our button component, we can simplify the process, reduce boilerplate code, and provide a smoother user experience.

Lets contiue the discussion:

Is there any issues that you can find with this approach?
Let me know about your favorite mini-hacks that have eased your development process.

Get the Most Out of Google Docs with These URL Tricks

Piyush Kumar Baliyan — Tue, 15 Feb 2022 03:38:46 +0000

Google Docs

Google docs come with some neat URL tricks to use them according to your need.

Here we go...

Create new document directly from URL:
https://docs.new

If you are signed in with multiple accounts, then https://docs.new/2 will create new document with 2nd account, /3 for 3rd account, and so on.

This is the document that I get now, and we will use this for our tricks:
https://docs.google.com/document/d/1emMkr2qXskGDrHtRRrBwUVDNgQYXjtRYW7zTXuHyAak/edit#

Url Tricks

/preview Non-editable, no menubar, no toolbar, no ruler, just plain page
/copy Opens a copy of the document, editable by the user, directly from the URL.
/export?format=pdf Directly download a pdf of the document.
/view?rm=embedded No title of the document, editable. Good for embedding in iframes.
/view?rm=minimal No title, no menubar, no toolbar, only the ruler and page, editable. Good for distraction free minimal editor. -/view?rm=demo No titlebar, no menubar. Shows the toolbar. Good for a editor with basic controls.

Google Sheets

New Sheet

https://sheet.new

This is the sheet that we will work with
https://docs.google.com/spreadsheets/d/1ZpHY0TMkX_f1jNVSx_Rs0ieTE5yg8djLYvNDs4ZUwmA/edit#gid=0

/preview
Shows only the sheet (no title, no toolbar, no menubar, no cellnumbers). Good to use where only html is supported.
/view?rm=demo
No titlebar, no menubar. Shows editor toolbar and formular bar.
/view?rm=minimal
No titlebar, no menubar, no toolbar, no formulabar, just shows the sheet. Good for showing data in spreadsheet format.
/view?rm=embedded
No titlebar, shows menubar, toolbar, formulabar. Good for embedding in websites.

Google Slides

New Slides

https://slides.new

This is the slides that we will be working with:
https://docs.google.com/presentation/d/1X2_R8KWIadEId964QiyhLdjIH39dxTP1zOj621yWu4A/edit

/preview
Shows the slides and presentation control only.
/view?rm=embedded
No title and share controls.

Auto generate unique Avatar colors randomly

Piyush Kumar Baliyan — Sat, 29 Jan 2022 15:27:27 +0000

This is how JIRA shows each user avatar
Think for a moment about when you visit online discussion forums. Many of the users don't have any profile pic uploaded. Instead, there are just initials and background colors for the User Avatar.

And anytime you refresh, the background color remains the same.
Now take a second to think about how is this done.

**TLDR; Using string hash**

There can be two straightforward ways to do it.

You can store a background color, for each user in DB, and fetch every time with other user details OR
Generate a unique (but consistent) background color based on some unique user attribute (like email, username, or userID).

Let's start on #2.

Generate random color

Let's first learn some basics of CSS Colors in the webpage. And we will follow the following journey to do this.

Learn about CSS color formats
Choose a color format
Basics of string hashing
Normalize hash
Generate unique CSS color using Hash

CSS color Formats

From this MDN page, we can figure out the common CSS color formats:

Named Colors
- red, green, blue, aqua
RGB Hex
- #RRGGBB or #RGB
- #3b49df is blue, #333 is dark-grey
rgb() function
- rgb(255, 255, 255) is white
- rgba() for additional alpha (transparency) value
hsl() function
- hsl is Hue-Saturation-Lightness
- Hue - is for choosing color using the degree
- Saturation - less saturation is grey, more saturation is bright color
- Lightness - less lightness is black, more lightness is white
- hsla(), for additional alpha value There are some others, but we will stop here.

Choosing color format

Now, we can go with RGB and HSL both, but for the task at hand, HSL is comparatively easier to work with. ¯\_(ツ)_/¯ Why, you ask? Trust me...
And, you will find in end of article.

Creating string hash

Now we need to reduce a string to a simple number so that we can use that number to generate our color.
I'll dive deep into hashing in a different article (I mean, come-on... Computer Science community have dedicated huge time to create better hashing functions). But let's take an overview of what hash is.

From educative.io

Hashing is the process of converting a given key into another value. A hash function is used to generate the new value according to a mathematical algorithm. The result of a hash function is known as a hash value or simply, a hash.

Let's understand by an example and taking a string: Piyush Kumar Baliyan. Don't take this to be a definitive article about hashing. I am still learning about hashing and only know the basics.

Attempt 1



const getHashOfString = (str: string) => {
 return str.length;
}
console.log(getHashOfString('Piyush Kumar Baliyan')); //20

This is a super simple hash function, but it has very high chances of a conflict. (Conflict is when two different strings can generate the same hash).

Attempt 2

Lets modify the function to calculate the total of character code of each character in the string.



const getHashOfString = (str) => {
  const charArray = Array.from(str);
  return charArray.reduce((total, _char, index) => {
    return total += str.charCodeAt(index);
  }, 0);
}
console.log(getHashOfString('Piyush Kumar Baliyan')); // 1922

This is better hashing as it has fewer chances of conflict, but any string that has the same characters will result in conflict.

Attempt 3

Now, lets take total of charCode*index.



const getHashOfString = (str) => {
  const charArray = Array.from(str);
  return charArray.reduce((total, _char, index) => {
    return total += (str.charCodeAt(index) * index);
   }, 0);
  }
}
console.log(getHashOfString('Piyush Kumar Baliyan')); // 18329

This is better and has fewer chances of a conflict.

But this becomes a problem as this number (charCode*index) can become very large for large strings, and can still conflict Maths (╯°□°)╯︵ ┻━┻.

Attempt 4

Attempt 5

.

Attempt x-1

Little better, but still no-where near to the actual hashing algos like md5 and sha.



const getHashOfString = (str: string) => {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  hash = Math.abs(hash);
  return hash;
};
console.log(getHashOfString('Piyush Kumar Baliyan')); // 3206952792

Normalize Hash

Now we have a hashing algo, but it returns any number, and we need numbers like these:

Hue 0-360
Saturation 0-100
Lightness 0-100

So let's create a function normalize to get the hash number to within our range.



const normalizeHash = (hash: number, min: number, max: number) => {
  return Math.floor((hash % (max - min)) + min);
};

const h = normalizeHash(myHash, 0, 360);
const s = normalizeHash(myHash, 0, 100);
const l = normalizeHash(myHash, 0, 100);

Generate Unique Color

Now, we simply create a string using our h,s,l values.



const hRange = [0, 360];
const sRange = [0, 100];
const lRange = [0, 100];

const generateHSL = (name: string): HSL => {
  const hash = getHashOfString(name);
  const h = normalizeHash(hash, hRange[0], hRange[1]);
  const s = normalizeHash(hash, sRange[0], sRange[1]);
  const l = normalizeHash(hash, lRange[0], lRange[1]);
  return [h, s, l];
};

const HSLtoString = (hsl: HSL) => {
  return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
};

Here is what the output looks like:

That's it!?

....... ....... ....... _NO!NO!NO! Not so Fast_

If you see this can generate colors that are too harsh (saturated), or just too grey. And can generate colors that are too white or just too dark.

And this was the reason to use HSL. In RGB, the individual values or r,g,b makes the illuminition (lightness) of a color, and it is little difficult to control.

Just do this to get better color generation.



const hRange = [0, 360];
const sRange = [50, 75];
const lRange = [25, 60];

Now, play around with the below JsFiddle, and see how the saturation and lightness ranges affect the color generation.

Use the light/dark theme to see which color ranges look good on respective theme.
Drag the saturation to left, see how colors turn grey
Drag the lightness to right, see how the colors become white (and reverse - black).
Use range, to find out the best saturation and lightness for your brand.

Bonus tip

Use the hue limiter to generate colors like all green tones, or all purple tones, to better match with your brand colors.

Next Time

I am gonna write about how to generate User Avatars... NFT style.

Mobile issue with 100vh | height: 100% !== 100vh [3 solutions]

Piyush Kumar Baliyan for AdmitKard ・ Feb 14 '20

#css #mobile #viewport

RegExp Cheatsheet to speed up code editing and refactor

Piyush Kumar Baliyan — Tue, 04 Jan 2022 07:30:00 +0000

Have you ever asked yourself some of these questions:

How do I find all the imports of a particular function?
How do I replace all the variables of the old Service implementation with ServiceLegacy.
How do I fix the typo across all the files?
Which files a particular API endpoint is being used?

If yes, you might find this article a little helpful for your future endeavors.

For some of you, regex might be a mighty beast too difficult to conquer, for a few of the experts out there, my salute to you for mastering the regex magic.

I myself am pretty average in areas of regex, but I know enough to make some of my tasks easy.

I'll start with some regex basics, then move to some common patterns, and then discuss using the newfound regex knowledge (i.e. the topic, speed up code editing).

A little background

Regex (or sometimes RegExp - as in JS), is a sequence of characters that specifies a search pattern.

Perl was one of the modern languages to provide inbuilt support of regex (as Perl was used for text processing, regex support was a necessity), and many of today's tools and languages (including JS and grep) use Perl inspired regex engines.



^([A-Za-z0-9_.]+)@([A-Za-z0-9-]+)\.([A-Za-z]{2,15})$

Simple email regex

Regex Basics

Symbol	Meaning
.	any character except newline
*	Match 0 or more characters
+	Match 1 or more characters
?	Match 0 or 1 characters
[abc]	Any of a,b or c
[^abc]	not a,b or c
[a-z]	Any of a to z
^$	Start and end of string
\w\d\s	word, digit, whitespace
\W\D\S	not word, digit, whitespace
a{5}a{2,}	exactly five, two or more
a{1,3}	between one & three

Find the cheatsheet here Regular Expression Cheatsheet

Examples

.* Match anything (Will match if the string is empty)
.+ Match anything (will not match if the string is empty)
^[a-z]+$ Start and end tokens are there, [a-z]+ will match a string containing characters between a-z and + will match if there is at least 1 character. So the expression will match any alphabetical string.

You can learn more here Regexone

Creating Regex

Now let's try making some regex

1. Valid CSS Color

This is simple, should be a hexadecimal string of format RRGGBB.

^$ - We don't want any stray ending or starting characters, without this, this will match if any random string contains the hexadecimal string.
^[a-f0-9]+$ - match a-f, 0-9, this is now a valid hexadecimal string, but not valid css color
^[a-f0-9]{6}$ - exact length of 6
^[a-fA-F0-9]{6}$ - case insensitive match

2. Mobile Number

The condition is, should start with +, then 91 (India), then 10 digits.

^$ - We want number, and not string containing number.
^\+91.*$, starts with +91, then .* will match anything (+ is special character, so its escaped with \
^\+91[0-9]{10}$, replace .* with [0-9]{10} exact 10 occurrences of 0-9 digits.

Let's add another condition, in my country, the number starts with 6,7,8,9, then random 9 digits.

^\+91[6789][0-9]{9}$ - This will do it.

I use the RegExr playground to test my Regex.

Find and replace in JS

In JS RegExp, we can have something called capture groups, with which we can group parts of our regex and use them in string manipulation using regex.

A simple example, in the string aabbcc, replace all c with a



// This will replace first occurrence of all `c`s in the string
'aabbcc'.replace(/c*/, 'a');
// OR better
// this will replace all `c`s with a
'aabbcc'.replace(/c/g, 'a');

Here /g is a modifier for global search in regex. Other modifiers are /i (case insensitive search), /m, for multiline search.

VSCode find and replace

Let's say you have a typo in your code, and you named your type as ButonProps. And you want to replace it with ButtonProps.
Simple Find and replace in VSCode lets you do that.

Just put the required strings in each input box

Find Regex in vscode

Now let's say you want to find all the occurrences of ButtonProps import. The syntax will look something like this



import {ButtonProps} from 'Button';

But it can be something more complex:



import Button, {ButtonProps} from 'Button';
//OR
import Button, {ButtonProps, ButtonColor} from 'Button';

Now comes our time to use regex in VSCode.

The little button .* in the search input box is the regex button toggler.
With regex on, we can now use regex in VSCode search.

So now let's search, and create our regex.
We will first start simple, and then narrow down our search by adding more regex symbols.
Our import statement looks like



import something ButtonProps something from button;

so our regex will be (replace something with .*
import .*ButtonProps.*from '.*Button';

But there is some noise, we are also getting IconButtonProps. Let's remove that.
What we don't want is ButtonProps to be prefixed by any alphabets.
import .*[^a-zA-Z]ButtonProps.*from '.*Button';

Now our search is only showing ButtonProps without any noise.

Replace regex in VSCode

Now let's say you want to rename the Button component to Btn.
We will need to replace these three occurrences:

imports (import Button from 'Button')
Usage (<Button ></Button>)
Assignments (const MyComponent = Button)

Lets start.

1. imports

Here the () are capture groups that we will access using $1, $2 respectively.

This is what VSCode will show you:

What we have done here is select everything between import and Button by first capture group, then everything between Button and from by second capture group, and so on.
Then we carefully want to replace only Button with Btn.
So we replaced the first capture group with itself ($1), the second one with $2, the third one with $3.
Hence we get our replacement string import$1Button$2from '$3Button';.
Now change Button to Btn, and we get import$1Btn$2from '$3Button';.

And your button imports are now renamed.

2. Usage

Continuing on above.

Find <Button that does not have trailing alphabets (to omit something like <ButtonGroup and maybe have a trailing newline. then replace all of them with <Btn$1 i.e. using $1, replace space with space, newline with a newline.

End bracket now

This is pretty easy, but why *. Since </Button>, </ Button> and </Button > all are valid JSX.
But why not $1, or $2. Since this will also clean up the code and replace all the above with clean <Btn>.

3. Assignments

This one should not be that much in your code, and you can directly search for Button now.
Find - Button[^']

But what is [^'] for? To exclude all the occurrences of import.*from 'Button';.

Conclusion

With this, all our occurrences of Button are now Btn. And we now understand Regex a little better and use it to make our work easy.

In the future, I'll also try to write some articles highlighting more use-cases of regex to make your life easier.

Enforce git commit messages automatically

Piyush Kumar Baliyan for AdmitKard ・ Jul 2 '20

#git #bash #github #productivity

React Storybook Controls - The easy way

Piyush Kumar Baliyan — Sun, 12 Sep 2021 07:16:32 +0000

Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

Storybook for React offers functionality to control props from a very pretty ui.

We will explore these things in this post:

Knobs vs Controls
The good - React-docgen
The bad - More words to type
The solution
Bonus - Snippets

Till storybook v5, this was achieved using a community plugin Knobs, which is very popular with around ~1m downloads weekly.

Knobs weekly downloads

In Storybook v6, the team released Essentials addons:

This was in alignment with Storybook's Zero-config initiative (which included out-of-box TS support, essentials addons, and extended support of more frameworks).

Knobs vs Controls

With this storybook migrated from Knobs in v5 to Controls in v5

Knobs

Knobs in v5

export const withAButton = () => (
  <button disabled={boolean('Disabled', false)}>{text('Label', 'Hello Storybook')}</button>
);

Controls

Controls in v6

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    variant: {
      options: ['primary', 'secondary'],
      control: { type: 'radio' }
    }
  }
};

The good

With the controls, storybook can automatically detect props using react doc-gen, and can automatically generate all the controls for you.

The bad

For me, some of the controls were not automatically generated due to some of HOCs that we were using (I know, fixing HOCs can fix react docgen as well).

Also, in-case I want to add custom controls, or want to define controls on my own, then the syntax is a little bit more typing over Knobs syntax.

The Solution

Given the new controls syntax, and the ease of use of old Knobs functions, I ended up creating my own wrappers over new controls.

Wrappers

The approach looks like this:

export const select = <T extends any>(options: T[], defaultValue?: T, props: Partial<ArgProps> = {}) => {
  const allProps: Partial<ReturnedArg<T>> = createControlFromProps<T>(props);
  const type = props.type || 'select';

  allProps.defaultValue = defaultValue || options[0];
  allProps.control = { type, options };
  return allProps;
};

So basically, I took input in knobs format, and returned in controls format.

Here is the full file with these controls:

select
boolean
text
number
obj
action

Usage

With this, the usage looks like:

const argTypes = getArgs<InputProps>({
  label: text('Name'),
  size: select(['small', 'medium', 'large']),
  fullWidth: boolean (false),
  onChange: action('change'),
});

Here is the full code with Input Stories:

Bonus - Snippets

An added bonus will be, create a snippet for a story, and next time have a story ready to be served with few key-strokes.

Create PR Builder in bitbucket, DangerJS and Jenkins

Piyush Kumar Baliyan — Sat, 23 Jan 2021 04:48:41 +0000

AKA Making a pull request builder for bitbucket [baby-steps]

What is DangerJS?

From official website

Danger runs during your CI process, and gives teams the chance to automate common code review chores.
This happens by Danger leaving messages inside your PRs based on rules that you create with JavaScript or TypeScript.

We (at Admitkard) also recently decided to integrate DangerJS with our React + TS setup to get us messages on our Pull requests in Bitbucket.

We are using Bitbucket and there are very few articles on the web around Bitbucket+DangerJS (as Github is more popular choice). So I decided to write an article to help you through.

Let's get started.

There are four big parts of this:

Your repo
Local testing
Bitbucket
Jenkins.

Changes in Repo

Here are the step-by-step guides that we did in our (React +TS) repo. You can follow the official guide here: https://danger.systems/js/guides/getting_started.html

Install DangerJS into your REPO
yarn add danger --dev
OR
npm install --save-dev danger
Create a dangerfile
Create a new file dangerfile.js or dangerfile.ts
Add following code to dangerfile

import { message, warn, fail, danger } from 'danger';
import { exec } from 'child_process';
import * as path from 'path';

// TSLint
const runTSLint = () => {
  const modifiedFiles = danger.git.modified_files
    .filter((file) => /\.ts[x]?$/.test(file))
    .join(' ');
  const tsLintExec = path.join(__dirname, 'node_modules', '.bin', 'tslint');
  const tslintCommand = `${tsLintExec} ${modifiedFiles} -t prose --project tsconfig.json`;
  const tslintOut = exec(tslintCommand, (error, stdout, stderr) => {
    if (error) {
      warn(stdout || stderr);
    }
  });
};
runTSLint();

danger.git.modified_files is danger API for giving us modified files in the PR attached to a particular build (you can also use git API, but you will have to fiddle through finding commits in current PR).
tsLintExec is our local installation of tslint through packages
exec executes our command for tslint

tslint will fail if there are tslint errors, hence we will get error

warn will tell dangerJS to post a warning on our pull-request.

Modify package.json for dangerJS

This step is optional but it will make it easier for us to run dangerjs.
add script in your package.json

    "scripts": {
      "danger": "danger",
    },

This is all that is needed in your repo.

To test your changes locally, you will need to setup access tokens in your bitbucket repo. So, we’ll first move to Bitbucket part

Changes in Bitbucket for DangerJS

This article is for the bitbucket cloud, but steps should be similar for the bitbucket server as well.

Get Bitbucket UUID

Get UUID of the user which DangerJS will use to post these comments (it is recommended to create a bot user for such tasks).

In bitbucket, go to your profile. Your URL will change to https://bitbucket.org/%7B<uuid>%7D/
This <uuid> is what we need.

Get Bitbucket OAuth key and secret
Now we need to set up an OAuth client for danger (so that it can post comments on your PR).

Go to bitbucket settings [Profile Icon > Bitbucket Settings]
Go to OAuth
Add Consumer
Give it a Name
Give it these permissions:
1. Repositories
  1. Read
  2. Write
2. Pull requests
  1. Read
  2. Write

You will get a OAuth key and OAuth secret.

Thats it for now, but since we are at it. Let’s do one more change in bitbucket that we’ll need later.

Add Webhook to bitbucket

We need to add webhook so that we can trigger our jenkins jobs remotely using this webhook.

For this go to your repo

Go to Settings > Webhooks
Add Webhook
Give it a title
Give it URL https://<JENKINS_URL>/generic-webhook-trigger/invoke?token=<TOKEN>
Triggers > Choose from a full list of triggers
1. Pull Request
  1. Created
  2. Updated

That's it for bitbucket.
Now let’s test this on our local repo.

Testing DangerJS on local terminal

First, we need to configure some env variables for dangerJS. These variables basically are the bitbucket credentials that we need to provide to dangerJS.

Setting Environment Variables for DangerJS for Bitbucket

export DANGER_BITBUCKETCLOUD_OAUTH_KEY=<OauthKey>
export DANGER_BITBUCKETCLOUD_OAUTH_SECRET=<OauthSecret>
export DANGER_BITBUCKETCLOUD_UUID={<uuid>}

Now you can test run dangerJS on a PR:

    yarn danger pr https://bitbucket.org/<org>/<repo>/pull-requests/<id>/

You will see dangerJS output in your terminal with warnings.

To actually test how this will behave when it will integrated in your CI pipeline, an additional step will need to be done. (This step is optional)

export DANGER_FAKE_CI="YEP"
export DANGER_TEST_REPO='<org>/<repo>'

Now run DANGER_TEST_PR='<PRid>' npm run danger ci
Danger will run and this will actually post comment on your PR

With local testing done, now its time to integrate it with Jenkins.

Integration of Jenkins with DangerJS and bitbucket

Installing required plugins

Install https://plugins.jenkins.io/generic-webhook-trigger

Now making a Jenkins job for our Pull Request Builder

Create a new Freestyle project in Jenkins
Go to Source Code Management and choose git as SCM
Add repo URL and credentials (SSH or username password)
Now move to Build Triggers, and choose Generic Webhook Trigger
Under Post content parameters, Add a parameter
1. Parameter
  1. Variable: branchName
  2. Expression: $.pullrequest.source.branch.name JSONPath
2. Parameter
  1. Variable: pullRequestId
  2. Expression $.pullrequest.id JSONPath
Token: <Token> (this token has to be same as we configured in our webhook
Cause: Reason for trigger (you can use Env variables and the Post Content Parameters that we configured above)
Now to go Bindings
1. Add your bitbucket credentials bitbucketDangerJSOauthKey and bitbucketDangerJSOauthSecret to jenkins credential store
2. Also add bitbucketUserUUID to jenkins as well
Go to Build

Under build add this:

#!/bin/bash
export ghprbGhRepository="<org>/<repo>"
export ghprbPullId=$pullRequestId
export DANGER_BITBUCKETCLOUD_UUID=$bitbucketUserUUID
export DANGER_BITBUCKETCLOUD_OAUTH_KEY=$bitbucketDangerJSOauthKey
export DANGER_BITBUCKETCLOUD_OAUTH_SECRET=$bitbucketDangerJSOauthSecret
npm install
npm run danger ci

ghprbGhRepository is your repo URL
ghprbPullId is our PR id that we extracted from webhook
rest are Variables that we did in our repo.

Note Jenkins might give you error Skipping Danger due to this run not executing on a PR.. This is due to missing variables.

Why the variables are named like so even for Bitbucket?
Now ghprbGhRepository and ghprbPullId, sounds like they will be required for github-pull-request-builder only, but this is not the case.

Take a look here: https://github.com/danger/danger-js/blob/master/source/ci_source/providers/Jenkins.ts

You can see under isPR, it checks for these variables (for bitbucket as well). I am going to raise a PR with dangerJS to get these variables fixed to something generic like DANGER_PR_REPO and DANGER_PR_ID.

With this, your PR will trigger Jenkins jobs and post comments on your PR if anything fails in TSLint.
You can easily extend DangerJS to post other comments as well and can control your Jenkins pipeline output.

Final Words

DangerJS provides an easy way to make it easy for the reviewer and the developer to get notified of issues in their code that can be configured with build tools.
In words of Danger

⚠️ Stop saying "you forgot to …" in code review

Enforce git commit messages automatically

Piyush Kumar Baliyan — Thu, 02 Jul 2020 09:30:10 +0000

TLDR;

You can enforce git messages by using custom git shortcuts in shell/bash script.

Backdrop and motivation

So, we use JIRA and bitbucket, and the good thing with them is that they integrate very well with each other, e.g.

it links JIRA issues in your Bitbucket PRs
you can change Jira status from within Bitbucket
you can create development branches from inside JIRA issue

But this needs some effort to ensure the consistency in your git messages and branch names, plus if you can follow a certain pattern, it becomes for everyone to collaborate since everyone is following the same set of rules.

Rules we follow

So here are a couple of rules that we follow for branch management and commit messages:

git branch name <username>-JIRA-1234[-hotfix|-patch]
commit message JIRA-1234 some actually useful commit message
set a ticket In Progress once you start working on it

These are pretty straight forward, and I believe some of you are also following these rules (or at least some variation of it). But sometimes you forget to actually follow these, and this gets caught in PR reviews, or sometimes get merged.

3 solutions

3. Use git aliases
2. Use bash aliases (Easiest)
1. Use own implementation of bash functions (Most powerful & coolest)

3. Git Aliases

Git aliases are cool, and you can create your own shortcuts for common tasks
e.g. Use git co instead of git checkout
And here is how you can do it yourself.

$ git config --global alias.co checkout
$ git config --global alias.br branch
$ git config --global alias.ci commit
$ git config --global alias.st status

OR
You can use config files to manage aliases e.g. .gitconfig

[alias]
co = checkout

You can read more about it here
https://www.atlassian.com/git/tutorials/git-alias

2. Bash Aliases

Bash aliases are another approach similar to creating your own shortcuts (that are even shorter than the above approach).

Open ~/.bashrc using vim or any other text editor
Add this to bottom of your file

alias gco="checkout"
alias gbr="branch"
alias gci="commit"
alias gst="status"

Save it
Run source ~/.bashrc OR restart terminal
run gco master and you will see that you are now on master and our command is working.

You can have a look at common aliases here

1. Custom bash functions (Most powerful)

This is the most tricky, but most powerful approach. With this, you can do cool things like:

auto add JIRA id to commit message
get JIRA status in your bash terminal
Directly open PR URL of your current branch in your browser
and many more

The way I do is, define some env variables like your username, jirapassword, etc, and do a curl request to get status.
You can also append the JIRA ticket number automatically to commit messages using bash functions.

Here is the gist for the same:

Download this file wget https://gist.githubusercontent.com/piyushkmr/fe64a2c6dde0b42c0d95f945dbf96fc2/raw/devhelp.sh
Source it in ~/.bashrc
run gh to get a list of available commands

gcof JIRA-1234 # create a branch with username piyush-JIRA-1234
gpoh # push changes at HEAD right now
gopr # Open the new PR link for your current branch
jira # show Jira status of the current branch

0. BONUS Tip

Use custom bash prompt to get some more space with those big directory names, and show current git branch, like this

Cool, huh!!

Do the same here as you did above for devhelp.sh

Mobile issue with 100vh | height: 100% !== 100vh [3 solutions]

Piyush Kumar Baliyan for AdmitKard ・ Feb 14 '20 ・ 3 min read

#css #mobile #viewport

Mobile issue with 100vh | height: 100% !== 100vh [3 solutions]

Piyush Kumar Baliyan — Fri, 14 Feb 2020 15:32:19 +0000

So there are various ways to size any element on a webpage.
We are familiar with common CSS units px, em, pt (and uncommon one cm, mm, in) with support from the first version of CSS (https://www.w3.org/TR/REC-CSS1/#units).

With newer viewport units, first support came in 2013 with FF and Chrome being the first ones quickly followed by Safari and Opera. (yes, IE used to suck even in those days).

Now with newer viewport units and a ton on mobile devices, the browser communities don’t seem to agree on how to implement them in mobile devices.

In mobile, vh seems to consider the address bar as part of the viewport (IDK why is it named as ‘view’port then).

On mobile 100vh !== 100%

This creates weird issues with mobile viewport heights like this:

Now this is an issue and indeed a very frustrating one, but we’ll discuss a couple of solutions one by one.

1. Use 100% instead of 100vh - “DOM tree nightmare”

Now the quickest, and most CSS way is to use 100% in your page for the whole DOM tree till your target element:

This will work correctly on both mobile and desktop websites. However it is very difficult to propagate 100% through every DOM node in the branch of your element, especially if it is buried deep in the tree (however, you might not come across too many use cases like this).

2. Use JS window.innerHeight for your element - “JS hack”

The second way is to use window.innerHeight for your target element, as on mobile, it will always give you the viewable height of the viewport, but again, this again creates a problem as you will have to write this tiny JS for each of your use cases.

So can there be an easy solution, which can give you the best of both worlds?

3. Use custom vh (CSS variable) - best of both worlds

So the solution, (you might find very few solutions floating around for this typeof fix).
Before proceeding with this solution, let's see what are the cons to this. This solution involves using CSS variables (custom properties) and here https://caniuse.com/#search=css%20var, you can see that support for CSS variables came in early 2017 for major browsers, so you might need to think if you want to use this.

Step 1

So here we’ll be creating something like this:

Now what we have to do is set CSS variable --vh using window.innerHeight.



window.addEventListener('resize', () => { 
  document.querySelector(':root').style
    .setProperty('--vh', window.innerHeight/100 + 'px');
})

Now you will have --vh available in your whole app.

Here comes the second step of this

Step 2

You can now use this variable anywhere in your code



height: calc(100 * var(--vh));

This works like vh (with a little too verbose representation).

100vh - height: calc(100 * var(--vh));
10vh - height: calc(10 * var(--vh));
1vh - height: calc(1 * var(--vh));

And you can use it anywhere in your CSS code.

RegExp Cheatsheet to speed up code editing and refactor

Piyush Kumar Baliyan for AdmitKard ・ Jan 4 '22

#javascript #vscode #regex #webdev

Verdaccio: Hosting your own Private NPM Registry

Piyush Kumar Baliyan — Wed, 04 Dec 2019 05:33:56 +0000

What is a Private NPM registry?

Sometimes you need to publish a npm package to use within your org or team. There are many services online that provide solutions to this problem.

You can subscribe for Npm Orgs or GemFury and services like these.

But sometimes you want a quick and cheap solution to test things out, or to start with things. Here is when Verdaccio helps you to start.

How it looks:

Installation

Verdaccio is available as a npm package and can be downloaded. Install it as a global package.

npm install — global verdaccio
yarn global add verdaccio

To give it a quick trial run this now

verdaccio

Running Server

You can run verdaccio via many service managers, pm2 is fairly simple to set up and use.

Just install it globally:

npm install -g pm2
yarn global add pm2

Run verdaccio with pm2

pm2 start verdaccio — — listen 0.0.0.0:4001

You can now access verdaccio on http://localhost:4001.

Public Access

We need to expose our 0.0.0.0:4001 to some domain on port 80 (or 443 for https).

It can be done via any web-server Apache, Nginx, etc.

Once you install Nginx, and it is running and listening on port 80, you can start forwarding your requests to the verdaccio server.

Create and edit Nginx verdaccio.conf

vim /etc/nginx/sites-available/verdaccio.conf

Add this to your conf:

server {
  listen 80;
  server_name npm.company.net;
  location / {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_pass [http://localhost:4001/;](http://localhost:4001/;)
  }
}

Add this file to the list of Nginx available-sites. (Nginx recommends to add conf to sites-available and create a symlink in sites-enabled).

ln /etc/nginx/sites-available/verdaccio.conf /etc/nginx/sites-enabled/

Restart Nginx

sudo service restart nginx

Configuring Domain and DNS

Add your server IP to your DNS to access via a domain. You can do this by adding A Name to your DNS manager.

A Name | npm.company.net | xxx.xxx.xxx.xxx | TTL

Refresh your cache and your registry is now hosted on [http://npm.company.net](http://npm.company.net.).

Publish Packages

Verdaccio requires authentication for publishing, thus we need to log in. First, you need to add yourself to the npm registry to publish any package:

npm adduser --registry http://npm.company.net

Once you are logged, you can now publish.

npm publish --registry http://npm.company.net

Install packages

npm or yarn will use the default registry for installing packages. But you can override for one package.

npm install @scope/package --registry http://npm.company.net

Or to avoid using this again and again there is an intelligent way.

In your .npmrc

// .npmrc
@scope:registry=http://npm.company.net

Or in .yarnrc

// .yarnrc
"@scope:registry" "http://npm.company.net"

After this your normal packages like

npm install -g typescript will be installed from default registry
npm install @scope/pkg will be installed from your private registry

Conclusion

So you can set up your registry very quickly, on your infra. As long as your needs are limited and you don’t need very customized scoping and roles management, verdaccio will be able to handle your requirements.

A quick hint if you need to think about scale (like 1000s of employees publishing 1000s of packages), you can look at Nexus Repository.

Drop a comment if you have some suggestions, need more info or help around this.

Find more awesome stuff that AdmitKard is doing here: https://dev.to/admitkard

Forem: Piyush Kumar Baliyan

Supercharge Your Buttons: Simplifying Loading State with less boilerplate

The problem for users

Adding Loading State to Buttons

Simplifying Button Loading

Streamlining Button Loading with an Enhanced Component

Implementing the Supercharged Button

Taking Control of Loading and Error States

Conclusion

Get the Most Out of Google Docs with These URL Tricks

Google Docs

Url Tricks

Google Sheets

New Sheet

Google Slides

New Slides

Auto generate unique Avatar colors randomly

Let's start on #2.

Generate random color

CSS color Formats

Choosing color format

Creating string hash

Attempt 1

Attempt 2

Attempt 3

Attempt 4

Attempt 5

.

.

.

Attempt x-1

Normalize Hash

Generate Unique Color

Bonus tip

Next Time

Read Next

Mobile issue with 100vh | height: 100% !== 100vh [3 solutions]

Piyush Kumar Baliyan for AdmitKard ・ Feb 14 '20

RegExp Cheatsheet to speed up code editing and refactor

A little background

Regex Basics

Examples

Creating Regex

1. Valid CSS Color

2. Mobile Number

Find and replace in JS

VSCode find and replace

Find Regex in vscode

Replace regex in VSCode

1. imports

2. Usage

3. Assignments

Conclusion

Read Next

Enforce git commit messages automatically

Piyush Kumar Baliyan for AdmitKard ・ Jul 2 '20

React Storybook Controls - The easy way

Knobs vs Controls

Knobs

Controls

The good

The bad

The Solution

Wrappers

Usage

Bonus - Snippets

Create PR Builder in bitbucket, DangerJS and Jenkins

AKA Making a pull request builder for bitbucket [baby-steps]

What is DangerJS?

Changes in Repo

Modify package.json for dangerJS

Changes in Bitbucket for DangerJS

Get Bitbucket UUID

Add Webhook to bitbucket

Testing DangerJS on local terminal

Integration of Jenkins with DangerJS and bitbucket

Installing required plugins

Final Words

Enforce git commit messages automatically

TLDR;