DEV Community: Ahmad Faraz

I built a free offline PDF & image toolkit — 15 tools, works without internet

Ahmad Faraz — Tue, 31 Mar 2026 20:59:55 +0000

TL;DR

I built ConvertKr Desktop — a free PDF & image toolkit with 15 tools that works 100% offline. Available for macOS, Windows, and Linux. No internet, no cloud uploads, no subscriptions.

🔗 Download | Web Version

The problem

Every time I need to merge a few PDFs or compress a document before emailing, I end up on some random website that:

📤 Uploads my files to their server (privacy?)
💧 Adds a watermark unless I pay
💰 Gives me 2 free uses per day, then asks for $12/month
🐌 Takes forever to upload and download

For something as simple as merging two PDFs, this felt ridiculous.

The solution

I built ConvertKr — first as a free web app where everything processes right in your browser (your files never leave your device), and now as a desktop app that works completely offline.

No internet. No accounts. No limits. Just open the app, pick your files, and get the result.

What you can do with it

PDF Tools

Merge — combine multiple PDFs into one
Split — extract pages by range or individually
Compress — reduce file size before emailing
Rotate — fix sideways scanned pages
Organize — drag and drop to reorder or delete pages
PDF to Image — convert pages to PNG, JPG, or WebP
Protect — add watermark protection
Unlock — remove password from PDFs
Watermark — add text watermarks (supports Urdu too)
Page Numbers — add numbers in any position
PDF Editor — add text, images, shapes, drawings, and highlights

Image Tools

Image to PDF — convert photos to PDF
Image Convert — switch between PNG, JPG, WebP
Image Compress — make images smaller
Image Crop — visual crop tool

Why offline matters

🔒 Privacy — your files never leave your computer. Period.
📶 No internet needed — works on a plane, in a cafe with bad wifi, anywhere
⚡ Fast — no uploading, no downloading, no waiting
📁 No file limits — handle large documents that crash browser-based tools
💸 Free forever — no trial that expires, no premium tier, no "upgrade to unlock"

Available on all platforms

Platform	Download
macOS (Apple Silicon)	DMG
Windows (64-bit)	EXE Installer
Linux (64-bit)	AppImage
Linux (Debian/Ubuntu)	.deb

macOS: If you see "app is damaged", open Terminal and run: xattr -cr /Applications/ConvertKr.app
Windows: If SmartScreen appears, click "More info" → "Run anyway"

These warnings appear because the app isn't code-signed yet. It's completely safe.

Web version too

Don't want to download anything? All tools also work at convertkr.com — directly in your browser, with 27+ tools including OCR, background remover, QR codes, and more. Same privacy — everything processes locally.

What's coming next

🔍 OCR — extract text from scanned PDFs
📦 Batch processing — drop a folder, process everything
✍️ Digital signatures
📝 PDF form filler

Try it

Completely free. No trial. No license. No limits.

👉 Download ConvertKr Desktop
👉 Use the web version

Questions or feedback? ahmadfarazjutt3@gmail.com

If you find it useful, buy me a coffee ☕ — it keeps the project going.

How I Built 11 Free File Tools That Run Entirely in the Browser

Ahmad Faraz — Sun, 22 Feb 2026 20:16:56 +0000

Every time I needed to edit a PDF or convert an image online, the same thing happened. Upload my file to some random server, create an account, hit a paywall after two tries, and wonder who's looking at my documents.

I got tired of it. So I built my own.

Meet ConvertKr

It's a set of 11 free browser-based tools for working with PDFs and images. The catch? There is no catch. No signups, no watermarks, no file limits.

But the part I care about most — your files never leave your device. Everything runs locally in your browser using JavaScript. My server never sees your documents. Not temporarily, not for processing, not at all.

The tools

PDF Editor — text, images, signatures, highlights, redactions
Merge PDF and Split PDF
PDF to Image and Image to PDF
Image Convert, Compress, Crop and Resize
Image Watermark
Background Remover
QR Code Generator

How is this possible without a server?

Modern browsers are way more powerful than most people give them credit for.

PDF.js handles PDF rendering — the same library Firefox uses internally. pdf-lib generates new PDFs with your edits baked in. The Canvas API handles all image operations — converting formats, compressing, cropping, watermarking. For background removal, an ML model runs directly in the browser.

No frameworks either. Just vanilla JavaScript. Each tool is a standalone page that loads fast and does one thing well.

The hardest part

