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,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 900" role="img" aria-labelledby="title desc">
+  <title id="title">Конечный автомат проверки одного поля</title>
+  <desc id="desc">Схема показывает переходы поля: editing, client-invalid, checking, ready и remote-invalid. Каждый новый input увеличивает версию и очищает старый удалённый результат. Устаревший ответ обрывается до изменения состояния.</desc>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#17142e"/>
+      <stop offset="1" stop-color="#342056"/>
+    </linearGradient>
+    <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
+      <path d="M0 0L10 5L0 10z" fill="#c7b5ff"/>
+    </marker>
+    <marker id="mutedArrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
+      <path d="M0 0L10 5L0 10z" fill="#9aa4bb"/>
+    </marker>
+  </defs>
+  <rect width="720" height="900" rx="34" fill="url(#bg)"/>
+  <text x="54" y="66" fill="#ffffff" font-family="Arial, sans-serif" font-size="30" font-weight="700">Поле как небольшой автомат</text>
+  <text x="54" y="100" fill="#d7cff5" font-family="Arial, sans-serif" font-size="18">Версия — условие, по которому ответ получает право изменить UI.</text>
+
+  <g font-family="Arial, sans-serif">
+    <rect x="216" y="144" width="288" height="92" rx="46" fill="#dcd4ff"/>
+    <text x="278" y="181" fill="#30205f" font-size="25" font-weight="700">editing</text>
+    <text x="248" y="211" fill="#4b3978" font-size="17">value изменён · version + 1</text>
+
+    <path d="M216 190H132V310" fill="none" stroke="#c7b5ff" stroke-width="6" marker-end="url(#arrow)"/>
+    <text x="52" y="256" fill="#d7cff5" font-size="16">локальная ошибка</text>
+    <rect x="52" y="320" width="244" height="96" rx="20" fill="#ffccd2"/>
+    <text x="76" y="359" fill="#6f2634" font-size="23" font-weight="700">client-invalid</text>
+    <text x="76" y="389" fill="#8b4050" font-size="16">сеть не запускаем</text>
+
+    <path d="M504 190H588V310" fill="none" stroke="#c7b5ff" stroke-width="6" marker-end="url(#arrow)"/>
+    <text x="522" y="256" fill="#d7cff5" font-size="16">локально корректно</text>
+    <rect x="424" y="320" width="244" height="96" rx="20" fill="#c5eff0"/>
+    <text x="478" y="359" fill="#174e56" font-size="23" font-weight="700">checking</text>
+    <text x="456" y="389" fill="#2a6870" font-size="16">запомнить version</text>
+
+    <path d="M546 416V506H452" fill="none" stroke="#c7b5ff" stroke-width="6" marker-end="url(#arrow)"/>
+    <text x="472" y="482" fill="#d7cff5" font-size="16">available</text>
+    <rect x="226" y="518" width="244" height="96" rx="20" fill="#c9f1d9"/>
+    <text x="310" y="557" fill="#145339" font-size="23" font-weight="700">ready</text>
+    <text x="264" y="587" fill="#28704e" font-size="16">можно отправлять форму</text>
+
+    <path d="M546 416V676H452" fill="none" stroke="#c7b5ff" stroke-width="6" marker-end="url(#arrow)"/>
+    <text x="556" y="580" fill="#d7cff5" font-size="16">occupied</text>
+    <rect x="226" y="690" width="244" height="96" rx="20" fill="#ffd8bd"/>
+    <text x="253" y="729" fill="#713a1a" font-size="22" font-weight="700">remote-invalid</text>
+    <text x="250" y="759" fill="#8b5432" font-size="16">ошибка у этого поля</text>
+
+    <path d="M226 566C94 566 94 190 208 190" fill="none" stroke="#c7b5ff" stroke-width="5" stroke-dasharray="10 10" marker-end="url(#arrow)"/>
+    <path d="M226 738C110 738 110 190 208 190" fill="none" stroke="#c7b5ff" stroke-width="5" stroke-dasharray="10 10" marker-end="url(#arrow)"/>
+    <text x="58" y="464" fill="#d7cff5" font-size="16">любой input → очистить</text>
+    <text x="58" y="486" fill="#d7cff5" font-size="16">старую remoteError</text>
+
+    <path d="M578 462L642 526" stroke="#9aa4bb" stroke-width="5" stroke-linecap="round"/>
+    <path d="M642 462L578 526" stroke="#9aa4bb" stroke-width="5" stroke-linecap="round"/>
+    <text x="510" y="556" fill="#b7bfd0" font-size="15">старая версия</text>
+    <text x="510" y="577" fill="#b7bfd0" font-size="15">не делает render</text>
+  </g>
+  <rect x="54" y="830" width="612" height="38" rx="19" fill="#4c397b"/>
+  <text x="90" y="856" fill="#f1edff" font-family="Arial, sans-serif" font-size="17" font-weight="700">Ответ применяем, только если checkedVersion === current.version</text>
+</svg>