Forem: Shakeel Skl

Stop pasting API keys into online formatters and croppers

Shakeel Skl — Tue, 05 May 2026 19:41:27 +0000

Every day, millions of developers copy-paste sensitive data into random online tools.

A JSON response from a production server into an online formatter. A snippet containing a database connection string into a snippet manager. A UI design file from Figma into an online image cropper.

We do it because it’s fast. But we rarely stop to ask: where is this data actually going?

If you paste a JSON payload with a live Bearer token into a standard online formatter, that token travels across the internet to a third-party server. If you upload a design file containing proprietary UI to an online cropper, that intellectual property is now sitting on someone else's hard drive.

For side projects, we might not care. But for client work or proprietary code, this is a massive security hole.

The "Local-Only" Alternative

Over the last few months, I've been building a suite of browser-native tools that process everything locally. Because they use native JavaScript APIs, the data never triggers a network request.

If you open your browser's DevTools (F12 -> Network tab) and use these tools, you will see exactly zero outbound HTTP requests.

Here are the three I use the most:

1. A Private JSON Formatter

When you need to beautify or validate a JSON response, you shouldn't have to send your API keys to a server. I use a private JSON formatter that runs entirely in the browser tab. It handles deeply nested objects and catches trailing comma errors without uploading the payload.

2. A Code Snippet Manager

Storing code snippets in Notion or GitHub Gists is fine for public stuff, but what about private client logic? I use a browser-based snippet manager that saves everything to localStorage. It supports syntax highlighting for 20+ languages, requires zero login, and keeps your proprietary logic completely off the cloud.

3. A "Fig Cropper" and Image Tool

Designers often export UI frames from Figma and hand them off to developers. If you need to crop or resize them, uploading them to a random server is a privacy risk. I use an image cropper that works as a Fig cropper—handling high-res design files directly in the browser. It also includes a built-in image converter to switch between JPG, PNG, and WebP without a server upload.

Why this matters for client work

If you are handling files for a healthcare client, a fintech startup, or a legally binding contract, sending that data to a random SaaS tool might actually violate your NDA or compliance requirements (like HIPAA or GDPR).

Using local-only tools isn't just a "nice-to-have" privacy flex. It's a professional requirement.

Next time you need to format, crop, or store something sensitive, check your Network tab. If you see data leaving your browser, close the tab and find a local alternative.

browser-native crypto utilities every Web3 dev needs

Shakeel Skl — Sat, 18 Apr 2026 14:47:30 +0000

Here is the complete material for your second dev.to article, targeting the crypto programmatic tools we built.

Again, this is pure Markdown with angle brackets < > around the URLs so dev.to doesn't break the links. I also included the strict single-word tags at the bottom.

As a web dev, I've lost count of how many times a crypto project I was building needed a quick unit conversion or a data fetch.

When you're working with Web3.js, Ethers, or just building a simple dashboard, you don't want to import a massive 5MB library just to convert SOL to USDC or fetch a token's current price.

To speed up my own workflow, I built a suite of zero-dependency, browser-native crypto utilities. No API keys required, no JWT tokens, just instant client-side lookups.

Here are the three I use the most:

1. Instant Token Price Lookups

Need to display the live price of ETH, BTC, or an altcoin in your React state? I got tired of reading CoinGecko documentation, so I made a crypto price checker where you just type the ticker (e.g., "PEPE"). It fetches the price, market cap, and 24h change instantly.

2. The Unit Converter We Actually Need

If you've ever tried to manually calculate how many Gwei equals 1 ETH, or how many Lamports are in a 5 SOL transaction, you know the math is annoying. I built a crypto unit converter that handles the specific denominations for Bitcoin (BTC/Sats), Ethereum (ETH/Gwei/Wei), and Solana (SOL/Lamports).

3. Gas Estimator for Quick Math

Before sending a transaction on an EVM chain, I usually want a rough estimate of the fiat cost. Instead of switching tabs to a block explorer, I use this crypto gas fee estimator. You plug in the gas limit and Gwei, and it tells you exactly what you'll pay in USD.

All of these just wrap standard REST APIs but format the output specifically for developers. No fluff, no ads, just the data.

What's your most annoying repetitive task when building crypto dashboards?

How I cut my Next.js image payload by 60% without changing a line of code

Shakeel Skl — Sat, 18 Apr 2026 14:44:30 +0000

I was doing a routine Lighthouse audit on a Next.js app I'm building and realized my LCP (Largest Contentful Paint) was terrible. The culprit? Unoptimized hero images and Open Graph meta images.

I didn't want to set up a heavy Sharp pipeline in my CI/CD just for a few static assets. I needed a quick way to optimize them before committing.

Here is the exact 3-step workflow I used to fix it:

1. Convert formats to WebP

Browsers love WebP. I had a few legacy PNGs that were huge. Instead of opening Photoshop, I dragged them into this PNG to WebP converter. It runs 100% in the browser using the Canvas API, so you don't have to upload your assets to a random server.