The PDF editor was by far the most complex. You're essentially building a layer system on top of a rendered PDF page. Every annotation — text, image, signature, drawing — needs to be positioned in CSS pixels on screen, then converted back to PDF coordinate points when generating the final file. Getting that math wrong by even a few pixels means signatures end up in the wrong spot.

I also spent way too long debugging an ArrayBuffer detachment issue. When PDF.js reads your file, it detaches the buffer so pdf-lib can't use it anymore. The fix was simple once I found it — store the data as a Uint8Array immediately and pass copies to both libraries — but finding the cause was painful.

Why I'm sharing this

Two reasons. First, I genuinely think more developers should consider client-side processing for file tools. The browser can handle it, your users get real privacy, and you save on server costs. It's a win all around.

Second, I want feedback. I'm not a designer and I built this mostly alone. If something looks off, feels broken, or could be better — I want to know.

I'm also actively adding more tools. If there's something you wish existed that doesn't upload your files to the cloud, tell me. I might build it next.

Check it out at convertkr.com — would love to hear what you think.

Building a Modern CV Builder with React 19, TypeScript, and Firebase: A Complete Guide

Ahmad Faraz — Thu, 06 Nov 2025 11:47:03 +0000

Learn how to build a professional, open-source CV/Resume builder application with real-time preview, PDF export, and Firebase integration.

🎯 Introduction

In this comprehensive guide, I'll walk you through building a modern CV/Resume builder application from scratch. This project demonstrates advanced React patterns, TypeScript best practices, Firebase integration, and performance optimization techniques that you can apply to your own projects.

What we're building:

A full-featured CV builder with 11 beautiful templates
Real-time preview with side-by-side editing
PDF export and import functionality
Firebase authentication and data persistence
Performance-optimized components
A 6-step guided wizard for resume creation

Repository: GitHub - resume-studio

🚀 Project Overview

This CV builder is a production-ready application that showcases modern web development practices. It's built with React 19, TypeScript, and Firebase, providing a seamless user experience for creating professional resumes.

Key Features

✨ 11 Professional Templates - From minimalist to modern designs
🎨 Real-time Preview - See changes instantly as you type
📄 PDF Export/Import - Export your CV or upload existing PDFs
🔐 Firebase Authentication - Email, Google, and Twitter sign-in
💾 Auto-save - Your progress is automatically saved
⚡ Performance Optimized - Memoized components prevent unnecessary re-renders
📱 Responsive Design - Works perfectly on all devices

🛠️ Tech Stack

Here's what powers this application:

React 19 - Latest React with hooks and memoization
TypeScript - Type-safe development
Vite 7 - Lightning-fast build tool
Tailwind CSS - Utility-first styling
Firebase - Authentication, Firestore, and Storage
React Router v7 - Client-side routing
jsPDF & html2canvas - PDF generation
pdfjs-dist - PDF parsing and data extraction

📐 Architecture & Design Patterns

1. Component Structure

The application follows a modular component architecture:

src/
├── components/
│   ├── common/           # Reusable UI components
│   ├── dashboard/        # Dashboard components
│   ├── layout/           # Layout components
│   ├── templates/        # 11 CV template components
│   └── wizard/           # Wizard step components
├── hooks/                # Custom React hooks
├── services/             # Firebase services
├── contexts/             # React contexts
└── utils/                # Utility functions

2. Custom Hooks for State Management

We use custom hooks to encapsulate state logic and make components cleaner:

// src/hooks/useCVData.ts
import { useState, useEffect, useCallback } from 'react';
import type { CVData } from '../types/cv.types';
import { saveCVData, loadCVData } from '../utils/dataPersistence';

export const useCVData = () => {
  const [cvData, setCvData] = useState<CVData>(freshCVData);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const savedData = loadCVData();
    if (savedData) {
      setCvData(savedData);
    }
    setIsLoading(false);
  }, []);

  useEffect(() => {
    if (!isLoading) {
      saveCVData(cvData);
    }
  }, [cvData, isLoading]);

  const updateCVData = useCallback((newData: CVData) => {
    setCvData(newData);
  }, []);

  return { cvData, updateCVData, isLoading };
};

This hook provides:

Automatic loading from localStorage
Auto-save functionality
Stable function references with useCallback

3. Performance Optimization with React.memo

One of the critical challenges in a real-time editor is preventing unnecessary re-renders. Here's how we solved it:

The Problem

When typing in an input field, every keystroke would trigger a state update, causing the entire component tree to re-render. This led to:

