Forem: Shaishav Patel

How to Actually Improve Your Typing Speed — 5 Techniques That Work

Shaishav Patel — Tue, 21 Apr 2026 15:18:27 +0000

Most typing advice is the same: "practice more." That's true, but it's also useless without knowing what to practice and how to practice it.

Here are five techniques that produce measurable improvement — with the reasoning behind each.

Measure your current speed first: Free Typing Speed Test — WPM + Accuracy

1. Fix Your Home Row Position First

The most common reason people plateau at 40–50 WPM: they don't use home row consistently.

Home row (ASDF for the left hand, JKL; for the right) is the default resting position. Every key on the keyboard is one or two movements from home row. The F and J keys have raised bumps so you can find home row without looking.

If you're resting your hands differently — or hovering them without a consistent anchor — every keystroke requires more visual and motor effort.

Fix: Before your next practice session, find home row by feel. Type a few sentences without looking down. Return your fingers to home row after every key. This single change improves both accuracy and eventual speed.

2. Slow Down to Speed Up

This sounds wrong. It's the most important principle in typing improvement.

When you type at the edge of your current speed, you make errors. Errors interrupt rhythm, force corrections, and — critically — reinforce the wrong finger movement. Every time you mistype a letter and fix it, you've practiced the wrong motion.

The technique: drop to 70–80% of your comfortable speed. Type at the pace where you make almost no errors. Hold that speed for entire practice sessions.

Speed increases as accuracy becomes automatic. You cannot outrun bad habits by going faster — you can only outrun them by practicing the correct motion so many times it becomes default.

3. Target Your Problem Keys

Every typist has specific keys they consistently mistype. For most people it's the number row, the brackets, or letters typed with the weaker fingers (Q, Z, X on the left hand; P, semicolon on the right).

Identify yours: take a typing test and notice which letters are causing hesitation or errors. Then practice those specifically — not general text, but focused repetition on the letters that slow you down.

How to do it: Type words that heavily use your problem letters. If Q and P are weak, find passages heavy in those letters. Ten minutes of targeted practice on weak keys outperforms an hour of general text on comfortable keys.

4. Train Muscle Memory With Common Word Patterns

English text is not random. A small set of words — "the," "and," "that," "this," "with," "have," "from" — appears constantly. When your fingers can type these common words without conscious thought, your overall speed increases significantly.

The technique: practice common words in isolation until each one flows as a single motion, not a sequence of individual keystrokes. "the" typed consciously is three movements. "the" typed from muscle memory is one fluid motion. The difference compounds across thousands of words.

Typing tests like the one at Ultimate Tools use common English word lists — practicing with them trains exactly the patterns that appear in real text.

5. Measure Accuracy, Not Just WPM

WPM is the metric everyone tracks. It's also the metric most likely to mislead.

A test result of 70 WPM with 95% accuracy is genuinely fast. A result of 80 WPM with 88% accuracy means roughly one error every 8–9 words — a pace that requires constant backspacing in real writing and actually slows your effective output below 70 WPM.

Track both numbers. If accuracy is below 95%, it's the constraint — not speed. Slow down until accuracy is consistently above 95%, then let speed increase naturally.

Most typists who "can't get faster" are actually accuracy-limited: they're making errors that mask their actual potential pace.

What a Realistic Improvement Timeline Looks Like

First 2 weeks: Fixing home row and slowing down typically moves most people from 45 WPM to 55–60 WPM with better accuracy
1–2 months of consistent daily practice (15–20 minutes): 60 WPM → 75–85 WPM
6 months+: 90–100+ WPM is achievable for most adults with deliberate practice

The key word is deliberate. Typing more emails doesn't improve typing speed — it reinforces existing habits. Structured practice with feedback improves typing speed.

Measure Your Progress

Typing Speed Test at Ultimate Tools — free, browser-based, no account. Measures WPM and accuracy on each test. Run it before and after focused practice sessions to track progress.

Aim for: accuracy above 95% before chasing higher WPM. Once accuracy is consistent, speed follows.

What Is WPM and What's a Good Score? — typing speed benchmarks by age and profession
Word Counter — count words and reading time in any text

Solitaire Strategy Guide — How to Win More Games of Klondike

Shaishav Patel — Tue, 21 Apr 2026 15:17:14 +0000

Klondike Solitaire has a deceptively high win rate — 80–82% with perfect play on one-card draw. Most players win far less than that. The gap isn't luck. It's strategy.

Play free in your browser: Solitaire Online — Free, Classic Klondike

What "Winning" Actually Requires

The goal is to move all 52 cards to four foundation piles, built from Ace to King by suit. The tableau (seven columns) is just the workspace. Every decision should be evaluated against one question: does this move help get a card to a foundation sooner?

Most losing games have a common cause: the player fills the tableau with legal-but-counterproductive moves while foundations stay empty.

The Hierarchy of Moves

Not all moves are equal. When multiple moves are available, prioritize in this order:

1. Move a card to a foundation. Always do this if the card is ready. Never withhold an Ace or a 2 from a foundation — they have no useful role in the tableau.

2. Flip a face-down card. Every face-down card is locked information. Exposing it opens possibilities and eliminates uncertainty. Any move that uncovers a face-down card is almost always worth making.

3. Move a card from the waste pile to the tableau. This clears space in the waste and opens new draws.

4. Draw from the stock. If no tableau move is available that flips a face-down card, draw. Don't move cards around aimlessly just to do something.

The Empty Column Rule

An empty column is one of the most valuable resources in Solitaire. It's a free staging area — you can temporarily park any stack there to rearrange the tableau.

Only a King (or a stack starting with a King) can fill an empty column. This makes Kings more valuable than they look. A King with a long sequence ready to stack beneath it (K-Q-J-10-9-8...) is far more useful than a lone King with nothing to follow.

The key rule: don't fill an empty column impulsively. Wait for a King that will actually unlock something — a face-down card that becomes accessible, or a sequence that can be rearranged to expose a buried card.

A wasted empty column is one of the most common causes of losing a winnable game.

The Foundation Timing Trap

Counter-intuitive: moving cards to the foundation too early can hurt you.

A 3♥ on the foundation is a 3♥ that can't sit under a 4♠ or 4♣ in the tableau. Low cards (Aces through 4s) are sometimes more useful as tableau stepping stones than as foundation progress.

The safe rule: move a card to the foundation when its partner card (same value, opposite color) is already on the foundation or visible in the tableau. A 4♠ is safe to move when both 3♥ and 3♦ are on their foundations (nothing needs a black 4 in the tableau anymore).

This isn't always possible to calculate perfectly, but thinking about it avoids the worst early-foundation mistakes.

Stock Cycling Strategy

The stock (the face-down deck) cycles — when it's exhausted, the waste pile becomes the new stock. This means you can plan ahead: every card you've seen in the waste is information.

Use the first cycle to gather information. Don't force every draw into a tableau move. Sometimes it's better to pass on a marginal move and continue drawing to see what's coming.

By the second and third cycle, you should know which cards are deep in the stock and build toward exposing them. If you know a needed card is coming in five draws, play the tableau conservatively until it arrives rather than making moves that reduce your options.

The Two Sequences Problem

One of the hardest scenarios: two sequences that need to be merged but can't because the required card is face-down under one of them.

Example: you have a red 8 available but need it to go on a black 9 — which is buried under several face-down cards in another column.

The fix isn't to move the red 8 somewhere temporary and hope. It's to systematically expose that black 9 by working down through the face-down cards above it. Identify what's blocking the card you need, and work backwards to expose it.

When to Restart

Not every Solitaire deal is winnable. Roughly 18–20% of games with one-card draw are mathematically impossible regardless of play.

Signs the game is stuck:

