DEV Community: Fares Galal

I Turned a Small Lazy Moment into a Chrome Extension

Fares Galal — Fri, 10 Apr 2026 07:50:42 +0000

I was watching a YouTube video (around 2 hours long) when I noticed something annoying: I kept moving my mouse just to check how much time had passed.

It’s such a small thing, but it kept breaking my focus. And honestly, it felt ridiculous that there wasn’t a simpler solution for this.

So I built one myself.

What I Built

I created a Chrome Extension that shows the current timestamp as a persistent overlay in the top-right corner while watching videos in fullscreen mode.

No mouse movement needed. No interruptions. Just always visible progress.

Shortcuts

Press Y → Toggle the overlay on/off
Press Shift + Y → Change the overlay style

Why I Built It

This wasn’t some big product idea. It started as pure frustration:

Watching long videos
Constantly moving the mouse just to check progress
Breaking immersion every time

So instead of tolerating it, I built a fix in a few hours.

⚙️ Simple, but Useful

It’s not complex, but that’s the point.

Sometimes the best tools are the ones that remove a tiny annoyance you didn’t realize was draining your attention.

Now I can watch long content without constantly interacting with the UI.

Try It Out

https://chromewebstore.google.com/detail/kaicajfaonlbgnmodfalclemdfpnbnen

Tech Stack

JavaScript
Chrome Extensions API
DOM manipulation
Fullscreen overlay handling

Tracking File Upload Progress on AWS S3 – Lessons from Large File Uploads

Fares Galal — Wed, 14 Jan 2026 12:32:33 +0000

Have you ever tried uploading a large file to AWS S3 and wanted to show progress reliably?

I recently worked on a feature that involved uploading videos and large files, and I learned a lot about browser limitations, multipart uploads, and UX improvements. Here’s a breakdown of what I discovered.

Why `onUploadProgress` Alone Isn't Enough

For small files, Axios gives us a handy onUploadProgress callback:

axios.put(uploadUrl, file, {
  headers: { "Content-Type": file.type },
  onUploadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total!);
    console.log("Progress:", percent, "%");
  },
});

✅ Works perfectly for files ≤ 20MB

But when we tried large files (150MB+):

Progress either lagged behind
Or jumped directly to 100% at the end

Why? Because the browser sends the file in a single request, making onUploadProgress unreliable.

The Solution: Multipart Upload (Chunking)

With large files, the file must be split into chunks before uploading:

Each chunk is a separate request
Progress is tracked per chunk
Failed chunks can be retried individually

Example:

// 500MB file with 20MB chunks → 25 requests
const CHUNK_SIZE = 20 * 1024 * 1024;

Some might ask: Isn’t 25 requests a lot?
Not really. Each request is short-lived and uploaded with controlled concurrency.
This makes uploads predictable, faster, and easier to retry on network failures.

Choosing the Right Chunk Size

AWS S3 requires minimum 5MB per chunk.

We define:

const MIN_CHUNK_SIZE = 5 * 1024 * 1024;       // 5MB
const DESIRED_CHUNK_SIZE = 20 * 1024 * 1024; // 20MB

Then check the file size:

≤ 20MB → Upload normally (no multipart)
> 20MB → Split into chunks and start multipart upload

Why 20MB? There’s no magic number where uploads fail. Factors like network speed, connection stability, and device performance all play a role.

Backend Workflow for Multipart Uploads

Previously, the backend returned a single S3 URL:

{
  "uploadUrl": "https://my-bucket.s3.amazonaws.com/file.mp4"
}

Now it returns:

{
  "uploadId": "UPLOAD_ID_PLACEHOLDER",
  "key": "/FILE_NAME_PLACEHOLDER",
  "parts": [
    {
      "partNumber": 1,
      "uploadUrl": "https://my-bucket.s3.amazonaws.com/KEY_PLACEHOLDER"
    }
  ],
  "expiresAt": "EXPIRATION_DATE_PLACEHOLDER"
}

Each chunk is uploaded to its corresponding uploadUrl
S3 returns an ETag for each chunk → acts as a fingerprint to confirm the chunk was uploaded successfully
ETags + part numbers are required for CompleteMultipartUpload to assemble the file in order

Tracking Progress for Large Files

Small files → browser events track progress by bytes
Large files → track progress based on the number of chunks uploaded

Benefits:

Progress is stable and predictable
Better UX
No sudden jumps or delays
Failed chunks can retry individually, no need to restart the entire upload

Final Step: Complete the Upload

Once all chunks are uploaded, send a final request with:

uploadId
key
All ETags

The backend calls CompleteMultipartUpload → file is assembled in S3 as if it were uploaded in a single request.

Takeaways

Switching to chunked uploads with progress tracking dramatically improves the experience for large files:

Predictable progress
Stable uploads
Retry for individual chunks
Better UX for your users

FormCN: Generate React Forms in Seconds

Fares Galal — Sun, 28 Dec 2025 22:35:10 +0000

Forms are one of the most common components in web applications. Whether it’s a login form, registration, or a multi-step wizard, we often find ourselves writing the same boilerplate code over and over again.

I wanted to change that, so I built FormCN, my first CLI tool designed to generate fully-typed, validated React forms in seconds, integrating ShadCN UI, React Hook Form, and Zod.

Why Build FormCN?

In most projects, forms are a repetitive task:

We either rewrite them from scratch
Or copy & tweak old code
Or rely on AI generators, which aren’t always precise

FormCN solves this problem by automating form creation, giving you a ready-to-use structure while keeping full control over the design and validation.

Key Features

Single-step or Multi-step forms — Generate forms for simple or complex workflows.
Ready-made templates — Login, registration, or custom forms.
Styling presets — Predefined UI styles using ShadCN components.
Manual mode — Step-by-step configuration if you want full control.
Automatic folder & file generation — Creates the component folder with all schemas and files ready to use.
Smart CLI checks — Prevents duplicate forms, checks empty fields, ensures required dependencies like Zod, React Hook Form, and resolvers are installed.

How It Works

After installing FormCN via npm:

npm install -g formcn

Run the CLI:

formcn

You’ll be prompted to:

Enter form name — e.g., register → creates RegisterForm.
Choose form type — single-step or multi-step.
Pick a template — ready template or manual configuration.
Select a styling preset — default, minimal, or custom.

After that, FormCN generates a complete folder with:

src/components/forms/{FormName}/
├── schema.ts
└── form.tsx

Or, for multi-step forms:

src/components/forms/{FormName}/
├── step1-schema.ts
├── step1Step.tsx
└── {FormName}Form.tsx

Everything is ready to use or tweak in seconds.

Why Developers Will Love It

FormCN is built for React developers who want to focus on features instead of boilerplate:

TypeScript-first with Zod validation
Beautiful UI with ShadCN components
Professional CLI that prevents errors and guides the developer
Saves hours of repetitive work

Try It Now

NPM: https://www.npmjs.com/package/formcn
GitHub: https://github.com/F-47/formcn

FormCN is actively maintained, and I’d love to get your feedback, ideas, or contributions. If you try it out, let me know what templates or presets you’d like to see next!