Input fields losing focus
Poor typing performance
Unnecessary DOM updates

The Solution

We memoized components and used refs to maintain stable function references:

// src/components/common/Input.tsx
import { memo, useMemo } from 'react';
import type { FC, InputHTMLAttributes } from 'react';

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  helperText?: string;
}

const Input: FC<InputProps> = ({ 
  label, 
  error, 
  helperText, 
  className = '', 
  id,
  ...props 
}) => {
  const inputId = useMemo(() => 
    id || `input-${Math.random().toString(36).substr(2, 9)}`, 
    [id]
  );

  // ... rest of component
};

export default memo(Input);

CollapsibleSection Optimization

The biggest performance win came from moving CollapsibleSection outside the parent component:

// ❌ Before: Defined inside component (recreated on every render)
const CVEditorCollapsible = ({ data, onChange }) => {
  const CollapsibleSection = ({ ... }) => ( ... ); // Recreated!
  return <CollapsibleSection ... />;
};

// ✅ After: Defined outside (stable component identity)
const CollapsibleSection: FC<CollapsibleSectionProps> = memo(({ 
  title, icon, iconColor, children, isExpanded, onToggle 
}) => (
  <div className="bg-white rounded-2xl shadow-lg overflow-hidden mb-6">
    {/* ... */}
  </div>
));

const CVEditorCollapsible = ({ data, onChange }) => {
  return <CollapsibleSection ... />;
};

Why this matters: When CollapsibleSection was defined inside the parent, React saw it as a new component type on every render, causing all children to unmount and remount. Moving it outside gives it a stable identity, allowing React to properly optimize re-renders.

4. Firebase Integration

Authentication Setup

// src/config/firebase.ts
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

Service Layer Pattern

We use a service layer to abstract Firebase operations:

// src/services/authService.ts
import { 
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  signInWithPopup,
  GoogleAuthProvider,
  TwitterAuthProvider,
  onAuthStateChanged,
} from 'firebase/auth';
import { auth } from '../config/firebase';

export const signInUser = async (email: string, password: string) => {
  return await signInWithEmailAndPassword(auth, email, password);
};

export const signUpUser = async (email: string, password: string) => {
  return await createUserWithEmailAndPassword(auth, email, password);
};

export const signInWithGoogle = async () => {
  const provider = new GoogleAuthProvider();
  return await signInWithPopup(auth, provider);
};

export const onAuthStateChange = (callback: (user: any) => void) => {
  return onAuthStateChanged(auth, callback);
};

This pattern provides:

Centralized Firebase logic
Easy testing and mocking
Consistent error handling
Type safety

🎨 Key Features Implementation

1. Real-time Preview

The editor uses a two-column layout with synchronized state:

// src/pages/EditorPage.tsx
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
  {/* Left: Editor */}
  <div className="overflow-y-auto pr-2">
    <CVEditorCollapsible 
      data={cvData} 
      onChange={(newData) => updateCVData(newData)} 
    />
  </div>

  {/* Right: Preview */}
  <div className="overflow-y-auto">
    <div id="cv-export-content">
      {renderTemplate(selectedTemplate, cvData)}
    </div>
  </div>
</div>

Every change in the editor updates cvData, which triggers a re-render of the preview panel.

2. PDF Export

PDF export uses html2canvas and jsPDF:

// src/utils/exportPDF.ts
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export const exportToPDF = async (
  elementId: string,
  filename: string
): Promise<void> => {
  const element = document.getElementById(elementId);
  if (!element) throw new Error('Element not found');

  const canvas = await html2canvas(element, {
    scale: 2,
    useCORS: true,
    logging: false,
  });

  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'mm', 'a4');
  const imgWidth = 210; // A4 width in mm
  const imgHeight = (canvas.height * imgWidth) / canvas.width;

  pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
  pdf.save(filename);
};

3. PDF Import & Data Extraction

Users can upload existing PDFs and extract data:

// src/utils/exportPDF.ts (simplified)
import * as pdfjsLib from 'pdfjs-dist';

export const extractTextFromPDF = async (file: File): Promise<string> => {
  const arrayBuffer = await file.arrayBuffer();
  const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

  let fullText = '';
  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i);
    const textContent = await page.getTextContent();
    const pageText = textContent.items
      .map((item: any) => item.str)
      .join(' ');
    fullText += pageText + '\n';
  }

  return fullText;
};