The same cards have cycled through the stock three times without a useful move appearing
No face-down cards remain accessible and foundations are incomplete
Key cards are buried under sequences that can't be moved

At this point, restarting isn't giving up — it's correct. The skill is recognizing an unwinnable deal before wasting ten more minutes on it.

Summary

Expose face-down cards above all else
Protect empty columns — don't fill them carelessly
Don't rush Aces and 2s to foundations if they're needed in the tableau
Use stock cycling as information, not just as draws
Know when to restart

Play and practice: Solitaire at Ultimate Tools — no account, no download, classic Klondike one-card draw.

Other Strategy Guides

2048 Strategy — The Corner Method — tile organization, not just merging
Minesweeper Strategy — Solve Without Guessing — constraint elimination
Sudoku Strategy — Elimination over Calculation — logical deduction techniques

Brick Breaker Strategy Guide — Aim the Ball, Clear Smart, Score High

Shaishav Patel — Tue, 21 Apr 2026 01:11:52 +0000

Brick Breaker looks like a reflex game. Keep the ball in the air, break the bricks, don't let it fall. But the players who score high aren't reacting faster — they're aiming better.

Play for free in your browser: Brick Breaker Online — Free, No Download

The Most Important Mechanic: Paddle Angle Control

Most players treat the paddle like a flat wall — position it under the ball and it bounces back. That's correct, but incomplete.

Where the ball hits the paddle determines where it goes next:

Center of paddle → ball returns at roughly the same angle it came from
Left edge → ball deflects sharply to the left
Right edge → ball deflects sharply to the right

This means you can steer the ball. Not just keep it alive — actually aim it at specific bricks.

Once this clicks, the game changes. You stop playing defensively (keep the ball from falling) and start playing offensively (direct the ball toward the section you want to clear next).

Clear the Bottom Bricks Early

Counter-intuitive for new players: target the bottom rows of bricks before the top ones.

Here's why: after the upper bricks are gone, the ball has a clear path to the top wall and comes back down. Any surviving lower bricks are now hard to reach — the ball hits the top, bounces around the ceiling, and falls straight back without touching the stranded lower rows.

Early in a level, angle the ball downward toward bottom-row bricks. Yes, the top bricks are easier to hit. But clearing a path to the bottom first gives you access to the whole board.

Create a Roof-Run

One of the most satisfying mechanics in Brick Breaker: when the ball gets trapped between the top wall and the top row of bricks, it bounces rapidly and clears an entire row without you doing anything.

To set this up:

Clear the brick directly adjacent to a wall at the top row
Angle the ball into the gap you've created
The ball enters the space above the bricks and bounces off the ceiling, clearing brick after brick on its way across

Deliberately creating a gap to exploit isn't just satisfying — it's the fastest way to clear a dense upper section.

The Lives Resource

You start with 3 lives. Losing a life doesn't just hurt emotionally — it limits your options going forward. Every life preserved is a cushion for the harder patterns in later levels.

Don't accept lost lives as inevitable. Most ball losses happen in the first three seconds after a ball drops, when the player is repositioning from chasing the ball across the screen. The fix: watch the ball's angle after it bounces off a brick, not after it passes the midpoint of the screen. You have more reaction time if you start moving the paddle earlier.

Dealing With Isolated Bricks

The hardest scenario: one brick remaining in the upper-left corner of the board after everything else is cleared. The ball can only reach it by deflecting off two walls in sequence.

To reach a corner brick:

Position the paddle slightly off-center toward the corner the brick is in
Let the ball angle naturally up toward that corner
Don't try to force it with hard edge hits — a moderate angle toward the wall sequence is more consistent than a sharp redirect

Patience here beats force. The ball will reach it — don't sacrifice a life trying to speed it up.

Score Optimization

Every brick destroyed adds 10 points. Level completion adds a bonus.

The math: clearing a level quickly with all lives intact earns more than clearing it slowly after losing two lives. The bonus multiplier is real — preserve lives.

On harder levels where bricks are dense, the highest-value play is often to slow down the ball angle deliberately — take fewer risks with edge hits, accept some lost positions — in exchange for completing the level without losing a life.

Summary: The Three Principles

Aim, don't just bounce. Use edge hits to steer the ball. Every shot is steerable.

Clear bottom first. Stranded bricks at the bottom are harder than they look once the top opens up.

Lives are resources. Play conservatively when ahead; be aggressive only when you can afford to lose one.

Play and Practice

Brick Breaker at Ultimate Tools — no download, no account, works in any desktop browser. The angle control mechanics described above apply directly to this version.

Other Games With Strategy Depth

Snake — spatial planning and path management
Minesweeper — pure logic deduction
Sudoku — elimination-based puzzle solving
Solitaire — sequencing and foundation management

Snake Strategy Guide — How to Score High Without Running Into Yourself

Shaishav Patel — Tue, 21 Apr 2026 01:10:48 +0000

Most Snake runs end the same way: the snake is long, the space is tight, and one bad turn sends the head into the body. The game over isn't a mystery — you can see exactly what went wrong. The question is how to prevent it.

Play for free in your browser: Snake Online — Free, No Download

The Problem With Chasing Food Directly

The instinct in Snake is to move the head toward the food as efficiently as possible. Shortest path, fewest turns. This works at short lengths.

At medium and long lengths, the shortest path to food is usually the most dangerous path. Cutting directly through the center of the board means your body follows you there — and the next piece of food spawns somewhere you now can't easily reach.

The core mistake: optimizing each food pickup individually, without considering what the board will look like afterward.

The Spiral Strategy

The single most reliable high-score approach: trace the perimeter of the board in a large coil, spiraling inward.

Here's how it works:

Move along the outer edge of the grid
When you reach a corner, turn inward by one cell
Repeat — tracing progressively smaller rectangles toward the center

The body follows this path in order. Because the snake always moves in organized rows, it never crosses itself.

The downside: this path doesn't chase food efficiently. The food might be on the opposite side of the spiral when you reach it. But that's the point — you trade short-term efficiency for long-term survival.

When to Deviate From the Spiral

The spiral isn't rigid. If food spawns directly ahead on your current path, take it. If a short detour picks up food without breaking the organized structure, take it.

The rule: any detour you take must be completable. Before deviating, visualize whether you can return to the structured path. If the detour would strand you in a section of the board with no exit, don't take it.

The "Don't Back Yourself Into a Corner" Principle

At high lengths, empty space is the most valuable resource on the board.

Every time you make a turn, you're potentially reducing accessible space. Before any turn, ask: does this path leave me with enough room to continue?

Specifically:

Avoid the center late game. The center seems safe early — lots of space in every direction. But a long snake in the center has nowhere to escape. The edges are safer because you can always turn along a wall.

Leave buffer space between rows. If you're tracing a path along the board, leave at least one cell of gap between passes. This gives you an escape route if the food forces you off your planned path.

Reversals Kill You — Here's Why

You cannot reverse direction in Snake. If the snake is moving right, pressing left immediately sends the head into the body and the game ends.

This catches players when they panic. The snake is heading toward a wall, they realize too late, and they press the opposite key by instinct.

Fix: commit to turning [up or down] before attempting to reverse horizontal direction. The 90-degree turn gives you a row of buffer before you'd need to reverse again.

Controlling the Game Speed

As the snake grows, the effective speed of the game increases — not because the timer changes, but because each decision matters more. A mistake at length 10 is recoverable. At length 50, a single wrong turn ends the game.

Slow your decision-making while the snake moves at its own pace. Before each turn, look ahead two moves, not just one. The turn you're making now sets up your options for the next turn.

Tips for a High Score

Start with the perimeter. From the very first move, trace the outer edge of the board. This establishes the organized structure before the snake is long enough to complicate things.

