​​Проклятые кастомные селекты.

Когда дизайн требует чего-то этакого от инпутов, верстальщики приседают в шпагате и делают довольно сумасшедшие вещи, типа картинки внутри инпута, но оставляют тег <input>. Но если появляются стили для выпадающего списка, тег <select> и его друзья <option> отправляются на помойку и вылезают <div> и джаваскрипт. Ну не пускают браузеры даже в распоследнем html/css кастомизировать селекты. Как же это печалит!

Стандартный селект прекрасен, он закрывается по Esc, он открывается по Cmd+вниз, в нём работает поиск (откройте селект и начните печатать), и ничего из этого ваши кастомные селекты в большинстве своём делать не умеют. Просто потому, что до этого не доходят руки у разрабатывающего этот компонент верстальщика.

Конечно, есть удачные решения, вроде бутстраповского кастомного селекта, джикверишного селекта и аналогичной реактджс-компоненты знаменитой. Но даже в этих случаях количество протекающих абстракций не ноль, а просто меньше, чем в остальных случаях. Если вам кажется, что вы знаете контрпример, в котором набор дивов ведет себя ну прям как селект точь-в-точь и никаких абстракций не протекает, то тут же вспомните об автозаполнении форм в браузерах или о длинных выпадающих списках и невысоких браузерных окнах (как на картинке).

К слову, когда браузеры были еще маленькими, эксплорер только мечтал о седьмой версии и хрома вообще не существовало, селекты были еще более независимыми. Некоторые браузеры, видимо в силу каких-то внутренних ограничений, отказывались реализовывать выпадающие списки стандартными способами и в ход шли костыли. Такие топорные дубовые неотшлифованные тяжелые костыли. Никакой речи о дополнительных стилях к селекту вообще не шло, там проблемы были намного серьезнее. Например, никакой див с абсолютным позиционированием и с увеличенным z-индексом не мог быть выше селект-инпута просто потому, что выпадающий список не являлся частью документа. Все селекты рендерились отдельно от всего документа и, собственно, поверх документа. Если вдруг хотелось сделать что-то вроде модального окна, то дополнительным джаваскриптом, при открытии любого модального див-элемента, всем выпадающим спискам на странице делался ниндзя-прием в виде 'visibility: hidden'. Еще можно было заметить на тормозящих компьютерах, что расчет позиции селекта на странице слегка отставал при скроллировании страницы. Селект немного позже рассчитывал свою позицию, чем это делала сама страница и перемещался с легким запозданием.

Очень хороший пример костыля в рубрику #айтермин.

​​

 Дополнение к прошлому посту.
Короче, картинок было две — логотип рубрики и иллюстрация к тексту. Опубликовалась один логотип. По всей видимости, добавить две картинки к посту нельзя. Исправляюсь отдельным постом.

Ну, а чтобы не постить картинку просто так, опубликую еще шикарный присланный отзыв личным сообщением от читателя. Поддержите лайком, пусть будут больше таких вот личных сообщений!

Сейчас пишу кастомные селекты.

В том, который «мульти», еще пытался делать нормальную работу с клавиатурой, а в самом обычном просто забил. Если пытаться повторять поведение нативного, то можно потратить неделю, а див с текстом и второй див с выпадающим списком никто никогда в неделю не оценивает. Но еще ты забыл про кастомные селекты на мобильных девайсах. Это отдельная боль для пользователя, а нативные селекты вообще ни на что не похожи, взять те же айосные барабаны. Ну и понятное дело пользователь очень плохо будет воспринимать кастомное дизайнерское говно.

А еще интересна идея эволюции нативных контролов, взять те же скроллбары. Раньше библиотек, реализующих кастомные скроллы, был вагон и маленькая тележка. И если в то время дизайнер не устоял бы перед искушением добавить немного красоты в его детище, то сейчас его скролл, каким бы крутым он ни был в то время, будет смотреться довольно уныло на фоне аккуратных, иногда даже самоустраняющихся при пассивном состоянии нативных скроллов. Конечно ни один дизайн не живет так долго, но все-равно круто всегда держать в голове возможность эволюции браузеров при проектировании дизайна.

​​На просторах интернета обнаружилась вот такая вот картинка, по стандартному шаблону мема. Сначала показалось, что несмешная. Потом показалась смешной, потом показалась слишком философской.

Действительно, многие ругают излишнюю бюрократию управления проектов, а предложить что-то стоящее очень тяжело и сильно индивидуально, зависит от случая, чтобы вписывать это в какую-то стандартную концепцию. #полныйаджайл

Количество поздравлений с наступившим годом от телеграм-каналов просто умопомрачительное. Читать я их перестал где-то после третьего. А «Экстраполяция» от большинства каналов отличается тем, что очень любит и ценит вас, чтобы по-просту спамить бесполезным сообщениями или рекламой, например.

Так что, во-первых с Новым Годом вас, друзья мои. 🎄

А во-вторых — полезная ссылка. Можно сказать, свежачок с анализом современного джаваскрипта, сделанного на основе опроса разработчиков.

«Джаваскрипт ты можешь не любить, но уважать его обязан», как сказал классик.

https://medium.freecodecamp.org/i-just-asked-23-000-developers-what-they-think-of-javascript-heres-what-i-learned-9a06b61998fa

Лайвхаки от Экстраполяции

Приложений для общения в телеграме существует не один десяток под разные платформы. И недостатки неофициальных клиентов сильно очевидны, чтобы их перечислять. Использовать официальные объективно выгоднее.

Так вот, под Макось существует два официальных клиента. Один ужасный кросплатформенный монстр. А второй — нативный красавец. Почему-то подавляющее большинство знакомых ставят себе кросплатформенного уродца, вместо быстрого и симпатичного удальца. Удаляйте чудище и ставьте себе принцессу: https://macos.telegram.org/

Под Айос официальных клиентов тоже два, но тут оба красавца. Приложение, которое ставят себе подавляющее большинство владельцев айфонов, безусловно на порядок лучше любых вайберов, скайпов и ватсапов, но по сравнению с «Telegram X» слегка медленновато и не имеет ночной темы. Качайте: https://itunes.apple.com/ru/app/telegram-x/id898228810?mt=8

Личным сообщением читатели (много читателей) подсказывают, что в основной айосный телеграм тоже добавили ночную тему. Так что это не повод переходить на «X». Возможно, судя по названию, владельцы последних-распоследних айфонов могут какое-то улучшение нового телеграма увидеть. Но это не точно.

А так в X-телеграме много полезных фич еще не имплементировали. Например геолокация в реальном времени еще отсутствует, количество непрочитанных сообщений пропадает далеко не сразу после прочтения с другого устройства, сохранение напечатанного текста работает не всегда. В общем, любители бета-версий должны быть довольны новым телеграмом. А я себе старый вернул. Что же до десктопной версии под макось, то там все стабильно — кроссплатформенное чудище и нативная красавица.

Ну не даются новостные заметки Экстраполяции, что тут поделаешь! Стоит отложить пост на пару дней, так уже старье, боян и уже неправда. Может, пригласить внештатного редактора для новостных заметок (🗣) или ну их к чертям, эти новости (😈)?

​​Неоднократно личным сообщением спрашивали куда я запропастился и где же посты в экстраполяции. Ответ вы же понимаете — дел невпроворот, всего просто не успеваешь. Об этом в конце поста. А вот писать что ни попадя в канал не хочется, уж сильно я вас всех люблю. Вот поэтому и молчал.

Но это совсем не повод переживать. На ближайшее время уже запланированы (а некоторые даже и написаны уже) посты об играх и каскадных таблицах стилей, о нунчаках и о блокчейне и еще будет философствование на тему ценностей мысленного эксперимента. Скучно точно не будет!

Так же периодически будут всплывать рубрики «Полный аджайл» (#полныйаджайл), «Лайвхаки от Экстраполяции» (эта рубрика еще без тега, поэтому давайте новый сделаем: #экстрахак). И есть еще одна рубрика с дурацким названием «Айтермин» (#айтермин). Если вам есть что сказать по этому поводу, присылайте мне личным сообщением (@aratak) ваши мысли с соответствующим хештегом. По указанному хештегу я потом смогу эти ваши мысли найти и не забыть опубликовать.

Ну, и в конце у меня к вам серьезная просьба. Один из проектов, над которым я работаю, уже достаточно хорош, чтобы добавить его в producthunt.com. Так мы и сделали и мне нужна ваша помощь. Нужно проголосовать за проект по ключевому слову «riter» на продактханте. Ссылки не даю, сами понимаете, это же продактхант. Буду вам очень признателен.

Мне тут подсказывают, что ограничения на ссылки на продактханте уже нет. Поэтому вот ссылка: https://www.producthunt.com/posts/riter

Но вы все-равно не кликайте, а скопируйте и вставьте :-) Спасибо!

Написание детективов принципиально отличается от написания других произведений. Очевидно, отличается тем, что убийца до последнего должен оставаться загадкой (и да, «Коломбо» не в счет). Читая подобные произведения, порой восхищаешься продуманностью сюжета и дальновидностью автора. А писатели — читеры, они придумали очень хитрый трюк, чтобы добиться эффекта запутанности и казаться такими матерыми интриганами и гениями тактики.

Все просто, до последнего авторы сами не знают кто будет убийцей. Произведение пишется таким образом, чтобы каждый из персонажей имел алиби и мотивы, даже садовник. И, дописав произведение до заветного момента, когда вот-вот главный герой прозреет и поймет кто же на самом деле убийца, писатели останавливаются и крепко задумываются. Тут-то самое время определится и решить кто же он на самом деле и как он это сделал.

Конечно, алиби у всех участников может быть чересчур железное и мотивы недостаточно раскрыты. Еще бы неплохо оставить дополнительные подсказки читателю, чтобы самые пытливые и внимательные имели возможность догадаться до правильного ответа вместе с Пуаро или Марпл. И тогда писатели слегка редактируют произведение и или даже переписывают какие-то отдельные части. И в результате мистер Холмс раскрывает хитросплетения злоумышленника и они читателю кажутся сильно запутанными для того, чтобы такое придумать. Убийца выглядит гениальным, а вместе с ним, гениальным кажется и автор произведения.

Вывод из этого довольно простой. Когда хочется хитросплетений и неочевидных решений, то написание приложения должно быть похоже на написание детектива. Иными словами, если хочется сделать процесс запутанным и неочевидным, достаточно всего лишь в процессе не задумываться о результате. И строго говоря, обратное утверждение не совсем верное. Если хочется прозрачности и очевидности, то необходимо, но не достаточно просто иметь цель. Помимо цели понадобится еще ой как много чего.

И опять о художественной литературе. О фантастике.

В этом жанре ярче других выражена градация и разделения общества на разные классы, уровни и привилегии. Фракции в «Дивергенте», рационалы, эмоционалы и пестуны из «Сами Боги», специализации в «Геноме», уровни магов и стороны света в «Дозорах». В жизни такого встретить не часто получается, а вот писатели могут проводить четкие границы сколько им вздумается. Компьютерные игры все, как один, идут туда же. Уровни исчисляются целым положительным индексом, урон — единицами, а защита — поглощенным уроном. Не то чтобы это как-то плохо было, просто желание описать систему до ее появления неизбежно выливается в необходимость четких категорий и градаций.

А теперь вспомним приложения, которые призваны автоматизировать бизнес-процессы какие-нибудь. Программисты таких систем делают по сути то же самое, что и фантасты, только сложнее: пытаются структурировать и систематизировать процессы, которые и так работают. И в отличие от фантастов, которые придумывают систему с нуля и могут позволить себе любые вольности, программисты должны формализовать то, что появилось стохастически и ситуативно. Да еще и так, чтобы в результате получилась фантастика.

Фантасты, если все-таки решают уделить время бесполезности градаций, в итоге сводят все к тому, что никаких градаций не существует и мир нельзя поделить на черное и белое. В играх вообще не парятся, если лук наносит урон 15-19, то так и пишут. Если это боевой лук, то им нельзя, скажем, подпереть дверь, чтобы не закрывалась, а стрелой нельзя воспользоваться как ножом. Хотя, казалось бы, если бы симуляция жизненных ситуаций была бы поподробней, то необходимо было бы и на такой сценарий рассчитывать.

Давайте представим, что нам нужно создать CRM-систему организации «Ночной Дозор». С уровнями доступа, трэкинга приказов и спецзаданий, учета артефактов, с досье на всех темных в городе, лицензиями, протоколами следственных действий и учетом отпусков и премий для сотрудников. Представили, да? Очень похоже на то, что магии на эту CRM-систему прийдется израсходовать прилично. Ну, ладно, надо же с чего-то начать. Давайте хотя бы учет сотрудников сделаем. А с выданными табельными артефактами, учетом текущих заданий и прочими протоколами потом разберемся, сейчас о них даже думать не будем. Казалось бы, одна табличка 'users' в реляционной базе данных и интерфейс для ее редактирования. Еще с отдельным доступом на чтение и запись. Ну ладно, с разными уровнями доступа на чтение. И с разными уровнями доступа на запись. И еще с интерфейсом редактирования уровней доступа. И уровнем доступа к интерфейсу редактирования уровней доступа. Со специализацией отдельного пользователя (целительница ли, боевой маг или перевертыш). И наверно еще с мультиспециализацией. С возможностью увольнения. И чтобы потом опять того же героя взять на работу можно было с сохранением истории. И самое главное, что описанная система окажется неспособной сделать всего того, что хотелось бы сделать. Обязательно найдется какой-нибудь случай, в который нельзя отразить в текущей системе. Появится какой-нибудь внештатный маг-фрилансер вне специализаций. Или какой-нибудь темный вампир, работающий на «Ночной Дозор», для которого в системе просто не будет предусмотренных специализаций и категорий. Что тогда? Добавлять граничных условий, новых абстракций и исключений из правил?

