Images

Squoosh — Compress and resize images, with a before-and-after comparison. Images are processed on your device.

SVGOMG — Optimise SVG icons and illustrations. Open a file or paste its markup, inspect the result, and download it.

Photopea — Edit images and PSD files in the browser. Useful for working with layers, cropping, and exporting images.

Text & data

IT-Tools — Utilities for JSON, YAML, Base64, timestamps, and other formats. A Chinese interface is available.

JSON Crack — Turn structured data into an interactive graph to inspect nested objects, arrays, and fields.

Sketches & flows

Excalidraw — A hand-drawn-style whiteboard for flows, wireframes, and simple architecture diagrams.

Compress an image before sharing it

Open Squoosh and drop in an image. Try WebP for a photo. If its dimensions are much larger than needed, resize it before adjusting compression quality. Move the comparison divider and check text edges and gradients. Download the result and keep the original.

For an SVG icon, use SVGOMG to compare the optimised size and preview. It works on vector files, not photographs.

Read a large JSON document

Use the JSON formatter in IT-Tools to restore readable indentation. For nested fields, JSON Crack turns the structure into a graph.

Narrow a debugging example to the relevant fields. Replace original values with test data before sharing it.

Check a change before committing

Run these commands inside a Git repository:

git diff --stat
git diff
git diff --staged

The first shows file statistics for unstaged changes. The second shows those changes in detail. The third shows staged changes that will go into the next commit. Untracked files do not appear in these diffs; use git status --short to see them.

See the official git diff manual for the options.

Git: Pro Git

Read the book. The complete book is available on the Git website. Chapter two covers staging, committing, and undoing changes; chapter three covers branches.

CSS: MDN Flexbox

Open the tutorial. Examples for arranging items in a row or column, alignment, wrapping, and distributing available space.

Command-line tools: Missing Semester

Course website. Lessons on the shell, editors, Git, and debugging. A useful course for learning the tools used alongside programming languages. A community Chinese translation is also available.

Syntax lookup: CheatSheets.zip

Browse the cheat sheets. Syntax examples grouped by language and tool. Use it to look up a form quickly, then check the relevant official documentation when you need the full explanation.