Frame 1171274527.png

Однажды наш Middle Developer Виталик решил пересмотреть «Человека-паука» и осознал, что уж слишком путь главного героя похож на его собственный. На следующий день он радостно рассказал об этом нам, и мы попросили его написать статью. Итак, почему айтишники тоже своего рода люди-пауки?

<h3>
  Пожалуй, вместо «Человека-паука» можно было&nbsp;бы выбрать другой супергеройский фильм, но&nbsp;разберем на&nbsp;примере этого.
</h3>
<p><strong>Любое кино подобного жанра строится по&nbsp;следующей структуре:</strong></p>
<ul>
<li>Главный герой по&nbsp;факту неудачник и&nbsp;не&nbsp;знает, кем он&nbsp;хочет быть.</li>
<li>Его жизнь катится на&nbsp;дно, и&nbsp;он&nbsp;понимает, что нужно что-то с&nbsp;этим делать.</li>
<li>Он&nbsp;идет к&nbsp;своему ментальному наставнику и&nbsp;получает важный урок (большая сила&nbsp;— это большая ответственность).</li>
<li>Происходит событие, которое дает ему сверхспособности. Герой кайфует от&nbsp;обретенной силы.</li>
<li> Происходит критическая ситуация (смерть или травма родственника, например), персонаж сначала сдается, но&nbsp;после понимает, что пора брать себя в&nbsp;руки.</li>
<li>Герой растет и&nbsp;становится тем, кем хотел стать, благодаря вере в&nbsp;себя и&nbsp;поддержке близких. </li>
</ul>
<p> Чем это не&nbsp;путь в&nbsp;айти до&nbsp;первой работы? Впрочем, если вы&nbsp;не&nbsp;видите сходства, давайте разберемся подробнее.</p>
<img src="/uploads/Bez_nazvaniya_6effda991f_a5feb5351b.png" alt="Bez_nazvaniya_6effda991f.png" >


<h3>Шаг номер один: жизнь «до»</h3>
<p>Итак, вы&nbsp;обычный человек, учитесь в&nbsp;школе или в&nbsp;университете, в&nbsp;свободное время залипаете в&nbsp;комп. Ваше окружение постоянно долбит вас вопросами о&nbsp;том, кем вы&nbsp;хотите стать в&nbsp;будущем и&nbsp;чего вам хочется от&nbsp;жизни. Вы&nbsp;же в&nbsp;силу возраста не&nbsp;знаете, чего хотите, но&nbsp;подозреваете, что это будет связанно с&nbsp;компьютером.
Потому что компьютер интересный: там интернет-браузеры, компьютерные игры,
видосы и&nbsp;прочие приколы&nbsp;— вам хочется работать в&nbsp;этом пространстве, но&nbsp;вы&nbsp;не&nbsp;знаете кем.</p>
<p>Время идет, но&nbsp;вы&nbsp;никак не&nbsp;можете определиться. Пробуете себя в&nbsp;монтаже видео, создании музыки, написании статей и&nbsp;прочих интересных вещах, но&nbsp;все это не&nbsp;то. Впрочем, осваивая новые навыки, вы&nbsp;учитесь учиться. Денег на&nbsp;курсы нет, поэтому всю информацию приходится добывать из&nbsp;гугла, видосов на&nbsp;ютубеи&nbsp;других открытых источников, до&nbsp;чего-то вы&nbsp;доходите сами. С&nbsp;каждым днем уверенность в&nbsp;том, что вам стоит работать с&nbsp;компьютером, растет.</p>
<p>Или представим другую картину: вы&nbsp;уже взрослый человек, но&nbsp;жизнь вас не&nbsp;устраивает. Работа вам не&nbsp;нравится, платят мало, не&nbsp;ценят ваш профессионализм, а&nbsp;коллеги по&nbsp;работе только и&nbsp;делают что говорят о&nbsp;детях и&nbsp;бытовухе. Все это начинает надоедать. Вам хочется жить по-другому и&nbsp;вы&nbsp;уверены, что способны на&nbsp;большее </p>
<img src="/uploads/Bez_nazvaniya_1_79aeb3fdd0_e1b49e4458.png"
alt="Bez_nazvaniya_1_79aeb3fdd0.png" >


