День 1080. Давненько не писал ничего от себя, а тут как раз и повод подвернулся. Поэтому напишу, что называется, по горячим следам, а окончание «Избегайте Ненужных Программных Абстракций» выйдет завтра. Мы все люди и все мы совершаем ошибки. Ошибки программистов могут быть не такими критичными, как ошибки врачей или архитекторов. От наших ошибок не умирают люди и не рушатся здания (обычно, по крайней мере). Ошибки программистов чаще всего просто стоят компаниям определённой суммы денег. Однако есть ещё один вид очень обидных ошибок. Когда выбираешь не тот путь решения. В результате тратишь кучу времени и сил, добиваешься результата, чувствуешь заряд бодрости и удовлетворения от работы, а потом оказывается, что все усилия были напрасны. Как многие из подписчиков знают, я фулстек. И иногда вожусь с UI, что в принципе мне даже нравится. Знаю, что многие дотнетчики бэкендеры люто ненавидят JS и CSS, но разговор пойдёт об этом, так что потерпите. Обещаю, никакой жести не будет. Нужно нам было создать систему оценок. И задумали мы для выставления оценки вместо использовавшегося раньше обычного скучного выпадающего списка, сделать красивый ползунок. Тащишь его слева направо, оценка меняется от 0 до 5. Никаких новомодных фреймворков мы не используем, у нас старый добрый набор HTML+CSS+jQuery. Собственно, и ползунок взяли из jQuery UI. Проблема обнаружилась на мобильных устройствах. Очевидное для каждого действие тыкнуть в ползунок и протащить его пальцем до нужной оценки отказывалось работать. То есть мышкой его можно было таскать, а вот пальцем (или в эмуляторе) – нет. В итоге к концу для, после настройки основного функционала, погуглив проблему, нашли небольшой плагин для jQuery, который, насколько я понял, и служил костылём для предоставления функционала «Touch & Drag/Drop» в jQuery UI. На следующий день я открыл страницу проекта на GitHub (который, кстати, давно был заброшен), выполнил все нужные действия из 3х простых шагов, два из которых – скачать файл с кодом и подключить его на странице. И – вуаля! – получаю ошибку JS “draggable() is not a function”. Заметил, что плагин основан на нескольких пакетах из сборки jQuery UI. Поискал draggable в нашей кастомной сборке, и её там не оказалось. Поэтому скачал новую сборку, где всё должно было быть. И ползунок заработал! Правда сломался остальной код JS, причём сразу в нескольких неожиданных местах. Промучившись с этим около часа, стал искать другие варианты. Нашёл. Есть же специально обученный HTML элемент <input type=”range” /> Проблема в том, что он в разных браузерах выглядит совершенно по-разному. Но и это не беда. Всего какой-то сотней строчек CSS можно было заставить элемент выглядеть так, как тебе надо. В общем, на всю эту настройку, проверку во всех доступных браузерах, включая IE (не спрашивайте!), переписывание уже готового кода разметки и JS под использование нового элемента и т.п. ушла бОльшая часть дня. Но к приходу коллеги вечером, всё было готово, и выглядело даже почти так же, как изначально одобренный вариант UI. Я молодец! Я решил проблему! Коллега удивился, что плагин не заработал. Но ещё больше удивился я (хотя, «удивился» тут слишком мягкое слово), когда коллега написал, что у него плагин заработал сразу, и он откатит мои изменения. После пары минут шока я решил разобраться, в чём же дело. И довольно скоро выяснил, что эту самую функцию draggable вообще не надо было вызывать! В шаге 3 на странице документации был пример кода, использующий эту функцию. Но элементы из jQuery UI работали и без неё. Только подключения плагина на страницу было достаточно! Причём всё прекрасно работало сразу и везде, включая эмулятор и реальный телефон. Дел было на 2 минуты в ленивом темпе! Конечно, в глазах коллеги, я, наверное, выглядел полным идиотом, которому нельзя доверить даже элементарную операцию. Поэтому я, как мог, попытался объяснить, как же это меня так переклинило, и почему я потратил целый день впустую. Он вроде даже понял (по переписке трудно судить). Но если уж под какой случай и подходит определение эпик фейл, то это был он.