DEV Community: Narender singh

Building a Link Shortener? Here's What I Learned About Click Analytics

Narender singh — Sun, 29 Mar 2026 13:58:52 +0000

I built a link shortener called Briefly a few months ago. It started as a weekend project. "How hard can it be?" I thought. Redirect one URL to another. Done.

The redirect part was easy. The analytics part taught me things I didn't expect.

The Redirect Is the Easy Part

Seriously. A link shortener's core logic is maybe 20 lines:

app.get('/:code', async (req, res) => {
  const link = await db.findByCode(req.params.code);
  if (!link) return res.status(404).send('Not found');

  // Track the click (async, don't block redirect)
  trackClick(req, link.id).catch(console.error);

  res.redirect(301, link.originalUrl);
});

But the interesting stuff happens in trackClick.

What Analytics Actually Matter

When I first added analytics, I tracked everything. Timestamp. IP. User agent. Referrer. Screen size. Language. Every header I could grab.

Most of it was useless noise.

Here's what actually matters when you're sharing links:

1. Click Count Over Time

Not just total clicks. Clicks per hour. Per day. This tells you when your audience is active. I found that links I shared on Twitter got 80% of their clicks in the first 4 hours. Reddit links had a slower burn over 2-3 days.

2. Referrer Source

Where did the click come from? This is gold. You'll quickly learn which platforms drive real traffic and which are vanity metrics.

function parseReferrer(referrerUrl) {
  if (!referrerUrl) return 'direct';
  const hostname = new URL(referrerUrl).hostname;

  const sources = {
    't.co': 'twitter',
    'twitter.com': 'twitter',
    'x.com': 'twitter',
    'reddit.com': 'reddit',
    'old.reddit.com': 'reddit',
    'linkedin.com': 'linkedin',
    'facebook.com': 'facebook',
  };

  return sources[hostname] || hostname;
}

3. Geographic Data (Country Level)

You don't need city-level precision. Country is enough. It tells you if your content is reaching the right audience. I was surprised to find that 40% of my traffic came from India and Brazil — markets I wasn't even thinking about.

4. Device Type

Mobile vs desktop. That's it. Don't overthink this. But it matters because if 70% of your clicks are mobile, your landing page better work on phones.

Mistakes I Made

Mistake 1: Blocking the redirect for analytics. Don't do this. Track asynchronously. Every millisecond of redirect delay costs you clicks.

Mistake 2: Storing raw IPs. Privacy laws exist. Hash them or use them only for unique visitor counting, then discard.

Mistake 3: Not deduplicating. One person refreshing counts as one click, not ten. Use a combination of hashed IP + user agent + time window.

async function isUniqueClick(linkId, visitorHash) {
  const window = 24 * 60 * 60 * 1000; // 24 hours
  const recent = await db.findRecentClick(linkId, visitorHash, Date.now() - window);
  return !recent;
}

What I'd Do Differently

If I started over, I'd build the analytics dashboard before the shortener. Sounds backwards, but the dashboard design tells you exactly what data to collect. No more, no less.

I'd also add UTM parameter support from day one. Being able to append UTM tags automatically when creating short links saves a ton of manual work.

Try It

Briefly is free to use. Create short links, track clicks, see where your traffic comes from. No signup wall for basic features.

The code taught me more about web analytics than any course could. Sometimes the best way to learn is to build the thing.

How to Generate Open Graph Images Dynamically (No Puppeteer)

Narender singh — Sun, 29 Mar 2026 13:58:48 +0000

You know what's annoying? Spinning up a headless browser just to generate a social preview image.

Puppeteer works. Sure. But it's slow, memory-hungry, and a nightmare to deploy on serverless. I spent way too long fighting Chrome binaries on Vercel before I gave up and looked for something better.

Turns out there's a simpler way.

The Problem With Puppeteer-Based OG Images

Here's the typical flow:

Spin up a headless Chrome instance
Render an HTML page with your dynamic content
Screenshot it
Serve that screenshot as your OG image

It works on your local machine. Then you deploy it and everything breaks. Chrome needs specific system libraries. Cold starts take 5-10 seconds. Memory usage spikes. And if you're on a free tier anywhere, good luck.

I've burned entire weekends on this.

Enter OGPix

OGPix takes a completely different approach. Instead of running a browser, it generates images through an API. You send parameters, you get back an image URL. That's it.

No Chrome. No Puppeteer. No deployment headaches.

How It Works — Step by Step

1. Pick a Template or Build Your Own