Don't panic near walls. Most deaths happen when a player overcorrects near an edge. Commit to your direction, adjust early.

Treat food as a secondary goal. Food is the score mechanism, but survival is the actual game. A run that lasts 200 moves without food is impossible — but a run that ends at move 20 scores zero. Prioritize staying alive.

Watch the tail. As the snake grows, the tail's position becomes as important as the head's. The space your tail is vacating is space you can move into. Track where it's going.

Play and Practice

The strategies above apply to Snake at Ultimate Tools — classic grid Snake, no download, no account. Works in any desktop browser with a keyboard.

The best way to internalize these patterns is to play a few rounds specifically practicing the spiral — even if it means ignoring nearby food. Once the structure is muscle memory, layering in opportunistic food grabs becomes natural.

Related Games

Minesweeper — logic-based deduction (no reflex required)
Sudoku — pure logic puzzle, three difficulty levels
Brick Breaker — arcade ball physics with angle control

How to Create a Wi-Fi QR Code — Share Your Network Password in One Scan

Shaishav Patel — Mon, 20 Apr 2026 14:27:19 +0000

Instead of reading out your Wi-Fi password letter by letter, you can put a QR code on your wall. Guests scan it, they're connected. No typing. No "is that a capital I or a lowercase l?"

Here's how Wi-Fi QR codes work and how to create one for free.

How Wi-Fi QR Codes Work

A Wi-Fi QR code encodes your network credentials in a specific text format that phones recognize automatically:

WIFI:S:YourNetworkName;T:WPA;P:YourPassword;;

Where:

S: — network name (SSID)
T: — security type (WPA, WEP, or nopass for open networks)
P: — password

When a phone camera scans this format, it detects the WIFI: prefix and opens a connection prompt automatically — no app needed on modern Android or iOS.

Create a Wi-Fi QR Code (Free, No Login)

Go to the QR Code Generator
Select Wi-Fi as the content type
Enter your network name (SSID) and password
Choose your security type (WPA2 for most home routers)
Customize the style if you want — colors, dot shape, corner style
Download as PNG or SVG

The QR code is generated entirely in your browser. Your Wi-Fi password is never sent to any server.

Security Type — Which to Choose

Security	When to use
WPA / WPA2	Most home and office routers — choose this
WPA3	Newer routers with WPA3 support
WEP	Older, legacy networks (rare)
No password	Open/guest networks

If you're unsure, check your router's admin page or the sticker on the back of the router. Almost all modern home routers use WPA2.

Where to Put It

Printed and framed — the most common use. Print the QR code, put it in a small frame, and place it near your router or at your desk. Guests scan it on arrival.

On your phone screen — create the QR code, screenshot it, and show guests your screen. They scan directly from your display.

In a welcome document — if you run an Airbnb, short-term rental, or office, put the QR code in the welcome PDF or print it on an information card.

On a desk tent card — small folded card, QR code on one side, network name on the other. Common in coworking spaces and hotels.

Scanning a Wi-Fi QR Code

Android (8+): Open the camera app, point at the QR code. A notification appears — tap to connect.

iOS (11+): Same — open the native Camera app, point at the code. Tap the banner to join the network.

Older devices: Use a QR scanner app. Most will detect the WIFI: format and offer to connect.

No app download needed on modern phones. The camera handles it natively.

Can Someone Steal My Password From the QR Code?

Yes — anyone who scans the code gets your Wi-Fi password. Keep that in mind:

Don't post your Wi-Fi QR code publicly online (social media, websites)
For Airbnb or short-term rentals, use a separate guest network with its own password — not your main network
For offices, create a guest network with limited access

Most routers support a separate guest SSID. Create a QR code for the guest network only — that way guests connect without touching your main devices.

Updating the QR Code

Wi-Fi QR codes are static — they encode the password directly. If you change your Wi-Fi password, you need to generate a new QR code.

If you change passwords regularly, consider:

Keeping the password simple but memorable (so guests can type it if needed)
Using a dynamic QR code that redirects to a page where you update the password centrally — though this requires more setup

For most home and small office use, a static Wi-Fi QR code works fine. Passwords rarely change.

Generate your Wi-Fi QR code free: QR Code Generator — Wi-Fi, URL, vCard, and more

No login. No upload. Works on any browser.

How to Resize Images for Social Media — The Right Dimensions for Every Platform

Shaishav Patel — Mon, 20 Apr 2026 14:26:12 +0000

Every social media platform has its own image dimensions — and using the wrong size means cropped photos, blurry thumbnails, or images that don't fill the frame correctly.

Here are the correct pixel dimensions for every major platform, and how to resize any image to match.

Why Dimensions Matter

Uploading an image that's the wrong size causes one of three problems:

Platform crops it — Instagram crops non-square images to fit its feed format. Your subject might be cut off.
Platform stretches it — Some platforms upscale small images, making them blurry.
Platform letterboxes it — Black bars appear around images that don't match the expected ratio.

Using exact pixel dimensions avoids all three.

Instagram

Format	Dimensions	Ratio
Square post	1080 × 1080 px	1:1
Portrait post	1080 × 1350 px	4:5
Landscape post	1080 × 566 px	1.91:1
Story / Reel	1080 × 1920 px	9:16
Profile photo	320 × 320 px	1:1

Tip: Portrait (4:5) takes up the most vertical space in the feed and gets the most visibility. Square is the safest for repurposing one image across formats.

Twitter / X

Format	Dimensions	Ratio
In-feed image	1200 × 675 px	16:9
In-feed portrait	900 × 1200 px	3:4
Profile photo	400 × 400 px	1:1
Cover/header	1500 × 500 px	3:1

Tip: Twitter auto-crops images in the feed to a 16:9 preview. If your subject is off-center, it may be cropped out. Use 1200 × 675 px to control exactly what's shown.

Format	Dimensions	Ratio
Post image	1200 × 627 px	1.91:1
Article cover	1920 × 1080 px	16:9
Profile photo	400 × 400 px	1:1
Cover photo	1584 × 396 px	4:1
Company logo	300 × 300 px	1:1
Company cover	1128 × 191 px	~6:1

Tip: LinkedIn post images at 1200 × 627 px display well on both desktop and mobile feed without cropping.

Facebook

Format	Dimensions	Ratio
Post image	1200 × 630 px	~1.91:1
Story	1080 × 1920 px	9:16
Profile photo	170 × 170 px (display)	1:1
Cover photo	820 × 312 px	~2.63:1
Event cover	1920 × 1005 px	~1.91:1

YouTube

Format	Dimensions	Ratio
Thumbnail	1280 × 720 px	16:9
Channel art	2560 × 1440 px	16:9
Profile photo	800 × 800 px	1:1

Tip: YouTube thumbnails display at 1280 × 720 px but are shown small in search results. Use large text and high contrast so they're readable at thumbnail size.

Format	Dimensions	Notes
Status image	1080 × 1920 px	9:16, same as Stories
Profile photo	500 × 500 px	1:1

How to Resize to Exact Dimensions

The Image Resizer lets you set exact pixel width and height:

Upload your image (JPG, PNG, WebP, GIF)
Enter the target width and height in pixels
Toggle Lock Aspect Ratio — on to scale proportionally, off to set exact dimensions
Download the resized image

Everything runs in your browser — nothing is uploaded to a server.

Aspect Ratio vs. Exact Dimensions

There's an important difference:

Lock aspect ratio ON: the image scales proportionally. If you set width to 1080px, the height adjusts automatically to preserve the original ratio. You won't distort the image, but you might not hit the exact target height.

Lock aspect ratio OFF: you set both width and height independently. The image will match exactly, but may appear stretched if the original ratio doesn't match the target.

For most social media use cases:

