rifayetuxbd

Angular Project setup with spartan

• pnpm dlx @angular/cli@latest new APP_NAME -s -t --routing --package-manager=pnpm --ssr
• pnpm add -D @spartan-ng/cli
• pnpm add @angular/cdk @spartan-ng/ui-core
• pnpm add -D tailwindcss postcss autoprefixer
• pnpm dlx tailwindcss init

tailwind.config.js

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

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

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

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

"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

Loading spin for nextjs

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

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

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

SVG Icons in Angular component

• Create directory icons under src/app/icons
• Download from this gist

rifayetuxbd

Angular snippets

Create a file angular.code-snippets under .vscode/

touch ./vscode/angular.code-snippets

Add below content in it:

{