nurmdrafi

Setting Up ESLint v9, Prettier, Git Hooks & Code Quality Tools

This guide outlines how to migrate to ESLint v9, integrate Prettier for code formatting, and leverage lint-staged to automate these checks before each commit.

Table of Contents

• Why This Migration?
• Step 1: Update Dependencies
• Step 2: Configure ESLint
• Step 3: Configure Prettier

nurmdrafi

CI/CD Workflow Guide: Multi-Architecture Docker Builds

This guide explains how to implement and maintain CI/CD workflows for building and deploying multi-architecture Docker images with optimized caching strategies.

Overview

Multi-architecture Docker workflow supporting AMD64 + ARM64 builds with:

• GitHub Actions caching: Simple, optimized caching for GHA environment
• Docker Build Cloud for ARM64 only: Cloud builders used exclusively for ARM64 builds for speed
• AMD64 native builds: Standard GitHub runners for AMD64 builds

nurmdrafi

Modernizing Your JavaScript/TypeScript Workflow: ESLint v9, Prettier, and lint-staged

In modern web development, maintaining code quality and consistency is paramount. This article outlines how to migrate to the latest ESLint v9, integrate Prettier for code formatting, and leverage lint-staged to automate these checks before each commit. We'll assume you already have Husky set up for Git hooks.

Prerequisites

• Node.js (>=22.4.1)
• npm or yarn
• Git
• Husky (already installed)

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'