Use ratio ON when the platform accepts a range of sizes
Use ratio OFF when the platform requires exact dimensions (profile photos, covers)

Batch Strategy

If you post the same image across multiple platforms, start with the largest dimension:

Resize to 1920 × 1080 px (YouTube cover, LinkedIn article)
Crop/resize to 1200 × 675 px (Twitter, Facebook, LinkedIn post)
Resize to 1080 × 1080 px (Instagram square)
Resize to 1080 × 1920 px (Stories, Reels)

Starting large preserves quality. Downscaling is always better than upscaling.

Resize any image to exact social media dimensions — free, no upload: Image Resizer

Building 2048, Wordle, Flappy Bird, Hangman, and Whack-a-Mole in React — Architecture Notes

Shaishav Patel — Mon, 20 Apr 2026 14:24:49 +0000

We recently added five more browser games to ultimatetools.io — 2048, Wordle, Flappy Bird, Hangman, and Whack-a-Mole. All built in React, no game libraries, running in the browser.

Here's what was interesting or non-obvious about each one.

Shared Architecture

Each game follows the same two-file pattern used across the site:

app/tools/fun-tools/[game]/page.tsx   ← server component: metadata + SEO schemas
components/tools/[GameName].tsx        ← "use client": all game logic

State approach varies by game:

DOM-based games (2048, Wordle, Hangman): useState is fine — updates are infrequent
Canvas + RAF games (Flappy Bird, Whack-a-Mole): all game state in useRef — avoids stale closures inside the animation loop

2048 — The Direction Rotation Trick

2048 is a 4×4 grid where tiles slide and merge when you swipe/press a direction.

The naive approach: write four separate merge functions for left, right, up, and down. That's a lot of duplicated logic.

The better approach: write one mergeLeft function, then rotate the grid before and after calling it.

function rotateGrid(grid: number[][]): number[][] {
  const n = grid.length;
  return Array.from({ length: n }, (_, r) =>
    Array.from({ length: n }, (_, c) => grid[n - 1 - c][r])
  );
}

function move(grid: number[][], direction: Direction) {
  let g = grid;
  if (direction === "right") g = rotateGrid(rotateGrid(g));
  if (direction === "up")    g = rotateGrid(rotateGrid(rotateGrid(g)));
  if (direction === "down")  g = rotateGrid(g);

  g = g.map(mergeLeft);  // always merge left

  if (direction === "right") g = rotateGrid(rotateGrid(g));
  if (direction === "up")    g = rotateGrid(g);
  if (direction === "down")  g = rotateGrid(rotateGrid(rotateGrid(g)));
  return g;
}

mergeLeft slides all tiles left, merges adjacent equal tiles, and fills with zeros. One function handles all four directions.

Slide animations: CSS transitions on tile positions. Tiles are keyed by a stable ID (not value or position) so React doesn't remount them on each move — the key stays the same, the transform: translate() changes, and CSS handles the animation.

Wordle — Two-Pass Duplicate Letter Evaluation

Wordle has a subtle edge case: duplicate letters.

If the secret word is ABBEY and you guess EERIE:

The first E should be yellow (E is in the word, wrong position)
The second E should be gray (the word only has one E, already accounted for)
The third E should be gray (same reason)

A single-pass evaluation gets this wrong. The correct approach is two passes:

function evaluate(guess: string, target: string): LetterState[] {
  const result: LetterState[] = Array(5).fill("absent");
  const targetChars = target.split("");
  const guessChars = guess.split("");

  // Pass 1: mark exact matches (green)
  guessChars.forEach((char, i) => {
    if (char === targetChars[i]) {
      result[i] = "correct";
      targetChars[i] = "#"; // consume this target letter
    }
  });

  // Pass 2: mark wrong-position matches (yellow)
  guessChars.forEach((char, i) => {
    if (result[i] === "correct") return;
    const idx = targetChars.indexOf(char);
    if (idx !== -1) {
      result[i] = "present";
      targetChars[idx] = "#"; // consume so it's not matched again
    }
  });

  return result;
}

Daily mode seeding: The daily word is selected by taking the day offset from a fixed epoch and indexing into the word list. Same result for every user on the same day, no server needed.

const EPOCH = new Date("2024-01-01").getTime();
const dayIndex = Math.floor((Date.now() - EPOCH) / 86400000) % wordList.length;
const dailyWord = wordList[dayIndex];

Flappy Bird — Physics in a RAF Loop

Flappy Bird is Canvas + requestAnimationFrame. All state lives in refs to avoid stale closures:

const birdYRef = useRef(200);
const velocityRef = useRef(0);
const pipesRef = useRef<Pipe[]>([]);
const scoreRef = useRef(0);
const statusRef = useRef<"idle" | "playing" | "dead">("idle");

Physics per frame:

velocityRef.current += GRAVITY;           // ~0.5 per frame
birdYRef.current += velocityRef.current;

Jump:

velocityRef.current = JUMP_VELOCITY;      // ~-9, negative = up

Pipe generation: a new pipe spawns every N frames. Pipe gap position is randomized within a constrained range so the game stays playable. Speed increases every 10 points.

Collision detection: axis-aligned bounding box (AABB) — simple rectangle overlap between bird bounds and each pipe rect. Checked every frame.

The bird is drawn as a rounded rectangle with a wing, not a sprite — keeps the asset count at zero.

Hangman — SVG Progressive Drawing

Hangman's "drawing" is an SVG with 7 stages. Each stage is a path or element that becomes visible as wrong guesses accumulate:

const PARTS = [
  <line x1="60" y1="20" x2="60" y2="120" />,  // body
  <circle cx="60" cy="15" r="10" />,            // head
  <line x1="60" y1="50" x2="40" y2="80" />,    // left arm
  <line x1="60" y1="50" x2="80" y2="80" />,    // right arm
  <line x1="60" y1="120" x2="40" y2="150" />,  // left leg
  <line x1="60" y1="120" x2="80" y2="150" />,  // right leg
  <line x1="20" y1="180" x2="100" y2="180" />, // ground
];

// Render parts[0..wrongCount]

Keyboard handling: both on-screen letter buttons and physical keyboard events (keydown listener). The physical keyboard handler checks that the key is a letter, hasn't been guessed, and the game is in progress.

Word categories: General, Animals, Countries, Tech — each a pre-defined array of words. Category selector shown at game start. Selecting a new category resets the game.

Whack-a-Mole — Recursive setTimeout Spawning

Whack-a-Mole has 9 holes. Moles pop up randomly, stay for a fixed duration, then retract.

The approach that works well: per-hole recursive setTimeout, not a single game tick.

function spawnMole() {
  const hole = pickRandomEmptyHole();
  setMoles(prev => ({ ...prev, [hole]: true }));

  setTimeout(() => {
    setMoles(prev => ({ ...prev, [hole]: false }));
    if (gameRunning) {
      setTimeout(spawnMole, getRandomDelay()); // recursive — next mole
    }
  }, MOLE_VISIBLE_MS);
}

Speed progression: MOLE_VISIBLE_MS decreases every 15 seconds. More moles appear faster as the game progresses.

Hit detection: clicking a mole calls whack(hole) which checks moles[hole] === true, increments score, and immediately sets moles[hole] = false. The mole visually retracts on the next render.

60-second timer: a single setInterval ticks every second, decrements time, and ends the game at 0. On game end, all active mole timeouts are effectively abandoned — they fire but the gameRunning check prevents new spawns.

Common Patterns Across All Five

localStorage for scores/streaks:

useEffect(() => {
  const saved = localStorage.getItem("best-score");
  if (saved) setBestScore(parseInt(saved));
}, []);

Touch support: all Canvas games listen for touchstart/touchend in addition to mousedown/keydown.

ShareResultCard: the existing share component is reused for end-of-game share images — same canvas generation pattern as every other tool on the site.

