DEV Community: Ashwin

How to Set Up a Free, Full HTTPS Domain Redirect with Cloudflare and Namecheap

Ashwin — Thu, 30 Jul 2026 03:44:48 +0000

If you have ever bought a domain on Namecheap to redirect traffic to your main web app, you might have hit a frustrating wall: Namecheap's free "Domain Redirect" feature works fine for plain http:// requests, but it completely falls flat when someone hits https://.

Browsers try to perform an SSL/TLS handshake before following the HTTP redirect header. Because Namecheap does not issue a free SSL certificate for basic domain forwarding, your users end up seeing a scary "Your connection is not private" error.

Here is how to set up a full, seamless redirect from an old domain (snapseek.co) to a new domain (snapseek.app) using Cloudflare's free tier. This approach handles both HTTP and HTTPS, while preserving all incoming URL paths and query parameters.

The Big Picture

Instead of serving traffic through Namecheap's basic forwarding servers, we hand off DNS management to Cloudflare.

Cloudflare acts as a reverse proxy, provides a free universal SSL/TLS certificate, and handles the redirection right at the edge using its modern Single Redirect Rules engine.

Step 1: Add Your Domain to Cloudflare

Log into your free Cloudflare account (or sign up if you do not have one).
On your dashboard under the Home tab, click Add a domain.
Type in your source domain (e.g., snapseek.co) and choose Quick scan for DNS records.
When prompted to select a plan, scroll down to the bottom and pick the Free plan.
Cloudflare will scan your existing DNS setup. Scroll down and click Continue to activation.
Cloudflare will display a pair of custom nameservers (for example: ada.ns.cloudflare.com and sam.ns.cloudflare.com). Copy these down.

Step 2: Update Nameservers in Namecheap

Log into your Namecheap account and go to your Domain List.
Click Manage next to your domain (snapseek.co).
Find the Nameservers dropdown section.
Switch it from Namecheap BasicDNS to Custom DNS.
Paste the two Cloudflare nameservers into the fields and click the green checkmark to save.

Note: DNS propagation usually takes anywhere from a few minutes to a couple of hours. You can proceed with setting up the redirect rule right away while the changes sync across the web.

Step 3: Configure the Dynamic Redirect Rule

While waiting for DNS to propagate, set up the routing logic inside Cloudflare.

In your Cloudflare domain dashboard, go to the left sidebar menu.
Select Rules -> Redirect Rules (or Page Rules depending on your account view, though modern Cloudflare accounts use Redirect Rules under Single Redirects).
Click Create Rule.
Set up the details like this:

Setting Field	What to Select / Type
Rule Name	`Domain Forwarding Redirect`
When incoming requests match...	Select All incoming requests
Target URL Type	Select Dynamic
Expression	`concat("[https://snapseek.app](https://snapseek.app)", http.request.uri.path)`
Status Code	`301 - Permanent Redirect`
Preserve query string	Checked / Enabled
Order	First

How the Expression Works Under the Hood

The key to keeping deep links intact is the dynamic expression:

concat("https://snapseek.app", http.request.uri.path)

Instead of sending everyone strictly to your home page, this snippet tells Cloudflare to read the exact path requested on the old domain and attach it directly onto the new destination.

Combined with Preserve query string, visitor links translate seamlessly:

http://snapseek.co/about redirected to https://snapseek.app/about
https://snapseek.co/search?q=test redirected to https://snapseek.app/search?q=test

Summary

By letting Cloudflare manage your DNS and SSL termination, you completely bypass Namecheap's HTTPS limitation at zero cost. Every request coming into your legacy domain, regardless of protocol, subpath, or URL parameters, safely lands on your target destination.

How I Cut Web Upload Payloads by 90% Using a Client-Side Canvas Compression Loop

Ashwin — Mon, 13 Jul 2026 16:41:26 +0000

Imagine you are at a crowded wedding venue or a tech conference. The cellular network is crawling, and the venue Wi-Fi is congested. The event host or photographer wants to upload hundreds of high-res photos to SnapSeek AI event platform so guests can scan a QR code and instantly find their photos using facial recognition.