4. 6-Step Wizard

The wizard guides users through resume creation:

// src/pages/ResumeWizard.tsx
const steps = [
  { id: 'personal', title: 'Personal Information', component: PersonalInfoStep },
  { id: 'work', title: 'Work Experience', component: WorkExperienceStep },
  { id: 'education', title: 'Education', component: EducationStep },
  { id: 'skills', title: 'Skills', component: SkillsStep },
  { id: 'summary', title: 'Summary', component: SummaryStep },
  { id: 'review', title: 'Review', component: ReviewStep },
];

const handleComplete = () => {
  updateCVData(wizardData);
  const selectedTemplate = localStorage.getItem('selectedTemplate') || '1';
  navigate(`/editor/${selectedTemplate}`);
};

Each step validates input before allowing progression, ensuring data quality.

🔧 Performance Optimizations

1. Component Memoization

We memoized all frequently re-rendered components:

Input, Textarea, Date - Using React.memo
CollapsibleSection - Moved outside and memoized
Event handlers - Using useCallback

2. Stable Function References

const handlePersonalInfoChange = useCallback((field: string, value: string) => {
  const currentData = dataRef.current;
  onChangeRef.current({
    ...currentData,
    personalInfo: {
      ...currentData.personalInfo,
      [field]: value,
    },
  });
}, []); // Empty deps - uses refs instead

By using refs (dataRef, onChangeRef), we can keep the dependency array empty, ensuring the function reference never changes.

3. Local Storage Caching

CV data is automatically cached in localStorage:

useEffect(() => {
  if (!isLoading) {
    saveCVData(cvData); // Auto-save on every change
  }
}, [cvData, isLoading]);

This provides:

Instant loading on page refresh
Offline capability
Reduced Firebase read operations

📱 Getting Started

Prerequisites

Node.js 16+
npm or yarn
Firebase account (free tier works)

Installation

# Clone the repository
git clone https://github.com/AhmadFaraz-crypto/resume-studio.git
cd resume-studio

# Install dependencies
npm install

# Set up environment variables
cp env.example .env.local

# Add your Firebase config to .env.local
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=your-app-id

# Start development server
npm run dev

Firebase Setup

Create Firebase Project
- Go to Firebase Console
- Create a new project
Enable Services
- Authentication: Enable Email/Password, Google, Twitter
- Firestore: Create database in test mode
- Storage: Create storage bucket in test mode
Get Configuration
- Project Settings → Your apps → Web app
- Copy config values to .env.local

🎯 Key Learnings

1. Performance Matters

Memoization isn't just about optimization—it's about user experience. Preventing unnecessary re-renders ensures:

Smooth typing experience
No focus loss
Better perceived performance

2. Component Architecture

Moving components outside their parents when they're recreated on every render is crucial. React needs stable component identities for proper optimization.

3. TypeScript is Your Friend

Strong typing catches bugs early and makes refactoring safer:

interface CVData {
  personalInfo: {
    name: string;
    email: string;
    phone: string;
    location: {
      city: string;
      zipCode: string;
      country: string;
    };
    linkedin?: string;
    summary: string;
  };
  workExperience: WorkExperience[];
  education: Education[];
  skills: string[];
}

4. Service Layer Pattern

Abstracting Firebase operations into services provides:

Better testability
Easier maintenance
Consistent error handling

🚀 Deployment

The application can be deployed to any static hosting platform:

Netlify

# Build command
npm run build

# Publish directory
dist

Add environment variables in Netlify dashboard.

Vercel

# Framework: Vite
# Build command: npm run build
# Output directory: dist

Environment variables are configured in Vercel dashboard.

🤝 Contributing

Contributions are welcome! Areas for contribution:

🎨 New template designs
🐛 Bug fixes
📚 Documentation improvements
♿ Accessibility enhancements
🌍 Internationalization
🧪 Tests
🎯 Performance optimizations

📚 Resources

🎉 Conclusion

Building this CV builder taught me valuable lessons about:

React performance optimization
TypeScript best practices
Firebase integration patterns
Component architecture
User experience design

The application is fully open-source and production-ready. You can use it as:

A learning resource
A starting point for your own projects
A portfolio showcase
A contribution opportunity

Star the repository if you find it helpful: GitHub - resume-studio

💬 Questions?

Have questions or suggestions? Feel free to:

Open an issue on GitHub
Start a discussion
Submit a pull request

How to Capture Web Page Screenshots with Next.js and Puppeteer

