From c16636b40799de058bdcf6b0917314f3525de253 Mon Sep 17 00:00:00 2001 From: Hamdi LAADHARI Date: Sun, 6 Sep 2026 09:49:13 +0200 Subject: [PATCH 1/2] docs: make the README answer the questions evaluators arrive with MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three gaps, all of them costing installs rather than stars. Badges: no version, size, CI or licence signal anywhere, so a visitor had to leave the page to learn whether the project was alive or how big it was. Deliberately no downloads badge — at current volume that number argues against the package, and a badge that reads "12/month" is worse than none. "Is this the right tool?": the honest scoping question. This reports coordinates and never touches pixels, which makes it the wrong choice for anyone wanting canvas export and the right one for anyone feeding an image pipeline. Saying so up front costs a few bad-fit installs and saves the good-fit ones from bouncing. CDN install: trying the thing required an npm install first. It does not any more. Co-Authored-By: Claude Opus 5 --- CHANGELOG.md | 4 ++++ README.md | 39 +++++++++++++++++++++++++++++++++++++-- 2 files changed, 41 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7228b1b..eae52b2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,10 @@ release steps in [CONTRIBUTING.md](CONTRIBUTING.md). ### Added +- README now opens with status badges, a demo GIF, and an "Is this the right + tool?" section answering the question evaluators actually arrive with. +- A CDN install option, so the library can be tried without an npm install. + - TypeScript declarations, shipped with the package as `src/index.d.ts` and wired into `exports` so both `bundler` and `node16` resolution find them. TypeScript consumers previously got an implicit `any`. diff --git a/README.md b/README.md index 342e6a2..548f285 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,14 @@ Zero-dependency vanilla JS tool to pick focal points and crop zones on images. Returns pixel coordinates you can feed straight into your image pipeline. +

+ npm version + gzipped size + types included + CI status + MIT licence +

+

Dragging the focus point and resizing the crop zone, with the coordinates updating live

@@ -16,17 +24,44 @@ Zero-dependency vanilla JS tool to pick focal points and crop zones on images. R - **Focus point**: Set a point of interest on the image with a visual marker - **Crop zone**: Define a crop zone with resize handles -- **No dependencies**: Works without external libraries -- **Simple API**: Clear and easy-to-use interface +- **No dependencies**: 3.6 kB gzipped, nothing else to install +- **Typed**: TypeScript declarations ship with the package +- **Framework-agnostic**: plain DOM, so it drops into anything - **Customizable**: Flexible configuration options - **Responsive**: Adapts to screen resizing +## Is this the right tool? + +**Yes, if** you need a person to mark _where_ the subject of an image is, and +you want those positions back as numbers — to store on a record, or hand to an +image pipeline. The coordinates are in the image's original pixels, so they stay +valid at any display size: + +| What you get | Where it tends to go | +| ------------------------ | ------------------------------------------------------------------------ | +| `focusPoint: {x, y}` | CSS `object-position`, imgix `fp-x`/`fp-y`, Cloudinary gravity | +| `cropZone: {x, y, w, h}` | a server-side crop with sharp or ImageMagick, or a stored crop rectangle | + +**No, if** you need the browser to actually produce the cropped image — rotation, +zoom, canvas export, file output. This library never touches pixels; it only +reports coordinates. A full cropper such as Cropper.js is built for that job. + ## Installation ```bash npm install @h4md1/visual-image-tool ``` +Or skip the install entirely and load it from a CDN — this is what the +[live demo](https://h4md1.fr/visual-image-tool/) does: + +```html + +``` + +Pin the exact version rather than the major in production. There is a runnable +[JSFiddle](https://jsfiddle.net/zuadgm4p/7/) if you would rather poke at it first. + ## Quick Start Guide ### 1. Import From 0bad159aea54622cffb328e326823539ba242bab Mon Sep 17 00:00:00 2001 From: Hamdi LAADHARI Date: Sun, 6 Sep 2026 10:01:27 +0200 Subject: [PATCH 2/2] docs: tidy the unreleased changelog after the merge --- CHANGELOG.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 30eb9b1..ecf03b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,16 +12,15 @@ release steps in [CONTRIBUTING.md](CONTRIBUTING.md). ### Added -- README now opens with status badges, a demo GIF, and an "Is this the right - tool?" section answering the question evaluators actually arrive with. -- A CDN install option, so the library can be tried without an npm install. - - TypeScript declarations, shipped with the package as `src/index.d.ts` and wired into `exports` so both `bundler` and `node16` resolution find them. TypeScript consumers previously got an implicit `any`. - `npm run types:check`, a `tsc --noEmit` pass over a compile-time test of the public surface, enforced in CI so the declarations cannot drift from the implementation unnoticed. +- README now opens with status badges, a demo GIF, and an "Is this the right + tool?" section answering the question evaluators actually arrive with. +- A CDN install option, so the library can be tried without an npm install. - Open Graph and Twitter card metadata on the demo site, plus a description and canonical URL. Links to the demo previously rendered as a bare URL with no preview anywhere they were shared, and search engines had no description to