But there is a massive bottleneck: uploading a photographer's raw JPEGs or an iPhone’s 12MB files over terrible network conditions means constant spinning, timing out, and failing.

When building an event-app that relies on instant AI processing, network conditions and payload sizes are your worst enemies. Massive payloads lead to upload failures, frustrated users, and high backend memory spikes trying to run facial recognition models on uncompressed files.

To solve this, I built a highly aggressive, intelligent client-side image processing pipeline using the native HTML5 Canvas API. It strictly caps image payloads to <1MB, resulting in a 75% to 90%+ reduction in upload sizes, zero perceived drop in quality, and rock-solid upload reliability on terrible networks.

Here is exactly how the algorithm works.

The Tech Stack: Staying Native

Instead of bloating the bundle size with heavy third-party compression libraries, the optimization relies entirely on the browser's native capabilities:

In-Memory Elements: Image objects and <canvas> elements are spun up entirely in memory (document.createElement('canvas')).
Format Normalization: A helper function detects and converts non-JPEG files (.heic, .heif, .png, .webp) into standard image/jpeg before feeding them to the canvas.
Canvas native export: It leverages canvas.toBlob(callback, 'image/jpeg', quality) to handle the native binary encoding.

The Core Optimization Loop

Instead of just applying a static resize rule (which can ruin high-res photos or fail to shrink heavy files), the algorithm uses a smart initial scale followed by a strict, iterative fallback loop.

Step 1: The "Smart" Initial Scale

Before running any loops, the script estimates a safe starting size based on the area ratio of the target size (1MB) versus the current file size.

// Calculate a safe initial bounding scale
let currentScale = Math.min(1.0, Math.sqrt(targetBytes / fileSize) * 1.45);

This math gives us a realistic starting point so the browser doesn't waste CPU cycles iterating through a 15MB file.

Step 2: The Quality & Dimension Step-Down Loop

If the initial scale still yields a file larger than 1000 KB (1MB), a loop initiates. The algorithm has 25 attempts to get the file under 1MB using two levers: Quality and Dimensions.

Lever 1 (Quality Degradation): It starts at JPEG quality 0.85. If the blob is >1MB, it steps down the quality by 0.15 decrements down to a floor of 0.3.
Lever 2 (Dimension Downscaling): If the quality floor (0.3) is reached and the file is still too large, it keeps the quality low but begins shrinking the physical layout, multiplying width and height by 0.8 on each subsequent step.

To the human eye, a compressed 1MB JPEG looks virtually identical to an 8MB HEIC on a mobile screen, but to a congested cellular tower, it’s the difference between success and a network timeout.

The Results

By enforcing this boundary before pushing the upload to our S3 presigned URLs, we saw massive performance gains:

Metric	Before Optimization	After Optimization	Improvement
Avg. Payload Size	5MB – 12MB+ (HEIC/PNG/Raw)	< 1,000 KB (1MB)	75% to 90%+ reduction
Upload Success Rate	High failure rate on venue Wi-Fi	Near-flawless execution	Massive UX Win
AI Facial Recognition	High memory spikes, slower inference on bloated files	Blazing-fast facial scanning, highly predictable payloads	Lower infrastructure cost & instant guest match

The Backend Safety Net

As a rule of thumb in web development: Never trust the client. While the frontend handles 99% of the heavy lifting, if an asset somehow bypasses the client-side check, the photo sharing app with face recognition backend acts as a strict safety net. It runs a parallel normalization process targeting a 2MB ceiling using a similar quality reduction loop, ensuring our storage and processing pipelines are never compromised.

Conclusion

You don't always need a heavy npm package or an expensive cloud-computing worker to optimize media delivery. By utilizing the user's browser canvas and a smart mathematical fallback loop, you can deliver lightning-fast web experiences even in the most network-congested environments.

Have you built a custom client-side compression tool, or do you rely on backend workers?