<h3>Шаг номер два: кризис</h3>
<p>Время подступает к&nbsp;11&nbsp;классу или к&nbsp;первому курсу института, и&nbsp;накопленные навыки вас тяготят: от&nbsp;обилия возможностей вы&nbsp;просто не&nbsp;понимаете, чего хотите. Перед вами стоит выбор:</p>
<ul>
<li>Видеомейкер</li>
<li>Журналист</li>
<li>Сисадмин</li>
<li>Эникейщик</li>
<li>Дизайнер</li>
</ul>
<p>Возможно, вы&nbsp;делаете ошибку и&nbsp;поступаете на&nbsp;одну из&nbsp;подобных профессий в&nbsp;надежде, что универ поможет вам раскрыться и стать профессионалом.</p>
<p>Или вы&nbsp;плюете на&nbsp;это и&nbsp;поступаете на&nbsp;программиста, потому что наслушались, что они получают 300к в&nbsp;наносекунду и&nbsp;вообще крутые ребята, но&nbsp;все это абсолютно не&nbsp;знакомо для вас&nbsp;— возможно, математика вообще была вашим заклятым врагом.</p>
<p> В&nbsp;итоге в&nbsp;универе вас учат каким-то супер странным базовым штукам, непонятно зачем вам нужным: какие-то структуры данных, алгоритмы, двоичные системы, куча теории о&nbsp;том, что такое память и&nbsp;как она устроена, как компьютер считает данные,&nbsp;— и&nbsp;говорят, что все это важно. Но&nbsp;на&nbsp;практике все эти знания совершенно бесполезны. Как, собственно, создать свой фейсбук, написать свой куки кликер или разработать новый тиндер? Об&nbsp;этом в&nbsp;универе не&nbsp;рассказывают.</p>
<p>Во&nbsp;взрослом&nbsp;же возрасте непонятно, как можно променять нагретое место на&nbsp;туманные перспективы. Вам тревожно, что не&nbsp;получится, потому что уже и&nbsp;информация усваивается сложнее, и&nbsp;рисков никаких не&nbsp;хочется, и&nbsp;трудно определиться, в&nbsp;кого именно стоит переучиваться,&nbsp;— погружаться в&nbsp;новую область с&nbsp;нуля действительно страшно. К&nbsp;тому&nbsp;же, это сложно совмещать с&nbsp;работой: учеба требует времени и&nbsp;усилий, а&nbsp;при работе 5/2 фулл-тайм едва&nbsp;ли у&nbsp;вас будет пара часов в&nbsp;день на&nbsp;занятия (а&nbsp;про семью вообще можете забыть). Итак, время идет, вы&nbsp;застряли в&nbsp;тревоге, корите себя за&nbsp;нерешительность, но&nbsp;слишком боитесь, чтобы начать что-то делать. </p>
<img src="/uploads/Bez_nazvaniya_2_7f32aac4fc_69f1651210.png"
alt="Bez_nazvaniya_2_7f32aac4fc.png" >


<h3>Шаг номер три: наставник</h3>
<p>В&nbsp;универе вы&nbsp;встречаете интересного парня, который действительно работает программистом и&nbsp;получает кучу денег. Он&nbsp;делится с&nbsp;вами опытом и&nbsp;рассказывает, как он&nbsp;дошел до&nbsp;таких высот. Возможно, это душнила, заливающий про&nbsp;то, как он&nbsp;с&nbsp;детства учил паскаль. Или это 200IQ гигачад, который просто прошел курсики на&nbsp;ютубе и&nbsp;теперь бахает на&nbsp;любом языке и&nbsp;кайфует.</p>
<p>А&nbsp;может, в&nbsp;попытках нагуглить очередное домашнее задание вы&nbsp;натыкаетесь на&nbsp;статью о&nbsp;том, как вкатиться в&nbsp;программирование, увлекаетесь и&nbsp;решаете, что хотите попробовать. Друг-программист делится с&nbsp;вами советами о&nbsp;том, на&nbsp;что обратить внимание и&nbsp;как пройти собеседование.</p>
<p>Если вы&nbsp;взрослый, то&nbsp;вы&nbsp;наверняка встречаете старого друга со&nbsp;школы, который разбирался в&nbsp;компах, а&nbsp;теперь он&nbsp;гребет 300к программистом. Вы&nbsp;вдохновляетесь его примером, тут вам как раз на&nbsp;глаза попадается реклама какого-нибудь скиллбокса, и&nbsp;вы&nbsp;решаетесь: пора!</p>
<img src="/uploads/Bez_nazvaniya_3_0717eb5919_3b99a15965.png"
alt="Bez_nazvaniya_3_0717eb5919.png" >


