index.html - master - an_cheser/PackCheck

index.html
376 строк7 KB
an_cheser
chore: полная переработка HTML-структуры на текстовое содержимое
27 май 2026, 17:58
27 май 2026, 17:5814384bd
Это уже выглядит как очень крепкий production-like инструмент для препресса.
Причём у тебя пошёл правильный вектор — не «generic diff checker», а именно QA-инструмент под упаковку. Это важное отличие.

Что бы я улучшил дальше:

1. Самое важное — перейти с diffLines на «умное выравнивание строк»

Сейчас у тебя есть проблема:

A
B
C

vs

A
NEW
B
C

Текущий алгоритм может начать подсвечивать всё дальше как изменённое.

Для упаковки это опасно.

Тебе нужен:

LCS alignment
patience diff
или google diff-match-patch line mode

Иначе:

добавление одной строки ломает весь diff
особенно в многоязычных составах

Это главный технический апгрейд.

2. Критически не хватает «режима только изменений»

Сейчас глазами всё равно приходится сканировать огромный массив.

Добавь:

<input type="checkbox" id="onlyChanges">

И:

if (onlyChanges.checked && !changed) continue;

Но:

с сохранением контекста ±1 строка
как в git diff

Иначе потеряется читаемость.

Это даст огромный UX-буст.

3. Нужна фиксация горизонтального скролла

На длинных ингредиентах сейчас будет ад.

Добавь:

.diff-scroll-area {
    overflow: auto;
}

.diff-table {
    min-width: 1200px;
}

И отдельно sticky line numbers.

Иначе на реальных упаковках всё развалится.

4. Добавь split-view sync scroll

Сейчас scroll идёт по контейнеру целиком.

Но если позже ты сделаешь:

независимые колонки
virtual rendering

то нужен sync scroll:

leftPane.scrollTop = rightPane.scrollTop

Это почти must-have для препресса.

5. У тебя опасный XSS-пайплайн

Вот тут:

highlightHomoglyphs()

ты делаешь:

return `<span>${escapeHtml(word)}</span>`

НО до этого часть текста уже могла быть HTML.

У тебя сейчас:

escape
потом replace
потом снова innerHTML

Это fragile pipeline.

Лучше:

Правило:
всегда сначала tokenize
потом createElement
никогда не смешивать HTML string assembly

Да, кода больше.
Но:

стабильнее
быстрее
безопаснее
6. Тебе нужен debounce

Сейчас compare() будет убивать CPU на больших текстах.

Добавь:

let compareTimer;

function scheduleCompare() {
    clearTimeout(compareTimer);
    compareTimer = setTimeout(compare, 180);
}

И input → scheduleCompare.

Особенно важно на:

грузинском
киргизском
длинных составах
7. Самая полезная QA-фича — NORMALIZATION WARNINGS

Вот это реально gold tier для упаковки.

Добавь проверку:

Unicode normalization
text.normalize('NFC')

и сравнение с исходником.

Ты удивишься сколько:

composed/decomposed символов
особенно в грузинском
турецком
казахском
Пример warning:
⚠ текст содержит Unicode normalization anomalies

Это реально production issue.

8. Очень рекомендую добавить:
suspicious punctuation detector

Например:

,
.
:
;
·
•
–
—
−
'
`
´
"
“
”

На упаковках это постоянный источник ошибок.

Особенно:

minus vs dash
apostrophe variants
fullwidth symbols
9. Добавь режим «проверка OCR мусора»

Очень полезно если текст приходит:

из PDF
из Illustrator
из OCR

Лови:

rn → m
cl → d
0 ↔ O
1 ↔ l
I ↔ l

Можно сделать warnings-only.

10. Миникарта — крутая идея, но сейчас почти бесполезна

Почему:

все изменения одинакового цвета
нет viewport indicator

Сделай:

green = additions
red = removals
yellow = modifications

и:

рамку текущего viewport

Тогда станет реально useful.

11. Огромный UX upgrade — keyboard navigation

Вот это прям обязательно:

F7 → next diff
Shift+F7 → prev diff
Ctrl+F → search

И:

подсветка активного diff
счётчик 3 / 18

Это даст ощущение desktop-grade приложения.

12. Добавь поиск

Не обычный browser search.

А:

поиск внутри diff
jump to result
highlight all matches

На реальных составах это суперполезно.

13. У тебя сейчас нет virtualization

На больших текстах DOM умрёт.

Если дальше развивать:

5k+ строк
20 языков

нужен:

virtual scroll
window rendering

Но пока можно не трогать.

14. Самая мощная идея для упаковки

Вот это реально killer feature:

«ignore formatting changes»

Например:

120g
120 g

или:

12%
12 %

как:

warning
а не critical diff

То есть:

semantic severity levels
Например:
critical
изменение слова
изменение числа
medium
пунктуация
low
двойной пробел
перенос строки

Это уже уровень коммерческого QA-инструмента.

15. Конкретно по единицам измерения

Ты правильно думаешь:
не надо делать отдельный класс.

Почему:

слишком много локалей
слишком много форматов
куча ложных срабатываний

Лучше:

generic token classification

Типы:

word
number
punctuation
whitespace
symbol

И уже потом severity rules.

Это масштабируется.

16. Что бы я ещё добавил лично для препресса
export report

HTML/PDF:

- дата
- количество изменений
- warnings
- список diff

Очень полезно для:

согласований
клиентов
proofing
17. И последнее — architecture

Сейчас у тебя всё в одном файле.

На этом этапе уже пора:

diff.js
render.js
warnings.js
storage.js
ui.js

Иначе дальше поддержка станет болью.

Особенно когда:

добавишь severity
поиск
OCR rules
normalization
filters
export

Сейчас ещё можно спокойно разделить.