Ahmad Faraz — Fri, 01 Nov 2024 15:30:44 +0000

Capturing screenshots of web pages programmatically can be incredibly useful for generating previews, creating image-based reports, and more. In this guide, we’ll build a Next.js API route that takes a URL and generates a PNG screenshot. Our setup uses Puppeteer and chrome-aws-lambda to leverage a headless Chrome browser, making it versatile and production-ready.

We’ll start by setting up a new Next.js project and walking through the code step-by-step to understand how the API captures screenshots.

Prerequisites

Setting up the Next.js app
Configuring the API route with Puppeteer
Creating the React component for the capture interface
Explanation of local vs. deployment configurations for Puppeteer

Getting Started with a New Next.js Project

Create a new Next.js app:

npx create-next-app@latest capture-image-app
cd capture-image-app

Install the necessary dependencies:

npm install puppeteer puppeteer-core chrome-aws-lambda busboy

Step 2: Create the API Route to Generate Screenshots

Now, we’ll set up an API endpoint to capture and return screenshots based on a provided URL.

In the pages/api folder, create a new file named generate-png.ts and add this code:

import { NextApiRequest, NextApiResponse } from "next";
import busboy, { Busboy } from "busboy"; // Use busboy for multipart parsing
import chromium from "chrome-aws-lambda";
import puppeteerCore from "puppeteer-core"; // Import puppeteer-core directly
import puppeteer from "puppeteer"; // Import puppeteer directly

// Conditional import for Puppeteer based on the environment
const puppeteerModule = process.env.NODE_ENV === "production" ? puppeteerCore : puppeteer;

export const config = {
  api: {
    bodyParser: false, // Disable default body parsing to handle raw binary data (Blob)
  },
};

const delay = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
): Promise<void> {
  try {
    if (req.method === "POST") {
      const bb: Busboy = busboy({ headers: req.headers });
      let width: number = 1920; // Default width
      let height: number = 0; // Default height
      let delayTime: number = 6000;
      const buffers: Buffer[] = [];

      bb.on("file", (_name: string, file: NodeJS.ReadableStream) => {
        file.on("data", (data: Buffer) => buffers.push(data));
      });

      bb.on("field", (name: string, value: string) => {
        if (name === "width") width = parseInt(value, 10) || 1920;
        if (name === "height") height = parseInt(value, 10) || 0;
        if (name === "delay") delayTime = parseInt(value, 10) || 6000;
      });

      bb.on("finish", async () => {
        const blobBuffer: Buffer = Buffer.concat(buffers);
        const htmlContent: string = blobBuffer.toString("utf-8");

        const browser = await puppeteerModule.launch({
          args: ["--start-maximized"],
          executablePath: process.env.NODE_ENV === "production"
            ? await chromium.executablePath || "/usr/bin/chromium-browser"
            : undefined,  // No custom executable path needed for local
          headless: true,
        });

        const page = await browser.newPage();

        // Load the HTML content directly
        await page.setContent(htmlContent, { waitUntil: "networkidle0" });

        //@ts-expect-error todo
        const bodyHeight = await page.evaluate(() => {
          return document.body.scrollHeight; // Get the full scrollable height of the body
        });

        await page.setViewport({
          width: Number(width),
          height: height || bodyHeight, // Use the provided height or fallback to the full body height
          deviceScaleFactor: 2,
        });

        await delay(delayTime);

        const screenshotBuffer = await page.screenshot({
          fullPage: !height,
          type: "png",
          omitBackground: false,
        });

        await browser.close();

        res.setHeader("Content-Type", "image/png");
        res.setHeader(
          "Content-Disposition",
          "attachment; filename=screenshot.png"
        );
        res.status(200).end(screenshotBuffer);
      });

      req.pipe(bb); // Pipe the request stream to busboy
    } else {
      res.setHeader("Allow", ["POST"]);
      res.status(405).end(`Method ${req.method} Not Allowed`);
    }
  } catch (error) {
    console.error("ERROR", error);
    res.status(500).end("Internal Server Error");
  }
}

*Explanation: Choosing Puppeteer for Local vs. Production Environments
*
In this code, we’ve set up a dynamic import for puppeteer:

Local Development: If NODE_ENV is not production, it uses puppeteer, which is simpler to set up and doesn’t require chrome-aws-lambda.
Production: For serverless deployments, the environment will detect NODE_ENV as production and load puppeteer-core along with chrome-aws-lambda, which allows it to work in AWS Lambda and other similar environments. In this setup, chrome-aws-lambda provides the correct Chromium path, ensuring compatibility with serverless providers.