All five games are live at ultimatetools fun tools — no login, no download, works on any browser.

How to Rotate a Photo Online Without Losing Quality

Shaishav Patel — Mon, 20 Apr 2026 02:09:06 +0000

Rotating a photo sounds trivial — click a button, done. But depending on how you do it, you can degrade image quality every single time. Here's why that happens and how to avoid it.

Why Rotation Can Lose Quality

Most photos are JPEGs. JPEG is a lossy format — every time a JPEG is saved, it re-encodes the image using compression that permanently discards some data.

When a typical image editor rotates a JPEG, it:

Decodes the compressed image to raw pixel data
Rotates the pixels
Re-encodes the result to JPEG — applying another full round of compression

That re-encoding step is the problem. Each cycle makes the image slightly softer, adds compression artifacts, and you can never recover the original data.

For a single rotation the difference is subtle. After 3–4 save cycles, it becomes visible in fine details and edges.

Lossless JPEG Rotation

The solution is lossless JPEG rotation — rotating the image at the compressed-block level without decoding and re-encoding the whole image.

JPEG compresses data in 8×8 pixel blocks. Rotating a JPEG by exactly 90°, 180°, or 270° means transposing those blocks mathematically — no decode/re-encode pass required.

Lossless rotation only works when:

The rotation angle is 90°, 180°, or 270° (not arbitrary angles like 15°)
The image dimensions are multiples of 8 — most camera photos qualify

For arbitrary angle rotation, some re-encoding is unavoidable.

What About PNG and WebP?

PNG is lossless by design. Rotating and saving a PNG never degrades quality regardless of how many times you do it.

WebP supports both lossy and lossless modes. Rotating a lossless WebP has no quality loss.

If quality is critical and you're doing multiple edits, the safest workflow is:

Convert your JPEG to PNG
Do all your edits (rotate, crop, resize)
Save as PNG throughout
Only convert back to JPEG at the very final step

The EXIF Rotation Problem

Your phone camera often doesn't physically rotate photos. Instead, it writes a rotation tag in the image's EXIF metadata. Most modern apps read this tag and display the photo correctly.

But some tools — web upload forms, older apps, certain browsers — ignore the EXIF tag and display the photo sideways or upside down.

The fix: use a tool that applies the EXIF rotation to the actual pixel data, then clears the tag. This makes the rotation permanent and visible everywhere, regardless of whether the app reads EXIF.

How to Rotate Photos Online

The Rotate Image tool handles:

90° clockwise / counter-clockwise — standard quarter turns
180° rotation — full flip
Horizontal flip — mirror left-to-right
Vertical flip — mirror top-to-bottom
Output format — export as JPG, PNG, or WebP

Everything runs in your browser using the Canvas API. Your file is read locally, rotated in memory, and downloaded directly — nothing is sent to a server.

Steps:

Open the Rotate Image tool
Upload your photo — JPG, PNG, WebP, or GIF
Click the rotation direction
Choose output format
Download

Tips for Best Results

Use PNG for screenshots. Screenshots have hard pixel edges that JPEG compression softens. Rotating a screenshot as PNG preserves every pixel exactly.

Do all rotations in one session. If you need to rotate 90° twice to get 180°, do both clicks before downloading — don't save between steps. Each intermediate save is a quality hit for JPEGs.

Check EXIF before rotating. If the photo looks correct on your phone but sideways everywhere else, the issue is the EXIF tag. A rotation tool that applies EXIF correction will fix this properly.

Avoid re-uploading the same file repeatedly. If you rotate, download, then upload the downloaded file to rotate again — that's two encode cycles instead of one. Do everything in one upload session.

Summary

Situation	Best approach
JPEG, 90°/180°/270° rotation	Lossless rotation (block transpose)
PNG rotation	Always lossless, any angle
Multiple edits on a JPEG	Convert to PNG → edit → convert back at the end
Photo sideways on some apps	EXIF tag issue — apply pixel-level rotation

The Rotate Image tool is free, works on any device, and supports all common image formats. No download, no signup.

What Is a QR Code and How Does It Work?

Shaishav Patel — Mon, 20 Apr 2026 02:07:49 +0000

QR codes are everywhere — restaurant menus, packaging, event tickets, business cards. But most people have no idea how they actually store and transmit information.

Here's exactly how they work, from the grid of dots to the decoded URL.

What "QR" Stands For

QR stands for Quick Response. The format was invented in 1994 by Denso Wave (a Toyota subsidiary) for tracking automotive parts through manufacturing. The goal: a code that could be scanned faster than a barcode and store far more data.

It worked. QR codes can hold up to 4,296 alphanumeric characters. A standard barcode holds around 20.

What a QR Code Actually Is

A QR code is a two-dimensional matrix of black and white squares called modules. Unlike a barcode (which only encodes data horizontally), a QR code encodes data in both directions — which is why it stores so much more.

The pattern is not random. Every region has a specific role:

Finder patterns — the three square-within-square symbols in three corners. They tell the scanner "this is a QR code" and establish orientation. This is why QR codes always have those three identical corner squares.

Timing patterns — alternating black/white lines along the top and left edges. They let the scanner determine the size of each module.

Alignment patterns — smaller position markers used in larger QR codes to correct for distortion.

Data modules — the actual encoded content, spread across the remaining area.

Error correction modules — redundant data that lets scanners read the code even when part of it is damaged, dirty, or covered.

How Data Is Encoded

QR codes don't store a URL as plain readable text embedded in a grid. The encoding process:

The input (URL, text, etc.) is converted to a binary sequence
Error correction bytes are calculated using Reed-Solomon codes and added
The full binary sequence is mapped to module positions on the grid
A mask pattern is applied — one of eight patterns that XOR with the data to prevent large solid areas of the same color (which confuse scanners)

The result is the distinctive black-and-white grid.

Error Correction Levels

QR codes have four error correction levels:

Level	Recovery capacity	Use case
L (Low)	~7%	Clean, undamaged print
M (Medium)	~15%	Most everyday use
Q (Quartile)	~25%	Industrial, outdoor
H (High)	~30%	Logo embedded in QR code

Higher error correction = more modules needed = larger, denser QR code. This is why QR codes with logos in the center still scan — the logo sits in the error correction zone, and the missing data is reconstructed.

What QR Codes Can Store

QR codes encode more than just URLs. Common content types:

URL — opens a website (most common)
Plain text — a message or instructions
Wi-Fi credentials — SSID + password, for one-tap network connection
vCard — contact details (name, phone, email, address)
Email — opens a pre-addressed compose window
Phone number — opens the dialler
Location — coordinates or a maps link
Calendar event — adds an event to the device calendar

The content type is determined by a prefix in the encoded data. For example, Wi-Fi QR codes start with WIFI:S:NetworkName;T:WPA;P:password;;. The phone's QR scanner reads the prefix and opens the appropriate app automatically.

Static vs Dynamic QR Codes

Static QR codes encode the destination directly. If you want to change where the code points, you generate a new code and reprint it.

Dynamic QR codes encode a short redirect URL. The redirect target can be updated at any time without changing or reprinting the physical code. Most business and marketing QR codes are dynamic.

Dynamic codes also support scan tracking — you can see how many times a code was scanned, from where, and on what device.

How to Generate and Scan QR Codes

To generate a QR code with custom style, error correction level, and content type:

QR Code Generator — supports 10 content types (URL, Wi-Fi, vCard, text, and more), custom colors, dot shapes, and logo embedding.

To scan a QR code from a screenshot, image file, or your camera:

QR Code Scanner — upload any image or use your device camera. Decodes instantly in the browser, nothing uploaded to a server.

Both are free, no login required.

Summary

A QR code is a 2D matrix where:

