mudssrali

$ sudo apt-get update
$ sudo apt-get install unzip wget
$ wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
$ unzip ngrok-stable-linux-amd64.zip
$ sudo mv ./ngrok /usr/bin/ngrok
$ ngrok

Connect Account

mudssrali

Steps to configure tailwindcss in reactjs create-react-app

Note: Make sure you're runing Node.js 12.13 or higher in order to buid tailwindcss >2.0

• step # 1

npm install tailwindcss@latest postcss@latest autoprefixer@latest -D

• step # 2

mudssrali

• Create a wrapper component

import React, { useEffect } from 'react'
import { withRouter, RouteComponentProps } from 'react-router-dom'

const ScrollTop: React.FC<RouteComponentProps> = ({ history, children }) => {
	useEffect(() => {
		const unlisten = history.listen(() => {
 window.scrollTo(0, 0)

mudssrali

// @param obj: for which the given properties exist
// @param fields[]: is an array of given object properties
// @return false if every field is not blank
// @return an array of labels that are blank

const checkCompulsoryFields = (obj: any, fields: string[]): boolean | string[] => {
	const list = fields.filter(field => field in obj && obj[field].trim() === "")
	return list.length === 0 ? false : list

mudssrali

Following things are required must be installed on ubuntu (Debian) [I use ubuntu linux]:

• Elixir

  • Add Erlang Solutions repository: wget https://packages.erlang-solutions.com/erlang-solutions_2.0_all.deb && sudo dpkg -i erlang-solutions_2.0_all.deb
  • Run: sudo apt-get update
  • Install the Erlang/OTP platform and all of its applications: sudo apt-get install esl-erlang
  • Install Elixir: sudo apt-get install elixir

• Docker

mudssrali

Setup CRA app with typescript template and tailwind

I always avoid DRY (don't repeat yourself), but for some reasons, I do this to refresh my mind, my knowledge about the toolings that I'm going to use in new project.

Time to follow steps:

• Step 1

  npx create-react-app my-app --template typescript OR

mudssrali

export const useStripe = () => {
	const [stripe, setStripe] = useState()

	useEffect(() => {
		const stripeJs = document.createElement('script')
		stripeJs.src = 'https://js.stripe.com/v3/'
		stripeJs.async = true
		stripeJs.onload = () => {
 setStripe(window.Stripe(STRIPE_API_KEY))

mudssrali

React custom hook to show/hide content based on outside click

import React, { useState, useEffect, useRef } from 'react'

export const useComponentVisible = (isVisible = false) => {
  	// ref of elem for which you want to detect outside click
	const ref = useRef(null)
	const [isComponentVisible, setIsComponentVisible] = useState(isVisible)

mudssrali

Keybase proof

I hereby claim:

• I am mudssrali on github.
• I am mudssrali (https://keybase.io/mudssrali) on keybase.
• I have a public key whose fingerprint is CD9B 8112 82E3 12AA 2390 367F A1D9 A7D9 3FEF 2B1B

To claim this, I am signing this object:

mudssrali

const generateRandomString = (stringLength) => {
	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
	const charactersLength = characters.length

	let randomString = ''
	for (let i = 0; i < Math.abs(stringLength); i++) {
		randomString += characters.charAt(Math.floor(Math.random() * charactersLength))
	}

	return randomString