Step 3: Create a Simple React Component for the UI

Here, we’ll create a straightforward form that lets users input values for the webpage capture. This form will trigger the generate function to capture and download the screenshot in PDF format.

import { useState } from "react";

export default function ScreenCaptureComponent() {
  const [isProcessing, setProcessing] = useState(false);
  const [width, setWidth] = useState<string>("1920");
  const [height, setHeight] = useState<string>("1000");
  const [delay, setDelay] = useState<string>("6000");

  // Function to clone HTML and prepare for capture
  function takeScreenshot() {
    const clonedElement = document.body.cloneNode(true) as HTMLElement;
    const blob = new Blob([clonedElement.outerHTML], { type: "text/html" });
    return blob;
  }

  // Function to capture screenshot by sending cloned HTML to API
  async function generateCapture() {
    setProcessing(true);

    const htmlBlob = takeScreenshot();

    if (!htmlBlob) {
      setProcessing(false);
      return;
    }

    try {
      const formData = new FormData();
      formData.append("file", htmlBlob);
      formData.append("width", width);
      formData.append("height", height);
      formData.append("delay", delay);
      const response = await fetch("/api/generate-png", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) throw new Error("Capture failed");

      const blob = await response.blob();
      const downloadUrl = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = downloadUrl;
      link.download = "capture.png";
      link.click();
      URL.revokeObjectURL(downloadUrl);
    } catch (error) {
      console.error("Failed to capture screenshot", error);
    } finally {
      setProcessing(false);
    }
  }

  return (
    <div
      style={{
        maxWidth: "400px",
        margin: "50px auto",
        padding: "24px",
        backgroundColor: "white",
        borderRadius: "8px",
        width: "100%",
        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
      }}
    >
      <h2
        style={{
          fontSize: "24px",
          fontWeight: "600",
          textAlign: "center",
          marginBottom: "16px",
        }}
      >
        Webpage Screenshot Capture
      </h2>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          generateCapture();
        }}
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          marginBottom: "16px",
        }}
      >
        <label
          style={{ marginBottom: "8px", fontWeight: "500" }}
          htmlFor="width"
        >
          Width (px)
        </label>
        <select
          id="width"
          value={width}
          onChange={(e) => setWidth(e.target.value)}
          style={{
            width: "100%",
            padding: "8px",
            marginBottom: "16px",
            borderRadius: "4px",
            border: "1px solid #ccc",
            outline: "none",
          }}
        >
          <option value="1920">1920 (Full HD)</option>
          <option value="1366">1366 (Laptop)</option>
          <option value="1280">1280 (Desktop)</option>
          <option value="1024">1024 (Tablet Landscape)</option>
          <option value="768">768 (Tablet Portrait)</option>
          <option value="375">375 (Mobile)</option>
        </select>

        <label
          style={{ marginBottom: "8px", fontWeight: "500" }}
          htmlFor="height"
        >
          Height (px)
        </label>
        <input
          type="number"
          id="height"
          value={height}
          onChange={(e) => setHeight(e.target.value)}
          required
          style={{
            width: "100%",
            padding: "8px",
            marginBottom: "16px",
            borderRadius: "4px",
            border: "1px solid #ccc",
            outline: "none",
          }}
        />

        <label
          style={{ marginBottom: "8px", fontWeight: "500" }}
          htmlFor="delay"
        >
          Delay (ms)
        </label>
        <input
          type="number"
          id="delay"
          value={delay}
          onChange={(e) => setDelay(e.target.value)}
          required
          style={{
            width: "100%",
            padding: "8px",
            marginBottom: "16px",
            borderRadius: "4px",
            border: "1px solid #ccc",
            outline: "none",
          }}
        />

        <button
          type="submit"
          disabled={isProcessing}
          style={{
            padding: "8px 16px",
            color: "white",
            borderRadius: "4px",
            transition: "background-color 0.3s",
            backgroundColor: isProcessing ? "#b0bec5" : "#2196F3",
            cursor: isProcessing ? "not-allowed" : "pointer",
          }}
        >
          {isProcessing ? "Capturing..." : "Capture Screenshot"}
        </button>
      </form>

      {/* Example HTML Element to Capture */}
      <div id="capture-area" style={{ display: "none" }}>
        <h3
          style={{
            fontSize: "20px",
            fontWeight: "600",
          }}
        >
          Content to Capture
        </h3>
        <p>This is an example of the HTML content that will be captured.</p>
      </div>
    </div>
  );
}

