rifayetuxbd

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

rifayetuxbd

Loading spin for nextjs

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

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

rifayetuxbd

"use client"

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

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

const Popover = PopoverPrimitive.Root

rifayetuxbd

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

rifayetuxbd

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(

rifayetuxbd

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?

rifayetuxbd

emoji-cheat-sheet

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

Table of Contents

• Smileys & Emotion
• People & Body
• Animals & Nature
• Food & Drink

rifayetuxbd

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

rifayetuxbd

Steps for configuring biom js

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

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

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

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

{

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>