DEV Community: kiranojhanp

Leetcode Palindrome Number - Fastest solution 100%

kiranojhanp — Sat, 18 Feb 2023 13:55:24 +0000

This method is MUCH FASTER than other methods which convert the number to an Array and then reverse it and join it again.

Code

Typescript

function flipInt(num: number): number {
  let remainder: number,
    value: number = 0;
  while (num > 0) {
    remainder = num % 10;
    value = value * 10 + remainder;
    num = (num / 10) | 0;
  }
  return value;
}

function isPalindrome(x: number): boolean {
  return x >= 0 ? flipInt(x) === x : false;
}

Javascript

function flipInt(num) {
  let remainder,
    value = 0;
  while (num > 0) {
    remainder = num % 10;
    value = value * 10 + remainder;
    num = (num / 10) | 0;
  }
  return value;
}

function isPalindrome(x) {
  return x >= 0 ? flipInt(x) === x : false;
}

Inspired from:
https://medium.com/@ManBearPigCode/how-to-reverse-a-number-mathematically-97c556626ec6

Add storybook.js to a sveltekit project

kiranojhanp — Thu, 13 Jan 2022 06:12:58 +0000

First Create a sveltekit project and initialize storybook.js

1. npm init svelte@next sb-svelte
2. cd sb-svelte
3. npm install
4. npx sb@next init
5. npm run storybook

Running storybook at this moment should give you error. Here are the steps for the fix:

change "type": "commonjs" in package.json

rename svelte.config.js to svelte.config.mjs
replace your .storybook/main.js with following code:

module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf'],
    framework: '@storybook/svelte',
    svelteOptions: {
        preprocess: import('../svelte.config.mjs').preprocess
    }
};

Reusable form components using react + react hooks form + yup + typescript

kiranojhanp — Tue, 21 Dec 2021 16:02:07 +0000

Introduction

This Post helps to build a simple form with basic elements like input and select using react hooks form that manage form data, submission, and validation. By the end of this post, we will create reusable components with following syntax.



<Form>
 <Input name="email" type="email" />
 <Input name="password" type="password" />
</Form>

What is React hooks form?

A library to build Performant, flexible and extensible forms with easy-to-use validation. Check Official Website for more information.

What is Yup?

Yup is a straightforward JavaScript schema builder for value parsing and validation.

Motivation

I didn't find many resources online for reusable components for react hooks form, especially using typescript. I have written this blog post to share what I created in few hours. Feel free to comment improvements below.

Prerequisites

You can use this library in react and react based frameworks such as NextJS, GatsbyJS and even react native. I will be using a simple typescript project bootstrapped using create-react-app.



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

Installation



npm install --save react-hook-form @hookform/resolvers yup

Lets Build

Create 2 Components



├── src/
├── components
    ├── Form.tsx
    ├── Input.tsx
    ├── Usage.tsx

Form.tsx

We use this component as a simple form wrapper.



import React, { FC, createElement } from "react";
import { ReactNode } from "react";

export type classNameType = string;
export type childrenType = ReactNode;

export interface IFormProps {
  defaultValues?: any;
  children?: childrenType;
  buttonLabel?: string;
  onSubmit?: any;
  handleSubmit?: any;
  register?: any;
  className?: classNameType;
}

const Form: FC<IFormProps> = ({
  defaultValues,
  buttonLabel = "Submit",
  children,
  onSubmit,
  handleSubmit,
  register,
  ...rest
}) => {
  return (
    <form onSubmit={handleSubmit(onSubmit)} {...rest}>
      <div className="d-flex justify-content-center fields__email">
        {Array.isArray(children)
          ? children.map((child) => {
              return child.props.name
                ? createElement(child.type, {
                    ...{
                      ...child.props,
                      register,
                      key: child.props.name
                    }
                  })
                : child;
            })
          : children}
      </div>
      <button className="btn btn--brand">{buttonLabel}</button>
    </form>
  );
};

export default Form;

Input.tsx

We use this component for any input element (text,password,email,etc)



import React, { FC, InputHTMLAttributes } from "react";

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  name: string;
  label?: string;
  error?: string;
  register?: any;
  wrapperClass?: string;
  className?: string;
}

const Input: FC<InputProps> = ({
  register,
  name,
  error,
  label,
  wrapperClass,
  ...rest
}) => {
  return (
    <div className={wrapperClass}>
      {label && <label htmlFor={name}>{label}</label>}
      <input
        aria-invalid={error ? "true" : "false"}
        {...register(name)}
        {...rest}
      />
      {error && <span role="alert">{error}</span>}
    </div>
  );
};

