revise February to May 2019 articles

2026-07-31 10:32:34 +03:00
parent e8afc8454a
commit 238c1f7688
22 changed files with 2913 additions and 1 deletions
@@ -0,0 +1,56 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 820" role="img" aria-labelledby="title desc">
+  <title id="title">Контракт валидации формы</title>
+  <desc id="desc">Вертикальная схема: HTML проверяет форму ввода, клиент хранит версию и привязывает ошибки к полю, сервер проверяет данные и возвращает ключ поля. Старый ответ не имеет права изменить новое значение.</desc>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#091c2d"/>
+      <stop offset="1" stop-color="#12344c"/>
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="8" stdDeviation="10" flood-color="#03111e" flood-opacity=".32"/>
+    </filter>
+    <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
+      <path d="M0 0L10 5L0 10z" fill="#8de4da"/>
+    </marker>
+    <marker id="coralArrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
+      <path d="M0 0L10 5L0 10z" fill="#ff9a8b"/>
+    </marker>
+  </defs>
+  <rect width="720" height="820" rx="34" fill="url(#bg)"/>
+  <text x="56" y="68" fill="#ffffff" font-family="Arial, sans-serif" font-size="30" font-weight="700">Форма: один контракт, три владельца</text>
+  <text x="56" y="102" fill="#bdd4e5" font-family="Arial, sans-serif" font-size="18">Симптом: браузер считает поле нормальным, API отказывает.</text>
+
+  <g filter="url(#shadow)">
+    <rect x="56" y="146" width="608" height="144" rx="22" fill="#e8f8f3"/>
+    <rect x="56" y="146" width="14" height="144" rx="7" fill="#36b7a1"/>
+    <text x="96" y="190" fill="#103543" font-family="Arial, sans-serif" font-size="24" font-weight="700">1. HTML-контрол</text>
+    <text x="96" y="224" fill="#294f5b" font-family="Arial, sans-serif" font-size="19">required · type=email · pattern</text>
+    <text x="96" y="256" fill="#294f5b" font-family="Arial, sans-serif" font-size="19">Даёт ранний сигнал, но не знает базу.</text>
+  </g>
+  <path d="M360 290V340" stroke="#8de4da" stroke-width="7" stroke-linecap="round" marker-end="url(#arrow)"/>
+  <text x="390" y="325" fill="#8de4da" font-family="Arial, sans-serif" font-size="16">локально корректно</text>
+
+  <g filter="url(#shadow)">
+    <rect x="56" y="350" width="608" height="176" rx="22" fill="#eaf0ff"/>
+    <rect x="56" y="350" width="14" height="176" rx="7" fill="#6579df"/>
+    <text x="96" y="394" fill="#1d326b" font-family="Arial, sans-serif" font-size="24" font-weight="700">2. Клиентское состояние</text>
+    <text x="96" y="428" fill="#32487c" font-family="Arial, sans-serif" font-size="19">value + requestId + phase + fieldError</text>
+    <text x="96" y="460" fill="#32487c" font-family="Arial, sans-serif" font-size="19">Сравнивает версию до render.</text>
+    <rect x="436" y="412" width="184" height="70" rx="14" fill="#ffffff" stroke="#6579df" stroke-width="2"/>
+    <text x="456" y="440" fill="#1d326b" font-family="Arial, sans-serif" font-size="17" font-weight="700">email-error</text>
+    <text x="456" y="465" fill="#32487c" font-family="Arial, sans-serif" font-size="15">aria-invalid=true</text>
+  </g>
+  <path d="M360 526V576" stroke="#8de4da" stroke-width="7" stroke-linecap="round" marker-end="url(#arrow)"/>
+  <text x="390" y="560" fill="#8de4da" font-family="Arial, sans-serif" font-size="16">проверка условия</text>
+
+  <g filter="url(#shadow)">
+    <rect x="56" y="586" width="608" height="144" rx="22" fill="#fff3e7"/>
+    <rect x="56" y="586" width="14" height="144" rx="7" fill="#f39a4b"/>
+    <text x="96" y="630" fill="#6a3a16" font-family="Arial, sans-serif" font-size="24" font-weight="700">3. API и данные</text>
+    <text x="96" y="664" fill="#80512a" font-family="Arial, sans-serif" font-size="19">Занятость, права, нормализация, сохранение.</text>
+    <text x="96" y="696" fill="#80512a" font-family="Arial, sans-serif" font-size="19">Возвращает fields.email и код ошибки.</text>
+  </g>
+
+  <path d="M82 752C82 786 638 786 638 752" fill="none" stroke="#ff9a8b" stroke-width="5" stroke-linecap="round" marker-end="url(#coralArrow)"/>
+  <text x="181" y="794" fill="#ffb7ac" font-family="Arial, sans-serif" font-size="17" font-weight="700">старый requestId → не меняет новое поле</text>
+</svg>