Three corner squares establish orientation
Binary data is mapped to module positions
Error correction allows partial damage recovery
A mask pattern prevents scanning failures from solid regions

What looks like a random grid of dots is actually a precisely structured data format — one that your phone decodes in under a second.

Snake Game Tips — How to Beat Your High Score Without Hitting the Wall

Shaishav Patel — Mon, 20 Apr 2026 02:06:34 +0000

Snake is one of the oldest browser games — and one of the hardest to master at high scores. Fast reflexes help, but strategy is what separates a score of 50 from a score of 500.

After a few hundred games on the free browser Snake game, here are the strategies that actually work.

1. Never Chase the Apple Directly

The biggest beginner mistake: always heading straight for the apple.

If the apple is in the top-right corner and you're in the bottom-left, going directly there means cutting across the middle of the board — right where your tail will be in 20 seconds.

Think two moves ahead: where will your tail be by the time you reach the apple?

2. Hug the Edges Early

When your snake is short (under 10 segments), the safest movement pattern is to circle the perimeter of the board. This keeps your tail behind you and gives you time to plan your next move.

Edges are safe — there are no surprises from your own body when you're tracing the border.

3. The S-Pattern for Long Snakes

Once your snake is more than half the board length, perimeter loops stop working — your tail catches up with your head. Switch to an S-pattern:

Move horizontally across one full row
Drop down one row
Move back across in the opposite direction
Repeat

This systematic sweep covers the entire board without crossing your own tail. It's slower, but it's the only reliable way to survive past a certain length.

4. Don't Panic-React — Commit to One Move

When you notice you're heading toward your tail, the instinct is to react immediately. That usually kills you faster.

You can't reverse — snake games don't allow 180° turns
Three panicked inputs in a row almost always causes a collision
One calm decision is better than rapid direction changes

When something goes wrong: pause mentally, identify the nearest open path, and commit.

5. Count Your Available Space

As the snake grows, mentally divide the board into zones:

Open zone — clear space ahead
Danger zone — areas close to your tail
Safe zone — space you can reach without crossing your body

Always move toward open space, even if it means temporarily moving away from the apple. Staying alive matters more than the next apple.

6. The Trap Technique

Advanced players intentionally route their snake around the apple without eating it, creating a clean approach path. This sounds counterintuitive, but it prevents you from boxing yourself in.

If eating the apple now puts you in a bad position, loop around it once and approach from a better angle.

7. Avoid Corners

Corners are where most snakes die. A corner means only one exit — and if your body is near that exit, there's no way out.

Rule: never commit to a corner unless you can clearly see the exit is open and will stay open.

8. Scan Before Moving

Most snake games give you a brief moment before the snake moves. Use that time to scan the full board, not just the tile immediately ahead.

One extra second of scanning per direction change prevents most avoidable deaths.

Try It

These strategies work best with consistent practice in short sessions.

Play Snake free online — no download, no login

No install. No account. Works on any browser. High score saved locally so you can track improvement over sessions.

Good luck beating 500.

Building a Real-Time Cricket Scorer with Next.js 15, Prisma, and Canvas Scorecards

Shaishav Patel — Sun, 19 Apr 2026 15:40:04 +0000

I play box cricket every other Friday. Six overs. Ten players. One scorer typing scores into a group chat while trying to watch the match.

The tooling for this is terrible. So I built a proper one: a real-time scoring app where the scorer scores on their phone, everyone else watches live on a shared link, and the scorecard gets WhatsApp-shared as a generated image at the end.

Here's how it's built — the architecture, the tricky parts, and the specific choices I made for a Hostinger VPS deployment.

Live: Box Cricket Scorer — free, no login

Architecture Overview

Creator phone           → POST /api/cricket/          → creates match row
Scorer phone            → PATCH /api/cricket/[id]/    → updates innings JSON
Viewers (everyone else) → GET /api/cricket/[id]/      → polls every 5 seconds
End of match            → Canvas API generates scorecard PNG → navigator.share()

Key choices:

Polling, not WebSockets — score updates are infrequent (one ball every ~30 seconds). WebSockets add server complexity for no real gain here. 5-second polling is perfectly adequate.
Single JSON column per innings — the entire innings state (runs, wickets, overs, balls, batters, bowlers) is one JSON blob. No relational joins needed per request.
No auth — creator gets a shareId (6-char public ID) + editToken (UUID in localStorage). Edit access is verified by sending editToken in the request header.

Data Model

model CricketMatch {
  id          String    @id @default(cuid())
  shareId     String    @unique   // 6-char public ID
  editToken   String               // UUID — grants edit access
  lockToken   String?              // current active editor (handover)
  lockExpiry  DateTime?
  handoverPin String?              // 4-digit PIN for "pass the phone"
  pinExpiry   DateTime?

  team1Name   String
  team2Name   String
  totalOvers  Int
  status      String    @default("innings1")

  innings1    Json?
  innings2    Json?

  createdAt   DateTime  @default(now())
  expiresAt   DateTime  // auto-expire after 24h

  @@index([shareId])
  @@index([expiresAt])
}

The innings JSON structure:

interface InningsData {
  runs: number;
  wickets: number;
  currentOver: number;
  currentBalls: number;       // legal balls in current over
  currentOverBalls: string[]; // ["0","1","W","nb","nb4","wd"]
  extras: { wides: number; noBalls: number };
  activeBatters: BatterStats[];
  currentBowler: BowlerStats | null;
  overs: OverSummary[];       // completed overs archive
  dismissals: Dismissal[];
  bowlers: BowlerStats[];     // completed bowler figures
}

The `processBall()` Pure Function

All scoring logic lives in one pure function. No side effects — it takes the current innings state and a ball string, returns the new state.