<h3>Шаг номер четыре: обретение силы</h3>
<p>Вы&nbsp;начинаете погружаться в&nbsp;тему, и&nbsp;чем больше информации вы&nbsp;поглащаете, тем больше уверяетесь в&nbsp;том, что вы&nbsp;крутой: все получается, задачи зачастую не&nbsp;требуют глубоких знаний, новые навыки даются легко. Вы&nbsp;просто занимаетесь интересным делом вечером после учебы или работы. Именно этот момент можно назвать обретением суперсилы&nbsp;— для вас уже не&nbsp;существует преград, вы&nbsp;понимаете, что все можно нагуглить, любую задачу решить и&nbsp;получить от&nbsp;этого удовольствие. К&nbsp;вам обращаются за&nbsp;советом, просят починить чайник, как в&nbsp;тех мемах, вы&nbsp;проникаетесь сообществом и&nbsp;понимаете приколы айтишников. Новая профессия кажется вам манной небесной.</p>
<p><img src="/uploads/Bez_nazvaniya_4_d1a86fa449_d10cffd6ef.png"
alt="Bez_nazvaniya_4_d1a86fa449.png"> </p>
<p>Окрыленные успехом, вы&nbsp;твердо решили устраиваться на&nbsp;работу. Однако для этого нужно систематизировать знания, посмотреть, что спрашивают на&nbsp;собеседованиях, что требуется для выполнения тестового задания,&nbsp;—все это довольно нудно. К&nbsp;тому&nbsp;же, что вы&nbsp;вдруг понимаете, что используете одни и&nbsp;те&nbsp;же приемы от&nbsp;проекта к&nbsp;проекту, нет
никакого развития. Впрочем, это кажется незначительным: что должно меняться, если все строки и&nbsp;методы похожи? Один раз придумал решение&nbsp;— так пользуйся, зачем заново что-то изобретать?</p>
<p>Отбросив все зародившиеся сомнения, вы&nbsp;идете на&nbsp;свое первое собеседование, думая, что такое талантище оторвут с&nbsp;руками и&nbsp;ногами.</p>
<img src="/uploads/Bez_nazvaniya_5_abf89e1c7e_6328e77648.png"
alt="Bez_nazvaniya_5_abf89e1c7e.png">
 
 
<h3>Шаг номер пять: провал</h3>
<p>Ваше первое собеседование&nbsp;— это полный провал.</p>
<p>Выясняется, что ваши знания бесполезны, вам нужно было учиться с&nbsp;опорой на&nbsp;вакансии, а&nbsp;не&nbsp;на&nbsp;статьи в&nbsp;интернете. Навыков, которые действительно нужны, у&nbsp;вас не&nbsp;оказывается (или они совсем в&nbsp;зачаточном состоянии). Вы&nbsp;получаете люлей на&nbsp;нескольких собеседованиях, вас никто никуда не&nbsp;берет. Побитый и&nbsp;отчаянный, вы&nbsp;уползаете обратно в&nbsp;свою нору, не&nbsp;понимая, как жить дальше.</p>
<p>Начинается этап размышлений. Куда&nbsp;же дальше? Ни&nbsp;ютуб, ни&nbsp;гугл, ни&nbsp;курсы на&nbsp;гикбрейнз больше не&nbsp;помогут. Положение кажется безвыходным.</p>
<p>И&nbsp;тут вы&nbsp;вспоминаете про того самого чувака, который когда-то вдохновил вас стать программистом. Или про друга, который уже 3&nbsp;года работает в&nbsp;айти. Вы&nbsp;приходите к&nbsp;нему, он&nbsp;ласково гладит вас по&nbsp;голове и&nbsp;говорит, что не&nbsp;время сдаваться&nbsp;— вот тебе план действий. Вы&nbsp;подтягиваете нужные навыки, просите подробный фидбэк после собеседований, ноете близким, как вам сложно, а&nbsp;они вас поддерживают и&nbsp;радуются каждой удаче вместе с&nbsp;вами. Постепенно вы&nbsp;снова обретаете уверенность в&nbsp;том, что способны добиться желаемого.</p>
<img src="/uploads/Bez_nazvaniya_4734f2bbde_3406a77cfc.png" alt="Bez_nazvaniya_4734f2bbde.png">