Conclusion

This tutorial covers setting up a webpage capture tool in Next.js, handling screenshots with Puppeteer, and creating an interactive frontend component. Remember to use puppeteer locally and switch to puppeteer-core in production to reduce bundle size and optimize for serverless environments. Happy coding!

How to fix “require is not defined” in JavaScript / Node.js? How can we run HTML file on server?

Ahmad Faraz — Thu, 28 Mar 2024 13:14:22 +0000

When we are working with plain javaScript, Sometimes we are getting this error on require() and we are getting the “ReferenceError: require is not defined” error in the browser environment because the require() method is supported in browsers.

There are already multiple solutions on stackoverflow and also we have multiple articles related to that, we can use type="module" in <script type="module" /> then we can use import and export in JavaScript, like you can see stackoverflow here multiple solutions.

but after that if we get another error like

Access to script at 'file:///Users/ahmadfaraz/Documents/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

This error is coming because we are running the HTML file locally and if you are using VS Code IDE there is a HTML live server has an extension for I'm not sure if this could help you or not. But this is my solution how you can solve this above error.

If we run HTML file on server that error can be solved, let's see how can we run HTML file on local server.

Note: Make sure you must have installed node.js

create file package.json

{}

then run this command http-server

npm i http-server

Then you will see in package.json that you have installed the http-server library.

create file src/data.js

export const DATA = [
    {
        "id": "1",
        "name": "Ahmad"
    }
]

create file src/index.js

import {DATA} from './data.js'
console.log(DATA)

create file src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="./index.js"></script>
</body>
</html>

update file package.json

{
  "scripts": {
    "start": "npx http-server src/"
  },
  "dependencies": {
    "http-server": "^14.1.1"
  }
}

the run

npm start

Error should resolved now.

DEMO VIDEO

Thank you!

NextJs 14 with antd 5.11

Ahmad Faraz — Tue, 21 Nov 2023 13:51:01 +0000

Hello everyone,

Today I will guide you how we can implement antd in NextJs 14.

Recently I was working on a client project, there we are using NextJs 12 version and antd 4.20.2 version, I got a task, I have to update our NextJs version to 14, because our web app NextJs 12 was very slow and we have to upgrade the version.

There is a lot of fantastic updates in NextJs 14, you can see on this link

First I have a problem with antd because Ant Design's CSS is loading after the page is rendered, causing a flash of unstyled content in next Js 14. I searched a lot of articles but couldn't find anything right related to this.

I saw few updates in antd on antd documentation

Here is the steps, how we can implement antd in our NextJs 14 app.

Step 1:

npx create-next-app@latest

Step 2:

npm install antd

Step 3:

npm install @ant-design/cssinjs

Step 4:

Create lib/AntdRegistry.tsx in your src directory

'use client';

import React from 'react';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import type Entity from '@ant-design/cssinjs/es/Cache';
import { useServerInsertedHTML } from 'next/navigation';

const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
  const cache = React.useMemo<Entity>(() => createCache(), []);
  const isServerInserted = React.useRef<boolean>(false);
  useServerInsertedHTML(() => {
    // avoid duplicate css insert
    if (isServerInserted.current) {
      return;
    }
    isServerInserted.current = true;
    return <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />;
  });
  return <StyleProvider cache={cache}>{children}</StyleProvider>;
};

export default StyledComponentsRegistry;

Step 5:

Update your layout.tsx file

import React from 'react';
import { Inter } from 'next/font/google';

import StyledComponentsRegistry from '../lib/AntdRegistry';

import '@/globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

const RootLayout = ({ children }: React.PropsWithChildren) => (
  <html lang="en">
    <body className={inter.className}>
      <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
    </body>
  </html>
);

export default RootLayout;

NextJs documentation: https://nextjs.org/docs/app/building-your-application/routing
Github repo: https://github.com/AhmadFaraz-crypto/NextJs-14-with-antd-5.11

ERPNext-installation-Guide-Mac

Ahmad Faraz — Fri, 21 Oct 2022 11:19:21 +0000

The complete guide to install ERPNext in your Mac system

Pre-requisites

Python 3.6+
Homebrew 3.6+
Node.js 14
Redis 5                                       (caching and real time updates)
MariaDB                                       (to run database driven apps)
yarn 1.12+                                    (js dependency manager)
pip 20+                                       (py dependency manager)