export function processBall(
  innings: InningsData,
  ball: string,           // "0"|"1"|"2"|"3"|"4"|"6"|"wd"|"nb"|"W"
  totalOvers: number,
  wicketType?: string,    // "Caught"|"Bowled"|"Run Out"|...
  nbExtraRuns?: number,   // runs scored off the no-ball
  dismissedBatterIdx?: number, // for run-outs (striker or non-striker)
): InningsData {
  const inns: InningsData = JSON.parse(JSON.stringify(innings)); // deep clone
  const strikerIdx = inns.activeBatters.findIndex(b => b.onStrike);
  const bowler = inns.currentBowler!;

  if (ball === "nb") {
    const nbRuns = nbExtraRuns ?? 0;
    const totalExtra = 1 + nbRuns;
    inns.runs += totalExtra;
    inns.extras.noBalls += totalExtra;
    bowler.runs += totalExtra;
    bowler.noBalls += 1;
    // Store as "nb", "nb1", "nb4" etc. for display
    inns.currentOverBalls.push(nbRuns > 0 ? `nb${nbRuns}` : "nb");
    // NOT a legal ball — don't increment currentBalls

  } else if (ball === "W") {
    // Run Out can dismiss either batter
    const si = (wicketType === "Run Out" && dismissedBatterIdx !== undefined)
      ? dismissedBatterIdx : strikerIdx;

    inns.wickets += 1;
    inns.currentBalls += 1;
    bowler.balls += 1;
    if (wicketType !== "Run Out") bowler.wickets += 1;

    const b = inns.activeBatters[si];
    inns.dismissals.push({
      name: b.name || "?",
      runs: b.runs, balls: b.balls,
      fours: b.fours, sixes: b.sixes,
      how: wicketType ?? "Out", bowler: bowler.name,
    });

    // Dismissed slot inherits the onStrike flag
    // so the incoming batter starts at the same end
    const wasOnStrike = b.onStrike;
    inns.activeBatters[si] = {
      name: "", runs: 0, balls: 0, fours: 0, sixes: 0, onStrike: wasOnStrike
    };

  } else {
    const runs = parseInt(ball, 10);
    inns.runs += runs;
    inns.currentBalls += 1;
    inns.activeBatters[strikerIdx].runs += runs;
    inns.activeBatters[strikerIdx].balls += 1;
    if (runs === 4) inns.activeBatters[strikerIdx].fours += 1;
    if (runs === 6) inns.activeBatters[strikerIdx].sixes += 1;
    bowler.runs += runs;
    bowler.balls += 1;
    inns.currentOverBalls.push(ball);
    // Odd runs = strike rotates
    if (runs % 2 === 1) {
      inns.activeBatters = inns.activeBatters.map(b => ({ ...b, onStrike: !b.onStrike }));
    }
  }

  // Over complete (6 legal balls)?
  if (inns.currentBalls >= 6) {
    const overRuns = inns.currentOverBalls.reduce((s, b) => {
      if (b === "W") return s;
      if (b === "wd") return s + 1;
      if (b.startsWith("nb")) {
        const extra = parseInt(b.slice(2), 10) || 0;
        return s + 1 + extra;
      }
      return s + (parseInt(b, 10) || 0);
    }, 0);

    inns.overs.push({
      over: inns.currentOver,
      runs: overRuns,
      wickets: inns.currentOverBalls.filter(b => b === "W").length,
      balls: [...inns.currentOverBalls],
    });

    // Archive bowler figures
    const finishedBowler = { ...bowler, overs: bowler.overs + 1, balls: 0 };
    const idx = inns.bowlers.findIndex(b => b.name === bowler.name);
    if (idx >= 0) inns.bowlers[idx] = finishedBowler;
    else inns.bowlers.push(finishedBowler);

    inns.currentOver += 1;
    inns.currentBalls = 0;
    inns.currentOverBalls = [];
    inns.currentBowler = null;

    // Strike rotates at end of over
    if (inns.wickets < 10 && inns.currentOver <= totalOvers) {
      inns.activeBatters = inns.activeBatters.map(b => ({ ...b, onStrike: !b.onStrike }));
    }
  }

  return inns;
}

This pure function makes the scoring logic fully testable without any DB or React involved.

The API Routes

Create match — `POST /api/cricket/`

export async function POST(req: Request) {
  const { team1Name, team2Name, totalOvers } = await req.json();

  const shareId = nanoid(6);   // e.g. "abc123"
  const editToken = randomUUID();
  const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000); // 24h

  const match = await prisma.cricketMatch.create({
    data: {
      shareId, editToken, team1Name, team2Name,
      totalOvers, status: "innings1",
      innings1: emptyInnings(), innings2: null,
      expiresAt,
    },
  });

  return Response.json({ shareId: match.shareId, editToken: match.editToken });
}

The client stores editToken in localStorage. It's never in the URL.

Update score — `PATCH /api/cricket/[shareId]/`

export async function PATCH(req: Request, { params }) {
  const { shareId } = await params;
  const editToken = req.headers.get("x-edit-token");
  const lockToken = req.headers.get("x-lock-token");

  const match = await prisma.cricketMatch.findUnique({
    where: { shareId }
  });

  // Verify edit access
  const hasAccess =
    match.editToken === editToken ||
    (match.lockToken === lockToken &&
     match.lockExpiry && new Date(match.lockExpiry) > new Date());

  if (!hasAccess) return Response.json({ error: "Unauthorized" }, { status: 401 });

  const body = await req.json();
  const updated = await prisma.cricketMatch.update({
    where: { shareId },
    data: body,
  });

  return Response.json(updated);
}

Poll for updates — `GET /api/cricket/[shareId]/`

export async function GET(req: Request, { params }) {
  const { shareId } = await params;
  const match = await prisma.cricketMatch.findUnique({ where: { shareId } });

  if (!match || new Date() > match.expiresAt) {
    return Response.json({ error: "Not found" }, { status: 404 });
  }

  return Response.json(match);
}

Expired matches naturally 404. No cleanup cron needed.

Pass the Phone — PIN Handover

The "Hand Over Scoring" flow:

Editor taps "Hand Over" → POST /api/cricket/[id]/handover/ with their editToken
Server generates a 4-digit PIN, sets pinExpiry = now + 2 minutes
New scorer opens the view link, taps "Take Over", enters the PIN
PUT /api/cricket/[id]/handover/ validates the PIN, issues a new lockToken, sets lockExpiry = now + 90 seconds
Previous editor's token is still valid (editToken never expires), but the lockToken is now in the new scorer's localStorage

// Claim the PIN
export async function PUT(req: Request, { params }) {
  const { pin } = await req.json();
  const match = await prisma.cricketMatch.findUnique({
    where: { shareId: params.shareId }
  });

  if (
    !match.handoverPin ||
    match.handoverPin !== pin ||
    !match.pinExpiry ||
    new Date() > match.pinExpiry
  ) {
    return Response.json({ error: "Invalid or expired PIN" }, { status: 400 });
  }

  const lockToken = randomUUID();
  const lockExpiry = new Date(Date.now() + 90 * 1000);

  await prisma.cricketMatch.update({
    where: { shareId: params.shareId },
    data: { lockToken, lockExpiry, handoverPin: null, pinExpiry: null },
  });

  return Response.json({ lockToken });
}

Canvas Scorecard Generation

The end-of-match scorecard is a 700×~700px PNG generated entirely in the browser using the Canvas API. No server-side image generation needed.

Two-column layout:

Left: batting (name + dismissal inline, R(B), 4s, 6s)
Right: bowling (name, O, R, W, ECO)
Vertical divider at x=378

Key technique — dynamic height pre-calculation:

Before creating the canvas, calculate the height based on the data:

function blockHeight(innings: InningsData | null): number {
  if (!innings) return 0;
  const batters = Math.min(
    (innings.dismissals?.length ?? 0) +
    (innings.activeBatters?.filter(b => b.name)?.length ?? 0),
    12
  );
  const bowlers = Math.min(innings.bowlers?.length ?? 0, 8);
  return TEAM_H + SECT_H + Math.max(batters, bowlers) * ROW_H + EXTRA_H;
}

const H = HEADER_H + blockHeight(innings1) + INS_GAP + blockHeight(innings2) + FOOTER_H;
canvas.height = Math.max(H, 400);

Text truncation using measureText:

function trunc(text: string, maxPx: number): string {
  if (ctx.measureText(text).width <= maxPx) return text;
  let t = text;
  while (t.length > 1 && ctx.measureText(t + "…").width > maxPx) t = t.slice(0, -1);
  return t + "…";
}

QR code in the footer:

Using qr-code-styling (already a project dependency) to generate a scannable QR pointing to ultimatetools.io/cricket. The QR has:

White background + 8px white quiet zone (crucial for scanners to detect boundaries)
Square dots (sharper edges after WhatsApp JPEG compression)
Error correction "M" (keeps QR density low for better scannability on a 160px canvas element)

const qr = new QRCodeStyling({
  width: QR_SIZE * 4, height: QR_SIZE * 4,  // render at 4x, draw at QR_SIZE
  data: "https://ultimatetools.io/cricket",
  dotsOptions: { type: "square", color: "#1e293b" },
  backgroundOptions: { color: "#ffffff" },
  cornersSquareOptions: { type: "extra-rounded", color: "#4f46e5" },
  qrOptions: { errorCorrectionLevel: "M" },
});
const blob = await qr.getRawData("png");
// Draw white quiet zone first, then QR on top
ctx.fillStyle = "#ffffff";
ctx.fillRect(QR_X - 8, QR_Y - 8, QR_SIZE + 16, QR_SIZE + 16);
ctx.drawImage(img, QR_X, QR_Y, QR_SIZE, QR_SIZE);