<h3>Шаг номер шесть: успех</h3>
<p>И&nbsp;вот ваш старый код кажется полным говном, которое надо переписать, проекты, которые вы&nbsp;придумываете, становятся более осмысленными. Вы&nbsp;делаете себе блестящее портфолио, проходите тридцатое собеседование, и&nbsp;наконец&nbsp;— вот оно, тридцать первое, успешное! Несите шампанское, наш герой наконец добился желанной работы. Ну&nbsp;чем не&nbsp;хэппи энд супергеройского фильма?</p>
<img src="/uploads/Bez_nazvaniya_2_0237efb417_43d7d5cfba.png"
alt="Bez_nazvaniya_2_0237efb417.png">

<p><strong>Небольшие выводы</strong></p>
<p>Пытаетесь понять, тяните&nbsp;ли вы&nbsp;на&nbsp;человека-паука? Мой ответ&nbsp;— да, вы&nbsp;человек-паук, парень на&nbsp;картинке. Потому что именно вы&nbsp;сто раз упали и&nbsp;сто раз поднялись. Сто раз встречали сложную задачу и&nbsp;сто раз ее&nbsp;решали. Вы&nbsp;научились не&nbsp;сдаваться и&nbsp;сражаться до&nbsp;конца. Потому что у&nbsp;вас нет другого выбора: теперь это ваша сила, а&nbsp;как мы&nbsp;знаем, с&nbsp;великой силой приходит и&nbsp;великая ответственность.</p>
<p>Кто поднимет прод за&nbsp;джуном, который его уронил? Кто настроит серваки так, чтобы заказчик мог видеть результаты работы? В&nbsp;конце концов, кто перекрасит вот ту&nbsp;кнопку на&nbsp;главной странице в&nbsp;красный цвет, кроме вас? Правильно, никто. Именно вы&nbsp;взяли на&nbsp;себя эту ответственность перед работодателем, заказчиком и&nbsp;перед самим собой. Поэтому вы&nbsp;уже не&nbsp;можете не&nbsp;справиться с&nbsp;очередной трудностью, поэтому каждый раз проект должен быть все сложнее, реализация проще, алгоритм короче, а&nbsp;занимаемая память меньше.</p>
<p>Каждый из&nbsp;нас&nbsp;— это человек-паук, который несмотря на&nbsp;проблемы справляется с&nbsp;ними и&nbsp;учится жить с&nbsp;этим. Вы&nbsp;сто раз задолбались на&nbsp;сто лет вперед, но&nbsp;и&nbsp;не&nbsp;думаете бросать, потому что ощущение полета на&nbsp;паутине (решения задачи)&nbsp;— это&nbsp;то, ради чего вы&nbsp;стали разработчиком.</p>

«Человек-паук: Через Вселенные» как путь в ИТ

Шушкевич Виталий

tower4.png

История о том, как мы делали спецверсию сайта по ГОСТу совместно с Goose Gaming. Всё ради конкурса президентской платформы «Россия — страна возможностей» для талантов игровой индустрии. Рассказываем о том, какие подводные камни возникают при адаптировании сайта для людей с ограниченными возможностями.

<h3>История о том, как мы делали спецверсию сайта по ГОСТу совместно с Goose Gaming</h3>


<img src="/uploads/prevyu_5a1c594efd.png" alt="превью.png">


<p>Всё ради конкурса президентской платформы «Россия — страна возможностей» для талантов игровой индустрии. Рассказываем о том, какие подводные камни возникают при адаптировании сайта для людей с ограниченными возможностями.</p>
<p>Не будем грузить вас официальными требованиями по ГОСТу. Перечислим кратко: нужно было поработать с настройками для слабовидящих — разработать синтез речи, изменить размер шрифта, увеличить контрастность. При этом сделать так, чтобы сайтом можно было управлять через клавиатуру и не было ограничений по времени для нормального восприятия и использования контента.</p>
<blockquote>
  Мы рады принять участие в социально значимом проекте, ведь компании редко задумываются о специальных версиях сайта. Из-за этого люди даже с распространенными заболеваниями не могут пользоваться продуктом без посторонней помощи.