В общем случае написание хоть сколько-нибудь сложной программы сводится к набору фич и взаимодействию этих фич между собой. Например, что будет если переименовать пользователя и сослаться в комментарии на прежнее имя? Может ли удаленный пользователь зарегистрироваться заново в системе? Если у нас есть поддержка нескольких языков, то нужно ли имя проекта заполнять на нескольких языках сразу? Таких вот пересечений различных функциональностей в приложении больше, чем можно себе представить за один раз. Это квадрат от количества всех возможных фич. И в приложении, у которых можно выделить десять различных разнообразных отдельных возможностей, нужно позаботиться о корректной работе в ста разных случаях. Понятное дело, что не всё вот так вот пересекается между собой, но порядок сложности добавления новой функциональности в приложение понятен.

Этот эффект можно назвать «отложенной сложностью добавления новой функциональности».

К слову, ребята, не зачастил ли я с постами? Может, реже писать?

👍 все хорошо, продолжай
😤 лучше писать реже, не хочу ничего пропустить
🤓 можно даже чаще писать, не стесняйся
😵 я все-равно редко читаю, просто подписан
🤮 обожаю соц. опросы

Личным сообщением прислали резонное замечание, что количество комбинаций взаимодействия между различными частями приложения будет факториал, а не квадрат от количества фич. Нужно ведь рассматривать каждую фичу не только в контексте другой какой-то одной фичи, а в контексте всех других возможностей приложения, да и ещё и с важностью последовательности их.

Это действительно так, и факториал в данном случае хуже квадрата, что лишь усиливает основную мысль поста.

Ещё одно сравнение с «Ночным Дозором», только в этот раз будем говорить о квалификации.

Лукьяненко просто замечательно описал систему уровней магии и магов, да так, что на протяжении чтения книг иерархия сложности заклинаний и квалификация отдельного сотрудника сомнений не вызывали вовсе. В книгах уровни распределялись от седьмого к первому. Однозначным определением уровня мага был набор заклинаний и умений, который способен он сделать. Продвижение по карьерной лестнице у «иных» зависело не только от опыта, но и от текущей формы. «На пике своей формы», как говорили герои книг. Получается, что однажды освоив третий уровень Силы, вовсе не обязательно маг останется на нем до конца своей карьеры. Вполне вероятно, что через некоторое время он окажется на четвертом или даже пятом уровне (седьмой уровень — самый слабый, если что). Опять же, не все маги, прийдя в систему сразу становились семиуровневыми джунами. Некоторых из них определяли на, скажем, третий уровень силы с приставкой «неопытный, но перспективный». Интересно, как им платили зарплату? Как третьему или как седьмому уровню?

Ребята, как вам идея существования черных дыр, которые старше самой вселенной? По-моему все довольно элегантно.

http://telegra.ph/Eldar-Black-Holes-02-24

Некоторые специализации магов (а их там было дофига и разнообразных) естественно ограничивались по степени силы. Скажем, все оборотни были от седьмого до пятого уровня силы и лишь единицы добивались большего. В книге таким вот «высшим оборотнем» был один персонаж и его сила была «приблизительно равна первому уровню силы». К слову, это был один из старейших иных, описанных в книге — его возраст был около десяти тысяч лет. Приблизительно столько нужно, чтобы в профессии, которая ценится не так высоко, как остальные, добиться вершин. Верно говорю, верстальщики?

Вампиры в «Дозорах» были ограничены пятым уровнем сверху, но особняком стояли высшие вампиры, сила которых не уступала всем остальным. Эдакое расслоение на «высших» и «низших» в одной профессии определялось способностью контролировать людей и других вампиров. Низшие едва ли справлялись с одним-двумя, высшие подчиняли себе десятки. При том, что основной особенностью специализации вампиров была возможность превращать обычных людей в «иных». Ой, что-то мне очень сильно это напоминает.

Некоторые иные из «Дозоров» освоили всевозможные заклинания и набрались всевозможного опыта, что под первый уровень уже не подходили по критериям. Их называли «магами вне категорий» и таких было довольно мало. Они занимались какими-то неведанными и, с первого взгляда, крайне абсурдными занятиями с точки зрения семиуровневых джунов. Только в самом конце реализации задуманного, было понятно насколько качественно и продуманно было все спланировано сеньорами вне категорий. А вот любые попытки объяснить свои действия оканчивались неудачей — планы были настолько запутанными и хитросплетенными, что их объяснение не укладывалось в повседневную логику семи-, шести- и даже трехуровневых джунов и миддлов. Каждая неудача в действиях высших магов оборачивалась новой победой, каждое видимое поражение было хитро продумано и организовано. Автор произведений объяснял это тем, что высшие маги очень хорошо видят вероятности развития событий и они оперируют совершенно другими понятиями, недоступные остальным. В итоге все просто смирялись с указаниями высших иных. Если сказал делать так, значит надо делать так. И в дозорах такие вот мэтры магии действовали сообща, очень удачно манипулируя миддлами и джунами. Что, собственно, и качественно отличало их от остальных магов более низкой квалификации.