TGViewer
Bite the Byte Bite the Byte @bitethebyte · 3.38K subscribers
Post #253 2.38K
TwinSpark.Morph

Оце нещодавно стрельнуло мені позакривати гештальти на гітхабі, а то маринувалися деякі понад рік. І найцікавіший був прикладом з валідації форми для твінспарку, типу як валідувати на сервері взаємо-залежні поля. Але, об'єктивно кажучи (маю надію що Андрій не образиться :-), сам код виглядав трошки як запинування ногами.

Таке буває, коли тобі треба вже проблему вирішити, а не архітектуру будувати, ти ногами якось запинуєш — головне, щоб працювало. Worse is better.

На моє щастя, це була не мій біль, тому я міг дозволити собі маринацію. 🤣 Короч, прийшло натхнення, і я пішов будувати солюшен.

Найскладніше, авжеж, не зібрати дані з форми — це якраз вирішується просто, перевісив хендлер на форму з кожного поля і вуаля. Але потім оновити ту форму — ось де собака зарита (і, власне, основна причина отого запинування ногами, я так розумію).

Авжеж, можна вигадати якийсь обман, і оновлювати форму шматочками, але тоді заготовочки для помилок треба мати у верстці заздалегідь, та й взагалі звучить дуже крихко — а хочеться-то навпаки, кльовий і непробивний приклад, як воно все добре працює.

Якщо ви стежите за попередніми серіями, то увесь сенс підходу в тому, що ми отримуємо новий HTML і замінюємо ним старий. Я намагався прилаштувати це до форми — шукати де там фокус, ловити, встановлювати його назад. Авжеж нічого не працює. Курсор іноді трошки не туди стає, під час перескакування курсора з поля в поле взагалі немає document.activeElement, то ти навіть не знаєш, куди ставити, але самий прикол, це, авжеж, те, що заміна форми вбиває всі івенти в черзі, посилання на неї в пам'яті, ну карочє.

Тобто у мене при змінах у формі валідація, а при сабміті — і валідація, і сабміт. Запит для сабміту вже полетів, але приходить назад — а його рідна форма десь вже просто в замиканні зависла і гудбай. Uphill battle. Абсолютне відчуття, що ти в дитинстві йдеш у школу і назад у завірюху вгору в обидві сторони. 😡

Піду, думаю, подивлюся ще раз на idiomorph. Не зря ж його чувак написав, повинен вирішувати всі трабли. А він наче й вирішує, але розміром більш ніж половина ТвінСпарку. 🐸 очевидно придавила мене, і я в найкращих традиціях NIH взяв і написав заново. 🎉

І вийшла чверть. Без жартів, 250 рядочків, і це навіть з деякими доробками. Мабуть, чувак джавіст, бо деякі місця ну дуже розлаписті (я йому навіть пул реквест заслав, хехе). Ну і я пару довгих, але нерелевантних, моментів пропустив — типу парсінгу хтмлю (в мене вже готовий елемент), чи оновлення тегу head (ну здається що вже зроби повний релоад, та й все).

І я щось так пройнявся результатом, що зняв відео про те, як працює алгоритм морфінгу (і про прикольні анімації). 😁 Enjoy!
YouTube Twinspark.Morph — оновлення HTML без втрати стану Валідація форм, анімації з мінімумом коду і Рік Ештлі, в якого не закривається рот — що в цьому спільного? 😁 Розбираю подробиці алгоритму оновлення HTML у Twinspark'у, який дозволяє і обійтися без зайвого джаваскрипту, писати просту і конкретну верстку і…
  • 🔥 23
  • 🤯 3
  • ❤ 2
More from @bitethebyte
  1. Aug 31, 2026‍Лагідна українізація дісталася до алібаби 😁
  2. Aug 24, 2026Вітаю всіх з днем відновлення незалежності! З цього приводу в ДОУ вийшов спецвипуск подкас…
  3. Aug 23, 2026А ви йдете на пікнік ДОУ? Я от нарешті йду. 😁 Дуже прикольно, що є івент, який якби конфе…
  4. Aug 13, 2026Щось зранку задумався над IBAN’ами, і випадково усвідомив, що вони — це ж така сама адреса…
  5. Jul 16, 2026Ну й відстойні ж новини. :( Нажаль, внутрішня політика знов перемогла здоровий глузд, але…
  6. Jun 10, 2026photo post
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →