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:

{

rifayetuxbd

Material Symbols icon in Angular Manaterial

• index.html:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,200,0,-25" rel="stylesheet">

• your.component.ts:

rifayetuxbd

Allow only pnpm

1. Create .npmrc and include below content at the root of the project

engine-strict = true

2. Add engines in package.json

rifayetuxbd

Prettier config for nextjs applciation

install dev dependencies

pnpm add -D prettier@latest prettier-plugin-tailwindcss@latest @ianvs/prettier-plugin-sort-imports@latest

create file prettier.config.js in root dir

prettier.config.js

rifayetuxbd

tsconfig.json scares everyone. It's a huge file with a TON of potential options.

But really, there are only a few configuration options you need to care about. Let's figure them out, and cheatsheet them.

Quickstart

Want just the code? Here you go:

{
  "compilerOptions": {
    /* Base Options: */

rifayetuxbd

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

rifayetuxbd

Send file from server

const path = require('path');
        
<ROUTE_NAME>.get(
    '/<API_RROUTE>',
    (req, res) => {

 const filePath = path.join(ROOT_PATH, 'FILENAME');