2. Compress the file size

Even some of my existing JPGs were too bloated. I ran them through this bulk image compressor. You can just drag and drop 10 files at once, and it spits out optimized versions alongside a data table showing exactly how much KB you saved per file.

3. Fix layout shift with exact dimensions

I was getting hit with CLS (Cumulative Layout Shift) penalties because my images didn't have explicit width and height props in my <Image /> tags. I used this image resizer to batch-crop all my blog headers to exactly 1200x630, eliminating the shift.

The result:
Lighthouse mobile score went from 54 to 94. No new npm packages installed. No server uploads. Just browser-native APIs.

What's your go-to workflow for handling images before deploying?

5 PDF Tools That Never Upload Your Files

Shakeel Skl — Mon, 30 Mar 2026 20:38:34 +0000

We've all been there. You need to merge two PDFs quickly, so you Google "merge PDF free", click the first result, upload your documents — and then realize you just sent potentially sensitive files to some random server in another country.

For most people, that's fine. But what if those PDFs contain:

A signed contract with client details
A bank statement
A confidential business proposal
Medical records
Legal documents

Suddenly that "free" tool doesn't feel so free.

The Problem With Most Free PDF Tools

Most online PDF tools work the same way:

You upload your file to their server
Their server processes it
You download the result
Your file sits on their server (for how long? who knows)

Some tools are transparent about this. Many aren't. And even the honest ones — you're trusting their security, their data retention policies, and that they won't sell or misuse your data.

There's a better way.

Browser-Based PDF Processing — How It Works

Modern browsers are powerful enough to process PDF files entirely locally using JavaScript libraries like PDF.js and pdf-lib. This means a well-built tool can:

Read your PDF file in memory
Process it (merge, split, compress, whatever)
Give you the result to download

All without your file ever touching a server.

Your file goes: device → browser → device. That's it.

5 PDF Tools That Work This Way

All of these tools are available free at solvebar.com — no login, no upload, no tracking.

PDF Merger Combine multiple PDF files into one. Drag to reorder before merging. The entire operation runs in your browser — useful when you need to combine contracts, reports or scanned documents without exposing their contents.

When you need it: Combining a cover letter and portfolio into one file before sending a job application. Merging monthly bank statements into one annual document.

👉 Merge your PDFs securely right now

PDF Splitter Extract specific pages or split a PDF into individual pages. Set custom page ranges. Download split files individually or all at once as a ZIP.

When you need it: A 50-page contract where you only need to share pages 12-15 with a client. Extracting one invoice from a batch PDF.

👉 Extract pages from your PDF safely

PDF Compressor Reduce PDF file size by removing embedded metadata and optimizing object streams. No quality slider that secretly re-renders your document through a server.

When you need it: A scanned document that's 15MB and needs to be emailed. Reducing file size before uploading to a portal with size limits.

👉 Compress your PDF without uploading it

PDF Watermark Add custom text watermarks to all pages — control font, size, color, opacity and rotation. Mark documents as DRAFT, CONFIDENTIAL or SAMPLE before sharing.

When you need it: Sending a proposal to a client before the contract is signed. Sharing a sample report while protecting the full version.

👉 Add a watermark to your PDF locally

PDF Form Filler Fill in PDF form fields directly in your browser — text fields, checkboxes, radio buttons and dropdowns. Download the completed form as PDF.

When you need it: Government forms, tax documents, application forms. These almost always contain personal information you really don't want sitting on a stranger's server.

👉 Fill out your PDF forms privately

Conclusion

The next time you need to process a PDF, ask yourself one question before uploading: do I know where this file is going?

If the answer is no — or if the document contains anything sensitive — use a tool that keeps your files on your device.

All five tools above are free, require no login, and process everything locally in your browser.

👉 solvebar.com/tools/pdf-merger

👉 solvebar.com/tools/pdf-splitter

👉 solvebar.com/tools/pdf-compressor

👉 solvebar.com/tools/pdf-watermark

👉 solvebar.com/tools/pdf-form-filler

All tools on SolveBar run entirely in your browser. No files are uploaded, no data is tracked, no login is required.

Building browser-only PDF tools — merge, split, and canvas builder without touching a server

Shakeel Skl — Mon, 23 Mar 2026 10:28:22 +0000

Most PDF processing tools have a fundamental architecture problem: they upload your files to a server to do the work.

This makes sense historically — PDF manipulation used to require server-side processing. But modern browser APIs have made that unnecessary for the majority of document workflows. pdf-lib, pdfjs-dist, and Fabric.js give you everything you need to merge, split, and build PDFs entirely client-side.

Here's how I built three PDF tools without a single file upload.

The core libraries

pdf-lib — JavaScript PDF creation and modification, runs in browser and Node. Handles merging, splitting, page manipulation, metadata. The API is clean:

const { PDFDocument } = await import("pdf-lib");