</blockquote>
<p>Юлия Семенчук, руководитель отдела разработки и продуктового менеджмента в Mish</p>


<h3>Сами проблему сделали — сами решили</h3>

<p>Доступность интерфейсов зависит от дизайна. Изначально он состоял из ломаных, пересекающихся элементов и нам это нравилось. Но когда начали адаптировать сайт под ГОСТ, красота поломалась — табы и кнопки перестали выделяться с клавиатуры. Это связано с тем, что ломаный дизайн достигался путем отсечения лишней части элемента и под отсеченный элемент попадала обводка при фокусе. Забавный опыт для нас, но не для наших фронтов — они сильно ругались, ведь им пришлось все переделывать, поэтому учитывайте требования ещё на стадии проработки дизайна.</p>
<img src="/uploads/Sami_problemu_sdelali_sami_reshili_46105ccc40.png" alt="Сами проблему сделали — сами решили.png">


<h3>Как сверстали</h3>

<p>Для начала необходимо было проработать порядок следования элементов. На планшете, в мобильной версии и в десктопе они должны располагаться в одном и том же порядке, не уезжать и не расплываться. Поэтому мы использовали адаптивную верстку и отрисовали несколько макетов под основные разрешения девайсов.</p>
<p>После этого сконцентрировались на создании ARIA-атрибутов — они позволяют явно указать, в каком состоянии находится меню и добавить читабельный текст к графическим элементам. В общем, помогают скринридерам более точно читать сайт, контекст, цитаты, кнопки, ссылки, описывать изображения, иконки и т.д. Правда, с ARIA-атрибутами нужно работать осознанно и не переборщить, чтобы не усложнять работу скринридерам.</p>
<p><em>Скринридер (screen reader) — программа, которая превращает контент интерфейсов в речь или шрифт Брайля. Они нужны людям со слепотой и слабовидящим, а также пользователям с когнитивными особенностями, которым легче воспринимать информацию на слух. Например, людям с дислексией.</em></p>
<p>И, конечно, не обошлось без использования семантических тегов, потому что это важно для SEO-оптимизации.</p>


<h3>Настрой и сохрани</h3>

<p>Очень удобно, когда настройки спецверсии сохраняются при повторном заходе на сайт, но бывают случаи, когда одним компьютером пользуются несколько человек. Поэтому в процессе разработки появился такой сценарий: когда пользователь включает специальную версию сайта, он видит ее в том состоянии, в котором сам же и настроил. Сохраняются размер шрифта, межстрочный и межбуквенный интервал, цветовая гамма. Но при повторном заходе на сайт или перезагрузке страницы, спецверсия отключается, чтобы нынешний юзер мог решить — нужна ему спецверсия или нет.</p>


<img src="/uploads/Nastroj_i_sohrani_59d509911c.png" alt="Настрой и сохрани.png">


<h3>Как быть с картинками?</h3>

<p>ГОСТ требует, чтобы на сайте была функция отключения изображений с сохранением текстового контента и озвучки. Так, пользователям с нарушениями восприятия мелких и ярких изображений будет проще пользоваться сайтом.</p>
<p>Чтобы описать то, как мы это сделали, расскажем немного матчасти, приготовьтесь:</p>
<ul>
  <li>С помощью пользовательского хука задали параметры по умолчанию для спецверсии и поместили их в локальное хранилище по ключу.</li>
  <li>Затем благодаря компоненту-обертке, в который помещаем всё приложение, через контекст передали параметры и обработчик для их изменения.</li>
  <li>Логику поиска всех DOM-элементов, соответствующих требуемым условиям и присваиванию им необходимых CSS-свойств, реализовали в отдельном пользовательском хуке.</li>
