Md. Rifayet Azam rifayetuxbd

Tailwind css only components

These are tailwind css only components which can be used in any platform (Angular, React, NextJS, Vue etc.)

Badges

Looks good on both light and dark background.

<span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">Badge</span>
<span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">Badge</span>
<span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20">Badge</span>
<span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Badge</span>

Steps for configuring biom js

Install biomjs bun add --dev --exact @biomejs/biome

--exact ensures that everyone within a project has exactly the same version of Biome.

Configure biom using json file bunx biome init
Add vscode specific settings

Create file at .vscode/settings.json
Add below configuration in settings.json

Angular Project setup with spartan

pnpm dlx @angular/cli@latest new APP_NAME -s -t --routing --package-manager=pnpm --ssr
=> Add --experimental-zoneless for zoneless change detection
=> -s means --inline-style -t means --inline-template
pnpm add -D @spartan-ng/cli
pnpm add @angular/cdk @spartan-ng/ui-core
pnpm add -D tailwindcss@3 postcss autoprefixer
pnpm dlx tailwindcss init

emoji-cheat-sheet

This cheat sheet is automatically generated from GitHub Emoji API and Unicode Full Emoji List.

Coding and Development Plan

Stored procedures/functions are required for all Database access (server side). Client side coding is kept to a minimum and only used if approved by Application Architect and Business Systems Analyst. This is a security measure used to prevent infusion attacks.

All code must be written with the following goals in mind:

1. Maintainability

Adaptable to cope with changing requirements. The following questions will help judge the maintainability code:

Can I find the code that is related to a specific problem or change?
Can I understand the code? Can I explain the rationale behind it to someone else?
Is it easy to change the code? Is it easy for me to determine what I need to change?
Can I make a change with only a low risk of breaking existing features?

Install Angular ESLint

ng add @angular-eslint/schematics

Install Prettier and Prettier-ESLint dependencies

npm install prettier prettier-eslint eslint-config-prettier eslint-plugin-prettier --save-dev

ESLint configuration

Filename: .eslintrc.json

"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

Loading spin for nextjs

import { cn } from "@/lib/utils"

type LoadingSpinProps = {
  className?: string
  center?: boolean
}

Create Angular application with latest CLI

Change <APP_NAME>
Execute the code in terminal to create a new Angualr Applicaiton
CD to <APP_NAME>

pnpm dlx @angular/cli@latest new <APP_NAME> -s -t --package-manager=pnpm --routing --ssr --standalone --strict --style=scss

-s = inline-style

	import { clsx, type ClassValue } from "clsx"
	import { customAlphabet } from "nanoid"
	import { twMerge } from "tailwind-merge"

	export function cn(...inputs: ClassValue[]) {
	return twMerge(clsx(inputs))
	}

	export function generateId(length: number = 16) {
	return customAlphabet(