// Merge
const merged = await PDFDocument.create();
for (const file of files) {
  const src     = await PDFDocument.load(file.bytes);
  const indices = parseRanges(file.ranges, src.getPageCount());
  const copied  = await merged.copyPages(src, indices);
  copied.forEach(page => merged.addPage(page));
}
const bytes = await merged.save();

pdfjs-dist — Mozilla's PDF renderer, runs in browser. Used for generating page thumbnails:

const pdfjsLib = await import("pdfjs-dist");
pdfjsLib.GlobalWorkerOptions.workerSrc =
  `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.mjs`;

const pdf      = await pdfjsLib.getDocument({ data: new Uint8Array(bytes) }).promise;
const page     = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 0.3 });
const canvas   = document.createElement("canvas");
canvas.width   = viewport.width;
canvas.height  = viewport.height;
await page.render({ canvasContext: canvas.getContext("2d"), viewport }).promise;
const thumb = canvas.toDataURL("image/jpeg", 0.7);

jszip — For packaging multiple split PDFs into a single ZIP download:

const JSZip = (await import("jszip")).default;
const zip   = new JSZip();

for (let i = 0; i < pageCount; i++) {
  const doc    = await PDFDocument.create();
  const [page] = await doc.copyPages(src, [i]);
  doc.addPage(page);
  const bytes  = await doc.save();
  zip.file(`page-${String(i + 1).padStart(3, "0")}.pdf`, bytes);
}

const zipBlob = await zip.generateAsync({ type: "blob" });

PDF Merger — page range selection

The interesting part of the merger is per-file page range selection. Users can specify "1-3,5,7-9" to select specific pages from each file before merging.

function parseRanges(input: string, pageCount: number): number[] {
  if (!input.trim()) return Array.from({ length: pageCount }, (_, i) => i);
  const pages = new Set<number>();
  const parts = input.split(",").map(s => s.trim());
  for (const part of parts) {
    if (part.includes("-")) {
      const [a, b] = part.split("-").map(Number);
      for (let i = a; i <= Math.min(b, pageCount); i++) pages.add(i - 1);
    } else {
      const n = parseInt(part, 10);
      if (n >= 1 && n <= pageCount) pages.add(n - 1);
    }
  }
  return [...pages].sort((a, b) => a - b);
}

With live validation and a page count display so users know exactly what will be included.

PDF Splitter — three modes

Rather than one split mode, I built three:

All pages individually — splits every page into a separate PDF, packages as ZIP. Simple, covers the most common use case.

Custom ranges — named ranges with labels. User creates entries like "Introduction: 1-3", "Chapter 1: 4-15", "Appendix: 16-20". Each becomes a separate PDF. Multiple ranges download as ZIP, single range downloads directly.

Visual page selection — click thumbnails to select specific pages, downloads as single extracted PDF. Most intuitive for non-technical users.

type SplitMode = "all" | "ranges" | "select";

PDF Canvas Builder — the contextual sidebar problem

The canvas builder uses Fabric.js. The interesting UX challenge was the property sidebar: showing all properties all the time creates visual noise and confuses users about what applies to what.

The solution was a contextual sidebar that shows only properties relevant to the selected object type:

Text selected → font, size, color, weight, style, alignment, line height, rotation
Shape selected → fill, stroke, stroke width, opacity, rotation, flip H/V
Image selected → opacity, brightness, contrast, saturation, grayscale, rotation, flip H/V
Nothing selected → hint card + add new object panels

type ObjType = "text" | "shape" | "image" | null;

function getObjType(obj: any): ObjType {
  const t = obj?.type?.toLowerCase() ?? "";
  if (["i-text","itext","text","textbox"].includes(t)) return "text";
  if (t === "image") return "image";
  if (obj) return "shape";
  return null;
}

The sidebar re-renders based on selObj.type, showing the right controls for whatever is selected. Image filters (brightness/contrast/saturation/grayscale) use Fabric's built-in filter pipeline.

The SSR problem with canvas-heavy components

Next.js SSR and Fabric.js don't mix. The solution is dynamic import with ssr: false:

// pages/tools/pdf-builder.tsx
const PdfBuilderClient = dynamic(
  () => import("@/components/pdf/PdfBuilderClient"),
  { ssr: false }
);

Same pattern for the merger/splitter — any component that touches window, document, or browser-only libraries needs this treatment in Next.js pages router.

Privacy by architecture

The key insight: when you don't build a server, you can't accidentally leak data to it. The privacy guarantee isn't a policy — it's an architectural constraint.

For PDF tools specifically this matters. Documents people merge and split often contain:

Contracts and NDAs
Financial statements
Medical records
Personal identification

None of those should be uploaded to a third party service just because someone needs to combine two PDFs.

Try them

PDF Merger — combine PDFs with page range selection
PDF Splitter — split by pages, ranges, or visual selection
PDF Canvas Builder — create PDFs from scratch

Open DevTools → Network tab while using any of them. No file upload requests. Everything stays in your browser.

If you're building browser-based file processing tools, the pdf-lib + pdfjs-dist combination covers most PDF use cases without any server infrastructure. Worth knowing about.