DEV Community: Muhammad Shoaib

Editing video in the browser with no upload: what MediaRecorder and canvas can (and can't) do

Muhammad Shoaib — Sun, 18 Oct 2026 05:36:18 +0000

Small video jobs (merge, crop, rotate, mute, reverse) don't need a server. The browser can do them while the file stays on the visitor's computer: no upload, no queue, no watermark. Here is the general approach, and where the browser pushes back.

1. Load the file locally

const url = URL.createObjectURL(fileInput.files[0]);
video.src = url;

An object URL lets a <video> element play a local file instantly. Nothing is uploaded.

2. Crop and rotate by drawing frames to a canvas

For crop and rotate, draw each frame onto a canvas with drawImage() (using the source rectangle for crop, or ctx.rotate() for a 90 or 180 degree turn), then record the canvas:

const stream = canvas.captureStream(30);
const rec = new MediaRecorder(stream, { mimeType: 'video/webm' });

3. Keep or drop the audio

To keep sound, add the audio track from video.captureStream() to the canvas stream. To mute a clip, simply leave it out. That one choice is the whole "remove audio" tool.

4. The honest limits

MediaRecorder records in real time, so a 3-minute clip takes about 3 minutes.
Output is usually WebM. That is fine for most sites, but some phones prefer MP4.
Reversing video means reading every frame first, so it makes sense to cap the section length (the reverse tool below allows up to 60 seconds).

5. Merging

Play clips one after another into the same canvas and recorder, scaling each to a common size so the joins don't jump.

Try them

Merge videos: https://www.toolverse.world/2026/10/merge-videos-free-online-video-joiner.html
Crop video: https://www.toolverse.world/2026/10/crop-video-free-online-video-cropper.html
Rotate video: https://www.toolverse.world/2026/10/rotate-video-free-online-turn-video-90.html
Reverse video: https://www.toolverse.world/2026/10/reverse-video-free-online-video.html
Remove audio from video: https://www.toolverse.world/2026/10/remove-audio-from-video-free-online.html

They're free and need no account. If you have built something similar, I'd like to hear how you handled MP4 output.

Offline-first web apps with localStorage: a journal, planner and grocery list that never upload your data

Muhammad Shoaib — Sat, 17 Oct 2026 05:42:56 +0000

Most "simple" productivity apps want an account before you can write one line. I wanted the opposite: open a page, start typing, close the tab, and find everything still there tomorrow, without a server ever seeing it.

Here's the small pattern I used for a set of free browser apps on Toolverse.

1. Save on every change, debounced

let t;
function save(state){
  clearTimeout(t);
  t = setTimeout(() => localStorage.setItem('journal-v1', JSON.stringify(state)), 400);
}

A 400 ms debounce keeps typing smooth and still feels instant.

2. Version your key

Using journal-v1 instead of journal means you can migrate the shape later without breaking old saves.

3. Load defensively

function load(){
  try { return JSON.parse(localStorage.getItem('journal-v1')) || {entries: []}; }
  catch { return {entries: []}; }
}

Corrupted or hand-edited storage should never crash the app.

4. Give people an export button

localStorage is per-browser. A one-click JSON export (a Blob plus a download link) lets people back up or move their data, which matters more than any sync feature.

5. For secrets, encrypt first

For the password manager I used the Web Crypto API (PBKDF2 to derive a key, AES-GCM to encrypt), so only ciphertext ever touches storage.

Try them

Online journal: https://www.toolverse.world/2026/10/online-journal-free-private-diary-in.html
Daily planner: https://www.toolverse.world/2026/10/online-planner-free-daily-planner-with.html
Grocery list: https://www.toolverse.world/2026/10/grocery-list-free-online-shopping-list.html
Meal planner: https://www.toolverse.world/2026/10/meal-planner-free-weekly-meal-plan-and.html
Offline password manager: https://www.toolverse.world/2026/10/password-manager-free-offline-encrypted.html

Open one, add something, reload, and it's still there. Feedback on the pattern is welcome.

One Workspace for a Tiny Business: Tasks, Notes, Clients

Muhammad Shoaib — Thu, 15 Oct 2026 19:20:00 +0000

When you run a one- or two-person business, juggling five apps for tasks, notes, clients and invoices costs more time than the work itself.

The business workspace app puts the basics in one browser tab: a task board, notes, a simple client list and quick documents. Data is stored in your browser, so there's no sign-up.

How I set it up in 15 minutes:

Create three columns: To do, Doing, Waiting on client.
Add every open job as a card with its due date.
Keep a note per client with contact details and scope.
Review the board every Monday morning.

Pair it with a schedule. If you have helpers or part-timers, the employee schedule maker builds a printable weekly roster.

Watch cash, too. A 13-week cash flow forecast template shows slow weeks before they arrive.

Export or back up your data regularly, since browser storage is cleared if you wipe site data.

Layers, Masks and Batch Edits Without Installing an App

Muhammad Shoaib — Thu, 15 Oct 2026 19:19:50 +0000

Sometimes you just need to put text over a photo, blend two images, or fix the color on fifty product shots, and installing a heavy desktop editor feels like overkill.

Single image with layers. The photo editor with layers runs in the browser: add image and text layers, reorder them, change opacity and blend modes, then export PNG or JPG. Everything stays on your device, so nothing gets uploaded.

A quick workflow for a blog header:

Open your background photo as the base layer.
Add a dark rectangle layer at 40% opacity so text is readable.
Add a text layer for the title and center it.
Export at 1200x630 for social previews.

Many images at once. For shop listings or event photos, the batch photo editor applies the same brightness, contrast and resize to a whole folder in one pass.

Need it bigger? Small source images can be enlarged with the image upscaler before you edit.

None of these require an account, which makes them handy on borrowed or work computers.

How I Estimate Quarterly Taxes as a Freelancer in 2026

Muhammad Shoaib — Thu, 15 Oct 2026 19:19:01 +0000

When I went freelance, nobody withheld anything from my pay, and my first April was painful. Now I run a ten-minute routine each quarter.

1. Total net profit so far. Income minus business expenses for the year to date. Be honest about expenses you can document.

2. Work out self-employment tax. It's roughly 15.3% on 92.35% of net profit, covering Social Security and Medicare. The self-employment tax calculator for 2026 does the math, including the Social Security wage cap.

3. Estimate income tax and split it. The quarterly estimated tax calculator turns your annual estimate into payment amounts and shows the 2026 due dates (the next one is January 15).

4. Set aside cash every invoice. I move about 25-30% of each payment into a separate account, so the quarterly payment is never a surprise.

5. Track mileage as you go. If you drive for work, log trips weekly; the mileage reimbursement calculator uses the 2026 rate.

This isn't tax advice, just a simple system. A CPA can confirm your numbers, but showing up with them already organized saves you time and fees.

An SEO Checklist for a Brand-New Website (Free Generators for Each Step)

Muhammad Shoaib — Thu, 15 Oct 2026 05:35:59 +0000

Launching a new site is the easy part. Getting search engines to read it properly takes a few small files and tags that are easy to forget. Here's the short checklist I run through on every new site, with a free browser tool for each step (no signup, nothing uploaded).

1. Write a real title and meta description for every page

Keep titles under about 60 characters and descriptions under about 155. Put the main phrase people search for near the start, and make every page different.
Tool: Meta Tag Generator

2. Add a robots.txt that doesn't block what you want indexed

The most common mistake is a leftover Disallow: / from a staging site. Allow your public pages, block admin or search-result pages, and point to your sitemap.
Tool: Robots.txt Generator

3. Submit an XML sitemap

List every public URL, then submit the sitemap in Google Search Console and Bing Webmaster Tools. Bing also feeds DuckDuckGo and Yahoo, so it's worth the two minutes.
Tool: XML Sitemap Generator

4. Check how links look when shared

Open Graph tags control the title, description and image on Facebook, LinkedIn and X. A missing image makes a shared link easy to scroll past.
Tool: Open Graph Preview

5. Keep config files valid

A broken XML feed or YAML config can quietly break a build or a sitemap. Validate before you deploy.
Tools: XML Formatter and Validator and YAML to JSON Converter

That's the whole list. None of it takes long, and it saves weeks of wondering why pages aren't showing up. More free tools: Toolverse

Preparing Images for Your Website: A 5-Minute Workflow

Muhammad Shoaib — Sun, 11 Oct 2026 14:02:37 +0000

Large images are still the most common reason a simple site scores badly on Core Web Vitals. You don't need Photoshop to fix it. Here is the workflow I use for blog and landing-page images.

1. Crop to the aspect ratio you actually display

If the layout shows a 16:9 hero, crop to 16:9 first with an image cropper. Shipping a tall photo and letting CSS hide most of it wastes bytes.

2. Resize to the rendered width (x2 for retina)

A hero rendered at 800px wide needs a 1600px source at most. Use a resize tool rather than serving the 4000px original from your phone.

3. Convert to a modern format

WebP is supported everywhere that matters and is usually 25–35% smaller than JPEG at the same quality. An image converter handles PNG/JPG/WebP in the browser.

4. Compress

Run the result through an image compressor. Quality 75–80 is usually indistinguishable from the original on screen.

5. Add real alt text

Describe what the image shows for screen-reader users. If you're stuck, an AI image caption generator gives a starting description you can edit.

Bonus

Set width and height attributes and use loading="lazy" for below-the-fold images to avoid layout shift. These five steps typically cut page weight by more than half.

Small Encoding and Formatting Tasks I Stopped Writing Scripts For

Muhammad Shoaib — Sun, 11 Oct 2026 14:02:14 +0000

Every developer has a folder of throwaway scripts: decode this Base64 blob, pretty-print that JSON, generate a password for a test account. Most of them are three lines long and get rewritten every few months. Here is the short list of jobs I now do in a browser tab instead, and when I still reach for code.

1. Pretty-printing and validating JSON

API responses copied out of logs are usually one long line. Pasting into a JSON formatter gives indentation and, more usefully, points at the exact position of a trailing comma or unquoted key. If you need the same transformation in CI, jq . is still the right answer, but for a one-off look the browser is faster.

2. Base64 encode / decode

Basic-auth headers, data URIs, JWT payload segments – they are all Base64. A Base64 encoder/decoder is quicker than remembering whether your shell's base64 wants -d or -D. Reminder: Base64 is encoding, not encryption; never treat it as a way to hide secrets.

3. Changing text case

Renaming a batch of constants from camelCase to SNAKE_CASE, or turning a heading into Title Case for docs? A case converter handles the whole block at once.

4. Test passwords

For seed data and local accounts I use a password generator with symbols on and length 16+. For production secrets use your password manager or openssl rand instead.

5. Number bases

Bit flags and colour values come up constantly. The hex calculator and binary calculator do arithmetic directly in those bases, which is handy when checking a mask.

When to keep the script

If the task runs more than once a week, or touches sensitive data, automate it locally. Browser tools are best for the quick, occasional look.

A Practical Statistics Cheat Sheet for A/B Tests (With Calculators)

Muhammad Shoaib — Sun, 11 Oct 2026 14:00:08 +0000

You shipped a variant, the dashboard shows a lift, and someone asks "is it significant?". Here is the minimum statistics you need to answer honestly, plus free calculators to check your numbers.

Before the test: sample size

Decide how many users each variant needs before you start, otherwise you will be tempted to stop as soon as the graph looks good. Plug your baseline conversion rate, the smallest lift you care about, and your desired confidence into a sample size calculator.

Describe the data

Means hide a lot. Look at the spread too:

Mean, median, mode, range for a quick summary.
Standard deviation to see how noisy the metric is.

After the test: is the difference real?

A p-value calculator tells you how surprising the result would be if there were no real difference. Below 0.05 is the common threshold, but it is a convention, not a law.
A confidence interval calculator is often more useful: "the lift is between +0.4% and +2.1%" says far more than "p = 0.03".

Common mistakes

Peeking daily and stopping early.
Testing ten metrics and reporting the one that "won".
Ignoring practical significance – a statistically real 0.1% lift may not be worth maintaining.

Run the numbers, write down the interval, and decide with the business context in mind.

5 Free Browser Tools I Use Daily as a Developer

Muhammad Shoaib — Sun, 11 Oct 2026 10:04:32 +0000

A few small utilities save me a surprising amount of time. None of these need an install or an account.

1. JSON formatter

Pasting a minified API response into a JSON formatter is the fastest way to spot a missing field or bad nesting.

2. Base64 encoder/decoder

Handy for debugging auth headers, data URIs and email payloads: Base64 encoder.

3. Case converter

Renaming variables between camelCase, snake_case and Title Case? A case converter does it in one paste.

4. Password generator

For test accounts and local secrets I use a random password generator that runs fully client-side.

5. Color picker

Grabbing HEX/RGB/HSL values for CSS: color picker.

All five live on Toolverse – every type of free online tool in one place: 340+ free calculators, PDF converters, image, text, developer and AI tools. No signup.

What small tools are in your daily kit?