DEV Community: Small Web Tools Notes

Implementing a Caesar Cipher in JavaScript (and Why You Shouldn't Use It)

Small Web Tools Notes — Thu, 29 Oct 2026 09:51:50 +0000

A Caesar cipher is the classic first crypto exercise. Here's a clean implementation and the lessons hidden in it.

function caesar(text, shift) {
  const s = ((shift % 26) + 26) % 26;
  return text.replace(/[a-z]/gi, ch => {
    const base = ch <= 'Z' ? 65 : 97;
    return String.fromCharCode((ch.charCodeAt(0) - base + s) % 26 + base);
  });
}
caesar('Hello, World', 3);   // "Khoor, Zruog"
caesar('Khoor, Zruog', -3);  // "Hello, World"

Gotcha 1: % in JS keeps the sign, so negative shifts need the ((n % 26) + 26) % 26 trick.

Gotcha 2: decide what to do with non-letters (here they pass through).

Breaking it:

const all = [...Array(26).keys()].map(k => caesar(ct, -k));

Score each candidate by English letter frequency and pick the best — that's frequency analysis in ten lines.

Takeaway: never roll your own crypto; use Web Crypto (crypto.subtle) with AES-GCM.

If you want a reference to check output against, caesarcipher.org has an in-browser Caesar tool and frequency analysis.

From Excitebike to TrackMania: A Brief History of Racing Games Where You Build the Track

Small Web Tools Notes — Thu, 29 Oct 2026 08:59:15 +0000

Some racing games give you a fixed set of courses. Others hand you the pieces and let you design your own. Track-building racers have a long history, and their appeal has always been the same: creativity combined with the challenge of a fast lap.

Excitebike (1984)

Nintendo's Excitebike for the Famicom and NES included a Design mode that let players place ramps and obstacles to create their own motocross tracks. It was an early example of a console game putting level design in players' hands.

Stunts (1990)

Stunts, also released as 4D Sports Driving, was a PC racing game from 1990 with a track editor. Players could build courses with loops, jumps and corkscrews, then race them. It developed a dedicated community that continued for years.

TrackMania (2003)

French studio Nadeo released TrackMania in 2003. It focused on time attack: racing against the clock and against ghost cars rather than in traditional pack racing. Its editor let players build tracks from blocks, and sharing tracks became central to the game. Later entries, including TrackMania Nations and TrackMania United, grew large online communities. The series continues today under Ubisoft, which acquired Nadeo in 2009.

What makes the genre work

Time attack: you race the clock, so every run is a clean comparison.
Instant restarts: failing is cheap, so you try again immediately.
Ghosts and leaderboards: you can compare your line with others.
Shared tracks: players create endless new challenges.

Browser track racers

Modern browsers can run 3D games well, and the genre has moved to the web. PolyTrack, by developer Kodub, is a browser racing game in this tradition, with low-poly tracks and a format for sharing courses as text codes.

The PolyTrack is an independent fan site offering a 0.5.0 player. Its track directory shows the 15 official courses and 15 community creations with credited authors, and the import guide explains how to paste a complete code that starts with "PolyTrack1" into Play → Import.

Lessons for track designers

Decades of community tracks suggest a few principles:

Readable flow: players should see where to go next.
Fair difficulty: challenging but not random.
Varied rhythm: mix fast straights, technical corners and jumps.
Clear checkpoints: place them where resets help practice.
Test it yourself: drive your track many times before sharing.

Why it endures

Track builders combine two satisfying activities: making things and getting better at something. A track you built yourself, driven fast, is a particular kind of fun.

Summary

Excitebike (1984) let players design tracks early on.
Stunts (1990) added stunt pieces and an editor on PC.
TrackMania (2003) defined modern time-attack track building.
Browser games like PolyTrack carry the tradition onto the web.

What Your Photos Reveal Before Anyone Looks at Your Face: A Guide to EXIF Metadata

Small Web Tools Notes — Thu, 29 Oct 2026 08:59:00 +0000

When you share a photo, you may share more than the picture. Most digital photos contain hidden metadata called EXIF data. It can include the date, the camera model and sometimes the exact location where the photo was taken. Before uploading photos anywhere, it is worth knowing what is inside.

What EXIF is

EXIF stands for Exchangeable Image File Format, a standard for storing information inside image files. Cameras and phones add it automatically when they save a photo.

What it can contain

Date and time the photo was taken.
Device make and model.
Camera settings: exposure, aperture, ISO, focal length.
Orientation: which way the camera was held.
GPS coordinates, if location tagging was on.
Software used to edit the image.

The location data is the most sensitive. A photo taken at home with location enabled can reveal your address.

Do platforms remove it?

Many major social networks strip most EXIF data, including location, when you post publicly. But not every service does, and behaviour can change. Messaging apps, file-sharing services, email attachments and smaller websites may keep the original file. Do not assume it is removed.

How to check

On a computer: file properties or image info panels often show EXIF.
On a phone: many photo apps show details such as location and camera when you swipe up or tap info.
Online viewers: be cautious; uploading a photo to check its metadata means sending it to that service.

How to remove or prevent it

Turn off location tagging in your camera settings if you do not need it.
Remove location before sharing: many phones offer an option to exclude location when sharing.
Screenshot or export: creating a new image often drops original metadata, though not always.
Use a metadata remover that runs locally on your device.

Photos and face tools

Face analysis tools are a special case: you are sharing a clear image of your face, sometimes with metadata attached. Questions worth asking:

Is the photo uploaded to a server, or processed on your device?
Is it stored, and for how long?
Is it used to train models?

Some tools process images entirely in the browser. The Free Attractiveness Test states that the photo never leaves your device and the result appears in a few seconds. Its privacy explanation page describes this, and you can verify such claims yourself by watching your browser's network activity while using the tool.

Faces are metadata too

Even without EXIF, a face is identifying information. Background details, such as street signs, school uniforms or windows, can reveal location. Consider what is visible before sharing.

Children's photos

Be especially careful with photos of children. Turn off location and avoid identifying details in public posts.

Summary

EXIF metadata can include time, device and GPS location.
Platforms may or may not strip it.
Turn off location tagging and remove metadata before sharing.
Prefer tools that process photos on your device.

Wordle, Heardle and Spotle: Three Ways to Turn Guessing into a Game

Small Web Tools Notes — Thu, 29 Oct 2026 08:53:22 +0000

Daily guessing games look similar at first glance: a few tries, some feedback, a shareable result. But the type of feedback changes how you think. Comparing three well-known examples, Wordle, Heardle and Spotle, shows three distinct puzzle designs.

Wordle: letters and positions

Wordle asks you to find a five-letter word in six guesses. After each guess, tiles show which letters are in the right place, which are in the word but elsewhere, and which are absent.

The skill: vocabulary plus elimination. Good players choose guesses that test common letters and narrow the remaining possibilities.

Heardle: listening

Heardle launched in 2022 and asked players to identify a song from its intro. The first guess gave a very short clip; each skip or wrong guess unlocked a longer one. Spotify acquired Heardle in 2022 and shut it down in 2023, though similar fan-made versions continued.

The skill: recognition. There is little logical deduction; you either recognise the opening or wait for more audio.

Spotle: attributes

Spotle asks you to identify a music artist in ten tries. Each guess is compared with the answer on several attributes: debut album year, solo or group, genre, country, gender and the game's popularity rank. Matches turn green, close values yellow, and misses grey, with arrows for higher or lower numbers.

The skill: deduction. You do not need to recognise the answer immediately. Each guess removes possibilities until only a few artists fit.

Different kinds of feedback

Game	Feedback	Main skill
Wordle	Letter positions	Vocabulary, elimination
Heardle	More audio	Recognition
Spotle	Attribute comparison	Deduction, music knowledge

Why attribute feedback is satisfying

Attribute games reward partial knowledge. You might not know who the answer is, but you can learn it is a solo artist from a certain decade and country, in a particular genre. Then you use your knowledge to suggest someone who fits. Even people who think they "don't know music" can make progress.

Strategy differences

Wordle: start with common letters.
Heardle: listen carefully; skip if unsure to hear more.
Spotle: start with an artist whose attributes split the field, then keep green attributes and change the rest.

The Spotle how-to-play guide on Spotle Answer Today explains each tile, including that "close" thresholds and rank rules are the official game's and can change.

Sharing culture

All three games share results without spoilers: coloured squares or icons that show your path, not the answer. That is what turned them into social habits.

Getting help without spoiling

If you get stuck on Spotle, step-by-step hints let you reveal a little at a time. Spotle Answer Today offers hints for each day's puzzle and the full answer if you want it, plus a past answers archive. It is an independent companion, not affiliated with Spotle.

Summary

Wordle tests letters, Heardle tests listening, Spotle tests deduction.
Attribute feedback rewards partial knowledge.
Each game needs a different opening strategy.

Where "What Season Am I?" Came From: A Brief History of Seasonal Colour Analysis

Small Web Tools Notes — Thu, 29 Oct 2026 08:53:06 +0000

Seasonal colour analysis, the idea that each person suits a palette named after Spring, Summer, Autumn or Winter, is popular again thanks to social media. It has a longer history than many people realise, and knowing that history helps you use the system sensibly.

Art school roots

Ideas about colour harmony go back centuries, but the seasonal approach is often traced to the early twentieth century. Johannes Itten, who taught at the Bauhaus, studied colour contrast and observed that students tended to favour colour combinations related to their own colouring. He grouped colour harmonies by seasonal character. His influential book The Art of Color was published in 1961.

Image consultants in mid-century America

In the following decades, consultants in the United States began applying these ideas to personal appearance. Suzanne Caygill developed a detailed approach that linked personal colouring to seasonal palettes and published Color: The Essence of You in 1980.

Color Me Beautiful

The idea reached a mass audience with Carole Jackson's Color Me Beautiful, published in 1980. It presented a simple four-season system and became a bestseller. Colour parties and fabric drapes were part of the trend through the 1980s.

From four seasons to twelve

Four seasons were easy to explain but left many people between categories. Later systems added sub-seasons, organising colour by three qualities:

Temperature (hue): warm or cool.
Value: light or deep.
Chroma: clear (bright) or soft (muted).

Combining these produces twelve seasons, often grouped into four families with three variants each. Some systems go further with sixteen or more.

The twelve seasons today

The 12 color seasons guide on Style Look Lab groups them into four families:

Spring: warm and relatively clear (Light, Warm, Clear Spring).
Summer: cool and relatively soft (Light, True, Soft Summer).
Autumn: warm and relatively muted (Soft, True, Deep Autumn).
Winter: cool and relatively clear (Deep, Cool, Clear Winter).

It also treats the result as a shortlist to compare, not a diagnosis, and stresses that hair and eye colour give context rather than rules.

The social media revival

In the 2020s, colour analysis returned through short videos of fabric draping, filters that overlay palettes on a face, and in-person sessions in cities around the world. Quizzes and photo analysis made it easier to explore at home.

What colour analysis can and cannot do

Useful for: narrowing choices when shopping, building a coherent wardrobe, and noticing which colours make your face look clearer.

Not useful as: a strict rulebook. Personal taste, culture and the setting all matter. Many people wear "off-season" colours happily.

Lighting matters too. Comparisons are most reliable in consistent daylight, without colour filters.

Try it

If you are curious, the color season quiz takes about a minute and suggests where to start comparing.

Summary

Seasonal ideas trace back to Bauhaus colour teaching.
Caygill and Jackson brought them to the public around 1980.
Twelve-season systems use temperature, value and chroma.
Treat a season as a starting shortlist, not a rule.

9:16, 720 1280 and Safe Zones: A Practical Guide to Vertical Video Dimensions

Small Web Tools Notes — Thu, 29 Oct 2026 08:46:16 +0000

Short-form video lives in portrait mode. TikTok, Instagram Reels and YouTube Shorts are all built around vertical video that fills a phone screen. Getting the dimensions right avoids black bars, awkward cropping and buttons covering faces.

Aspect ratio versus resolution

Aspect ratio is the shape: width compared with height. Vertical short video uses 9:16, which is the landscape 16:9 widescreen shape turned on its side.

Resolution is the number of pixels. Common 9:16 resolutions are:

720×1280 (often called 720p HD)
1080×1920 (1080p Full HD)

Both have the same shape. Higher resolution can show more detail, but only if the source has that detail.

Why 9:16 fills the screen

Most modern phones have tall screens, often around 19.5:9 or 20:9. A 9:16 video fills most of the screen on these phones; apps either add small bars or crop a little at the edges. That is why 9:16 has become the standard: it uses the whole display without much cropping on most devices.

Safe zones

On short video platforms, the interface sits on top of your video:

Right edge: like, comment and share buttons.
Bottom: caption, username and music information.
Top: sometimes tabs or a search bar.

Keep faces and important text away from those areas. A practical rule is to keep key content in the central area, slightly above the middle. Exact safe zones vary by platform and change with app updates, so preview before posting.

Converting between shapes

If you reuse a landscape (16:9) video in a vertical feed, you have three choices:

Crop to the centre, losing the sides.
Letterbox with bars above and below, which wastes most of the screen.
Reframe by following the action as it moves, which takes more editing.

Going the other way, from vertical to landscape, has the same problem in reverse. Creating content in 9:16 from the start avoids all three.

Frame rate and length

Short videos are commonly 24, 30 or 60 frames per second. For trend videos built around a song, 15 seconds is a common length because it matches the most recognisable part of the audio.

Does 720p look bad?

On a phone screen, 720×1280 usually looks sharp for faces and simple scenes, and platforms often re-encode uploads anyway. Upscaling a 720p video to 1080p does not add real detail. For most trend clips, a clean 720p source is better than a noisy 1080p one.

Bopreel's format

Bopreel's trend videos are 15-second clips with the original song, made in vertical 720×1280 to post directly to Reels, TikTok or Shorts (the Hotel Lobby format also offers a horizontal 1280×720 option for YouTube). The two current formats are the Hotel Lobby AI video and the What You Want Me To Do AI video. Per-video pricing is on the pricing page.

Summary

9:16 is the vertical short video shape.
720×1280 and 1080×1920 are common resolutions.
Keep faces and text out of the interface zones.
Shoot or generate vertically rather than cropping later.

Why the Ladder Game (Amidakuji) Never Gives Two People the Same Prize

Small Web Tools Notes — Thu, 29 Oct 2026 08:46:00 +0000

Amidakuji, also called the ladder lottery or Ghost Leg, is a simple way to draw lots. Each player picks a vertical line at the top and follows it down; whenever a horizontal rung appears, they must cross it. However messy the ladder looks, every player ends at a different bottom position. Here is why that is guaranteed, and the neat bit of mathematics behind it.

The rules

There are N vertical lines and N results at the bottom.
Horizontal rungs connect neighbouring lines, at different heights.
A player walks down their line and crosses every rung they meet.

The ladder game on blockblast.co hides the results until you trace each name, so you can watch the paths unfold.

Each rung is a swap

Think of the players as tokens sitting on the lines. When a rung joins line i and line i+1, the two tokens on those lines swap places. Nothing else changes. So a ladder is just a sequence of swaps of neighbouring positions, applied from top to bottom.

In mathematics, a swap of two neighbouring positions is called an adjacent transposition. Composing transpositions always gives a permutation: a rearrangement where every item lands in exactly one place.

Why no collisions

A swap is a one-to-one operation: it takes two tokens and exchanges them, never merging them. A sequence of one-to-one operations is still one-to-one. Therefore, at the bottom, each line holds exactly one token. No two players can end on the same result, and no result is left empty.

There is one rule that keeps this true: rungs at the same height must not share a line. If a line had rungs on both sides at the same height, a player would not know which to take. Proper ladders avoid that, and digital versions generate them correctly.

Every outcome is possible

The reverse is also true: any assignment of players to results can be produced by some ladder. This follows from the fact that adjacent transpositions generate all permutations, which is essentially what bubble sort demonstrates: you can sort any list using only neighbour swaps. Each swap bubble sort makes corresponds to a rung.

Is it fair?

Fairness depends on how the ladder is built, not on the structure. If rungs are placed randomly and in enough quantity, outcomes are well mixed. With very few rungs, players tend to end up close to where they started, which is predictable. Adding players or results after seeing the ladder would also break fairness, which is why results are hidden until the ladder is fixed.

A quick experiment

Draw three lines and one rung between lines 1 and 2. Player 1 ends at result 2, player 2 at result 1, and player 3 stays put. Add a rung between lines 2 and 3 below the first. Now trace again: the mapping becomes a cycle. Small examples make the permutation idea concrete.

Related tools

If you need a quick random choice from a list rather than a matching, Spin the Wheel picks one entry at random. Both are listed with other browser games on the games page.

Summary

Each rung swaps two neighbouring players.
Swaps compose into a permutation, so outcomes never collide.
Any matching can be produced by some ladder.
Fairness comes from random, plentiful rungs and hidden results.