nurmdrafi

Metric	With Next.js Image	With CDN + img tag	Improvement
First Contentful Paint	2.1s	1.3s	38% faster
Largest Contentful Paint	4.2s	1.8s	57% faster
Cumulative Layout Shift	0.15	0.05	67% better
Build Time	12 minutes	4 minutes	67% faster
Image Load Success Rate	87%	99%	12% better

nurmdrafi

Install Cursor AI editor on Ubuntu 24.04

1. Use the Download button on www.cursor.com web site. It will download the NAME.AppImage file.

2. Move the File:

sudo mv ~/Downloads/NAME.AppImage /opt/cursor.appimage

nurmdrafi

Vitest setup

MOCK SETUP CONFIGURATION WORKFLOW

PHASE 1: PROJECT STRUCTURE ANALYSIS
1. Redux: Located in redux/, with feature-specific logic in redux/features/
2. API Responses: Used in pages/ and hooks/
3. LocalStorage/SecureLocalStorage: Used in utils/ or directly in components
4. Tests: Stored in __tests__/ with mocks designed for testing

nurmdrafi

Using AI and Prompt Composer for Unit Tests

Table of Contents

1. Introduction
2. Setting Up Your Testing Environment
3. Understanding Your Project Structure
4. Creating Effective AI Prompts for Testing
5. Using the AI Prompt Composer
6. Testing Different Types of Components

nurmdrafi

src/
├── app/                          # Next.js app router
│   ├── (marketing)/              # Public pages (e.g., home, about)
│   ├── (shop)/                   # Shop-related pages
│   ├── (product)/                # Product-related pages
│   ├── (admin)/                  # Admin-related pages
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Home page
├── components/                   # Reusable components

nurmdrafi

[Project Title]

1. Project Overview

Description

Insert a brief and concise description of the project. For example: "A web application for [briefly state the main purpose, e.g., tracking expenses, managing tasks, creating a portfolio]."

Purpose

nurmdrafi

Bash

# Enable the subsequent settings only in interactive sessions
case $- in
  *i*) ;;
    *) return;;
esac

# Path to your oh-my-bash installation.
export OSH='/home/nurmdrafi/.oh-my-bash'

nurmdrafi

tsconfig.json

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"],
      "@hooks/*": ["hooks/*"],
 "@features/*": ["redux/features/*"],

nurmdrafi

tsconfig.json

{
{
	"compilerOptions": {
		"target": "es2022",
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true,
		"skipLibCheck": true,

nurmdrafi

🚀 How to Build and Publish NPM Package Using Rollup, Babel, TypeScript, ESLint, and Jest

1. Setup the Project

Create a new directory for your project and initialize it with npm:

mkdir my-package
cd my-package
npm init -y