03 / GUIDES
Tool guides
Practical operating patterns for transformations, image work, and privacy-aware browser workflows.
Code images for documentation and slides
Choose PNG or SVG, check fonts and scale, and keep code readable when you share a snippet.
Code images for documentation and slidesCSS clip-path examples in real layouts
Use presets or edit 3–32 polygon points for avatars, directional images and slanted cards; compare full CSS with a clip-path declaration.
CSS clip-path examples in real layoutsTransform code safely
Format first when reviewing unfamiliar code; minify only the version intended for delivery.
- Preserve sourceKeep an original copy before transforming source.
- Review semanticsTreat formatter output as a readability change, not semantic validation.
- Verify artifactsUse hash verification to compare artifacts; a hash cannot decrypt source material.
Prepare images deliberately
Choose dimensions, crop, and output format from the destination’s constraints rather than habit.
- Start with qualityResize once from the highest-quality source available.
- Check transparencyInspect transparency before converting SVG or PNG assets.
- Export explicitlyDownload the generated file before closing the tab; local workspaces do not keep a cloud copy.
Protect sensitive material
The processing label is part of the tool contract and should be checked before entering data.
- Process locallyLocal-first runtimes process input in the active browser tab.
- Describe, don’t pasteFeedback forms accept descriptions only and explicitly exclude workspace contents.
- Clear shared devicesClear the workspace and downloaded files when using a shared computer.
Local vs cloud: where files go
The architecture guide maps both processing designs, shows how to verify a local claim with your own browser, and lists the documents that should never be uploaded.
Read the architecture guideTen PDF tasks, zero uploads
Merge, split, rotate, organize, watermark, compress, convert, and clean PDF files inside the browser tab—each task links straight to its workspace.
Open the task guideCheck photos before you share them
Location coordinates, a device serial, and the exact second a photo was taken can travel inside the file—this guide shows how to read that hidden layer and strip it locally before sharing.
Read the sharing checklistResize images to a spec
Crop first, resize once, and convert to the format the destination accepts—this guide turns a dimension or byte budget into an ordered local workflow.
Read the image prep guideReview JSON with confidence
Pretty-printing, tree inspection, and deterministic diffs—how to read an unfamiliar payload before approving it, and the exact limits of the local runtimes.
Read the review routineFit a PDF under the limit
Email and portal caps are unforgiving—this guide measures first, weighs structure cleanup against strong raster compression, and sets honest expectations by content type.
Read the size-limit planRead Base64 fluently
What the encoding actually is, how to calculate its size overhead, where data URLs and email earn it, why it is not a security mechanism, and how to debug malformed strings.
Read the encoding guideChoose a color notation
HEX, RGB, and HSL describe sRGB colors in different ways. This guide covers alpha, HSL harmonies, CSS Color 4, and sampling decoded artwork pixels in the browser.
Read the color guideTest regexes without the hang
A write-test-refactor loop with realistic samples, catastrophic-backtracking hygiene, anchoring, and flag semantics—run inside a worker with a timeout, so runaway patterns cannot freeze the tab.
Read the regex workflowPick an image format on purpose
PNG, JPEG, WebP, and AVIF compared by content type, transparency, real-world support, re-encoding costs, and measured byte savings—so the choice is a decision, not a habit.
Read the format guideWrite cron without surprises
Five fields and their ranges, the day-of-month/day-of-week OR trap, Sunday as 0 or 7, and daylight-saving edge cases—validated against the next ten computed runs before deploy.
Read the cron guidePrint QR codes that scan
Physical size by scanning distance, the four-module quiet zone, error-correction levels and logo overlays, enforced contrast, and proof-scanning before the print run.
Read the print guidePublish Markdown as clean HTML
What the supported subset converts and what flattens, how sanitization and a link-scheme allowlist keep the output safe, what the round trip back to Markdown loses, and where conversion belongs in a docs or blog pipeline.
Read the publishing workflowVerify downloads with checksums
Integrity versus authenticity, why MD5 and SHA-1 are integrity-only today, a one-minute installer verification, and hashing sensitive text without uploading it.
Read the checksum guideChoose between UUID and ULID
Random v4 versus time-ordered v7, ULID’s sortable base32 layout, what random keys do to a B-tree index, collision math, and generating batches locally.
Read the identifier guideVerify “no upload” yourself
The DevTools network check, the canary-string technique, and the cache and service-worker caveats — plus the open evidence harness anyone can re-run against the live site, re-captured on a schedule.
Read the verification guidePractice with a small example
Use these worked examples to compare the input, settings and expected result before processing your own files.
Extract an appendix without sending the whole document
Use a synthetic eight-page PDF numbered 1–8 to rehearse an application handoff. The recipient needs the cover, three supporting pages and the final page, not the entire source. Extraction makes a separate document; it does not remove pages from your original.
Crop a repeatable square avatar
Start with a non-sensitive 600 × 400 test image. A square avatar should remove the left and right margins without stretching the subject. Cropping selects pixels; resizing scales them. Decide which operation you need before changing dimensions.
Read an API response without changing identifier values
Use a small fictional API response to distinguish numbers, strings and arrays. An identifier beyond JavaScript’s safe integer range should retain its original digits. This viewer checks JSON structure, not whether an API response obeys your business rules.
Make a clearly fictional storyboard conversation
A storyboard needs two invented characters discussing a design review. Use invented names and ordinary sample dialogue rather than importing a real private conversation. The purpose is a readable visual prop, not a replica that could pass as evidence.
Fit a landscape image inside a square limit
A portal asks for an image no wider or taller than 300 pixels, but it does not require a square crop. Start with a 600 × 400 test image. Preserving the whole frame matters more than filling every pixel of a square.
Choose between a transparent WebP and an opaque JPEG
Prepare a small PNG logo with a transparent border. You need a format accepted by the destination while keeping the intended background. The smallest file is not always the correct asset: transparency and color appearance can matter more.
Evaluate compression instead of promising a target size
Use a non-sensitive scanned PDF and a text PDF as separate trials. They contain different kinds of data, so they need not shrink by the same amount. Always keep the originals: a smaller file is useful only if its content is still fit for the recipient.
Check a photo before a public handoff
A location is not only something visible in a photograph: supported embedded metadata may describe where or how the image was taken. Use a test photo you own and inspect it before uploading it to another service.
Inspect a QR destination before visiting it
Create a QR image containing https://example.com with the QR generator, then use that image as a safe rehearsal. A reader extracts encoded text; it cannot establish that the destination is trustworthy or that a payment request is legitimate.
Convert captions and delay them by half a second
Use one plain-text cue to verify the sign and unit of a timing change before converting a whole file. A positive offset delays every cue; a negative offset brings it earlier. Conversion does not listen to the video or discover the right timing automatically.
Deliver one image to a portal with two independent limits
Suppose a portal accepts a 300 × 300 bounding box and at most 200000 bytes. Use a synthetic 600 × 400 image for rehearsal, then record the actual portal requirements. Dimensions, bytes, format and padding each need a separate decision.
Prepare a submission while preserving the source
Rehearse with a synthetic document before handling an application. Write down the required pages, order, format and byte limit. The browser can prepare a file, but it cannot approve the application or certify that the document satisfies the receiving organization.
Remove supported metadata and inspect what remains
A designer is handing a draft image or PDF to an external collaborator. Begin with a synthetic file containing known metadata so that an empty finding can be distinguished from a parser limitation. Cleanup is only one part of reviewing what the recipient will receive.
Put the workflow into practice.
Start with a deterministic local viewer that parses and validates your JSON before it renders.