STEP 1 Install brew
Homebrew is an app for macOS that allows you to install a huge variety of UNIX software on your Mac with one simple command (on the command line).

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

STEP 2 Install git

Git is the most commonly used version control system. Git tracks the changes you make to files, so you have a record of what has been done, and you can revert to specific versions should you ever need to. Git also makes collaboration easier, allowing changes by multiple people to all be merged into one source.

brew install git

STEP 3 Install setuptools and pip (Python's Package Manager).

Setuptools is a collection of enhancements to the Python distutils that allow developers to more easily build and distribute Python packages, especially ones that have dependencies on other packages. Packages built and distributed using setuptools look to the user like ordinary Python packages based on the distutils.

pip is a package manager for Python. It's a tool that allows you to install and manage additional libraries and dependencies that are not distributed as part of the standard library.

sudo pip3 install setuptools

STEP 4 Install virtualenv

virtualenv is a tool for creating isolated Python environments containing their own copy of python , pip , and their own place to keep libraries installed from PyPI. It's designed to allow you to work on multiple projects with different dependencies at the same time on the same machine.

sudo pip3 install virtualenv

STEP 5 Install MariaDB

MariaDB is developed as open source software and as a relational database it provides an SQL interface for accessing data.

open this link

https://mariadb.com/resources/blog/installing-mariadb-10-1-16-on-mac-os-x-with-homebrew/

Install Mariadb

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew install mariadb
mysql_install_db
mariadb-secure-installation
mariadb -u root -p

IMPORTANT :During this installation you'll be prompted to set the MySQL root password. If you are not prompted for the same You can initialize the MySQL server setup by executing the following command

sudo mysql_secure_installation

STEP 6 MySQL database development files

brew install mysql-client

STEP 7 Edit the mariadb configuration ( unicode character encoding )

sudo nano /opt/homebrew/mariadb/my.cnf

add this to the my.cnf file

[mysqld]
character-set-client-handshake = FALSE
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci

[mysql]
default-character-set = utf8mb4

Now press (Ctrl-X) to exit

brew services start mariadb

STEP 8 install Redis

Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache, and message broker.

brew install redis

STEP 9 install Node.js 14.X package

Node.js is an open source, cross-platform runtime environment for developing server-side and networking applications. Node.js applications are written in JavaScript, and can be run within the Node.js runtime on OS X, Microsoft Windows, and Linux.

brew install node

This will be install latest version of Node.

If you want to change the node version you can use NVM.

https://tecadmin.net/install-nvm-macos-with-homebrew/

STEP 10 install Yarn

Yarn is a JavaScript package manager that aims to be speedy, deterministic, and secure. See how easy it is to drop yarn in where you were using npm before, and get faster, more reliable installs. Yarn is a package manager for JavaScript.

sudo npm install -g yarn

STEP 11 install wkhtmltopdf

Wkhtmltopdf is an open source simple and much effective command-line shell utility that enables user to convert any given HTML (Web Page) to PDF document or an image (jpg, png, etc)

brew install wkhtmltopdf

STEP 12 install frappe-bench

sudo -H pip3 install frappe-bench

IMPORTANT: you may wish to log out and log back into your terminal before next step and You must login.

bench --version

STEP 13 initilise the frappe bench & install frappe latest version

bench init frappe-bench --frappe-branch version-13

cd frappe-bench/
bench start

STEP 14 create a site in frappe bench

bench new-site site1.local

NOTE: If you face this type of issue.

For key collation_server. Expected value utf8mb4_unicode_ci, found value utf8mb4_general_ci
================================================================================
Creation of your site - site11.locale failed because MariaDB is not properly
configured. If using version 10.2.x or earlier, make sure you use the
the Barracuda storage engine.
Please verify the settings above in MariaDB's my.cnf. Restart MariaDB. And
then run `bench new-site site1.locale` again.

then you have to go in mariadb shell and run this commands

SET GLOBAL collation_server = 'utf8mb4_unicode_ci';

and restart the mariadb

brew services restart mariadb

STEP 15 install ERPNext latest version in bench & site

bench get-app erpnext --branch version-13
###OR
bench get-app https://github.com/frappe/erpnext --branch version-13

bench --site site1.local install-app erpnext

bench --site site1.local add-to-hosts

bench start

Your server will run on this host

http://site1.local:8000/