</ul>
<p>В конечном итоге просто вызываем хук на всех страницах приложения, где нужно скрыть изображения.</p>
<img src="/uploads/Kak_byt_s_kartinkami_97cc4ec4d2.png" alt="Как быть с картинками.png">
<p>Чтобы провернуть этот сценарий, пришлось проработать все возможные кейсы применения изображений на страницах сайта, что заняло немало времени. Каждый случай мы обрабатывали определенным образом с точки зрения присваивания или удаления CSS-свойств. Кроме того, возникла потребность выделить ряд изображений в качестве исключений, так как они всегда должны быть видимыми для пользователя, чтобы интерфейс оставался удобным и читаемым. Для подобных случаев изображениям был добавлен специальный data-атрибут, по которому они игнорировались при включении режима «Без изображений».</p>


<h3>Монохром и его друзья</h3>

<p>При создании дизайна спецверсии важно адаптировать его под наиболее распространенные проблемы со зрением. Для этого мы проработали варианты монохрома, возможность изменения размера шрифтов, включения и отключения картинок, звука и т.д. Также уделили много внимания ховерам, выделению активных табов. И не забыли про порядок следования элементов, чтобы он не менялся на разных разрешениях — если этого не сделать, то обязательно возникнут сложности при использовании скринридера и управлении с клавиатуры.</p>


<img src="/uploads/Monohrom_i_ego_druzya_37b53d239f.png" alt="Монохром и его друзья .png">

<p>Во всех браузерах есть готовые решения для управления с клавиатуры, и мы хотели их использовать. Но со временем поняли, что стандартные библиотеки некорректно отображают наш ломаный дизайн — обводка была кривая или вовсе не отображалась. Поэтому нам пришлось немного покреативить.</p>
<p>Чтобы создать сложные формы объектов, подошло свойство CSS, которое называется Clip-Path. Оно позволяет скрыть часть элемента, создавая область отсечения вокруг него. Но когда дело дошло до создания спецверсии, появилась ещё одна проблема — при попытке выделить элемент с помощью клавиши Tab, обводка всё равно не отображалась. Для решения этой проблемы, мы создали псевдоэлементы и разместили их поверх элементов, которые необходимо выделить.</p>
<blockquote>
  Вообще хорошая практика, когда любой сайт, и не обязательно спецверсия, доступен с клавиатуры. Если семантические теги написаны верно, то на 95% эта работа окупается.
</blockquote>
<p> Мария, frontend-разработчик в Mish</p>


<h3>Как оптимизировали работу</h3>

<p>У нас в агентстве любят, когда всё по полочкам — это упрощает работу. Поэтому не лишним была организовать процесс при настройке параметров сайта так, чтобы не бегать по всему проекту. Например, если бы мы разрабатывали все кнопки с нуля, то при настройке сайта изменения пришлось бы вносить в каждую.</p>
<p>Поэтому мы вынесли кнопку в компоненту и добавили специальное состояние. В нем указали условия и зашили всю информацию по тому, как должен выглядеть элемент при включении спецверсии. Это позволило нам прописать все требования только в одном файле и не ходить по всем остальным. Но это стандартная практика: мы на всех проектах делаем компоненты и выносим их в отдельную библиотеку — это удобно и ускоряет процесс.</p>
<p>На сайте много текста, который меняется при включении специальной версии — увеличиваются шрифт и расстояния между буквами. Поэтому с текстовыми блоками поступили так же, как с кнопками — создали компонент, в котором указали все необходимые параметры. Теперь, когда происходит переключение на специальную версию сайта, компонент сам дает команду всем файлам. Бонусом эта фишка позволяет легко добавить озвучку сайта.</p>


<img src="/uploads/Kak_my_optimizirovali_rabotu_e014821f1e.png" alt="Как мы оптимизировали работу .png">


<h3>Какой вывод можно сделать?</h3>

<p>Сложности закаляют — например, необычные требования, к которым ты не готов, короткий срок реализации и ограниченный бюджет. В таких ситуациях можно рассчитывать только на опыт и команду. Поэтому внимательно читайте требования и не бойтесь импровизировать и добавлять от себя полезный функционал, который улучшит пользовательский опыт.</p>
<p>Тем временем первый сезон проекта «Начни игру» уже закончился — финалисты съездили в Казань, защитились и получили финансовую поддержку. А создатели готовятся к новому этапу конкурса, чтобы те, кто не успел принять участие в первом или не прошел отбор, смогли попытать свои шансы во втором. Мы же добавляем новые механики и задания, чтобы ничего не помешало участникам выйти в финал.</p>

Stories

hello@mish.design

Москва

Нижний Новгород