export default Input;

Usage.tsx

Above components can be used in application as follows



import React from "react";
import Form from "./Form";
import Input from "./Input";
import * as yup from "yup";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

// interface for form
interface EmailInterface {
  email: string;
  password: string;
}

// validation
const EmailSchema = yup.object().shape({
  email: yup
    .string()
    .email("Enter a valid email")
    .required("Email is required"),
  password: yup
    .string()
    .max(32, "Max password length is 32")
    .required("Password is required")
});

const Usage = () => {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({ resolver: yupResolver(EmailSchema) });

  const onSubmit = (data: EmailInterface) => console.log(data);
  return (
    <Form
      buttonLabel="Change Email"
      register={register}
      handleSubmit={handleSubmit}
      onSubmit={onSubmit}
      className="change-form"
    >
      <Input
        name="email"
        type="email"
        placeholder="Enter your email"
        error={errors.email?.message}
        autoFocus
      />
      <Input
        name="password"
        type="password"
        placeholder="Password"
        error={errors.password?.message}
      />
    </Form>
  );
};

export default Usage;

Congrats! You have successfully created reusable input component using react hooks form, yup and typescript. Here's same project in codesandbox. Feel free to check.

Add tailwind (JIT) to a react app without ejecting or using craco

kiranojhanp — Sun, 05 Dec 2021 15:49:23 +0000

Hello guys,
Official tailwindcss docs uses a package called craco during installation of tailwindcss in react app.

I don't particulary like it because same can easily be achieved with just postcss. Here are the steps.

Step 1 - Create a react and add dependencies

# install react and navigate inside
npx create-react-app my-app
cd my-app

# install packages
yarn add autoprefixer postcss postcss-cli postcss-import tailwindcss

# replace yarn add with npm install if using npm

Step 2 - Add configs

Create two files tailwind.config.js and postcss.config.js in root

├── src/
├── tailwind.config.js
├── postcss.config.js
└── package.json

Paste this in tailwind.config.js:

module.exports = {
    mode: "jit",
    purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx}"],
    theme: {},
};

Paste this in postcss.config.js:

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

Step 3 - Create styles

Create a folder styles inside src
Create tailwind.pcss and output.css inside it

src/
├── styles/
         ├── output.css
         └── tailwind.pcss
├── App.js
└── index.js

Add following code inside tailwind.pcss

@import "tailwindcss/base.css";
@import "tailwindcss/components.css";
@import "tailwindcss/utilities.css";

Step 4 - Modify `package.json`

Replace scripts with

"scripts": {
    "start": "react-scripts start",
    "build": "yarn build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "TAILWIND_MODE=watch postcss src/styles/tailwind.pcss -o src/styles/output.css --watch",
    "build:css": "postcss src/styles/tailwind.pcss -o src/styles/output.css --minify"
},

Note: Just replace yarn with npm run if you are a npm user

Step 5 - Running

Replace App.js with:

import "./styles/output.css"
function App() {
 return (
   <div class="bg-green-100 border-green-600 border-b p-6 m-4 rounded text-2xl text-center">
     Hello World
   </div>
 );
}

export default App;

Now open two terminals and run these commands separately

yarn watch:css

and

yarn start

The output should be:

Congrats! You have successfully installed and used tailwindcss 🚀🚀

Using tailwindcss (JIT) with sveltekit

kiranojhanp — Fri, 02 Jul 2021 02:11:59 +0000

I ❤️ Svelte, especially when combined with tailwind css. Usually you'd have to setup all the configuration on your own but there's a easier alternative.

The introduction of sveltekit provides cool stuffs like routing out of the box. Here's a super easy setup to scaffold a Svelte Kit static site.

# 1. Create a new sveltekit site
# My choices: TypeScript, SCSS, ESLint, Prettier
npm init svelte@next handsome-app

# 2. Navigate inside your project
cd handsome-app

# 3. Install packages
npm install

# 4. Add TailwindCSS
npx svelte-add tailwindcss

Step 4 does all the hard work for you, by creating postcss.config.cjs, tailwind.config.cjs and svelte.config.cjs.

To finalize installing Tailwind, open app.scss and add the base Tailwind styles right at the top:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now you can start the server

# Run in development mode, and open the site in the browser
npm run dev -- --open