Sharing the image:

async function shareToWhatsApp() {
  const blob = await fetch(dataUrl).then(r => r.blob());
  const file = new File([blob], "cricket-scorecard.png", { type: "image/png" });

  const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
  if (isMobile && navigator.share) {
    await navigator.share({ files: [file], title: "Cricket Scorecard" });
  } else {
    // Desktop fallback: download
    const a = document.createElement("a");
    a.href = dataUrl; a.download = "cricket-scorecard.png"; a.click();
  }
}

Hiding Nav/Footer on the Match Page

The match page is a full-screen experience — no top nav, no footer, no padding container. But the root layout in Next.js always renders.

Solution: a client component that reads the current path and conditionally renders:

// components/ConditionalNav.tsx
"use client";
import { usePathname } from "next/navigation";

const MATCH_PAGE = /^\/cricket\/[a-z0-9]+\/?$/i;

export function ConditionalNav({ children }) {
  const path = usePathname();
  if (MATCH_PAGE.test(path)) return null;
  return <>{children}</>;
}

export function ConditionalWrapper({ children }) {
  const path = usePathname();
  if (MATCH_PAGE.test(path)) return <>{children}</>;
  return (
    <div className="mx-auto max-w-screen-2xl px-6 py-6 lg:py-8">
      {children}
    </div>
  );
}

Used in app/layout.tsx:

<ConditionalNav><TopNav /></ConditionalNav>
<main className="flex-1">
  <ConditionalWrapper>{children}</ConditionalWrapper>
  <ConditionalNav><Footer /></ConditionalNav>
</main>

Deployment Notes (Hostinger VPS)

This app runs on a Hostinger VPS Node.js hosting. A few constraints worth knowing:

Prisma with MariaDB adapter:
The project uses Prisma 7.7.0 with @prisma/adapter-mariadb instead of the default MySQL connector. Standard Prisma MySQL connector has issues on Hostinger's MariaDB version.

No WebSockets:
Hostinger VPS doesn't support persistent WebSocket connections well. Polling was the right call architecturally anyway — cricket scores update infrequently.

24-hour auto-expiry without a cron:
Expired matches return 404 on the next GET. Rows are never explicitly deleted — they just become permanently 404. The DB stays small because match data is tiny (~2–5KB per match JSON).

What I'd Change

If this grew to 1000 concurrent matches:

Replace polling with Server-Sent Events (SSE) — much lower overhead than polling, no WebSocket complexity
Add a cleanup cron to actually delete expired rows

If I wanted player persistence:

Add a simple "save my team" feature using localStorage with a QR-shareable team JSON

For now, for a Friday box cricket match with 22 players, polling + one JSON row per match is exactly right.

Try It

Box Cricket Scorer — build your own live scorecard

The full code for the scoring logic, API routes, canvas generation, and handover PIN flow is all in the Next.js app. If you're building something similar — a live poll, a shared game score, any multi-device real-time-ish feature without WebSockets — the polling + single JSON column pattern is worth considering.

How to Score Box Cricket Live and Share the Scorecard on WhatsApp (Free, No App)

Shaishav Patel — Sun, 19 Apr 2026 15:38:21 +0000

Box cricket is fast. Six overs. Ten players. One scorer desperately typing in a group chat while also trying to watch the match.

If you've played box cricket anywhere, you know the pain. The scorer misses balls. The chat fills with "what's the score??" every 30 seconds. And the final scorecard? A photo of someone's screen or a rough total at best.

We built a free tool that fixes this: Box Cricket Scorer — live score sharing, ball-by-ball tracking, and a proper WhatsApp scorecard at the end. No app. No login. Works on any phone.

Here's exactly how to use it.

Step 1: Create Your Match

Go to Box Cricket Scorer and tap "Create Match."

Fill in:

Team 1 name (e.g., "Office XI" or just "PJM")
Team 2 name
Total overs (drag slider: 1–20 overs)
Who bats first

Tap Start Match →

That's it. No account. No login. The match page opens immediately.

Step 2: Share the Live Link

In the top bar of the match page, tap 📋 Share.

On mobile → opens the native share sheet (pick WhatsApp, send to your group)
On desktop → copies the link to clipboard (paste into WhatsApp Web)

Anyone who opens that link sees the live scoreboard, auto-updated every 5 seconds. No refresh needed. Works on any browser, any phone.

The viewers don't need an account. They don't need to download anything. Just open the link.

Step 3: Score Ball by Ball

Before the first ball, you'll need to enter:

Both batter names (striker and non-striker)
The bowler's name (before each over)

Then score each ball by tapping:

Button	What it records
0, 1, 2, 3	Dot ball or run(s)
4	Four
6	Six
WD	Wide (+1 run, no ball counted)
NB	No ball (pick extra runs scored off it)
W	Wicket

Wickets

Tap W → WICKET. Select how the batter was dismissed:

Caught, Bowled, Stumped, LBW, Hit Wicket → records against striker
Run Out → asks which batter was dismissed (striker or non-striker)

No Balls with Runs

Tap NB → select how many extra runs the batter hit off it (0, 1, 2, 3, 4, 6). The tool correctly records: 1 NB extra + batter runs. So a NB hit for 4 = 5 total runs.

Step 4: Corrections

Made a mistake? Two quick fixes:

Wrong bowler name? Tap the ✏️ button next to the bowler name — but only before the first ball of that over is bowled.

Wrong striker? Tap the non-striker's row in the batters table — it swaps the strike.

Step 5: End of Innings

When all overs are done (or all wickets fall), the second innings starts automatically. The live link shows the target.

You can also manually end an innings early — tap End Inning in the scoring panel. This records any partial over and moves to the next innings.

Step 6: Pass the Phone (If Needed)

Tired of scoring? Tap 🤝 Hand Over in the top bar.

A 4-digit PIN appears — valid for 2 minutes. The new scorer opens the match link, taps ✏️ Take Over, enters the PIN, and takes over scoring. The previous scorer automatically becomes view-only.

Step 7: Share the Final Scorecard

When the match completes, a result banner appears. Tap 📤 Share Scorecard.

A scorecard image generates with:

Both innings: team total, overs faced
Full batting stats: every batter, runs, balls, fours, sixes
Full bowling stats: every bowler, overs, runs, wickets, economy
Match result

On mobile: tap Share (WhatsApp) → native share sheet opens → send directly to the group.
On desktop: tap Download Scorecard → saves as PNG → attach manually.

The scorecard also has a QR code that links back to the scorer — so when someone in another friend group sees the image and wants to use the tool, they can scan and create their own match.

Real Example

Here's a real match we scored (PJM vs TPDM, 6 overs):

1st innings — PJM: 29/5

TPDM3 took 3 wickets in one over
PJM1 stayed not out on 12(11)
Over 3 had 2 No Balls

2nd innings — TPDM: 30/0 in 1 over

TPDM1 hit 30 off 6 balls: 3 fours, 3 sixes
Match over in the first over of the chase

The full scorecard — with all of this recorded correctly, including the No Balls and extras — generated in seconds and went out on WhatsApp before everyone had even finished shaking hands.

Why Box Cricket Specifically

Box cricket is different from standard gully cricket:

Fixed overs (usually 4–8)
Limited fielding positions (the box boundaries)
No Balls count more (frequent in box cricket due to pace bowling in tight spaces)
Run Outs are common (tight run-calling in a small ground)

Standard cricket scoring apps don't handle these well — they're built for 50-over club matches with 11-a-side full rosters. This tool is built specifically for the box cricket format.

Try It

Score box cricket live — free, no app

Free. No login. No app. Create a match, share the link, score ball by ball.

Next Friday, the scorer in your group won't need to type in WhatsApp anymore. They just tap.