OGPix comes with pre-built templates for blog posts, product pages, and documentation. But you can also customize everything.

2. Generate via URL Parameters

The simplest approach — just construct a URL:

https://ogpix-pi.vercel.app/api/og?title=My+Blog+Post&description=A+quick+tutorial&theme=dark

Drop that into your meta tags:

<meta property="og:image" content="https://ogpix-pi.vercel.app/api/og?title=My+Blog+Post&description=A+quick+tutorial&theme=dark" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

3. Use It in Next.js

If you're on Next.js, add it to your layout or page head:

export const metadata = {
  openGraph: {
    images: [
      {
        url: \`https://ogpix-pi.vercel.app/api/og?title=\${encodeURIComponent(post.title)}\`,
        width: 1200,
        height: 630,
      },
    ],
  },
};

4. Dynamic Routes? No Problem

For blog posts or any dynamic content, just swap in the variables:

function getOGImage(title, author) {
  const params = new URLSearchParams({
    title,
    author,
    theme: 'gradient',
  });
  return \`https://ogpix-pi.vercel.app/api/og?\${params.toString()}\`;
}

Why This Beats Puppeteer

Speed: Images generate in milliseconds, not seconds
No dependencies: Zero system libraries to install
Serverless-friendly: Works everywhere, including edge functions
Caching: URLs are deterministic, so CDN caching just works
Free: No paid tiers for basic usage

The Results

I switched three of my projects from Puppeteer to OGPix. Deploy times dropped. No more random failures in CI. And the images actually look better because I'm not fighting CSS rendering inconsistencies across headless browsers.

If you're still wrestling with Puppeteer for OG images, stop. There's a better way now.

Check it out at ogpix-pi.vercel.app.

The Lazy Developer's Guide to Perfect Social Media Previews

Narender singh — Thu, 26 Mar 2026 17:00:40 +0000

You finally ship your project. You share the link on Twitter. And the preview looks like... nothing. A blank card. Or worse, some random text fragment from your footer.

I've been there. Multiple times. And it's always the same problem: Open Graph tags.

What Are OG Tags?

Open Graph tags are meta tags in your HTML <head> that tell social platforms what to show when someone shares your link. Facebook invented the protocol, but Twitter, LinkedIn, Slack, Discord, and basically every platform uses them now.

Here are the important ones:

<head>
  <meta property="og:title" content="My Awesome Project" />
  <meta property="og:description" content="A short description of what this does" />
  <meta property="og:image" content="https://example.com/preview.png" />
  <meta property="og:url" content="https://example.com" />
  <meta property="og:type" content="website" />

  <!-- Twitter-specific (yes, they still need their own) -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="My Awesome Project" />
  <meta name="twitter:description" content="A short description" />
  <meta name="twitter:image" content="https://example.com/preview.png" />
</head>

That's it. Six to eight meta tags and your links look professional everywhere.

The 5 Mistakes Everyone Makes

1. Forgetting the Image

No og:image? Most platforms will either show nothing or try to grab a random image from your page. Sometimes it's your logo. Sometimes it's an icon. Sometimes it's a tracking pixel. Fun.

2. Wrong Image Dimensions

The magic number is 1200x630 pixels. That's the size that looks good everywhere. Go smaller and platforms will crop it weird or add gray bars. Go too big and some platforms reject it entirely.

3. Using a Relative Image URL

This won't work:

<!-- BAD -->
<meta property="og:image" content="/images/preview.png" />

Social media crawlers don't know your domain. Use the full URL:

<!-- GOOD -->
<meta property="og:image" content="https://yoursite.com/images/preview.png" />

4. Not Setting twitter:card

Without twitter:card, Twitter defaults to a tiny thumbnail. Add summary_large_image to get the full-width preview card. One line of HTML makes a massive difference.

5. Caching Issues

You fixed your tags but the preview still looks wrong? Social platforms cache aggressively. Twitter caches for about 7 days. Facebook has its own timeline.

You can force a refresh:

Twitter: Use the Card Validator
Facebook: Use the Sharing Debugger
LinkedIn: Append a query parameter like ?v=2 to bust the cache

The Dynamic Image Problem

Static OG images work fine for your homepage. But what about blog posts? Product pages? User profiles? You can't manually create an image for every page.

This is where OGPix comes in. It generates OG images dynamically through URL parameters.

Instead of creating images in Figma, you construct a URL:

<meta property="og:image"
  content="https://ogpix-pi.vercel.app/api/og?title=My+Blog+Post&theme=dark" />

Change the title parameter, get a different image. No design tools. No image hosting. No build step.

For a Next.js blog, it looks like this:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{
        url: \`https://ogpix-pi.vercel.app/api/og?title=\${encodeURIComponent(post.title)}\`,
        width: 1200,
        height: 630,
      }],
    },
  };
}

Every blog post gets a unique, properly-sized preview image. Automatically.

Quick Checklist

Before you share any project link:

[ ] og:title is set and under 60 characters
[ ] og:description is set and under 155 characters
[ ] og:image uses an absolute URL and is 1200x630
[ ] twitter:card is set to summary_large_image
[ ] Test with Twitter Card Validator and Facebook Debugger
[ ] Preview looks good on mobile (text isn't tiny)

Stop Shipping Blank Previews

Good OG tags take 5 minutes to add. Bad previews cost you clicks every single day. Your project deserves better than a blank card on Twitter.

Set up your meta tags. Use OGPix for dynamic images. Test before you share. That's it.

It's the laziest high-impact improvement you can make.

I Made 21 Free Browser Tools So You Don't Have to Install Anything

Narender singh — Thu, 26 Mar 2026 14:06:20 +0000

Every time I needed a quick color converter or JSON formatter, I'd either:

A) Google it and land on an ad-riddled site that loads 47 trackers
B) Install yet another VS Code extension
C) Write a one-off script and forget where I saved it

So I built all the tools I keep reaching for and put them in one place. No installs. No accounts. No ads. Just browser-based utilities at ogpix-pi.vercel.app/tools.

Here's everything and why each one exists.

Image & Visual Tools

1. OG Image Generator — Create Open Graph preview images with custom text, colors, and layouts. The tool that started this whole project.

2. Favicon Generator — Upload an image, get favicons in all the sizes browsers actually need. ICO, PNG, Apple Touch. The whole set.

3. Image Resizer — Resize and crop images to specific dimensions. Preset sizes for social platforms. Everything runs client-side.

4. Color Palette Generator — Pick a base color, get complementary, analogous, and triadic palettes. Copy hex codes with one click.

5. Screenshot Mockup — Drop in a screenshot, get it wrapped in a browser frame or phone mockup. Great for portfolio sites and READMEs.

Text & Content Tools

6. Markdown Previewer — Write markdown on the left, see rendered HTML on the right. Live preview. Supports GFM.

7. Lorem Ipsum Generator — But not the boring kind. Generate placeholder text by paragraphs, sentences, or words. Pick different styles.

8. Word Counter — Paste text, get word count, character count, reading time, and sentence count. I use this for every blog post.

9. Case Converter — camelCase, snake_case, UPPER_CASE, Title Case, kebab-case. Paste and convert.

10. Text Diff Tool — Paste two blocks of text, see what changed. Highlighted additions and deletions. Like a mini Git diff.

Developer Tools

11. JSON Formatter — Paste ugly JSON, get pretty JSON. Validates too. Catches missing commas before your parser does.

12. Base64 Encoder/Decoder — Encode and decode Base64 strings. Also handles file-to-Base64 for data URIs.

13. URL Encoder/Decoder — Because I can never remember what needs percent-encoding and what doesn't.

14. Hash Generator — MD5, SHA-1, SHA-256. Paste text or upload a file. Useful for verifying downloads.

15. Regex Tester — Write a regex pattern, test it against sample text. Shows matches, groups, and explains the pattern. Saves me from regex101 tab-hopping.

16. JWT Decoder — Paste a JWT, see the header and payload decoded. No libraries needed.

CSS & Design Tools

17. CSS Gradient Generator — Pick colors and direction, get the CSS. Linear and radial gradients with live preview.

18. Box Shadow Generator — Tweak offset, blur, spread, and color. Copy the CSS. Visual feedback while you adjust.

19. Border Radius Previewer — Drag corners independently. Get the border-radius shorthand. Helpful for those asymmetric shapes.

Conversion Tools

20. Timestamp Converter — Unix timestamp to human date and back. Shows UTC, local time, and ISO 8601. I check this at least once a week.

21. Unit Converter (CSS) — px to rem, em to px, viewport units. Set your base font size and convert between units.

Why Browser-Based?

Privacy. Your data stays in your browser. I don't want your JSON payloads or your JWTs. There's no backend collecting anything because there's no backend at all for these tools.

And speed. No server round-trips means instant results. Type and see output immediately.

Try Them

All 21 tools are at ogpix-pi.vercel.app/tools. Bookmark it. I add new tools whenever I find myself reaching for something that should just exist in a browser tab.

If there's a tool you wish existed, open an issue or DM me. I'll probably build it next weekend.

Free Uptime Monitoring in 2026 — Stop Paying for Basic Alerts

Narender singh — Thu, 26 Mar 2026 14:05:33 +0000

$20/month for uptime monitoring. That's what I was paying. To check if a website returns a 200 status code. Every 5 minutes.

Let that sink in. Twenty dollars a month to run \

Building a Link Shortener? Here's What I Learned About Click Analytics

Narender singh — Thu, 26 Mar 2026 13:45:33 +0000

I built a link shortener called Briefly a few months ago. It started as a weekend project. "How hard can it be?" I thought. Redirect one URL to another. Done.

The redirect part was easy. The analytics part taught me things I didn't expect.

The Redirect Is the Easy Part

Seriously. A link shortener's core logic is maybe 20 lines:

app.get('/:code', async (req, res) => {
  const link = await db.findByCode(req.params.code);
  if (!link) return res.status(404).send('Not found');

  // Track the click (async, don't block redirect)
  trackClick(req, link.id).catch(console.error);

  res.redirect(301, link.originalUrl);
});

But the interesting stuff happens in trackClick.

What Analytics Actually Matter

When I first added analytics, I tracked everything. Timestamp. IP. User agent. Referrer. Screen size. Language. Every header I could grab.

Most of it was useless noise.

Here's what actually matters when you're sharing links:

1. Click Count Over Time

2. Referrer Source

Where did the click come from? This is gold. You'll quickly learn which platforms drive real traffic and which are vanity metrics.

function parseReferrer(referrerUrl) {
  if (!referrerUrl) return 'direct';
  const hostname = new URL(referrerUrl).hostname;

  const sources = {
    't.co': 'twitter',
    'twitter.com': 'twitter',
    'x.com': 'twitter',
    'reddit.com': 'reddit',
    'old.reddit.com': 'reddit',
    'linkedin.com': 'linkedin',
    'facebook.com': 'facebook',
  };

  return sources[hostname] || hostname;
}

3. Geographic Data (Country Level)

4. Device Type

Mobile vs desktop. That's it. Don't overthink this. But it matters because if 70% of your clicks are mobile, your landing page better work on phones.

Mistakes I Made

Mistake 1: Blocking the redirect for analytics. Don't do this. Track asynchronously. Every millisecond of redirect delay costs you clicks.

Mistake 2: Storing raw IPs. Privacy laws exist. Hash them or use them only for unique visitor counting, then discard.

Mistake 3: Not deduplicating. One person refreshing counts as one click, not ten. Use a combination of hashed IP + user agent + time window.

async function isUniqueClick(linkId, visitorHash) {
  const window = 24 * 60 * 60 * 1000; // 24 hours
  const recent = await db.findRecentClick(linkId, visitorHash, Date.now() - window);
  return !recent;
}

What I'd Do Differently

If I started over, I'd build the analytics dashboard before the shortener. Sounds backwards, but the dashboard design tells you exactly what data to collect. No more, no less.

I'd also add UTM parameter support from day one. Being able to append UTM tags automatically when creating short links saves a ton of manual work.

Try It

Briefly is free to use. Create short links, track clicks, see where your traffic comes from. No signup wall for basic features.

The code taught me more about web analytics than any course could. Sometimes the best way to learn is to build the thing.

How to Generate Open Graph Images Dynamically (No Puppeteer)

Narender singh — Thu, 26 Mar 2026 13:45:30 +0000

You know what's annoying? Spinning up a headless browser just to generate a social preview image.

Puppeteer works. Sure. But it's slow, memory-hungry, and a nightmare to deploy on serverless. I spent way too long fighting Chrome binaries on Vercel before I gave up and looked for something better.

Turns out there's a simpler way.

The Problem With Puppeteer-Based OG Images

Here's the typical flow:

Spin up a headless Chrome instance
Render an HTML page with your dynamic content
Screenshot it
Serve that screenshot as your OG image

I've burned entire weekends on this.

Enter OGPix

OGPix takes a completely different approach. Instead of running a browser, it generates images through an API. You send parameters, you get back an image URL. That's it.

No Chrome. No Puppeteer. No deployment headaches.

How It Works — Step by Step

1. Pick a Template or Build Your Own

OGPix comes with pre-built templates for blog posts, product pages, and documentation. But you can also customize everything.

2. Generate via URL Parameters

The simplest approach — just construct a URL:

https://ogpix-pi.vercel.app/api/og?title=My+Blog+Post&description=A+quick+tutorial&theme=dark

Drop that into your meta tags:

<meta property="og:image" content="https://ogpix-pi.vercel.app/api/og?title=My+Blog+Post&description=A+quick+tutorial&theme=dark" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

3. Use It in Next.js

If you're on Next.js, add it to your layout or page head:

export const metadata = {
  openGraph: {
    images: [
      {
        url: \`https://ogpix-pi.vercel.app/api/og?title=\${encodeURIComponent(post.title)}\`,
        width: 1200,
        height: 630,
      },
    ],
  },
};

4. Dynamic Routes? No Problem

For blog posts or any dynamic content, just swap in the variables:

function getOGImage(title, author) {
  const params = new URLSearchParams({
    title,
    author,
    theme: 'gradient',
  });
  return \`https://ogpix-pi.vercel.app/api/og?\${params.toString()}\`;
}

Why This Beats Puppeteer

Speed: Images generate in milliseconds, not seconds
No dependencies: Zero system libraries to install
Serverless-friendly: Works everywhere, including edge functions
Caching: URLs are deterministic, so CDN caching just works
Free: No paid tiers for basic usage

The Results

If you're still wrestling with Puppeteer for OG images, stop. There's a better way now.

Check it out at ogpix-pi.vercel.app.

I built a free URL shortener with built-in analytics — here's why

Narender singh — Wed, 25 Mar 2026 09:49:12 +0000

Every few months I find myself needing a short link. Maybe it's for a newsletter, a tweet, or a slide deck. So I go to one of the popular URL shorteners and... immediately regret it.

Bitly wants $35/month if you want to see where your clicks come from. TinyURL barely tells you anything. The free ones plaster ads everywhere. And half of them look like they were built in 2011.

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

Meet Briefly

Briefly is a URL shortener with built-in click analytics. No ads. No signup walls just to create a link. And you can actually see who's clicking your links without paying enterprise pricing.

Here's what it does:

Shorten any URL — clean, short links you can share anywhere
Click analytics — track clicks by country, device, browser, and referrer
Dashboard with charts — not just a number in a table, actual visual breakdowns
Custom slugs — pick your own short code if you want
QR codes — because apparently people still scan those (they do, I checked my own analytics)

The Dashboard

The main dashboard shows all your links in one place. You get total clicks, a sparkline for recent activity, and quick actions to copy or edit. Nothing fancy, just clean and functional.

The Analytics Page

This is the part I'm most proud of. Click on any link and you get a full breakdown:

Click timeline — see when people are clicking (turns out most of my traffic hits between 9-11am EST)
Geographic map — clicks by country, color-coded
Device split — desktop vs mobile vs tablet
Browser breakdown — Chrome dominates, obviously, but it's interesting to see the Firefox and Safari numbers
Top referrers — where the traffic is actually coming from

Pricing

I wanted to keep this accessible. Here's the deal:

Plan	Price	Links/month
Free	$0	100 links
Pro	$9/mo	1,000 links
Business	$29/mo	Unlimited

The free tier isn't some crippled demo. You get full analytics on every link. 100 links/month is plenty for most indie devs and small projects. Pro and Business just give you more volume and some extras like team access.

Tech Stack

For the nerds (hi, that's me too):

Next.js 15 — App Router, server components, the whole deal
Supabase — auth, database, real-time subscriptions for live click tracking
Vercel Edge — redirect handling runs at the edge so your short links resolve fast. Like, really fast. I'm seeing sub-50ms redirects in most regions.
Recharts — for the dashboard visualizations

I went with Supabase over a custom Postgres setup because honestly the auth and row-level security saved me probably two weeks of work. Sometimes the boring choice is the right choice.

Why not just use Bitly?

Look, Bitly is fine if you're a marketing team with budget. But I'm a solo dev who just wants to share links and know if anyone actually clicks them. I don't need campaign management or "branded domains" or whatever. I need a box where I paste a URL and get a short one back, with a chart that shows me what happened after.

That's it. That's the whole product.

Other tools I've built

Briefly is part of a small suite of dev tools I've been putting together. If you're into this kind of thing, check these out:

OGPix — generate Open Graph images via API. Drop in a URL and get a social preview image back. Super handy for dynamic OG tags.
PingBase — uptime monitoring for your sites. Get pinged when something goes down. I use it to monitor all my own projects, including Briefly.
QRGen — QR code generator. Clean, customizable QR codes. I actually use this inside Briefly for the QR code feature, which is kind of meta.

Try it out

Go to https://briefly-iota.vercel.app, paste a link, and shorten it. Takes about 3 seconds.

If you run into bugs or have feature ideas, I genuinely want to hear about it. Drop a comment here or open an issue. I'm building this stuff because I use it myself every day, so feedback from other devs is gold.

And if you've built something similar, I'd love to hear about your approach too. Always curious how other people solve this stuff.

20 Free Developer Tools That Run Entirely in Your Browser

Narender singh — Wed, 25 Mar 2026 08:15:49 +0000

I've been building browser-based developer tools for the past year or so. What started as a single OG image generator turned into a full collection of 20 free utilities. They all run in your browser, which means your data never hits a server.

I want to walk through all of them, grouped by what you'd actually use them for.

Why browser-only tools matter

Speed is the obvious reason. There's no round trip to a server, no waiting for a response. Paste your text, get your result.

But the real reason is privacy. Think about what developers paste into online tools. JWT tokens with user data. API keys in Base64 strings. Config files with database credentials. Password hashes. Every time you use a server-side tool, that data leaves your machine and lands on infrastructure you don't control.

These tools use the Web Crypto API, TextEncoder, and native browser APIs to do everything locally. Your input stays in your browser tab and nowhere else.

Debugging and data inspection

When something breaks, you need answers fast. You don't want to context-switch into a terminal or install a CLI tool just to decode a token.

The JWT Decoder splits your token into header, payload, and signature. It shows expiration status, issued-at timestamps, and all claims with color coding so expired tokens are obvious at a glance. I built this after realizing most online JWT decoders quietly send your token to their backend.

The Diff Checker does side-by-side text comparison with line-level highlighting. I used to rely on a bookmarked tool for this, but it started requiring a login. Comparing config files, checking what changed in an API response, diffing two versions of a function. All common tasks that shouldn't require an account.

The Regex Tester lets you write patterns and test them against sample text in real time. Matches are highlighted as you type. It beats opening a Node REPL every time you need to validate a pattern.

Then there's the JSON Formatter. Paste in minified or messy JSON and get it formatted with syntax highlighting. I probably use this one more than any other tool on the list.

The CSV to JSON Converter handles the tedious work of transforming CSV exports into JSON. Supports custom delimiters. I originally built it because I kept getting CSV exports from Stripe and needed them in a different format for scripts I was writing.

Security, encoding, and hashing

This category is where the privacy argument hits hardest. You really shouldn't be pasting passwords and tokens into tools that phone home.

The Hash Generator supports SHA-256, SHA-512, SHA-1, and MD5. It uses SubtleCrypto.digest() under the hood, so the browser does all the computation. I use it for verifying file integrity and generating test data.

The Base64 Encoder handles both text and files. It auto-detects whether your input is already encoded, which saves a step. Simple tool, but I reach for it constantly.

The URL Encoder/Decoder encodes and decodes URL components. Useful when you're debugging query parameters or building URLs programmatically and something looks off.

The Password Generator creates strong passwords with configurable length and character sets. Generated entirely in the browser using crypto.getRandomValues(). No server ever sees the password.

The UUID Generator produces v4 UUIDs on demand. Copy with one click. I use this when seeding databases or writing tests that need unique identifiers.

Content, SEO, and social sharing

If you ship anything on the web, you've dealt with broken link previews. These tools exist because I got tired of deploying, sharing a link, and seeing a blank preview card on Twitter.

The OG Image Generator is where this whole project started. Design Open Graph images visually with templates, custom text, and backgrounds. Export as PNG. No Figma needed for basic social cards.

The OG Tag Checker lets you enter a URL and see exactly what meta tags are present, what's missing, and how your link preview will look on different platforms. Saves you from the deploy-and-pray cycle.

The Meta Tag Generator produces the full set of og:title, og:description, twitter:card, and related tags. Fill in the fields, copy the HTML. It covers the tags you forget exist until your link preview looks wrong on LinkedIn.

The Privacy Policy Generator creates a privacy policy page based on your inputs. Useful for side projects and MVPs where you need a policy but don't want to pay a lawyer for a hobby project.

The Markdown Previewer renders Markdown in real time as you type. I use it for previewing README files and blog post drafts before pushing them.

Visual and utility tools

The remaining tools handle visual tasks and quick conversions that come up during development.

The Favicon Generator creates favicons from images or text. Exports in multiple sizes. Every new project needs one and this is faster than opening an image editor.

The Image Resizer resizes images to specific dimensions. Runs entirely in the browser using Canvas API. No upload, no compression artifacts from a third-party service.

The Screenshot Tool captures screenshots of any URL. Handy for documentation, creating preview images, or checking how a page renders without navigating to it.

The Color Converter converts between HEX, RGB, HSL, and other color formats. Includes a visual picker. Small tool, but useful when you're jumping between CSS and design specs.

The QR Code Generator generates QR codes from any text or URL. Download as PNG. I've used it for event links and quick sharing between devices.

The technical side

Everything is built with Next.js and statically rendered. There are no API routes powering these tools. The cryptographic operations use the Web Crypto API. The image tools use Canvas. The diffing uses a longest common subsequence algorithm. No heavy dependencies for the core tool logic.

The tools load fast because there's very little to load. No analytics scripts, no third-party tracking, no cookie banners.

All 20 tools in one place

You can find everything at ogpix-pi.vercel.app. Free, no account required, no data collection. If something's broken or you want a tool I haven't built, let me know in the comments.

Your link previews look broken. Here's a one-line fix.

Narender singh — Wed, 25 Mar 2026 07:42:52 +0000

Your link previews on Twitter and LinkedIn probably look broken. Or they show your favicon at 50x50 pixels. Or there's no image at all and the link gets scrolled past.

This happens because you either don't have an og:image meta tag, or it points to something that wasn't designed for 1200x630.

I fixed this for my own projects by building an API that generates the image from URL parameters. No Figma, no uploading files, no manual work per page.

How it works

Your meta tag looks like this:

<meta property="og:image" content="https://ogpix-pi.vercel.app/api/og?title=My+Blog+Post&theme=dark" />

When someone shares your link, the platform hits that URL, gets back a 1200x630 PNG, and your preview looks good. The image is generated on the fly from the query parameters.

You can set the title, description, and pick from 10 themes. The images get cached at the CDN edge, so after the first request it's basically instant.

Next.js example

If you're using Next.js with the app router, you can generate unique OG images per page automatically:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  const ogUrl = \`https://ogpix-pi.vercel.app/api/og?title=\${encodeURIComponent(post.title)}&theme=minimal\`;

  return {
    openGraph: {
      images: [{ url: ogUrl, width: 1200, height: 630 }],
    },
  };
}

Every blog post gets its own OG image with the correct title. Zero manual work.

What about Vercel's built-in OG?

Vercel has @vercel/og which uses Satori to render React components as images. It works, but you have to write JSX for your image layout, deal with font loading, handle edge cases with CSS support, and deploy it as part of your app.

With an external API you just set a URL. Works with any framework, any hosting provider, any static site. One line of HTML.

The free tools

While building this I also made a bunch of free developer tools that run in the browser:

OG Tag Checker - see how your links look on social media
Hash Generator - SHA-256, MD5, etc.
JWT Decoder - decode tokens without sending them to a server
Regex Tester - test patterns with live highlighting
Password Generator - cryptographically random passwords

All client-side, no tracking, no accounts needed. Full list at ogpix-pi.vercel.app/tools.

Try it

The playground lets you preview all themes and copy the URL: ogpix-pi.vercel.app/playground

Free tier is 100 images per month. If you're running a blog or side project, that's probably enough. Paid plans exist for higher volume.

If something doesn't work or you want a feature added, leave a comment.

I built 7 browser-only dev tools because I got tired of ads and data collection

Narender singh — Wed, 25 Mar 2026 05:57:00 +0000

Every few months I end up on some random website trying to decode a JWT or hash a string, and it's the same experience every time. Cookie banners, ads covering half the page, and that nagging feeling that my data just got sent to someone's server.

So I built my own versions. Seven of them, actually.

The problem with most online dev tools

Most of these tools are simple operations. Base64 encoding is a one-liner in any language. Hashing a string takes three lines of JavaScript with the Web Crypto API. But when you're debugging at midnight and just need a quick answer, you reach for a browser tool.

And almost every one of them sends your input to a server. I checked. Paste a JWT into most "JWT decoders" online and watch your network tab. That token, which might contain user IDs, emails, permissions, is getting shipped off somewhere. For a decode operation that requires zero server involvement.

What I built

All of these run entirely in your browser. No backend calls, no data leaving your machine. They're part of OGPix, which started as an OG image generator but turned into a collection of developer utilities.

Hash generator - SHA-256, SHA-512, SHA-1, MD5. Paste text, get hashes. I use this mostly for verifying file integrity and generating test data. Uses the Web Crypto API so everything stays local.

JWT decoder - Splits the token into header, payload, and signature. Shows expiration status, issued-at time, all the claims. Color coded so you can spot expired tokens fast. No server touch.

Diff checker - Side by side text comparison with line-level highlighting. I was using an old bookmarked tool for this that started requiring a login last month. So I made my own.

Base64 encoder/decoder - Handles text and files. Detects if your input is already encoded. Simple, but I use it more than I'd like to admit.

CSV to JSON converter - Drop in a CSV, get JSON out. Supports custom delimiters. I built this after manually converting CSV exports from Stripe for the third time in a week.

Meta tag generator - Fills in og:title, og:description, twitter:card, and all the other tags you forget exist until your link preview looks broken on LinkedIn. Generates the HTML you can copy paste.

Screenshot tool - Enter a URL, get a screenshot. Useful for preview images, documentation, or checking how a page looks without opening it.

Why browser-only matters

I keep coming back to this because it actually matters for developer tools specifically. We paste API keys into JWT decoders. We hash passwords to test authentication flows. We diff config files with credentials in them.

When a tool runs client side, none of that leaves your machine. When it runs server side, you're trusting a stranger's infrastructure with your data. For something that takes 10 milliseconds to compute locally.

The Web Crypto API handles all the hashing. TextEncoder and atob/btoa handle Base64. JWT decoding is just splitting on dots and parsing Base64. None of this needs a server.

The technical bits

Everything is Next.js, statically rendered. No API routes for any of these tools. The hash generator uses SubtleCrypto.digest(), the diff checker uses a longest common subsequence algorithm, the CSV parser handles quoted fields and custom delimiters.

The whole thing loads fast because there's nothing to load. No analytics scripts, no third party dependencies for the tool logic. Your browser does the work.

Try them

All the tools are at ogpix-pi.vercel.app/tools. Free, no account, no tracking. If something is broken or you want a tool I haven't built yet, tell me in the comments.

Stop Copying Privacy Policies from Other Websites

Narender singh — Wed, 25 Mar 2026 05:28:21 +0000

I see this all the time. Someone launches a side project, realizes they need a privacy policy, and just copies one from a bigger site. Swap out the company name, maybe change a few details, call it done.

This is a terrible idea for a few reasons.

What can actually go wrong

First, privacy policies reference specific data practices. If you copied yours from a site that uses Stripe, Google Analytics, and Mailchimp but you only use Stripe, your policy is lying to your users about what services touch their data. That's not just sloppy. Under GDPR, it can get you fined.

Second, jurisdiction matters. A privacy policy written for a company based in California has CCPA-specific language. If you're operating out of Germany, that policy is missing half the GDPR requirements and includes stuff that doesn't apply to you. It's the wrong document.

Third, and people forget this one, privacy policies can be copyrighted. The text itself is creative work. Copying it wholesale could technically be infringement. Nobody's gotten sued over this yet as far as I know, but it's not a great foundation for your legal compliance.

What a privacy policy actually needs

At a minimum, you need to cover:

What data you collect (emails, names, cookies, IP addresses, etc.)
Why you collect it (account creation, analytics, marketing)
Who you share it with (third-party services, payment processors)
How users can control their data (deletion requests, opt-outs)
Your contact information for privacy-related questions

If you have users in the EU, GDPR requires you to list lawful bases for processing, data retention periods, and information about cross-border transfers. If you have users in California, CCPA gives them the right to know what's collected and to request deletion.

This isn't something you can fake by copying someone else's homework.

What I built instead

I got tired of pointing friends to expensive legal template sites or watching them copy-paste from random companies. So I built a free privacy policy generator that actually asks you the right questions.

You tell it what data you collect, what services you use, where you're based, and it generates a proper template. It covers GDPR and CCPA basics and gives you something that actually reflects your app.

You can try it here: Privacy Policy Generator

I also built a Terms of Service Generator that works the same way. Both are free, no signup required.

A quick disclaimer

These generators produce templates, not legal advice. If you're handling sensitive data like health records or financial information, talk to an actual lawyer. But for most side projects and small apps, a well-structured template beats a copy-pasted policy that doesn't match your product.

The tools are part of PagePulse, a set of free utilities I'm putting together for people launching websites. No accounts, no paywalls. Just tools that do the job.